jake/dark-mode-example
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode-example.git synced 2026-09-11 23:25:34 -04:00
Code Releases Activity

Update dark-mode.js

Browse Source
This commit is contained in:
jake
2020-04-29 19:32:44 -04:00
committed by GitHub
parent e51e00ad98
commit 22ed40ed10
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dark-mode.js
+16 -18
View File
@@ -12,30 +12,28 @@
// check for preset `dark_mode_pref` preference in localStorage // check for preset `dark_mode_pref` preference in localStorage
var pref_key = 'dark_mode_pref'; var pref_key = 'dark_mode_pref';
var pref_dark = 'true';
var pref_light = 'false';
var pref = sto.getItem(pref_key); var pref = sto.getItem(pref_key);
// change CSS via these <body> classes: // change CSS via these <body> classes:
var cls_dark = 'dark'; var dark = 'dark';
var cls_light = 'light'; var light = 'light';
// use an element with class `dark-mode-toggle` to trigger swap when clicked // use an element with class `dark-mode-toggle` to trigger swap when clicked
var toggle = doc.querySelector('.dark-mode-toggle'); var toggle = doc.querySelector('.dark-mode-toggle');
// keep track of current state (light by default) no matter how we got there // keep track of current state (light by default) no matter how we got there
var dark = false; var active = false;
// receives a class name and switches <body> to it // receives a class name and switches <body> to it
var activateTheme = function(theme) { var activateTheme = function(theme) {
cls.remove(cls_light, cls_dark); cls.remove(dark, light);
cls.add(theme); cls.add(theme);
dark = (theme === cls_dark); active = (theme === dark);
}; };
// if user already explicitly toggled in the past, restore their preference // if user already explicitly toggled in the past, restore their preference
if (pref === pref_dark) activateTheme(cls_dark); if (pref === dark) activateTheme(dark);
if (pref === pref_light) activateTheme(cls_light); if (pref === light) activateTheme(light);
// user has never clicked the button, so go by their OS preference until/if they do so // user has never clicked the button, so go by their OS preference until/if they do so
if (!pref) { if (!pref) {
@@ -44,13 +42,13 @@
var prefers_light = '(prefers-color-scheme: light)'; var prefers_light = '(prefers-color-scheme: light)';
if (win.matchMedia(prefers_dark).matches) if (win.matchMedia(prefers_dark).matches)
activateTheme(cls_dark); activateTheme(dark);
else else
activateTheme(cls_light); activateTheme(light);
// real-time switching if supported by OS/browser // real-time switching if supported by OS/browser
win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateTheme(cls_dark); }); win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateTheme(dark); });
win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateTheme(cls_light); }); win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateTheme(light); });
} }
// don't freak out if page happens not to have a toggle // don't freak out if page happens not to have a toggle
@@ -61,12 +59,12 @@
// handle toggle click // handle toggle click
toggle.addEventListener('click', function() { toggle.addEventListener('click', function() {
// switch to the opposite theme & save preference in local storage // switch to the opposite theme & save preference in local storage
if (!dark) { if (!active) {
activateTheme(cls_dark); activateTheme(dark);
sto.setItem(pref_key, pref_dark); sto.setItem(pref_key, dark);
} else { } else {
activateTheme(cls_light); activateTheme(light);
sto.setItem(pref_key, pref_light); sto.setItem(pref_key, light);
} }
}, true); }, true);
} }