kuda.ai

How to use variables in CSS.

Created on April 9, 2025
web/design/css

The following example uses colors from the palette of rose pine (such a lovely color scheme, makes watching at the screen so enjoyable :) ):

:root {
    --text-dawn: #575279;
    --text-moon: #e0def4;
    --base-dawn: #faf4ed;
    --base-moon: #232136;
}

* {
    color: var(--text-dawn);
}

html {
    background-color: var(--base-dawn);
}

@media (prefers-color-scheme: dark) {

    * {
        color: var(--text-moon);
    }

    html {
        background-color: var(--base-moon);
    }
}