html - Pot comuta modul întunecat folosind JavaScript?

Folosesc prefers-color-scheme: dark pentru a crea o temă întunecată în CSS (se aplică în Safari pe macOS v10.14 (Mojave)). Există vreo modalitate de a forța pagina să folosească codul meu pentru modul întunecat pe alte browsere care nu îl suportă, cum ar fi următoarele?

document.querySelector('#toggleDarkMode').addEventListener('click', function () {
    -- Force page to use dark mode defined in CSS
})

Răspuns #1

Nu.

O soluție temporară este să muți fiecare proprietate care se modifică într-o proprietate personalizată.

Apoi poți să faci ceva de genul:

p {
    color: var(--body-colour);
}

Și combină-l cu:

/* default, light scheme */
body {
    --body-colour: black;
}

@media (prefers-color-scheme: dark) {
    body {
        --body-colour: white;
    }
}

body.light-mode {
    --body-colour: black;
}

body.dark-mode {
    --body-colour: white;
}

Apoi, JavaScript-ul tău trebuie doar să adauge o clasă light-mode sau dark-mode elementului body pentru a impune acel mod (suprascriind modul implicit (dacă browserul nu suportă funcția sau dacă este setat pe modul luminos) sau versiunea media pentru modul întunecat).

Răspunsul #2

Presupun că folosești media-queries pentru a ști dacă browserul/sistemul de operare este setat pe modul întunecat. Dacă browserele mai vechi nu înțeleg media-query-ul, îl vor sări complet. Acest lucru este folosit adesea pentru a face «hack-uri» specifice browserului.

O modalitate de a face să funcționeze este să plasezi codul sass în afara interogării, într-o clasă generală pe care o poți adăuga la tag-ul <body>. Poți stoca această presetare în localStorage sau cookie-uri, astfel încât să nu se reseteze la reîncărcarea paginii.

Despre localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Aș transforma codul sass actual într-un mixin, astfel încât să nu fie nevoie să îl declari a doua oară și să faci codul tău mai ușor de întreținut. Mai multe informații despre asta: https://sass-lang.com/documentation/at-rules/mixin