back to project

body {
  --theme-color:orange;
  display:flex;
  flex-wrap:wrap;
}
body > * {
  max-width:500px;
  margin:2rem;
  padding:2rem;
  overflow:auto;
  border:2px solid var(--theme-color);
}
h2 {
  border-bottom:2px solid var(--theme-color);
}
a {
  color:var(--theme-color);
}
button {
  background-color:var(--theme-color);
}
pre {
  color:#fff;
  background-color:var(--theme-color);
  font-size:13px;
  padding:1em;
  overflow:auto;
}




  
Pseudo-classes (:hover, :focus, :target)

  
  target to #pseudoClasses

  click to set target #

  
#pseudoClasses:hover .hasHover,
#pseudoClasses:target .hasTarget,
#pseudoClasses:focus .hasFocus {
  background:var(--theme-color);
}








  
Chaining

  
#chaining {
  --a:var(--theme-color);
  --b:var(--a);
  background-color:var(--b);
}
#chaining:hover {
  --a:transparent;
}






  
Fallback

  
#fallback {
  --theme-color:var(--not_defined, green);
}






    
Pseudo-Elements

  
#before > h2 {
  --before:' 👉 ';
}
#before > h2::before  {
  content:var(--before);
}






  
ie-style attributes

  

    
ie-style="
background-color:var(--theme-color);
--inner:white"
    

    
ie-style="background:var(--inner);
color:var(--theme-color)"
    

  






  
Dom changes

  
  
body.dark-mode {
  --bg-color:#666;
}
body {
  background-color:var(--bg-color);
}







  
JS-Integration

  

  

  

  
  
function setThemeColor(color) {
  document.body.style.setProperty('--theme-color', color);
}
function getThemeColor(element) {
  const computed = getComputedStyle(element);
  const color = computed.getPropertyValue('--theme-color');
  alert(color);
}







  
dynamic added style-element

  
  
function addStyleElememt(){
  var el = document.createElement('style');
  var color = (0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
  el.innerHTML =
    '#dynamicStyle { '+
      '--theme-color: #'+color+';'+
    '}';
  dynamicStyle.appendChild(el);
}






  
Dynamic Content

  
  
function setContent(){
  var content = dynamicContent.innerHTML;
  dynamicContent.innerHTML = '';
  setTimeout(function(){
    dynamicContent.innerHTML = content;
  },500)
}