color picker yay

_includes/footer.njk

@@ -21,4 +21,25 @@
       </a>
     </li>
   </ul>
+
+  <fieldset id="theme">
+    <legend>color scheme</legend>
+
+    <input type="radio" id="theme-light" name="theme" value="light"/>
+    <label class="theme-light" for="theme-light">
+      <i class="fa-regular fa-sun" aria-hidden="true"></i>
+      light
+    </label>
+
+    <input type="radio" id="theme-auto" name="theme" value="auto"/>
+    <label class="theme-auto" for="theme-auto">
+      auto
+    </label>
+
+    <input type="radio" id="theme-dark" name="theme" value="dark"/>
+    <label class="theme-dark" for="theme-dark">
+      dark
+      <i class="fa-regular fa-moon" aria-hidden="true"></i>
+    </label>
+  </fieldset>
 </footer>

_includes/head-content.njk

@@ -38,4 +38,6 @@
 
 <style>{% getBundle "css" %}</style>
 
+{# Scripts #}
+<script>{% include "js/theme.js" %}</script>
 <script type="module">{% getBundle "js" %}</script>

css/main.css

@@ -51,6 +51,13 @@
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
 }
 
+:root:has(#theme-light:checked) {
+	color-scheme: light;
+}
+:root:has(#theme-dark:checked) {
+	color-scheme: dark;
+}
+
 /* Base */
 
 * {
@@ -194,7 +201,7 @@ ul, ol, dl, li {
 }
 
 li {
-	line-height: 1.2	5;
+	line-height: 1.2;
 	margin-top: .65rem;
 	margin-bottom: .65rem;
 }

css/nav.css

@@ -241,6 +241,111 @@ footer a:focus-visible {
 	outline-color: var(--color-pink);
 }
 
+/* color picker */
+#theme {
+	display: flex;
+	justify-content: center;
+	margin: .5rem auto 0;
+	padding: 0 .75rem .5rem;
+	width: fit-content;
+	border: .125rem solid var(--color-teal);
+	border-radius: 2rem;
+}
+
+#theme legend {
+	margin: 0 auto;
+	color: var(--color-teal);
+}
+
+footer label {
+	cursor: pointer;
+	border: .125rem solid var(--color-pink);
+	padding: 0 .25rem;
+	color: var(--color-pink);
+	background-color: var(--color-bg); /* this stops the box shadows from showing through */
+	box-shadow: .15em .15em var(--color-shadow);
+	/* Click animation handling */
+	position: relative;
+	top: 0;
+	left: 0;
+	transition: top .05s ease-in, left .05s ease-in;
+}
+
+footer input:checked + label {
+	color: var(--color-blue);
+	border-color: var(--color-blue);
+}
+
+footer label i {
+	color: var(--color-teal);
+}
+
+footer input:checked + label i {
+	color: var(--color-pink);
+}
+
+@media (any-hover: hover) {
+	footer label:hover,
+	footer input:checked + label:hover,
+	footer label:hover i,
+	footer input:checked + label:hover i {
+		color: var(--color-bg);
+	}
+
+	footer label:hover {
+		background-color: var(--color-pink);
+	}
+
+	footer input:checked + label:hover {
+		background-color: var(--color-teal);
+	}
+}
+
+footer input:focus-visible + label,
+footer input:focus-visible + label i {
+	color: var(--color-bg);
+	background-color: var(--color-pink);
+	border-color: var(--color-pink);
+}
+
+footer input:checked:focus-visible + label,
+footer input:checked:focus-visible + label i {
+	color: var(--color-bg);
+	background-color: var(--color-teal);
+	border-color: var(--color-teal);
+}
+
+footer label:active {
+	top: .09em;
+	left: .09em;
+	box-shadow: .05em .05em var(--color-shadow);
+}
+
+label.theme-light {
+	border-top-left-radius: 1rem;
+	border-bottom-left-radius: 1rem;
+	border-right: none;
+	padding-left: .35rem;
+}
+
+label.theme-auto {
+}
+
+label.theme-dark {
+	border-top-right-radius: 1rem;
+	border-bottom-right-radius: 1rem;
+	border-left: none;
+	padding-right: .35rem;
+}
+
+footer input {
+	/* To allow screen reader to still access these. */
+	/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
 /* Pagination */
 .pagination,
 .pagination li {

eleventy.config.js

@@ -135,6 +135,7 @@ export default async function(eleventyConfig) {
 
 	/* Watch when serving */
 	eleventyConfig.addWatchTarget("css");
+	eleventyConfig.addWatchTarget("js");
 };
 
 export const config = {

js/theme.js

@@ -0,0 +1,35 @@
+const THEME = "theme";
+
+const saveTheme = (themeValue) => {
+	localStorage.setItem(THEME, themeValue);
+};
+
+const themeLight = document.getElementById("theme-light");
+themeLight.addEventListener("input", (e) => {
+	saveTheme(themeLight.value);
+});
+
+const themeAuto = document.getElementById("theme-auto");
+themeAuto.addEventListener("input", (e) => {
+	saveTheme(themeAuto.auto);
+});
+
+const themeDark = document.getElementById("theme-dark");
+themeDark.addEventListener("input", (e) => {
+	saveTheme(themeDark.value);
+});
+
+var currentThemeValue = localStorage.getItem(THEME);
+switch (currentThemeValue) {
+	case "light":
+		themeLight.checked = true;
+		break;
+	case "auto":
+		themeAuto.checked = true;
+		break;
+	case "dark":
+		themeDark.checked = true;
+		break;
+	default:
+		themeAuto.checked = true;
+}