CSS Custom Properties, CSS preprocessor değişkenlerinin aksine runtime'da değiştirilebilir ve cascade'e tam katılım sağlayan canlı değerlerdir. Bu iki fark, runtime mutability ve cascade katılımı, CSS Custom Properties'i statik preprocessor değişkenlerinden işlevsel olarak ayırır ve dinamik tema sistemlerinin temeli yapar. CSS Custom Properties `:root` scope'unda tanımlandığında global erişime açılır: `--color-primary: #0f4c81;` Bu değer `var(--color-primary)` ile her yerden kullanılabilir. Cascade ilkesine tam katılım sayesinde daha spesifik bir selector içinde aynı custom property'yi override etmek, sadece o scope içindeki bileşenleri etkiler; bu özellik token tabanlı tema sistemlerinin temel mekanizmasıdır. Dinamik tema değiştirme için JavaScript ile CSS Custom Properties kombinasyonu şu biçimde çalışır: `document.documentElement.style.setProperty('--color-primary', newValue)` ifadesi, tüm belge boyunca property'yi anında günceller. Bu yaklaşım, dark/light mode geçişleri için class tabanlı yöntemlere kıyasla daha az CSS kodu gerektirir; tüm renk değerleri custom property üzerinden besleniyorsa tek bir JavaScript çağrısıyla temayı değiştirmek mümkündür. CSS Custom Properties'in `@media (prefers-color-scheme: dark)` ile entegrasyonu, sistem tercihine duyarlı tema geçişini CSS katmanında tamamen çözmeyi sağlar: dark mode medya sorgusu içinde aynı property adları farklı değerlerle override edilir, JavaScript müdahalesi olmaksızın. Fallback değer sözdizimi, `var(--spacing-md, 16px)`, tanımlanmamış property'lere karşı savunmacı bir katman oluşturur.