Salah satu cara untuk menggunakan variabel CSS hari ini
Buat situs yang secara dinamis mendukung tema terang, gelap dan berwarna.
Demo interaktif
Buat warna dasar yang akan berubah. Bind ke data-tema dalam html.
contoh kode menggunakan & dari sintaks less / scss
html[data-theme='green'] { --theme-color: 110; }
Sekarang kita perlu warnanya sendiri. Atau lebih tepatnya kecerahan dan saturasi mereka. Untuk melakukan ini, kita akan menggunakan skema hsl. Kami menempatkan semua variabel di: root.
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
Baik di sini. Kasing untuk kecil. Raih elemen yang diinginkan dan terapkan variabel kita padanya.
.class-name { color: var(--color); background-color: var(--background-color); }
Sekarang kita akan mengubah kontrasnya. Ganti: root dengan html [dengan atribut].
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
Sekarang untuk setiap topik, kami mengambil nilai s, l.
html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } }
Tautan:
Demo interaktif
Terima kasih Marcin Wichary untuk gagasannya.