mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-28 04:50:28 -04:00
104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
/* jshint esversion: 6, indent: 2, browser: true, quotmark: single */
|
|
|
|
// inspired by https://codepen.io/kevinpowell/pen/EMdjOV
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// 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');
|
|
|
|
// keep track of current state (light by default)
|
|
let dark = false;
|
|
|
|
// load utteranc.es with proper theme and dynamically switch it
|
|
let utterancesLoaded = false;
|
|
const setUtterancesTheme = function(theme) {
|
|
const container = document.querySelector('div#comments');
|
|
|
|
// don't do any of this if we're not on a page with comments enabled
|
|
if (container) {
|
|
if (!utterancesLoaded) {
|
|
const script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.async = true;
|
|
script.defer = true;
|
|
script.src = 'https://utteranc.es/client.js';
|
|
script.crossOrigin = 'anonymous';
|
|
script.setAttribute('data-repo', '{{ .Site.Params.github | safeJS }}');
|
|
script.setAttribute('data-label', 'comments');
|
|
script.setAttribute('data-issue-term', 'og:title');
|
|
script.setAttribute('data-theme', theme);
|
|
container.appendChild(script);
|
|
|
|
utterancesLoaded = true;
|
|
} else {
|
|
const frame = document.querySelector('iframe.utterances-frame');
|
|
|
|
// be extra sure frame exists
|
|
if (frame) {
|
|
// https://github.com/utterance/utterances/blob/4d9823c6c4f9a58365f06e2aa76c51b8cf5d5478/src/configuration-component.ts#L160
|
|
frame.contentWindow.postMessage({
|
|
type: 'set-theme',
|
|
theme: theme
|
|
}, 'https://utteranc.es');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const activateDarkMode = function() {
|
|
document.body.classList.remove('light');
|
|
document.body.classList.add('dark');
|
|
|
|
dark = true;
|
|
|
|
setUtterancesTheme('github-dark');
|
|
};
|
|
|
|
const activateLightMode = function() {
|
|
document.body.classList.remove('dark');
|
|
document.body.classList.add('light');
|
|
|
|
dark = false;
|
|
|
|
setUtterancesTheme('github-light');
|
|
};
|
|
|
|
// if user already explicitly toggled in the past, restore their preference.
|
|
if (pref === 'true') activateDarkMode();
|
|
if (pref === 'false') activateLightMode();
|
|
|
|
// 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
|
|
// https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
activateDarkMode();
|
|
else
|
|
activateLightMode();
|
|
|
|
// 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.
|
|
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) { if (e.matches) activateDarkMode(); });
|
|
window.matchMedia('(prefers-color-scheme: light)').addListener(function(e) { if (e.matches) activateLightMode(); });
|
|
}
|
|
|
|
// handle lightbulb click
|
|
toggle.addEventListener('click', function() {
|
|
// switch to the opposite theme & save preference in local storage
|
|
if (!dark) {
|
|
activateDarkMode();
|
|
localStorage.setItem('dark_mode_pref', 'true');
|
|
} else {
|
|
activateLightMode();
|
|
localStorage.setItem('dark_mode_pref', 'false');
|
|
}
|
|
}, true);
|
|
})();
|