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-05-04 12:46:05 -04:00
committed by GitHub
parent 97257ab77a
commit 4a36b8c526
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dark-mode.js
+29 -21
View File
@@ -2,32 +2,35 @@
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */ /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
(function() { (function () {
// improve variable mangling when minifying // improve variable mangling when minifying
var win = window; var win = window;
var doc = win.document; var doc = win.document;
var bod = doc.body; var body = doc.body;
var cls = bod.classList; var classes = body.classList;
var sto = localStorage; var storage = localStorage;
// check for preset `dark_mode_pref` preference in localStorage // check for preset `dark_mode_pref` preference in local storage
var pref_key = 'dark_mode_pref'; var pref_key = 'dark_mode_pref';
var pref = sto.getItem(pref_key); var pref = storage.getItem(pref_key);
// change CSS via these <body> classes: // change CSS via these <body> classes:
var dark = 'dark'; var dark = 'dark';
var light = 'light'; var light = 'light';
// which class is <body> set to initially?
var default_theme = 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 no matter how we got there
var active = false; var active = (default_theme === dark);
// 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(dark, light); classes.remove(dark, light);
cls.add(theme); classes.add(theme);
active = (theme === dark); active = (theme === dark);
}; };
@@ -37,18 +40,23 @@
// 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) {
// check for OS dark mode setting and switch accordingly // returns media query selector syntax
var prefers_dark = '(prefers-color-scheme: dark)'; var prefers = function (theme) {
var prefers_light = '(prefers-color-scheme: light)'; return '(prefers-color-scheme: ' + theme + ')';
}
if (win.matchMedia(prefers_dark).matches) // check for OS dark/light mode preference and switch accordingly
// default to `default_theme` set above if unsupported
if (win.matchMedia(prefers(dark)).matches)
activateTheme(dark); activateTheme(dark);
else else if (win.matchMedia(prefers(light)).matches)
activateTheme(light); activateTheme(light);
else
activateTheme(default_theme);
// 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(dark); }); win.matchMedia(prefers(dark)).addListener(function (e) { if (e.matches) activateTheme(dark); });
win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateTheme(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
@@ -57,14 +65,14 @@
toggle.style.visibility = 'visible'; toggle.style.visibility = 'visible';
// 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 (!active) { if (!active) {
activateTheme(dark); activateTheme(dark);
sto.setItem(pref_key, dark); storage.setItem(pref_key, dark);
} else { } else {
activateTheme(light); activateTheme(light);
sto.setItem(pref_key, light); storage.setItem(pref_key, light);
} }
}, true); }, true);
} }