color picker yay

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 {