Implement dark theme colors

nuxt.config.ts

@@ -9,7 +9,10 @@ export default defineNuxtConfig({
 		build: {
 			markdown: {
 				highlight: {
-					theme: "github-light",
+					theme: {
+						default: 'github-light',
+						dark: 'github-dark',
+					},
 					langs: [
 						// https://github.com/shikijs/shiki/blob/main/packages/langs/package.json
 						"c", "cpp", "css", "html", "js", "json", "lua", "md", "mdc", "php", "shell", "ts", "vue", "yaml"

src/assets/css/style.css

@@ -2,8 +2,13 @@
 /* General */
 
 :root {
-	--w-code-background-color: #818b981f;
-    --w-pre-background-color: #f6f8fa;
+	--bs-secondary-bg: #f6f8fa;
+	--bs-tertiary-bg: #818b981f;
+}
+
+[data-bs-theme=dark] {
+	--bs-secondary-bg: #262a2f;
+	--bs-tertiary-bg: #2b3137;
 }
 
 html {
@@ -12,12 +17,16 @@ html {
 }
 
 body {
-	background-color: #f4f4f4;
+	background-color: var(--bs-light-bg-subtle);
+}
+
+[data-bs-theme=dark] body {
+	background-color: var(--bs-dark-bg-subtle);
 }
 
 /* Main content */
 /*----------------------------------------*/
 
 a:hover {
-	color: #818080 !important;
+	color: var(--bs-link-color) !important;
 }

src/components/articles/TableOfContents.vue

@@ -24,7 +24,7 @@
 		left: calc(100vw - (100vw - 960px) / 2 + 12px);
 		padding: 20px 5px 20px 0;
 		border-radius: 6px;
-		background-color: #fff;
+		background-color: var(--bs-body-bg);
 	}
 }
 

src/components/shared/NavMenu.vue

@@ -30,6 +30,6 @@ nav {
 }
 
 [data-bs-theme=dark] nav {
-	box-shadow: 0 .25rem .5rem rgba(255, 0, 0, .28);
+	box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .23);
 }
 </style>

src/layouts/default.vue

@@ -23,7 +23,7 @@
 	min-height: calc(100vh - 104px - .5rem);
 	padding: 20px 20px 50px 20px;
 
-	background-color: #fff;
+	background-color: var(--bs-body-bg);
 }
 
 @media (min-width: 576px) {

src/pages/articles/[slug].vue

@@ -40,7 +40,7 @@
 	justify-content: space-between;
 	margin-bottom: 1rem;
 	padding: 1rem;
-	background-color: var(--w-pre-background-color);
+	background-color: var(--bs-secondary-bg);
 }
 
 /* Select <code> and <code class="shiki"> */
@@ -49,7 +49,7 @@
 	margin: 0;
 	font-size: 85%;
 	white-space: break-spaces;
-	background-color: var(--w-code-background-color);
+	background-color: var(--bs-tertiary-bg);
 	border-radius: 6px;
 }
 

src/stores/stateStore.ts

@@ -10,7 +10,16 @@ export const useStateStore = defineStore("state", () => {
 	const toggleColorMode = (): void => {
 		colorMode.value = colorMode.value === "dark" ? "light" : "dark";
 		const html = document.querySelector("html") as HTMLElement;
+
+		// Theme used by Bootstrap
 		html.setAttribute('data-bs-theme', colorMode.value);
+
+		// Theme class used by shiki syntax highlighting
+		if (colorMode.value === "dark") {
+			html.classList.add("dark");
+		} else {
+			html.classList.remove("dark");
+		}
 	};
 
 	const popoverList = ref<any[]>([]);