Implementarea unei teme întunecate (Dark Mode) profesionale nu mai necesită duplicarea sutelor de linii de cod CSS. Tehnica modernă standard presupune abstractizarea culorilor prin Variabile CSS (Custom Properties) la nivelul rădăcinii :root, combinată cu media query-ul nativ prefers-color-scheme și o clasă manuală pentru utilizatorii care doresc să comute tema manual dintr-un buton.
Arhitectura completă a unui sistem Dark Mode de producție
/* 1. Tema Luminoasă (Light Mode) implicită */
:root {
--bg-page: #f8fafc;
--bg-surface: #ffffff;
--text-primary: #0f172a;
--text-secondary: #475569;
--border-color: #e2e8f0;
--accent-color: #3858e9;
/* Proprietate nativă pentru personalizarea automată a scrollbar-ului și formularelor */
color-scheme: light dark;
}
/* 2. Adaptare automată pe baza preferințelor din sistemul de operare (Windows / macOS / iOS / Android) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg-page: #0b0f19;
--bg-surface: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border-color: #334155;
--accent-color: #60a5fa;
}
}
/* 3. Forțare manuală când utilizatorul alege explicit tema din interfață */
[data-theme="dark"] {
--bg-page: #0b0f19;
--bg-surface: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border-color: #334155;
--accent-color: #60a5fa;
}
/* 4. Aplicarea stilurilor în întreg site-ul folosind exclusiv variabilele */
body {
background-color: var(--bg-page);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
}De ce să folosești proprietatea color-scheme
Declararea color-scheme: light dark; în :root semnalează browserului că site-ul tău oferă suport pentru ambele teme. În consecință, browserul va colora automat în mod întunecat bara de scroll, controalele de formular (input, select, checkbox) și ferestrele de dialog native atunci când utilizatorul este în modul întunecat, prevenind contrastele deranjante.
Întrebări & Exemple de Cod:
Implementarea Sistemului de Dark Mode Nativ cu Variabile CSSAi o nelămurire despre utilizarea comenzii
Implementarea Sistemului de Dark Mode Nativ cu Variabile CSSsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.