修复主题问题

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 设置
 

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>
 

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();

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>>;