diff options
author | Paul Duncan <pabs@pablotron.org> | 2024-05-27 13:58:13 -0400 |
---|---|---|
committer | Paul Duncan <pabs@pablotron.org> | 2024-05-27 13:58:13 -0400 |
commit | 48f3534fade8ecf107b5d797d2ddcc30520e798f (patch) | |
tree | 9e51aa4c0242bbea06cb110d98a6a8c02db2db70 /themes/hugo-pt2021/assets | |
parent | 2c6fe60f0fa20e7d57d690e188ba39fe4aa6804a (diff) | |
download | pablotron.org-48f3534fade8ecf107b5d797d2ddcc30520e798f.tar.bz2 pablotron.org-48f3534fade8ecf107b5d797d2ddcc30520e798f.zip |
themes/hugo-pt2021: add dark mode
Diffstat (limited to 'themes/hugo-pt2021/assets')
-rw-r--r-- | themes/hugo-pt2021/assets/dark.sass | 42 | ||||
-rw-r--r-- | themes/hugo-pt2021/assets/script.js | 71 | ||||
-rw-r--r-- | themes/hugo-pt2021/assets/style.sass | 7 |
3 files changed, 108 insertions, 12 deletions
diff --git a/themes/hugo-pt2021/assets/dark.sass b/themes/hugo-pt2021/assets/dark.sass new file mode 100644 index 0000000..16660dd --- /dev/null +++ b/themes/hugo-pt2021/assets/dark.sass @@ -0,0 +1,42 @@ +// disabled for now; breaks light mode +// +// @media (prefers-color-scheme: dark) +// html +// background: #222 +// color: #eee +// body +// background: #222 +// color: #eee +// html.light, html.light body +// background: #fff +// color: #fff + +html.dark + background: #222 + color: #eee + + body + background: #222 + color: #eee + + h1, h2, h3, h4, h5, h1.title, h2.title, h4.title, h5.title, figcaption, + strong + color: #eee + + h3.subtitle + color: #ccc + + .content + .title, h3, .subtitle, h4 + color: #ddd + + code, blockquote + color: #ddd + background: #333 + + // keep original table color for now + table strong + color: black + + a, a:hover + color: #0ae diff --git a/themes/hugo-pt2021/assets/script.js b/themes/hugo-pt2021/assets/script.js index 2805cef..b879f64 100644 --- a/themes/hugo-pt2021/assets/script.js +++ b/themes/hugo-pt2021/assets/script.js @@ -1,4 +1,35 @@ -// enable burger menu support +'use strict'; + +// +// script.js - script which handles: +// +// - check/set dark mode (added 2024-05-27) +// - enable burger menu support +// +// original notes regarding burger menu and minification are in the +// "burger menu" section below +// +// burker menu (2024-05-27) +// ------------------------ +// does the following: +// +// 1. checks for user setting and use that, if present. +// 2. otherwise check browser for preferred color scheme and use that. +// +// this works in conjunction with the styles in `assets/dark.sass` and +// has one minor quirk: there is a brief flash when the user transitions +// to a new page and has dark mode enabled. this can be removed by +// uncommenting the block at the top of `dark.sass`, but doing this +// currently breaks the light color scheme :/. +// +// refs: +// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme +// https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/ +// https://css-tricks.com/approaches-media-queries-sass/ +// https://stackoverflow.com/questions/59621784/how-to-detect-prefers-color-scheme-change-in-javascript +// +// burker menu +// ----------- // src: https://bulma.io/documentation/components/navbar/ // // Note (2022-03-05): I initially switched from Array.prototype.slice() @@ -17,18 +48,34 @@ // I also tried switching from forEach to for..of, but that increased // the minified, uncompressed size by a two bytes. // -document.addEventListener('DOMContentLoaded', () => { - "use strict"; - const D = document; - // iterate through burgers - D.querySelectorAll('.navbar-burger').forEach(e => { - e.addEventListener('click', () => { - // get target from data-target attribute - const t = D.getElementById(e.dataset.target); +// aliases +const D = document, + C = D.body.parentElement.classList, + L = localStorage, + M = window.matchMedia, + on = (el, id, fn) => el.addEventListener(id, fn); - // toggle is-active on both burger and menu - [e, t].forEach(e => e.classList.toggle('is-active')); - }); +// use theme if set, otherwise fall back to browser preference +// FIXME: move to DOMContentLoaded? +if (L && L.theme && L.theme === 'dark') { + C.add('dark'); // theme set to "dark" +} else if ((!L || !L.theme) && M && M('(prefers-color-scheme: dark)').matches) { + C.add('dark'); // prefers dark color scheme +} + +document.addEventListener('DOMContentLoaded', () => { + // theme toggle event handler + on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', (e) => { + e.preventDefault(); // stop event + L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle }); + + // iterate through burgers, bind to click events + D.querySelectorAll('.navbar-burger').forEach(e => on(e, 'click', () => { + // then toggle is-active on burger and menu + [e, D.getElementById(e.dataset.target)].forEach( + e => e.classList.toggle('is-active') + ) + })); }); diff --git a/themes/hugo-pt2021/assets/style.sass b/themes/hugo-pt2021/assets/style.sass index 9a241a7..3b3fbb6 100644 --- a/themes/hugo-pt2021/assets/style.sass +++ b/themes/hugo-pt2021/assets/style.sass @@ -71,3 +71,10 @@ // table captions below tables table.table caption-side: bottom + +// dark mode (2024-05-27) +// +// this isn't perfect, there is screen tearing when dark mode +// is enabled and the page first loads. see notes in script.js +// and dark.sass +@import "dark" |