jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 09:18: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

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

@ -10,34 +10,41 @@
var cls = bod.classList;
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_on = 'true';
var pref_off = 'false';
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;
// change CSS via these body classes:
var cls_light = 'light';
var cls_dark = 'dark';
var activateDarkMode = function() {
cls.remove('light');
cls.add('dark');
cls.remove(cls_light);
cls.add(cls_dark);
dark = true;
};
var activateLightMode = function() {
cls.remove('dark');
cls.add('light');
cls.remove(cls_dark);
cls.add(cls_light);
dark = false;
};
// if user already explicitly toggled in the past, restore their preference.
if (pref === 'true') activateDarkMode();
if (pref === 'false') activateLightMode();
if (pref === pref_on) activateDarkMode();
if (pref === pref_off) activateLightMode();
// user has never clicked the button, so go by their OS preference until/if they do so
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
// 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();
else
activateLightMode();
@ -45,26 +52,27 @@
// real-time switching if supported by OS/browser
// TODO: stop listening when the parent condition becomes false,
// 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-color-scheme: light)').addListener(function(e) { if (e.matches) activateLightMode(); });
win.matchMedia(prefers_dark).addListener(function(e) { if (e.matches) activateDarkMode(); });
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');
// don't freak out if page happens not to have a toggle button
if (toggle) {
// lightbulb toggle re-appears now that we know user has JS enabled
toggle.style.visibility = 'visible';
// lightbulb toggle re-appears now that we know user has JS enabled
toggle.style.visibility = 'visible';
// handle lightbulb click
toggle.addEventListener('click', function() {
// switch to the opposite theme & save preference in local storage
if (!dark) {
activateDarkMode();
sto.setItem(pref_key, 'true');
sto.setItem(pref_key, pref_on);
} else {
activateLightMode();
sto.setItem(pref_key, 'false');
sto.setItem(pref_key, pref_off);
}
}, true);
}