Feature/color mode (#4)

* feat: 新增 darkmode 支持

* build: add package pinia

* fix: sync NaiveUI color mode

* fix: Hydration render problem

* build: update install lock

* feat: add default color mode

* feat: add Settings

* build: update packages

Author: shiny

app.vue

@@ -3,12 +3,13 @@
     <NuxtPage />
   </NaiveConfig>
 </template>
-<script setup>
+<script setup lang="ts">
 useServerHead({
   link: [{
     rel: 'icon',
     type: 'image/png',
     href: '/icon.png'
   }]
 })
+
 </script>

components/settings/ColorMode.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="h-14 w-14 p-3.5 text-gray-500 hover:text-gray-900 hover:dark:text-gray-300" @click="toggleColorMode">
+        <Icon class="w-full h-full" name="ph:moon" v-if="modeActually === 'dark'"></Icon>
+        <Icon class="w-full h-full" name="ph:sun" v-else-if="modeActually === 'light'"></Icon>
+    </div>
+</template>
+<script setup lang="ts">
+type MODE = 'system' | 'dark' | 'light'
+const colorMode = useColorMode()
+const { colorModePreference } = useNaiveColorMode()
+const mode = ref<MODE>(colorModePreference.value as MODE)
+/** Sync NaiveUI color mode settings */
+watch(mode, (value) => {
+    colorMode.preference = value
+})
+const targetMode = computed(() => {
+    switch(colorModePreference.value) {
+        case 'light':
+            return 'dark'
+        case 'dark':
+            return 'light'
+        case 'system':
+            return isSystemInDarkMode ? 'light' : 'dark'
+    }
+})
+
+function toggleColorMode() {
+    mode.value = targetMode.value
+    colorMode.preference = targetMode.value
+    colorModePreference.value = targetMode.value
+}
+
+const modeActually = computed(() => {
+    if (mode.value === 'system') {
+        return isSystemInDarkMode.value ? 'dark' : 'light'
+    } else {
+        return mode.value
+    }
+})
+
+const isSystemInDarkMode = computed(() => {
+    if(typeof window === 'undefined') {
+        return false
+    } 
+    if (!window.matchMedia) {
+    return false
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+})
+</script>
+<style scoped>
+
+:deep(.n-switch .n-switch__rail) {
+  @apply w-full h-full rounded-full;
+}
+</style>

components/settings/FontSize.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="items-center transition-all flex gap-0.5 h-14 overflow-hidden" :class="{ 'w-64': expended, 'w-14': !expended }">
+    <div class="items-center transition-all flex gap-0.5 h-14 text-gray-500 hover:text-gray-900 hover:dark:text-gray-300 overflow-hidden" :class="{ 'w-64': expended, 'w-14': !expended }">
         <div class="flex-none w-14 text-center" @click="expended = !expended">
             <Icon class="w-8 h-8" name="fluent:text-font-16-regular" />
         </div>

nuxt.config.ts

@@ -10,19 +10,20 @@ export default defineNuxtConfig({
     '@nuxt/content',
     'nuxt-icon',
     '@nuxt/image',
+    '@nuxtjs/color-mode'
   ],
   content: {
     documentDriven: true
   },
   naiveui: {
-    colorModePreference: "light",
     iconSize: 18,
+    colorModePreference: 'system',
     themeConfig: {
       shared: {
         common: {
-          primaryColor: '#F25739'
+          primaryColor: '#F25739',
         }
-      }
+      },
     },
   },
   image: {
@@ -45,5 +46,10 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
+  colorMode: {
+    preference: 'system',
+    fallback: 'dark',
+    classSuffix: ''
+  },
   devtools: { enabled: true }
 })

package.json

@@ -10,19 +10,23 @@
     "publish": "wrangler deploy"
   },
   "devDependencies": {
-    "@bg-dev/nuxt-naiveui": "^1.2.1",
-    "@nuxt/content": "^2.7.0",
+    "@bg-dev/nuxt-naiveui": "^1.2.2",
+    "@nuxt/content": "^2.7.1",
     "@nuxt/devtools": "latest",
     "@nuxt/image": "1.0.0-rc.1",
-    "@types/node": "^18.16.19",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@types/node": "^18.17.0",
     "autoprefixer": "^10.4.14",
     "naive-ui": "^2.34.4",
-    "nuxt": "^3.6.3",
-    "postcss": "^8.4.26",
+    "nuxt": "^3.6.5",
+    "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "wrangler": "^3.3.0"
   },
   "dependencies": {
-    "nuxt-icon": "^0.4.2"
+    "@pinia-plugin-persistedstate/nuxt": "^1.1.1",
+    "@pinia/nuxt": "^0.4.11",
+    "nuxt-icon": "^0.4.2",
+    "pinia": "^2.1.4"
   }
 }

pages/[...slug].vue

