feat: add dark mode toggle button to reader

LightNovelShelf · Aug 11, 2024 · 8114eb7 · 8114eb7
1 parent 58c1ae7
commit 8114eb7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/assets/icon/export.ts b/src/assets/icon/export.ts
@@ -13,6 +13,7 @@ export {
   mdiBroadcast,
   mdiBroadcastOff,
   mdiBell,
+  mdiBrightnessAuto,
   mdiHistory,
   mdiMessageText,
   mdiCog,
@@ -102,6 +103,8 @@ export {
   mdiContentSave,
   mdiSquareEditOutline,
   mdiWalletOutline,
+  mdiWeatherNight,
+  mdiWeatherSunny,
   mdiAccountCog,
   mdiPen,
   mdiFuriganaHorizontal,

diff --git a/src/views/Book/Read/Read.vue b/src/views/Book/Read/Read.vue
@@ -62,6 +62,17 @@
             目录
           </q-tooltip>
         </q-fab-action>
+        <q-fab-action
+          @click="toggleDark"
+          color="primary"
+          :icon="
+            Dark.mode === 'auto' ? icon.mdiBrightnessAuto : Dark.mode ? icon.mdiWeatherNight : icon.mdiWeatherSunny
+          "
+        >
+          <q-tooltip transition-show="scale" transition-hide="scale" anchor="center left" self="center right">
+            切换颜色模式
+          </q-tooltip>
+        </q-fab-action>
         <q-fab-action
           v-if="$q.fullscreen.isCapable && !readSetting['hideFullScreen']"
           @click="$q.fullscreen.toggle()"
@@ -221,6 +232,19 @@ const bgStyle = computed(() => ({
   backgroundColor: readSetting.bgType === 'custom' ? readSetting.customColor : 'initial'
 }))
 
+const { dark } = storeToRefs(settingStore)
+watch(dark, (newDark) => {
+  Dark.set(newDark)
+  settingStore.save()
+})
+function toggleDark() {
+  if (Dark.mode === 'auto') {
+    dark.value = !Dark.isActive
+  } else {
+    dark.value = !Dark.mode
+  }
+}
+
 const readStyle = computed(() => ({
   fontSize: readSetting.fontSize + 'px',
   textAlign: readSetting.justify ? 'justify' : 'initial',