impl dark mode

app.vue

@@ -70,6 +70,10 @@ useHead(() => ({
 
 <style>
 body {
+	@apply dark:text-white dark:bg-gray-900;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, meiryo, sans-serif;
 }
+.link {
+	@apply text-blue-700 dark:text-blue-200;
+}
 </style>

layouts/default.vue

@@ -11,7 +11,7 @@
   <main class="w-auto sm:w-10/12 mx-auto">
     <nuxt-page />
   </main>
-  <footer class="px-6 py-8 sm:px-12 sm:py-16 bg-gray-200">
+  <footer class="px-6 py-8 sm:px-12 sm:py-16 bg-gray-200 dark:bg-gray-800">
 		<div class="w-auto sm:w-10/12 mx-auto">
 			<h1 class="text-xl font-bold">Author</h1>
 			<div class="mt-4 flex items-center">
@@ -22,7 +22,7 @@
 		</div>
     <p class="mt-16 text-sm text-center">
       &copy; 2014
-      <a class="text-link underline hover:no-underline" href="https://blog.kzhrk.com">kzhrk</a>
+      <a class="link underline hover:no-underline" href="https://blog.kzhrk.com">kzhrk</a>
     </p>
   </footer>
 </template>

pages/[...slug].vue

@@ -5,6 +5,6 @@
 				<img src="/images/404.webp" width="320" height="180" alt="404 NOT FOUND" class="w-full">
 			</a>
 		</figure>
-		<p>&copy; 2024 <a href="https://twitter.com/sawaratsuki1004" class="text-link">@sawaratsuki1004</a></p>
+		<p>&copy; 2024 <a href="https://twitter.com/sawaratsuki1004" class="link">@sawaratsuki1004</a></p>
 	</div>
 </template>

pages/index.vue

@@ -43,7 +43,7 @@ useHead(() => ({
 	</section>
   <section class="px-6 sm:px-12 my-12" v-for="(post, i) in posts" :key="i">
     <h1 class="text-2xl">
-      <nuxt-link class="text-link underline hover:no-underline" :to="`/posts${post.path}`">
+      <nuxt-link class="link underline hover:no-underline" :to="`/posts${post.path}`">
         {{ post.title }}
       </nuxt-link>
     </h1>

pages/posts/[...slug].vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { format } from "date-fns";
 import hljs from "highlight.js";
-import "highlight.js/styles/github.css";
+import "highlight.js/styles/github-dark.css";
 
 const route = useRoute();
 const slug = route.params.slug as string[];
@@ -54,7 +54,7 @@ onMounted(() => {
   <section class="px-6 py-12 sm:p-12">
 		<h1 class="mb-4 text-3xl font-bold">{{ title }}</h1>
 		<div class="mb-10 flex items-center">
-			<time :datetime="date" class="text-sm text-gray-600">{{ formatedDate }}</time>
+			<time :datetime="date" class="text-sm text-gray-600 dark:text-gray-200">{{ formatedDate }}</time>
 			<ul v-if="tags" v-for="(tag, i) in tags" :key="i" class="flex gap-4 items-center ml-4">
 				<li>
 					<nuxt-link :to="`/?tags=${tag}`" class="text-sm block px-2 py-1 text-gray-700 bg-blue-100 hover:bg-blue-200">{{ tag }}</nuxt-link>
@@ -100,15 +100,18 @@ onMounted(() => {
   @apply mt-2 list-disc;
 }
 .html ul li::marker {
-  @apply text-gray-700;
+  @apply text-gray-700 dark:text-gray-200;
 }
 .html a {
-  @apply text-link underline hover:no-underline;
+  @apply underline hover:no-underline;
 }
 .html pre {
 	@apply my-8;
 }
 .html code {
-	@apply bg-gray-100;
+	@apply bg-gray-100 dark:bg-gray-500;
+}
+.html pre code {
+	@apply bg-gray-700;
 }
 </style>

server/api/posts/[...slug].ts

@@ -15,6 +15,9 @@ export default defineEventHandler(async (event) => {
 		const tag = `h${level}`;
 		return `<${tag} id="${text}" class="heading">${text}<a href="#${text}" class="heading-anchor-icon" aria-hidden="true">アンカーリンク</a></${tag}>`;
 	};
+	renderer.link = (href, _title, text) => {
+		return `<a href="${href}" class="link">${text}</a>`;
+	};
 	const html = parse(content, {
 		renderer,
 	});

tailwind.config.js

@@ -4,7 +4,6 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
-				link: "#1c3c7c",
 				white: "#fff",
 			},
 		},