@@ -1,26 +1,30 @@
 <template>
   <div class="app">
     <div class="max-w-7xl m-auto flex">
-      <main class="flex gap-4 w-full max-w-3xl text-zinc-900 whitespace-pre-line ">
-        <ContentDoc class="p-10 leading-relaxed bg-neutral-50" :class="`text-${fontSize} paragraph-${fontSize}`" />
+      <main class="flex gap-4 w-full max-w-3xl text-zinc-900 dark:text-zinc-300 whitespace-pre-line ">
+        <ContentDoc class="p-10 leading-relaxed bg-neutral-50 dark:bg-neutral-800 " :class="`text-${fontSize} paragraph-${fontSize}`" />
         <div class="relative mb-3">
-          <div class="fixed bottom-3 bg-white rounded-full shadow">
-            <SettingsFontSize :default-value="fontSize" @change="(value) => fontSize = value" />
+          <div class="fixed bottom-3 flex flex-col gap-3">
+            <SettingsColorMode class="bg-stone-100 hover:bg-stone-50 dark:bg-stone-800 dark:hover:bg-stone-700 rounded-full shadow h-14 w-14" />
+            <SettingsFontSize
+              class="bg-stone-100 hover:bg-stone-50 dark:bg-stone-800 dark:hover:bg-stone-700 rounded-full shadow"
+              :default-value="fontSize"
+              @change="(value) => fontSize = value"
+            />
           </div>
         </div>
       </main>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-
 const { page } = useContent()
 useContentHead(page)
 const fontSize = ref('lg')
 </script>
 <style scoped>
 .app {
-  @apply bg-stone-200;
+  @apply bg-stone-200 dark:bg-stone-900;
 }
 :deep(.paragraph-base p){
   @apply py-1;
@@ -40,4 +44,5 @@ const fontSize = ref('lg')
 :deep(.paragraph-4xl p){
   @apply py-5;
 }
+
 </style>  

pages/index.vue

@@ -4,16 +4,16 @@
             <NuxtLink to="/" class="flex my-16">
                 <NuxtImg src="/icon.png" class="w-14 h-14 " />
                 <div class="ml-4">
-                    <h1 class="text-3xl font-black text-slate-900 songti">佛典电子化计划</h1>
+                    <h1 class="text-3xl font-black text-slate-900 dark:text-slate-200 songti">佛典电子化计划</h1>
                     <p class="description">用现代 Web 技术重排佛典</p>
                 </div>
             </NuxtLink>
             <ul class="flex">
                 <li>
-                    <NuxtLink class="flex transition bg-stone-50 hover:bg-white hover:shadow p-3 rounded" to="/xifangquezhi">
+                    <NuxtLink class="flex transition bg-stone-50 dark:bg-neutral-800 hover:bg-white dark:hover:bg-stone-800 hover:shadow p-3 rounded" to="/xifangquezhi">
                         <NuxtImg :width="128" class="w-16" src="/cover/xifangquezhi.jpg" />
                         <div class="p-3">
-                            <span class="font-semibold text-base mb-2 block">西方确指</span>
+                            <span class="dark:text-white font-semibold text-base mb-2 block">西方确指</span>
                             <p class="block text-gray-400 whitespace-pre-line text-[12px]">觉明妙行菩萨说
                             菩萨戒弟子常摄集</p>
                             <p class="text-gray-400 whitespace-pre-line text-[12px]">庐山东林寺印经处</p>
@@ -22,19 +22,19 @@
                 </li>
             </ul>
         </div>
-        <footer class="mt-10 w-full border-t">
+        <footer class="mt-10 w-full border-t dark:border-zinc-800">
             <section class="max-w-7xl m-auto text-[13px] py-5 text-gray-500">
-                <p class="text-sm kaiti text-zinc-600">
+                <div class="text-sm kaiti text-zinc-600 dark:text-zinc-200">
                     <h3>回向偈</h3>
-                    愿以此功德，
+                    <p>愿以此功德，
                     庄严佛净土。
                     上报四重恩，
                     下济三途苦。
                     若有见闻者，
                     悉发菩提心。
                     尽此一报身，
-                    同生极乐国。
-                </p>
+                    同生极乐国。</p>
+                </div>
                 <ul class="mt-3">
                     <li class="kaiti"></li>
                     <li>* 本项目与各地的护法寺均不存在任何关系</li>
@@ -52,9 +52,9 @@ useSeoMeta({
 <style scoped>
 
 .app {
-  @apply h-screen bg-[--background-color] bg-stone-100 relative;
+  @apply h-screen bg-[--background-color] bg-stone-100 dark:bg-stone-900 relative;
 }
 .description {
-    @apply text-gray-500 text-sm py-0 px-1;
+    @apply text-gray-500 dark:text-gray-400 text-sm py-0 px-1;
 }
 </style>