mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 17:30:28 -04:00
Jake Jarvis
b13da8e05b
* prepare dark mode stuffs * themed all global colors * store preference in local storage * toggle styling * lightbulb position * minify bundled script with uglify-js instead of hugo * detect whether user has an OS-wide dark mode preference and use that by default * two different colors for each homepage link * inline bulb SVGs into stylesheet * fingerprint and cache styles for a year * fix lightbulb positioning with weird magic numbers, will come back to that * themed syntax highlighting * use terser instead of uglify-js (b/c of ES6)
62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
/* jshint esversion: 6, indent: 2, browser: true */
|
|
|
|
// inspired by https://codepen.io/kevinpowell/pen/EMdjOV
|
|
|
|
// lightbulb toggle re-appears now that we know user has JS enabled
|
|
const toggle = document.querySelector('button#dark-mode-toggle');
|
|
toggle.style.visibility = "visible";
|
|
|
|
// check for preset `dark_mode_pref` in localStorage
|
|
let pref = localStorage.getItem('dark_mode_pref');
|
|
|
|
// check for OS dark mode setting
|
|
// https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
|
|
const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
const isSystemLight = window.matchMedia("(prefers-color-scheme: light)").matches;
|
|
|
|
// keep track of current state, no matter how we get there...
|
|
let currentlyDark = false;
|
|
|
|
const activateDarkMode = function() {
|
|
document.body.classList.remove('light');
|
|
document.body.classList.add('dark');
|
|
currentlyDark = true;
|
|
};
|
|
|
|
const activateLightMode = function() {
|
|
document.body.classList.remove('dark');
|
|
document.body.classList.add('light');
|
|
currentlyDark = false;
|
|
};
|
|
|
|
// if user already explicitly enabled dark mode in the past, turn it back on.
|
|
if (pref === 'true') {
|
|
activateDarkMode();
|
|
}
|
|
|
|
// user has never clicked the button, so go by their OS preference until/if they do so
|
|
if (pref !== "true" && pref !== "false") {
|
|
if (isSystemDark) activateDarkMode();
|
|
if (isSystemLight) activateLightMode();
|
|
|
|
// real-time switching if supported by OS/browser
|
|
// TODO: these keep listening even when the parent condition becomes false (until refresh or new page)
|
|
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode());
|
|
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode());
|
|
}
|
|
|
|
// handle toggle click
|
|
toggle.addEventListener("click", function() {
|
|
// get current preference, if there is one
|
|
let pref = localStorage.getItem("dark_mode_pref");
|
|
|
|
// switch to the opposite theme & save preference in local storage
|
|
if (pref !== "true") {
|
|
activateDarkMode();
|
|
localStorage.setItem("dark_mode_pref", "true");
|
|
} else {
|
|
activateLightMode();
|
|
localStorage.setItem("dark_mode_pref", "false");
|
|
}
|
|
});
|