feat(site): the official website adds the function of dynamically switching between light and dark themes (#2911)

Author: zzcr

examples/sites/package.json

@@ -52,6 +52,7 @@
     "github-markdown-css": "~5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
+    "@vueuse/core": "^12.7.0",
     "prismjs": "^1.28.0",
     "sortablejs": "1.15.0",
     "tailwindcss": "^3.2.4",

examples/sites/src/views/components-doc/components/demo.vue

@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
   }
 }
 // 暗黑主题
-:global(html.dark-theme .pc-demo-container) {
+:global(html.dark .pc-demo-container) {
   background: #000;
 }
 

examples/sites/src/views/layout/layout.vue

@@ -2,6 +2,9 @@
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
     <div class="content-layout ti-fi-1" :has-sider="!isFrame">
       <div id="layoutSider" class="layout-sider" :class="{ 'saas-border': templateModeState.isSaas }" v-if="!isFrame">
+        <div style="padding: 10px 0; text-align: center">
+          <tiny-button :reset-time="0" type="info" @click="toggleDark()">{{ isDark ? 'dark' : 'light' }}</tiny-button>
+        </div>
         <tiny-tree-menu
           ref="treeMenuRef"
           class="main-menu"
@@ -65,6 +68,7 @@ import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from
 import useTheme from '@/tools/useTheme'
 import FloatSettings from '@/views/components-doc/components/float-settings.vue'
 import VersionTip from '@/views/components-doc/components/version-tip.vue'
+import { useDark, useToggle } from '@vueuse/core'
 
 export default defineComponent({
   name: 'LayoutVue',
@@ -103,6 +107,8 @@ export default defineComponent({
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
 
     const isThemeSaas = import.meta.env.VITE_TINY_THEME === 'saas'
+    const isDark = useDark()
+    const toggleDark = useToggle(isDark)
 
     const changeLanguage = () => {
       appFn.toggleLang()
@@ -191,6 +197,8 @@ export default defineComponent({
       getWord,
       i18nByKey,
       isThemeSaas,
+      isDark,
+      toggleDark,
       isShowFilter
     }
   }

packages/theme/src/base/dark-theme.less

@@ -1,5 +1,5 @@
 /* prettier-ignore */
-:root {
+:root.dark {
   /* 1.1品牌色 */
 
   /* 品牌主色 */

packages/theme/src/base/index.less

@@ -14,5 +14,5 @@
 @import './vars.less';
 // @import './old-theme.less';
 // @import './aurora-theme.less';
-// @import './dark-theme.less';
+@import './dark-theme.less';
 @import './transition.less';