aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-pt2021
diff options
context:
space:
mode:
authorPaul Duncan <pabs@pablotron.org>2024-05-27 13:58:13 -0400
committerPaul Duncan <pabs@pablotron.org>2024-05-27 13:58:13 -0400
commit48f3534fade8ecf107b5d797d2ddcc30520e798f (patch)
tree9e51aa4c0242bbea06cb110d98a6a8c02db2db70 /themes/hugo-pt2021
parent2c6fe60f0fa20e7d57d690e188ba39fe4aa6804a (diff)
downloadpablotron.org-48f3534fade8ecf107b5d797d2ddcc30520e798f.tar.bz2
pablotron.org-48f3534fade8ecf107b5d797d2ddcc30520e798f.zip
themes/hugo-pt2021: add dark mode
Diffstat (limited to 'themes/hugo-pt2021')
-rw-r--r--themes/hugo-pt2021/assets/dark.sass42
-rw-r--r--themes/hugo-pt2021/assets/script.js71
-rw-r--r--themes/hugo-pt2021/assets/style.sass7
-rw-r--r--themes/hugo-pt2021/layouts/partials/header.html1
-rw-r--r--themes/hugo-pt2021/static/ims/README.md6
-rw-r--r--themes/hugo-pt2021/static/ims/theme.svg3
6 files changed, 118 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"
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 -}}
<img
diff --git a/themes/hugo-pt2021/static/ims/README.md b/themes/hugo-pt2021/static/ims/README.md
new file mode 100644
index 0000000..b821a7e
--- /dev/null
+++ b/themes/hugo-pt2021/static/ims/README.md
@@ -0,0 +1,6 @@
+[SVG][] icons from [Bootstrap Icons][] used in page header.
+
+[svg]: https://en.wikipedia.org/wiki/SVG
+ "Scalable vector graphics (SVG)"
+[bootstrap icons]: https://icons.getbootstrap.com/
+ "Bootstrap icons"
diff --git a/themes/hugo-pt2021/static/ims/theme.svg b/themes/hugo-pt2021/static/ims/theme.svg
new file mode 100644
index 0000000..ae34ceb
--- /dev/null
+++ b/themes/hugo-pt2021/static/ims/theme.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="#fff" fill="#fff" class="bi bi-brightness-low-fill" viewBox="0 0 16 16">
+ <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707M3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707"/>
+</svg>