From 48f3534fade8ecf107b5d797d2ddcc30520e798f Mon Sep 17 00:00:00 2001 From: Paul Duncan Date: Mon, 27 May 2024 13:58:13 -0400 Subject: themes/hugo-pt2021: add dark mode --- themes/hugo-pt2021/assets/dark.sass | 42 +++++++++++++++ themes/hugo-pt2021/assets/script.js | 71 ++++++++++++++++++++----- themes/hugo-pt2021/assets/style.sass | 7 +++ themes/hugo-pt2021/layouts/partials/header.html | 1 + themes/hugo-pt2021/static/ims/README.md | 6 +++ themes/hugo-pt2021/static/ims/theme.svg | 3 ++ 6 files changed, 118 insertions(+), 12 deletions(-) create mode 100644 themes/hugo-pt2021/assets/dark.sass create mode 100644 themes/hugo-pt2021/static/ims/README.md create mode 100644 themes/hugo-pt2021/static/ims/theme.svg (limited to 'themes/hugo-pt2021') 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" diff --git a/themes/hugo-pt2021/layouts/partials/header.html b/themes/hugo-pt2021/layouts/partials/header.html index cdeebb9..1beeb2d 100644 --- a/themes/hugo-pt2021/layouts/partials/header.html +++ b/themes/hugo-pt2021/layouts/partials/header.html @@ -64,6 +64,7 @@ class='navbar-item {{if eq .id $.Params.menu}}is-active{{end}}' title='{{.help}}' aria-label='{{.help}}' + data-id='{{.id}}' > {{- if .icon -}} + + -- cgit v1.2.3