A darkmode.js lehetővé  teszi, hogy a látogatók a weboldalunkat sötét alapú megjelenéssel használhassák, amely sokaknak kellemesebb a sötétben, vagy akár bármikor. Ami jó, hogy gyakorlatilag 1 perc alatt beüzemelhető, hiszen csak ennyit kell elhelyezni a weboldalon:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
    new Darkmode().showWidget();
</script>

Természetesen a javascript fájl le is tölthető helyi tárolásra.

A beállított sötét módot cookie-ban tárolja (de ez letiltható igény esetén).

Ennek hatására megjelenik egy ikon / gomb a jobb alsó sarokban:



Rákattintva az oldal invertálódik, ami világos volt, az sötét lesz.



Gyakorlatilag ennyi, de van pár beállítási lehetőség (nem kötelező mindet megadni):

var options = {
  bottom: '64px', // default: '32px', aljától való távolság
  right: 'unset', // default: '32px', jobb oldalától való távolság
  left: '32px', // default: 'unset', bal oldaltól való távolság
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,  mentse cookie-ba?
  label: '🌓' // default: ''  a gomb szövege, ami lehet emoji is, vagy akár semmi
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

Ami érdekes lehet, hogy bizonyos weboldal részeknél némi finomhangolás szükséges. Itt például a szöveg nem jó:



Ezt meg lehet oldani némi CSS-sel, amely mindig a .darkmode--activated osztály megadásával kezdődik, majd a szükséges elem kiválasztása következik:

.darkmode--activated .blog-content-body h2 {
  color: #fff;
}

Így a probléma megoldva:



Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!

De kompletten kikapcsolható a sötét mód, például ott, ahol eleve sötét az oldal. Ehhez egy extra osztályt kell adni az elemnek:

darkmode-ignore

Eredeti:



A sötét módot bekapcsolva az eredmény nem túl jó:



De ha megadjuk az extra osztályt az elemnek, akkor nem piszkálja, hagyja ahogy van:

<footer class="site-footer darkmode-ignore">