jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-28 02:30:28 -04:00
Code Issues

improve dark-mode.js minificationability (it's a word i promise)

Browse Source
This commit is contained in:
Jake Jarvis 2020-04-28 22:33:46 -04:00
parent 8df8ef9aff
commit d9e69fcf75
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/js/dark-mode.js
View File

@ -10,34 +10,41 @@
var cls = bod.classList; var cls = bod.classList;
var sto = localStorage; var sto = localStorage;
// check for preset `dark_mode_pref` 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_on = 'true';
var pref_off = 'false';
var pref = sto.getItem(pref_key); var pref = sto.getItem(pref_key);
// keep track of current state (light by default) // keep track of current state (light by default) no matter how we got there
var dark = false; var dark = false;
// change CSS via these body classes:
var cls_light = 'light';
var cls_dark = 'dark';
var activateDarkMode = function() { var activateDarkMode = function() {
cls.remove('light'); cls.remove(cls_light);
cls.add('dark'); cls.add(cls_dark);
dark = true; dark = true;
}; };
var activateLightMode = function() { var activateLightMode = function() {
cls.remove('dark'); cls.remove(cls_dark);
cls.add('light'); cls.add(cls_light);
dark = false; dark = false;
}; };
// if user already explicitly toggled in the past, restore their preference. // if user already explicitly toggled in the past, restore their preference.
if (pref === 'true') activateDarkMode(); if (pref === pref_on) activateDarkMode();
if (pref === 'false') activateLightMode(); if (pref === pref_off) activateLightMode();
// 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) {
var prefers_dark = '(prefers-color-scheme: dark)';
var prefers_light = '(prefers-color-scheme: light)';
// check for OS dark mode setting and switch accordingly // check for OS dark mode setting and switch accordingly
// https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47 // https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
if (win.matchMedia('(prefers-color-scheme: dark)').matches) if (win.matchMedia(prefers_dark).matches)
activateDarkMode(); activateDarkMode();
else else
activateLightMode(); activateLightMode();
@ -45,10 +52,11 @@
// real-time switching if supported by OS/browser // real-time switching if supported by OS/browser
// TODO: stop listening when the parent condition becomes false, // TODO: stop listening when the parent condition becomes false,
// right now these keep listening even if pref is set. // right now these keep listening even if pref is set.
win.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) { if (e.matches) activateDarkMode(); }); win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateDarkMode(); });
win.matchMedia('(prefers-color-scheme: light)').addListener(function(e) { if (e.matches) activateLightMode(); }); win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateLightMode(); });
} }
// use an element with class `dark-mode-toggle` to trigger swap
var toggle = doc.querySelector('.dark-mode-toggle'); var toggle = doc.querySelector('.dark-mode-toggle');
// don't freak out if page happens not to have a toggle button // don't freak out if page happens not to have a toggle button
@ -61,10 +69,10 @@
// switch to the opposite theme & save preference in local storage // switch to the opposite theme & save preference in local storage
if (!dark) { if (!dark) {
activateDarkMode(); activateDarkMode();
sto.setItem(pref_key, 'true'); sto.setItem(pref_key, pref_on);
} else { } else {
activateLightMode(); activateLightMode();
sto.setItem(pref_key, 'false'); sto.setItem(pref_key, pref_off);
} }
}, true); }, true);
} }