jake/dark-mode-example
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode-example.git synced 2025-06-27 17:15:40 -04:00
Code Releases Activity

Update dark-mode.js

Browse Source
This commit is contained in:
Jake Jarvis
2020-04-29 18:42:53 -04:00
committed by GitHub
parent 9169da7024
commit 18a85fd62c
1 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
dark-mode.js
View File

@ -16,26 +16,25 @@
var pref_off = 'false';
var pref = sto.getItem(pref_key);
// use an element with class `dark-mode-toggle` to trigger swap
var toggle = doc.querySelector('.dark-mode-toggle');
// keep track of current state (light by default) no matter how we got there
var dark = false;
// change CSS via these body classes:
var cls_light = 'light';
var cls_dark = 'dark';
var activateDarkMode = function() {
cls.remove(cls_light);
cls.add(cls_dark);
dark = true;
};
var activateLightMode = function() {
cls.remove(cls_dark);
cls.add(cls_light);
dark = false;
var activateTheme = function(theme) {
cls.remove(cls_light, cls_dark);
cls.add(theme);
dark = (theme == cls_dark ? true : false);
};
// if user already explicitly toggled in the past, restore their preference.
if (pref === pref_on) activateDarkMode();
if (pref === pref_off) activateLightMode();
if (pref === pref_on) activateTheme(cls_dark);
if (pref === pref_off) activateTheme(cls_light);
// user has never clicked the button, so go by their OS preference until/if they do so
if (!pref) {
@ -44,18 +43,15 @@
var prefers_light = '(prefers-color-scheme: light)';
if (win.matchMedia(prefers_dark).matches)
activateDarkMode();
activateTheme(cls_dark);
else
activateLightMode();
activateTheme(cls_light);
// real-time switching if supported by OS/browser
win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateDarkMode(); });
win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateLightMode(); });
win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateTheme(cls_dark); });
win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateTheme(cls_light); });
}
// use an element with class `dark-mode-toggle` to trigger swap
var toggle = doc.querySelector('.dark-mode-toggle');
// don't freak out if page happens not to have a toggle
if (toggle) {
// toggle re-appears now that we know user has JS enabled
@ -65,10 +61,10 @@
toggle.addEventListener('click', function() {
// switch to the opposite theme & save preference in local storage
if (!dark) {
activateDarkMode();
activateTheme(cls_dark);
sto.setItem(pref_key, pref_on);
} else {
activateLightMode();
activateTheme(cls_light);
sto.setItem(pref_key, pref_off);
}
}, true);