feat(ThemeSelect): 增加下拉选择切换主题

Author: Tenny

docs/.vitepress/theme/index.ts

@@ -42,6 +42,7 @@ import '../../../style/tanstack-table';
 import '../../../style/md-input';
 import '../../../style/virtual-list';
 import '../../../style/theme-button';
+import '../../../style/theme-select';
 
 export default {
   extends: DefaultTheme,

docs/components/theme.md

@@ -20,12 +20,12 @@ createApp(App).use(router).mount('#app');
 :::
 
 <script setup>
-  import { ThemeButton } from '../../src'
+  import { ThemeButton, ThemeSelect } from '../../src'
 </script>
 
 ### 基本使用
 
-通过按钮切换主题模式
+提供多种风格的主题切换按钮: 按钮、下拉选择、单选按钮组、开关
 
 <ClientOnly>
   <CodePreview>
@@ -38,6 +38,7 @@ createApp(App).use(router).mount('#app');
   </textarea>
   <template #preview>
     <ThemeButton></ThemeButton>
+    <ThemeSelect class="ml-10"></ThemeSelect>
   </template>
   </CodePreview>
 </ClientOnly>

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+<template>
+  <SelectOri :options="options" v-model="theme"></SelectOri>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import SelectOri from '../SelectOri.vue';
+import { getTheme, applyTheme } from 'ph-utils/theme';
+
+const options = [
+  {
+    label: '跟随系统',
+    value: 'auto',
+  },
+  {
+    label: '浅色模式',
+    value: 'light',
+  },
+  {
+    label: '深色模式',
+    value: 'dark',
+  },
+];
+
+const theme = ref(getTheme());
+
+watch(theme, (val) => {
+  applyTheme(val as 'auto').then();
+});
+</script>
+
+<style></style>

src/components/theme/ThemeSelect.vue

@@ -74,3 +74,4 @@ export { default as Pagination } from './components/Pagination.vue';
 export { default as VirtualList } from './components/VirtualList.vue';
 
 export { default as ThemeButton } from './components/theme/ThemeButton.vue';
+export { default as ThemeSelect } from './components/theme/ThemeSelect.vue';

src/index.ts

@@ -7,7 +7,6 @@
   height: var(--nt-form-edit-height, 32px);
   border: 1px solid #dedede;
   transition: border-color 0.3s;
-  background-color: #ffffff;
   text-align: inherit;
   padding: 0 5px;
   border-radius: 3px;

style/input/index.css

@@ -1,15 +1,13 @@
 .nt-theme-btn {
+  --nt-btn-background: transparent;
+  --nt-btn-hover-background: transparent;
   --nt-btn-text-color: rgb(156, 163, 175);
   --nt-btn-hover-text-color: #666666;
   width: var(--nt-form-edit-height, 32px);
   padding: 0;
   font-size: 20px;
 }
 
-@media (prefers-color-scheme: dark) or (html.dark) {
-  .nt-theme-btn {
-    --nt-btn-border-color: #ffffff;
-    --nt-btn-background: transparent;
-    --nt-btn-text-color: red;
-  }
+html.dark .nt-theme-btn {
+  --nt-btn-hover-text-color: #ffffff;
 }

style/theme-button/index.css

@@ -0,0 +1,2 @@
+import '../select-ori/index.css';
+import './index.css';