From 5cafe05fd13da5c9d00f149ed2687bfbbc715a4e Mon Sep 17 00:00:00 2001
From: lvzhenbo <294221990@qq.com>
Date: Mon, 23 Sep 2024 23:35:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  |  4 ++--
 src/App.vue                | 31 +++++++++++++++++++++++++------
 src/components/Content.vue |  5 ++---
 src/utils/index.ts         |  5 -----
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 92e1612..b78aec5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# [滚动条在线编辑器](https://lvzhenbo.github.io/scrollbar-editor/)
+# [滚动条编辑器](https://lvzhenbo.github.io/scrollbar-editor/)
 
-[Scrollbar.app](https://github.com/henripar/scrollbar) 的中文优化版，在原版的基础上添加了自定义选择器名称和交汇处颜色。
+[Scrollbar.app](https://github.com/henripar/scrollbar) 的中文优化版，在原版的基础上添加了自定义选择器名称和交汇处颜色以及默认自动跟随系统主题功能（可自己手动切换，暂时不加入持久化）。
 
 ## 推荐 IDE 设置
 
diff --git a/src/App.vue b/src/App.vue
index b6f1b76..ed03910 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,48 @@
 <script setup lang="ts">
-  import { zhCN, dateZhCN, useOsTheme, darkTheme, lightTheme } from 'naive-ui';
+  import { zhCN, dateZhCN, useOsTheme, darkTheme, lightTheme, type GlobalTheme } from 'naive-ui';
   import hljs from 'highlight.js/lib/core';
   import css from 'highlight.js/lib/languages/css';
-  import { osThemeKey, switchThemeKey } from './utils';
+  import { switchThemeKey } from './utils';
 
   hljs.registerLanguage('css', css);
 
   const osThemeRef = useOsTheme();
-  const theme = computed(() => {
-    return osThemeRef.value === 'dark' && switchTheme.value ? darkTheme : lightTheme;
-  });
+  const theme = ref<GlobalTheme>(lightTheme);
+
   const switchTheme = ref(false);
+
+  onMounted(() => {
+    setTheme();
+  });
+
+  const setTheme = (val?: boolean) => {
+    if (val === true) {
+      theme.value = darkTheme;
+    } else if (val === false) {
+      theme.value = lightTheme;
+    } else {
+      theme.value = osThemeRef.value === 'dark' ? darkTheme : lightTheme;
+    }
+  };
+
   watch(
     osThemeRef,
     (val) => {
       if (val === 'dark') {
         switchTheme.value = true;
+        setTheme(true);
       } else {
         switchTheme.value = false;
+        setTheme(false);
       }
     },
     { immediate: true },
   );
 
-  provide(osThemeKey, osThemeRef);
+  watch(switchTheme, (val) => {
+    setTheme(val);
+  });
+
   provide(switchThemeKey, switchTheme);
 </script>
 
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 0cdbfad..31b7815 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -110,12 +110,11 @@
   import { useClipboard } from '@vueuse/core';
   import { WeatherMoon16Regular, WeatherSunny16Regular } from '@vicons/fluent';
   import { GithubFilled } from '@vicons/antd';
-  import { osThemeKey, switchThemeKey } from '@/utils';
+  import { switchThemeKey } from '@/utils';
 
-  const osThemeRef = inject(osThemeKey);
   const switchTheme = inject(switchThemeKey);
   const codeBg = computed(() => {
-    return osThemeRef?.value === 'dark' && switchTheme?.value ? 'bg-slate-950' : 'bg-slate-50';
+    return switchTheme?.value ? 'bg-slate-950' : 'bg-slate-50';
   });
   const message = useMessage();
   const { copy } = useClipboard();
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3765d45..cce6ae2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1 @@
-import { useOsTheme } from 'naive-ui';
-
-const osThemeRef = useOsTheme();
-
-export const osThemeKey = Symbol() as InjectionKey<typeof osThemeRef>;
 export const switchThemeKey = Symbol() as InjectionKey<Ref<boolean>>;