feat: sharedComposable for dark mode

README.md

@@ -37,7 +37,9 @@
 
 ### Features
 
-本项目支持 PWA，使用浏览器打开时，可将其添加到主屏幕以获得近原生 APP 的体验。
+~~本项目支持 PWA，使用浏览器打开时，可将其添加到主屏幕以获得近原生 APP 的体验。~~
+
+我们正在开发新的 APP 版本，敬请期待。
 
 ## 开发
 

app/app.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useIndexedDB } from '~/composables/db'
-import { appName } from '~/constants'
-import { ionDarkClass } from './composables/dark'
 // import { installPrompt } from './utils/pwa'
+import { isClient } from '@vueuse/core'
+import { useIndexedDB } from '~/composables/db'
+import { appName, ionDarkClass } from '~/constants'
 
 // https://nuxt.com/docs/api/composables/use-head
 useHead({
@@ -16,18 +16,22 @@ useHead({
 })
 
 const indexedDB = useIndexedDB()
+const { isDark } = useDarkMode()
 
 onMounted(() => {
   // init dark mode
-  if (isDark.value) {
+  if (isClient) {
-    document.documentElement.classList.add(ionDarkClass)
+    if (isDark.value) {
-  }
+      document.documentElement.classList.add(ionDarkClass)
-  else {
+    }
-    document.documentElement.classList.remove(ionDarkClass)
+    else {
+      document.documentElement.classList.remove(ionDarkClass)
+    }
+
+    indexedDB.init()
   }
 
   // installPrompt()
-  indexedDB.init()
 })
 </script>
 

app/components/common/DarkToggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const color = useColorMode()
+const { color, toggleDark } = useDarkMode()
 
 useHead({
   meta: [{
@@ -8,10 +8,6 @@ useHead({
     content: () => color.value === 'dark' ? '#222222' : '#ffffff',
   }],
 })
-
-function toggleDark() {
-  color.preference = color.value === 'dark' ? 'light' : 'dark'
-}
 </script>
 
 <template>

app/composables/dark.ts

@@ -1,9 +1,15 @@
-export const color = useColorMode()
+import { ionDarkClass } from '~/constants'
-export const isDark = computed(() => color.value === 'dark')
 
-export const ionDarkClass = 'ion-palette-dark'
+export const useDarkMode = createSharedComposable(() => {
+  const color = useColorMode()
+  const isDark = computed(() => color.value === 'dark')
 
-export function toggleDark() {
+  return {
-  color.preference = color.value === 'dark' ? 'light' : 'dark'
+    color,
-  document.documentElement.classList.toggle(ionDarkClass, !isDark.value)
+    isDark,
-}
+    toggleDark() {
+      color.preference = color.value === 'dark' ? 'light' : 'dark'
+      document.documentElement.classList.toggle(ionDarkClass, !isDark.value)
+    },
+  }
+})

app/constants/index.ts

@@ -7,3 +7,5 @@ export const lastDbUpdated = '2023-11-11 19:51:02'
 export const icp = '苏ICP备17038157号'
 
 export * from './links'
+
+export const ionDarkClass = 'ion-palette-dark'

app/pages/help.vue

@@ -42,11 +42,7 @@
         </FAQItem>
 
         <FAQItem title="是否有 APP?">
-          <b>暂时没有开发 APP 的计划。</b>
+          <b>正在开发中，尽请期待。</b>
-          <br>
-          但我们正在优化 <b>PWA</b> 的体验，以便您可以直接将本站添加到桌面，并享受<b>类似 APP 的体验</b>。
-          <br>
-          你可以使用浏览器打开，点击上方的<b>「安装到桌面」</b>或在菜单中点击<b>「添加到主屏幕」</b>。
         </FAQItem>
 
         <FAQItem title="未来是否会收费？">

app/pages/settings.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+const { isDark, toggleDark } = useDarkMode()
+
 const app = useAppStore()
 
 definePageMeta({

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "2.0.0-beta.6",
   "private": true,
-  "packageManager": "pnpm@10.18.0",
+  "packageManager": "pnpm@10.18.1",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },