v9.2.8-alpha.9: theme-color responds to prefers-color-scheme in mono …

…mode (#20) * feat: make theme-color respond to prefers-color-scheme in mono mode - meta.theme-color now works in mono mode when prefers-color-scheme is dark * v9.2.8-alpha.9
rdela · Apr 25, 2024 · 401271b · 401271b
1 parent 2726cb4
commit 401271b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 24 deletions.
diff --git a/_data/metadata.js b/_data/metadata.js
@@ -1,5 +1,5 @@
 let data = {
-	title: "eleventeen v9.2.7-alpha.9",
+	title: "eleventeen v9.2.8-alpha.9",
 	url: "https://eleventeen.blog",
 	language: "en",
 	description: "Rainbow Eleventy blog",
@@ -10,7 +10,7 @@ let data = {
 	},
 	siteimage: "https://o.famebot.com/file/famebot/eleventeen.png",
 	mono: false,
-	eleventeen: "9.2.7-alpha.9",
+	eleventeen: "9.2.8-alpha.9",
 };
 
 export default data;
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -3,11 +3,10 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="#fff">
 		<title>{{ title or metadata.title }}</title>
 		<meta name="description" content="{{ description or metadata.description }}">
 		<meta property="og:image" content="{% shareimg hero or metadata.siteimage %}" />
-		{# {{ hero or metadata.siteimage }} #}
 		{#- Atom and JSON feeds included by default #}
 		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
 		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
@@ -75,6 +74,29 @@
 
 			<!-- This page `{{ page.url | htmlBaseUrl }}` was built on {% currentBuildDate %} -->			
 
+			{#
+				listen for and respond to prefers-color-scheme (light/dark)
+				changes in both mono and rainbow modes
+			#}
+			{% js %}
+let huedark = `#000`;
+let huehsl = `#fff`;
+function activateColorScheme() {
+	const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)');
+	if ((colorSchemeQueryList.media === 'not all') 
+	|| (colorSchemeQueryList.matches === true)) {
+		document.querySelector('meta[name="theme-color"]').setAttribute('content', huehsl);
+	} else {
+		document.querySelector('meta[name="theme-color"]').setAttribute('content', huedark);
+	}
+}
+const darkPreference = window.matchMedia("(prefers-color-scheme: dark)");
+const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
+darkPreference.addEventListener("change", e => e.matches && activateColorScheme());
+lightPreference.addEventListener("change", e => e.matches && activateColorScheme());
+			{% endjs %}
+
+			{# rainbow mode magic #}
 			{%- if not metadata.mono %}
 			{% js %}
 				{% include "node_modules/@famebot/chromagen/dist/chromagen.umd.js" %}
@@ -85,8 +107,8 @@ var colorScheme = chromagen();
 
 {#- https://davidwalsh.name/css-variables-javascript #}
 const docstyle = document.documentElement.style;
-const huedark = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.darkness})`;
-const huehsl = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.lightness})`;
+huedark = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.darkness})`;
+huehsl = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.lightness})`;
 docstyle.setProperty('--active-light', huedark);
 docstyle.setProperty('--active-dark', huehsl);
 docstyle.setProperty('--background-color-light', huehsl);
@@ -100,21 +122,6 @@ docstyle.setProperty('--primarydarker', `hsl(${colorScheme.complement}, ${colorS
 docstyle.setProperty('--text-color-dark', `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.lighter})`);
 docstyle.setProperty('--text-color-light', `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.darker})`);
 
-function activateColorScheme() {
-	const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)');
-	if ((colorSchemeQueryList.media === 'not all') 
-	|| (colorSchemeQueryList.matches === true)) {
-		document.querySelector('meta[name="theme-color"]').setAttribute('content', huehsl);
-	} else {
-		document.querySelector('meta[name="theme-color"]').setAttribute('content', huedark);
-	}
-}
-const darkPreference = window.matchMedia("(prefers-color-scheme: dark)");
-const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
-darkPreference.addEventListener("change", e => e.matches && activateColorScheme());
-lightPreference.addEventListener("change", e => e.matches && activateColorScheme());
-activateColorScheme();
-
 document.querySelector('#rainbutton').innerHTML = `<button title="wish upon a star" onclick="rainbow()">🌈 Rainbow Me</button>`;
 document.querySelector('#chromagen').innerHTML = `<details>
 	<summary><span role="img" aria-label="palette">🎨</span>
@@ -135,7 +142,15 @@ document.querySelector('#chromagen').innerHTML = `<details>
 }
 rainbow();
 			{% endjs %}
-			{# 
+			{% endif %}
+			{# end rainbow mode magic #}
+
+			{# activate initial theme-color in both mono and rainbow modes #}
+			{% js %}
+activateColorScheme();
+			{% endjs %}
+
+			{#
 				getBundleFileUrl Writes the bundle content to a content-hashed file location in your 
 				output directory and returns the URL to the file for use.
 				https://github.com/11ty/eleventy-plugin-bundle/blob/main/README.md#write-a-bundle-to-a-file
@@ -146,9 +161,10 @@ rainbow();
 				http://calendar.perfplanet.com/2011/why-inlining-everything-is-not-the-answer/
 				Choosing not to block render
 				https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#blocking_rendering_till_a_script_is_fetched_and_executed
+				need bundle in both mono and rainbow modes to set and respond to 
+				prefers-color-scheme initial preference and changes
 			#}
 			<script async src="{% getBundleFileUrl "js" %}"></script>
-			{% endif %}
 		</div>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "eleventeen",
-	"version": "9.2.7-alpha.9",
+	"version": "9.2.8-alpha.9",
 	"description": "A starter repository for a blog web site using the Eleventy site generator.",
 	"type": "module",
 	"scripts": {