jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 17:05:32 -04:00
Code Issues Activity

update dark mode script and post

Browse Source
This commit is contained in:
Jake Jarvis
2020-04-29 23:20:07 -04:00
parent 0e988fc0a6
commit 6854129108
2 changed files with 70 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
/* jshint esversion: 6, indent: 2, browser: true, quotmark: single */
/*! Dark mode switcheroo | MIT License | jrvs.io/bWMz */
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
(function() {
// improve variable mangling
// improve variable mangling when minifying
var win = window;
var doc = win.document;
var bod = doc.body;
@@ -12,67 +12,59 @@
// 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);
// change CSS via these <body> classes:
var dark = 'dark';
var light = 'light';
// use an element with class `dark-mode-toggle` to trigger swap when clicked
var toggle = doc.querySelector('.dark-mode-toggle');
// keep track of current state (light by default) no matter how we got there
var dark = false;
var active = 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;
// receives a class name and switches <body> to it
var activateTheme = function(theme) {
cls.remove(dark, light);
cls.add(theme);
active = (theme === dark);
};
// if user already explicitly toggled in the past, restore their preference.
if (pref === pref_on) activateDarkMode();
if (pref === pref_off) activateLightMode();
// if user already explicitly toggled in the past, restore their preference
if (pref === dark) activateTheme(dark);
if (pref === light) activateTheme(light);
// user has never clicked the button, so go by their OS preference until/if they do so
if (!pref) {
// check for OS dark mode setting and switch accordingly
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_dark).matches)
activateDarkMode();
activateTheme(dark);
else
activateLightMode();
activateTheme(light);
// 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_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(dark); });
win.matchMedia(prefers_light).addListener(function(e) { if (e.matches) activateTheme(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 button
// don't freak out if page happens not to have a toggle
if (toggle) {
// lightbulb toggle re-appears now that we know user has JS enabled
// toggle re-appears now that we know user has JS enabled
toggle.style.visibility = 'visible';
// handle lightbulb click
// handle toggle click
toggle.addEventListener('click', function() {
// switch to the opposite theme & save preference in local storage
if (!dark) {
activateDarkMode();
sto.setItem(pref_key, pref_on);
if (!active) {
activateTheme(dark);
sto.setItem(pref_key, dark);
} else {
activateLightMode();
sto.setItem(pref_key, pref_off);
activateTheme(light);
sto.setItem(pref_key, light);
}
}, true);
}