主题切换功能

Author: Linho1219

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <s-page theme="auto" id="soberpage">
+  <s-page theme="auto" id="soberpage" ref="soberPage" :class="theme.value">
     <s-drawer>
       <Navbar @toggle-drawer="toogleDrawer" />
       <s-drawer
@@ -27,9 +27,16 @@ import Navbar from "./ui/navbar.vue";
 import Graph from "./graph/index.vue";
 import Editor from "./editor/index.vue";
 
-import { ref } from "vue";
-
-
+import { ref, watchEffect } from "vue";
+import { useTheme } from "@/consts";
+const theme = useTheme();
+const soberPage = ref<HTMLElementTagNameMap["s-page"]>();
+watchEffect(() =>
+  soberPage.value?.toggle(
+    theme.value,
+    document.getElementById("themeTrigger") ?? undefined
+  )
+);
 
 // Drawer toogle
 const innerDrawer = ref<HTMLElementTagNameMap["s-drawer"]>();

src/graph/graph.vue

@@ -101,12 +101,18 @@ onMounted(async () => {
   margin: auto;
   color: black;
   user-select: none;
+  transition: filter 1ms;
 }
+
 @media (prefers-color-scheme: dark) {
-  #graphRender {
+  s-page.auto #graphRender {
     filter: invert(100%) hue-rotate(180deg) brightness(133%);
   }
 }
+s-page.dark #graphRender {
+  filter: invert(100%) hue-rotate(180deg) brightness(133%);
+}
+
 .onresize #graphRender {
   left: 50%;
   right: unset;

src/graph/index.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import Graph from "./graph.vue";
 import { computed, onMounted, ref } from "vue";
-import { debounce } from "lodash-es";
+import { throttle } from "lodash-es";
 import { useProfile } from "@/consts";
 
 const graphWidth = ref(0),
@@ -24,10 +24,10 @@ const fullUpdateState = ref(false);
 const shellRef = ref<HTMLDivElement>();
 onMounted(() => {
   const observer = new ResizeObserver(
-    debounce(() => {
+    throttle(() => {
       graphWidth.value = shellRef.value!.clientWidth;
       graphHeight.value = shellRef.value!.clientHeight;
-    }, 250)
+    }, 180)
   );
   observer.observe(shellRef.value!);
 });
@@ -45,7 +45,7 @@ emitter.on("require-full-update", () => {
   fullUpdateState.value = true;
   graphKey.value++;
 });
-emitter.on('require-post-update', () => {
+emitter.on("require-post-update", () => {
   graphKey.value++;
 });
 </script>

src/i18n.ts

@@ -19,6 +19,8 @@ export default {
         confirm: "确定",
         language: "语言",
         repo: "GitHub 仓库",
+        toogleTheme: '切换主题',
+        copy: "复制",
       },
       graphType: {
         interval: "默认",
@@ -54,6 +56,7 @@ export default {
         source: "数据源",
         importSuccess: "导入成功",
         importFail: "导入失败",
+        copySuccess: "已复制",
       },
     },
     "en-US": {
@@ -70,6 +73,8 @@ export default {
         confirm: "Confirm",
         language: "Language",
         repo: "GitHub Repo",
+        toogleTheme: 'Toggle Theme',
+        copy: "Copy",
       },
       graphType: {
         interval: "Interval",
@@ -105,6 +110,7 @@ export default {
         source: "Data Source",
         importSuccess: "Import success",
         importFail: "Import failed",
+        copySuccess: "Copied",
       },
     },
   },

src/ui/icons/autotheme.vue

@@ -0,0 +1,9 @@
+<template>
+  <s-icon>
+    <svg viewBox="0 -960 960 960">
+      <path
+        d="M440-200q52 0 99-21t81-60q-128-8-214-99.5T320-600q0-13 1-25.5t3-24.5q-57 32-90.5 88T200-440q0 100 70 170t170 70Zm0 80q-134 0-227-93t-93-227q0-134 93-227t227-93q5 0 10 .5t10 .5q-29 32-44.5 73T400-600q0 100 70 170t170 70q31 0 60.5-7.5T756-390q-18 118-108 194t-208 76Zm112-400 128-360h80l128 360h-76l-28-80H656l-28 80h-76Zm122-134h92l-46-146-46 146ZM407-381Z"
+      ></path>
+    </svg>
+  </s-icon>
+</template>

src/ui/navbar.vue

@@ -9,15 +9,30 @@
       </span>
     </div>
 
+    <s-tooltip slot="action" id="themeTrigger">
+      <s-icon-button slot="trigger" @click="theme.toogle">
+        <SIconAutoTheme v-if="theme.index === 0" />
+        <s-icon
+          v-else
+          :name="theme.index - 1 ? 'light_mode' : 'dark_mode'"
+        ></s-icon>
+      </s-icon-button>
+      {{ t("buttons.toogleTheme") }}
+    </s-tooltip>
+
     <s-picker
       slot="action"
       v-model.lazy="locale"
       id="language"
       :label="t('inputs.language')"
     >
-      <s-icon-button slot="trigger">
-        <SIconLanguage />
-      </s-icon-button>
+      <s-tooltip slot="trigger">
+        <s-icon-button slot="trigger">
+          <SIconLanguage />
+        </s-icon-button>
+        {{ t("buttons.language") }}
+      </s-tooltip>
+
       <s-picker-item value="zh-CN" selected>简体中文</s-picker-item>
       <s-picker-item value="en-US">English</s-picker-item>
     </s-picker>
@@ -38,6 +53,7 @@ const { locale, t } = useI18n();
 
 import SIconLanguage from "@/ui/icons/language.vue";
 import SIconGtihub from "@/ui/icons/github.vue";
+import SIconAutoTheme from "@/ui/icons/autotheme.vue";
 
 const lang = ref("");
 
@@ -48,6 +64,9 @@ function openGithub() {
 }
 
 const emit = defineEmits(["toggleDrawer"]);
+
+import { useTheme } from "@/consts";
+const theme = useTheme();
 </script>
 
 <style>
@@ -56,6 +75,10 @@ const emit = defineEmits(["toggleDrawer"]);
   z-index: 9;
 }
 
+#themeTrigger s-icon {
+  z-index: -1;
+}
+
 .nav-title {
   font-size: 20px;
   font-weight: bold;