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 18993ad..b7d7937 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
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
+	}
 })
