From 64a8aecf2566526357d6c6d0cd83421d8ab29147 Mon Sep 17 00:00:00 2001
From: Riyyi <riyyi3@gmail.com>
Date: Fri, 4 Apr 2025 00:29:23 +0200
Subject: [PATCH] Persistent color theme

---
 nuxt.config.ts                     |   1 -
 public/favicon.ico                 | Bin 4286 -> 12549 bytes
 src/app.vue                        |   3 +
 src/app/spa-loading-template.html  | 124 +++++++++++++++++++----------
 src/components.d.ts                |   2 +
 src/components/ColorMode.vue       |  56 +++++++++++++
 src/components/ToggleColorMode.vue |  23 ------
 src/layouts/default.vue            |   2 +-
 src/stores/stateStore.ts           |  38 ++++++---
 9 files changed, 173 insertions(+), 76 deletions(-)
 create mode 100644 src/components/ColorMode.vue
 delete mode 100644 src/components/ToggleColorMode.vue

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0b1ed40..4b921e5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -47,7 +47,6 @@ export default defineNuxtConfig({
 	},
 	piniaPluginPersistedstate: {
 		debug: process.env.NODE_ENV === "development", // log error to console
-		storage: "cookies",
 		cookieOptions: {
 			sameSite: "lax", // prevent CSRF
 			secure: process.env.NODE_ENV !== "development" // only send over HTTPS
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..b7d7937fb2d7b09be3d3a399d529a60493c65bde 100644
GIT binary patch
literal 12549
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
CB-LX8

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/src/app.vue b/src/app.vue
index 43b6efb..c433e20 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -12,6 +12,9 @@ import { useStateStore } from "@/stores/stateStore";
 const router = useRouter();
 const store = useStateStore();
 
+// Set dark theme
+store.applyColorMode();
+
 useHead({
 	titleTemplate: (titleChunk: string | undefined): string | null => {
 		return titleChunk ? `${titleChunk} - website-vue` : 'website-vue';
diff --git a/src/app/spa-loading-template.html b/src/app/spa-loading-template.html
index a269337..6b36d48 100644
--- a/src/app/spa-loading-template.html
+++ b/src/app/spa-loading-template.html
@@ -1,41 +1,85 @@
 <!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
-<div class="loader"></div>
-<style>
-	.loader {
-		display: block;
-		position: fixed;
-		z-index: 1031;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: 36px;
-		height: 36px;
-		box-sizing: border-box;
-		border: solid 2px transparent;
-		border-top-color: #000;
-		border-left-color: #000;
-		border-bottom-color: #efefef;
-		border-right-color: #efefef;
-		border-radius: 50%;
-		-webkit-animation: loader 400ms linear infinite;
-		animation: loader 400ms linear infinite;
-	}
-
-	@-webkit-keyframes loader {
-		0% {
-			-webkit-transform: translate(-50%, -50%) rotate(0deg);
-		}
-		100% {
-			-webkit-transform: translate(-50%, -50%) rotate(360deg);
-		}
-	}
-
-	@keyframes loader {
-		0% {
-			transform: translate(-50%, -50%) rotate(0deg);
-		}
-		100% {
-			transform: translate(-50%, -50%) rotate(360deg);
-		}
-	}
-</style>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<style>
+			body {
+				background-color: #fff;
+			}
+
+			.dark {
+				background-color: #1a1d20;
+			}
+
+			.loader {
+				display: block;
+				position: fixed;
+				z-index: 1031;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 36px;
+				height: 36px;
+				box-sizing: border-box;
+				border: solid 2px transparent;
+				border-top-color: #000;
+				border-left-color: #000;
+				border-bottom-color: #efefef;
+				border-right-color: #efefef;
+				border-radius: 50%;
+				-webkit-animation: loader 400ms linear infinite;
+				animation: loader 400ms linear infinite;
+			}
+
+			.dark .loader {
+				border-top-color: #fff !important;
+				border-left-color: #fff !important;
+				border-bottom-color: #444 !important;
+				border-right-color: #444 !important;
+			}
+
+			@-webkit-keyframes loader {
+				0% {
+					-webkit-transform: translate(-50%, -50%) rotate(0deg);
+				}
+				100% {
+					-webkit-transform: translate(-50%, -50%) rotate(360deg);
+				}
+			}
+
+			@keyframes loader {
+				0% {
+					transform: translate(-50%, -50%) rotate(0deg);
+				}
+				100% {
+					transform: translate(-50%, -50%) rotate(360deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="loader"></div>
+		<script>
+			let css = "light";
+			let state = null;
+
+			const json = localStorage.getItem("state");
+			if (json !== null) {
+				state = JSON.parse(json).colorMode;
+			}
+
+			if (state === null || state === "auto") {
+				const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+				if (preferDark) {
+					css = "dark";
+				}
+			}
+			else if (state === "dark") {
+				css = "dark";
+			}
+
+			const element = document.querySelector("html");
+			element.classList.add(css);
+		</script>
+	</body>
+</html>
diff --git a/src/components.d.ts b/src/components.d.ts
index 3b2c90f..8f9cf39 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     IBi0Circle: typeof import('~icons/bi/0-circle')['default']
     IBiActivity: typeof import('~icons/bi/activity')['default']
+    IFaAdjust: typeof import('~icons/fa/adjust')['default']
     IFaAngellist: typeof import('~icons/fa/angellist')['default']
     IFaCheck: typeof import('~icons/fa/check')['default']
     IFaClone: typeof import('~icons/fa/clone')['default']
@@ -22,6 +23,7 @@ declare module 'vue' {
     IFaLink: typeof import('~icons/fa/link')['default']
     IFaLinkedinSquare: typeof import('~icons/fa/linkedin-square')['default']
     IFaMoonO: typeof import('~icons/fa/moon-o')['default']
+    IFaSolidMoon: typeof import('~icons/fa-solid/moon')['default']
     IFaSolidSun: typeof import('~icons/fa-solid/sun')['default']
     IMdiAccountBox: typeof import('~icons/mdi/account-box')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/ColorMode.vue b/src/components/ColorMode.vue
new file mode 100644
index 0000000..66c2fd1
--- /dev/null
+++ b/src/components/ColorMode.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="dropup position-fixed corner">
+		<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+			<template v-if="store.colorMode === 'light'">
+				<IFaSolidSun />
+			</template>
+			<template v-else-if="store.colorMode === 'dark'">
+				<IFaSolidMoon />
+			</template>
+			<template v-else>
+				<IFaAdjust />
+			</template>
+		</a>
+		<ul class="dropdown-menu">
+			<li>
+				<a class="dropdown-item" :class="store.colorMode === 'light' ? 'active' : ''" @click="store.setColorMode('light')">
+					<IFaSolidSun /> Light &nbsp;
+					<IFaCheck v-if="store.colorMode === 'light'" class="font-smaller float-right" />
+				</a>
+			</li>
+			<li>
+				<a class="dropdown-item" :class="store.colorMode === 'dark' ? 'active' : ''" @click="store.setColorMode('dark')">
+					<IFaSolidMoon /> Dark
+					<IFaCheck v-if="store.colorMode === 'dark'" class="font-smaller float-right" />
+				</a>
+			</li>
+			<li>
+				<a class="dropdown-item" :class="store.colorMode === 'auto' ? 'active' : ''" @click="store.setColorMode('auto')">
+					<IFaAdjust width="1.3em" /> Auto
+					<IFaCheck v-if="store.colorMode === 'auto'" class="font-smaller float-right" />
+				</a>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+.corner {
+	right: 10px;
+	bottom: 10px;
+}
+
+.dropdown-menu {
+	min-width: 125px;
+}
+
+.font-smaller {
+	font-size: .6rem;
+}
+</style>
+
+<script setup lang="ts">
+import { useStateStore } from "@/stores/stateStore";
+
+const store = useStateStore();
+</script>
diff --git a/src/components/ToggleColorMode.vue b/src/components/ToggleColorMode.vue
deleted file mode 100644
index 1626f5e..0000000
--- a/src/components/ToggleColorMode.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-	<div class="position-fixed corner">
-		<template v-if="store.colorMode === 'dark'">
-			<IFaSolidSun @click="store.toggleColorMode" />
-		</template>
-		<template v-else>
-			<IFaMoonO @click="store.toggleColorMode" />
-		</template>
-	</div>
-</template>
-
-<style scoped>
-.corner {
-	right: 10px;
-	bottom: 10px;
-}
-</style>
-
-<script setup lang="ts">
-import { useStateStore } from "@/stores/stateStore";
-
-const store = useStateStore();
-</script>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 261de41..ae98472 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -10,7 +10,7 @@
 		</div>
 		<SharedFooter />
 	</div>
-	<ToggleColorMode />
+	<ColorMode />
 </template>
 
 <style scoped>
diff --git a/src/stores/stateStore.ts b/src/stores/stateStore.ts
index 5a41adb..ba6362a 100644
--- a/src/stores/stateStore.ts
+++ b/src/stores/stateStore.ts
@@ -6,21 +6,34 @@ import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
 
 export const useStateStore = defineStore("state", () => {
 
-	const colorMode = ref<string>("light");
-	const toggleColorMode = (): void => {
-		colorMode.value = colorMode.value === "dark" ? "light" : "dark";
-		const html = document.querySelector("html") as HTMLElement;
+	const colorMode = ref<string>("auto");
+	const setColorMode = (newMode: string): void => {
+		colorMode.value = newMode;
+		applyColorMode();
+	};
+	const applyColorMode = (): void => {
+		let css = "light";
+		if (colorMode.value === "auto") {
+			const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+			if (preferDark) {
+				css = "dark";
+			}
+		}
+		else if (colorMode.value == "dark") {
+			css = "dark";
+		}
+
+		const html = document.documentElement as HTMLElement;
 
 		// Theme used by Bootstrap
-		html.setAttribute('data-bs-theme', colorMode.value);
+		html.setAttribute('data-bs-theme', css);
 
 		// Theme class used by shiki syntax highlighting
-		if (colorMode.value === "dark") {
+		html.classList.remove("dark");
+		if (css === "dark") {
 			html.classList.add("dark");
-		} else {
-			html.classList.remove("dark");
 		}
-	};
+	}
 
 	const popoverList = ref<any[]>([]);
 	const tooltipList = ref<any[]>([]);
@@ -37,7 +50,10 @@ export const useStateStore = defineStore("state", () => {
 		tooltipList.value = [...tooltipTriggerList].map(tooltip => new bootstrap.Tooltip(tooltip));
 	};
 
-	return { colorMode, toggleColorMode, initBootstrap }
+	return { colorMode, setColorMode, applyColorMode, initBootstrap }
 }, {
-	persist: process.env.NODE_ENV === 'development' ? true : false,
+	persist: {
+		pick: ["colorMode"],
+		storage: localStorage
+	}
 })