Tumšā režīma pārslēgs

Būdams liels „tumšo tēmu“ jeb, kā to sauc citādi, „tumšā režīma“ cienītājs, esmu to ieviesis gandrīz visās lietotnēs un vietnēs, ko esmu veidojis sev — sākot ar šo emuāru un beidzot ar manu jaunāko projektu, It Changed.

Mani neapmierināja internetā atrastie risinājumi, jo tie neapvienoja pārslēgu ar mediju vaicājumiem (media queries). Kāpēc tas ir svarīgi? Pirmkārt, lietotājiem var būt jau iepriekš iestatītas preferences. Piemēram, macOS sistēmā, ja izvēlaties System Settings >> Appearance >> Dark, apmeklējot vietni, tiks nodots (prefers-color-scheme: dark). Tomēr var gadīties arī situācijas, kad lietotājs vēlas konkrētai vietnei pārslēgt tēmu uz gaišo.

Lai nodrošinātu vislabāko lietotāja pieredzi (UX), tam noteikti jābūt risinājumu apvienojumam — kuru, kā redzēsiet, nemaz nav tik grūti realizēt.

Tad nu ķersimies pie darba.

Realizācija

Vispirms mums vajadzīgs kaut kāds pārslēgs. Atkļūdošanas (debugging) nolūkos man ļoti patīk izmantot izvēles rūtiņas (checkbox). Lūk, vienkāršs piemērs:

<label type="button">
    <input type="checkbox" name="theme-switch" class="theme-switch"/>
    <span>switch</span>
</label>

Tagad pāriesim pie JavaScript daļas:

const themeSwitches = document.querySelectorAll('.theme-switch');
if (themeSwitches.length > 0) {
    themeSwitches.forEach((themeSwitch, i) => {
        if (localStorage.getItem('dark-mode') === 'true') {
            themeSwitch.checked = true;
        } else {
            themeSwitch.checked = false;
        }

        themeSwitch.addEventListener('change', () => {
            const { checked } = themeSwitch;
            themeSwitches.forEach((el, n) => {
                if (n !== i) {
                    el.checked = checked;
                }
            });
            if (themeSwitch.checked) {
                document.documentElement.classList.add('dark');
                localStorage.setItem('dark-mode', true);
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('dark-mode', false);
            }
        });
    });
}

Šis kods apstrādā visu pārslēga loģiku un saglabā tā stāvokli localStorage. Tā kā selektors ir pieejams tikai pēc lapas ielādes, šim kodam nav jāizpildās nekavējoties. Laba prakse ir novietot to savā JavaScript failā atliktai izpildei.

Tomēr ir daļa koda, kurai gan jāizpildās pēc iespējas ātrāk. Lūk, šis fragments:

<script>
    if (localStorage.getItem('dark-mode') === 'true' || (!('dark-mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.querySelector('html').classList.add('dark');
    } else {
        document.querySelector('html').classList.remove('dark');
    }
</script>

Ko šis kods dara:

1. Pārbauda, vai localStorage ir iestatīts tumšais režīms;
2. Ja localStorage nav tumšā režīma iestatījuma, pārbauda, vai lietotājs dod priekšroku tumšajam režīmam.

Ko šis nodrošina:

1. Lietotāji saņem tumšo režīmu, ja iepriekšējos apmeklējumos to ir iespējojuši manuāli.
2. Lietotāji saņem tumšo režīmu, ja viņu sistēmas iestatījumi liecina, ka viņi tam dod priekšroku.

Dizains

Tā kā mēs realizējām pārslēgu kā izvēles rūtiņu, tas paver plašas dizaina iespējas. Tas var darboties kā slēdzis (toggle), palikt par izvēles rūtiņu vai pārvērsties par pogu — iespēju ir praktiski neierobežoti daudz. Šīs elastības dēļ es šeit nepiedāvāšu vienu konkrētu dizaina risinājumu. Izvēlieties to, kas vislabāk atbilst jūsu vajadzībām.

Saites

Lūk, dažas noderīgas saites:

1. Esmu publicējis šo kodu kā Composer pakotni vietnē Packagist.
2. Ja vēlaties dot savu ieguldījumu, apskatiet projektu vietnē GitHub.

Tas arī viss, draugi :)