Zmienne w stylach CSS pozwalają nam wykorzystać np. dany kolor w wielu obiektach. Dzięki takiemu podejściu będziemy mogli w przyszłości łatwo zmieniać całą kolorystykę strony, zmieniając daną wartość tylko w jednym miejscu. Zmienne tworzymy na samym początku,np:

:root{
    --theme-color1:#44aaaa;
    --theme-color2:#474747;
}

Zmiennych używamy w następujący sposób, np:

.pi-footer-text{
    text-align: center;
    color:var(--theme-color1);
}

---

Innym rozwiązaniem, poza zmiennymi może być utworzenie osobnej klasy, np: theme-color-1 w której zawrzemy właściwość odnoszącą się do koloru, np:

 .theme-color-1{
    color:#d45f0b;
}

Później przy każdym elemencie na stronie wystarczy dodać klasę theme-color-1, by ustawić kolor motywu. Po zmianie wartości koloru w pliku CSS, wszystkie elementy posiadające tę klasę również się zaktualizują.