🚧💄 WIP: darkmode/lightmode

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
+import ThemeIcon from './ThemeIcon.astro';
 ---
 
 <header class="flex justify-center gap-64">
@@ -8,6 +9,7 @@ import { SITE_TITLE } from '../consts';
 		<a class="font-bold" href="/">
 			{SITE_TITLE}
 		</a>
+		<ThemeIcon />
 	</div>
 	<nav>
 		<HeaderLink href="/about">about</HeaderLink>

src/components/ThemeIcon.astro

@@ -0,0 +1,53 @@
+---
+---
+
+<button id="themeToggle">
+    <svg width="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+            class="sun"
+            fill-rule="evenodd"
+            d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+        ></path>
+        <path
+            class="moon"
+            fill-rule="evenodd"
+            d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+        ></path>
+    </svg>
+</button>
+
+<script>
+    const theme = (() => {
+        if (
+            typeof localStorage != "undefined" &&
+            localStorage.getItem("theme")
+        ) {
+            return localStorage.getItem("theme");
+        }
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            return "dark";
+        } else {
+            return "light";
+        }
+    })();
+
+    if (theme === "light") {
+        document.documentElement.classList.remove("dark");
+    } else {
+        document.documentElement.classList.add("dark");
+    }
+
+    window.localStorage.setItem("theme", theme);
+
+    const handleToggleClick = () => {
+        const element = document.documentElement;
+        element.classList.toggle("dark");
+
+        const isDark = element.classList.contains("dark");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+    };
+
+    document
+        .getElementById("themeToggle")
+        .addEventListener("click", handleToggleClick);
+</script>

src/styles/global.css

@@ -3,65 +3,44 @@
   https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
+
+html {
+	background-color: #FFF8EA;
+	color: #815B5B;
+}
+
+html.dark {
+	background-color: #27374D;
+	color: #DDE6ED;
+}
+
 body {
 	font-family: Verdana, sans-serif;
 	margin: auto;
 	padding: 20px;
 	max-width: 65ch;
 	text-align: left;
-	background-color: #FFF8EA;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 	line-height: 1.5;
-	color: #815B5B;
 }
-h1,
+
-h2,
+#themeToggle {
-h3,
+	border: 0;
-h4,
+	background: none;
-h5,
-h6,
-strong,
-b {
-	color: #222;
 }
-a {
+.sun {
-	color: #3273dc;
+	fill: #27374D;
 }
-nav a {
+.moon {
-	margin-right: 10px;
+	fill: white;
 }
-textarea {
+
-	width: 100%;
+:global(.dark) .sun {
-	font-size: 16px;
+	fill: white;
+	display: none;
 }
-input {
+:global(.dark) .moon {
-	font-size: 16px;
+	fill: #FFF8EA;
-}
+	display: none;
-content {
-	line-height: 1.6;
-}
-table {
-	width: 100%;
-}
-img {
-	max-width: 100%;
-	height: auto;
-}
-code {
-	padding: 2px 5px;
-	background-color: #f2f2f2;
-}
-pre {
-	padding: 1rem;
-}
-pre > code {
-	all: unset;
-}
-blockquote {
-	border: 1px solid #999;
-	color: #222;
-	padding: 2px 0px 2px 20px;
-	margin: 0px;
-	font-style: italic;
 }