CSS Variable

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <p class="text-danger">Text Danger</p>
    
    <p class="text-primary">Text Primary</p>
    
    <p class="alert-danger">Alert Danger</p>
    
    <p class="alert-primary">Alert Primary</p>
    
    <button onclick="changePropertyValue()">CSS Değişken değerini değiştir.</button>
  </body>

</html>

:root{
    --bg-color-primary: blue;
    --text-color-primary: white;
    --bg-color-danger: red;
    --text-color-danger: white;
}
 
body {
    background-color: black
}
 
.text-danger {
    /* Metin rengini kırmızı renk olarak ayarladığımız --bg-color-danger değişkenini kullanıyoruz. */
    color: var(--bg-color-danger)
}
 
.text-primary {
    /* Metin rengini mavi renk olarak ayarladığımız --bg-color-primary değişkenini kullanıyoruz. */
    color: var(--bg-color-primary) 
}
 
.alert-primary {
    --bg-color-local: green;
    padding: 10px;
    font-weight: bolder;
    /* Arkaplan rengini mavi ve metin rengini beyaz renk olarak ayarladığımız --bg-color-primary ve --text-color-primary değişkenlerini kullanıyoruz. */
    background-color: var(--bg-color-local);
    color: var(--text-color-primary);
}
 
.alert-danger {
    padding: 10px;
    font-weight: bolder;
    /* Arkaplan rengini kırmızı ve metin rengini beyaz renk olarak ayarladığımız --bg-color-danger ve --text-color-danger değişkenlerini kullanıyoruz. */
    background-color: var(--bg-color-danger);
    color: var(--text-color-danger);
}

# CSS Variable Test Page

function changePropertyValue(){
  var element = document.querySelector(':root');
  
  var value = getComputedStyle(element).getPropertyValue('--bg-color-primary')
  
  alert('--bg-color-primary değeri ' + value + ' şimdi değiştirilecek.')
  
  element.style.setProperty('--bg-color-primary', value.trim() == 'green' ? 'blue' : 'green')
}