mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 14:06:40 -04:00
wrap dark mode stuff in an anonymous function like a big boy coder
This commit is contained in:
@ -2,99 +2,103 @@
|
||||
|
||||
// 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';
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// check for preset `dark_mode_pref` in localStorage
|
||||
let pref = localStorage.getItem('dark_mode_pref');
|
||||
// lightbulb toggle re-appears now that we know user has JS enabled
|
||||
const toggle = document.querySelector('button#dark-mode-toggle');
|
||||
toggle.style.visibility = 'visible';
|
||||
|
||||
// keep track of current state (light by default)
|
||||
let activated = false;
|
||||
// check for preset `dark_mode_pref` in localStorage
|
||||
let pref = localStorage.getItem('dark_mode_pref');
|
||||
|
||||
// dynamically switch utteranc.es's theme
|
||||
let utterancesInit = false;
|
||||
const setUtterances = function() {
|
||||
let theme = activated ? 'github-dark' : 'github-light';
|
||||
const container = document.querySelector('div#comments');
|
||||
// keep track of current state (light by default)
|
||||
let activated = false;
|
||||
|
||||
// don't do any of this if we're not on a page with comments enabled
|
||||
if (container) {
|
||||
if (!utterancesInit) {
|
||||
const script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.src = 'https://utteranc.es/client.js';
|
||||
script.crossorigin = true;
|
||||
script.setAttribute('data-repo', '{{ .Site.Params.github | safeJS }}');
|
||||
script.setAttribute('data-issue-term', 'og:title');
|
||||
script.setAttribute('data-theme', theme);
|
||||
script.setAttribute('data-label', 'comments');
|
||||
container.appendChild(script);
|
||||
// dynamically switch utteranc.es's theme
|
||||
let utterancesInit = false;
|
||||
const setUtterances = function() {
|
||||
let theme = activated ? 'github-dark' : 'github-light';
|
||||
const container = document.querySelector('div#comments');
|
||||
|
||||
utterancesInit = true;
|
||||
} else {
|
||||
const frame = document.querySelector('.utterances-frame');
|
||||
// don't do any of this if we're not on a page with comments enabled
|
||||
if (container) {
|
||||
if (!utterancesInit) {
|
||||
const script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.src = 'https://utteranc.es/client.js';
|
||||
script.crossorigin = true;
|
||||
script.setAttribute('data-repo', '{{ .Site.Params.github | safeJS }}');
|
||||
script.setAttribute('data-issue-term', 'og:title');
|
||||
script.setAttribute('data-theme', theme);
|
||||
script.setAttribute('data-label', 'comments');
|
||||
container.appendChild(script);
|
||||
|
||||
// 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
|
||||
}, '*');
|
||||
utterancesInit = true;
|
||||
} else {
|
||||
const frame = document.querySelector('.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
|
||||
}, '*');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const activateDarkMode = function() {
|
||||
document.body.classList.remove('light');
|
||||
document.body.classList.add('dark');
|
||||
|
||||
activated = true;
|
||||
|
||||
setUtterances();
|
||||
};
|
||||
|
||||
const activateLightMode = function() {
|
||||
document.body.classList.remove('dark');
|
||||
document.body.classList.add('light');
|
||||
|
||||
activated = false;
|
||||
|
||||
setUtterances();
|
||||
};
|
||||
|
||||
// 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(); });
|
||||
}
|
||||
};
|
||||
|
||||
const activateDarkMode = function() {
|
||||
document.body.classList.remove('light');
|
||||
document.body.classList.add('dark');
|
||||
|
||||
activated = true;
|
||||
|
||||
setUtterances();
|
||||
};
|
||||
|
||||
const activateLightMode = function() {
|
||||
document.body.classList.remove('dark');
|
||||
document.body.classList.add('light');
|
||||
|
||||
activated = false;
|
||||
|
||||
setUtterances();
|
||||
};
|
||||
|
||||
// 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 (!activated) {
|
||||
activateDarkMode();
|
||||
localStorage.setItem('dark_mode_pref', 'true');
|
||||
} else {
|
||||
activateLightMode();
|
||||
localStorage.setItem('dark_mode_pref', 'false');
|
||||
}
|
||||
}, true);
|
||||
// handle lightbulb click
|
||||
toggle.addEventListener('click', function() {
|
||||
// switch to the opposite theme & save preference in local storage
|
||||
if (!activated) {
|
||||
activateDarkMode();
|
||||
localStorage.setItem('dark_mode_pref', 'true');
|
||||
} else {
|
||||
activateLightMode();
|
||||
localStorage.setItem('dark_mode_pref', 'false');
|
||||
}
|
||||
}, true);
|
||||
})();
|
||||
|
||||
6
assets/vendor/emoji/emoji.js
vendored
6
assets/vendor/emoji/emoji.js
vendored
@ -7,7 +7,7 @@
|
||||
*
|
||||
*/
|
||||
|
||||
var emoji = (function (
|
||||
(function (
|
||||
|
||||
// WARNING: this file is generated automatically via
|
||||
// `node scripts/build.js`
|
||||
@ -570,6 +570,4 @@ var emoji = (function (
|
||||
return r.join(sep || '-');
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
emoji.parse(document.body);
|
||||
}()).parse(document.body);
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
{{ partialCached "page/footer" . }}
|
||||
{{ partial "scripts/_bundle" . }}
|
||||
{{ partial "scripts/shortcodes" . }}
|
||||
{{ if eq hugo.Environment "production" }}
|
||||
{{ partialCached "scripts/simple_analytics" . }}
|
||||
|
||||
@ -8,5 +8,4 @@
|
||||
{{ partialCached "head/feeds" . -}}
|
||||
{{ partialCached "head/webmention" . -}}
|
||||
{{ partial "head/canonical" . -}}
|
||||
{{ partial "scripts/_bundle" . }}
|
||||
{{ partial "head/schema" . -}}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<script async defer src="https://s.jarv.is/app.js" data-skip-dnt="true"></script>
|
||||
<script async defer src="https://s.jarv.is/latest.js" data-skip-dnt="true"></script>
|
||||
<noscript><img src="https://s.jarv.is/image.gif" alt=""></noscript>
|
||||
|
||||
Reference in New Issue
Block a user