docs: add change theme (#231)

Author: kagol

packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue

@@ -1,20 +1,39 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { ThemeServiceInit, devuiLightTheme, devuiDarkTheme } from 'devui-theme'
+import {
+  ThemeServiceInit,
+  devuiLightTheme, devuiDarkTheme,
+  infinityTheme, provenceTheme, sweetTheme, deepTheme, galaxyTheme
+} from 'devui-theme'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
 import ToggleSideBarButton from './ToggleSideBarButton.vue'
-import DarkMode from './icons/DarkMode.vue'
-import LightMode from './icons/LightMode.vue'
 import ZhLang from './icons/ZhLang.vue'
 import EnLang from './icons/EnLang.vue'
-
-const defaultDarkMode = !!localStorage.getItem('dark_mode')
-const darkMode = ref(defaultDarkMode)
+import Theme from './icons/Theme.vue'
+
+// 主题切换
+const THEME_MAP = {
+  'devui-light-theme': devuiLightTheme,
+  'devui-dark-theme': devuiDarkTheme,
+  'infinity-theme': infinityTheme,
+  'provence-theme': provenceTheme,
+  'sweet-theme': sweetTheme,
+  'deep-theme': deepTheme,
+  'galaxy-theme': galaxyTheme,
+}
+const themes = Object.keys(THEME_MAP)
+const userCustomTheme = localStorage.getItem('user-custom-theme') || themes[0]
 const themeService = ThemeServiceInit({
-  defaultTheme: getThemeByDarkMode(darkMode.value)
-}, 'defaultTheme')
+  ...THEME_MAP
+}, userCustomTheme)
+let themeIndex = themes.findIndex(item => item === userCustomTheme)
+const changeTheme = () => {
+  themeIndex = (themeIndex + 1) % themes.length
+  themeService.applyTheme(THEME_MAP[themes[themeIndex]])
+}
 
+// 国际化
 const defaultLanguage = ref(localStorage.getItem('preferred_lang'))
 function useTranslation(target) {
   defaultLanguage.value = target
@@ -26,18 +45,6 @@ function useTranslation(target) {
   }
 }
 
-function getThemeByDarkMode(target) {
-  return target ? devuiDarkTheme : devuiLightTheme
-}
-
-watch(
-  () => darkMode.value,
-  (darkMode, prevDarkMode) => {
-    localStorage.setItem('dark_mode', darkMode ? true : '')
-    themeService.applyTheme(getThemeByDarkMode(darkMode))
-  }
-)
-
 defineEmits(['toggle'])
 </script>
 
@@ -65,8 +72,7 @@ defineEmits(['toggle'])
             <EnLang v-else></EnLang>
           </div>
           <div class="custom-nav-item flex items-center ml-m">
-            <DarkMode v-if="darkMode" @click="darkMode = !darkMode"></DarkMode>
-            <LightMode v-else @click="darkMode = !darkMode"></LightMode>
+            <Theme @click="changeTheme"></Theme>
           </div>
           <a class="custom-nav-item ml-m" style="font-size: 0;user-select:none" href="https://github.com/DevCloudFE/vue-devui" target="_blank">
             <svg viewBox="0 0 20 20" width="18" height="18"><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg>
@@ -95,9 +101,6 @@ defineEmits(['toggle'])
   padding: 0.7rem 1.5rem 0.7rem 4rem;
   height: var(--header-height);
   background-color: $devui-base-bg;
-  &:hover {
-    cursor: pointer;
-  }
 }
 
 @media (min-width: 720px) {
@@ -125,6 +128,8 @@ defineEmits(['toggle'])
 }
 
 .custom-nav-item:hover {
+  cursor: pointer;
+
   svg,
   path {
     fill: $devui-brand;

packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue

@@ -32,6 +32,7 @@ function gopage() {
 
 .nav-bar-title:hover {
   text-decoration: none;
+  cursor: pointer;
 }
 
 .logo {

packages/devui-vue/docs/.vitepress/devui-theme/components/icons/Theme.vue

@@ -0,0 +1,25 @@
+<template>
+    <svg
+        t="1646706273071"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1242"
+        width="20"
+        height="20"
+    >
+        <path
+            d="M361.28 853.67h-1c-64.14-0.32-111.49-30-124.48-39.09-33.47-23.43-61.42-63.11-80.82-114.74-17.15-45.65-26.6-98.32-26.6-148.33 0-51.48 10.21-101.42 30.34-148.46 19.43-45.39 47.23-86.14 82.63-121.12 35.37-34.95 76.56-62.4 122.43-81.57 47.48-19.84 97.89-29.91 149.83-29.91 51.95 0 102.36 10.06 149.83 29.91 45.87 19.17 87.06 46.61 122.43 81.57 35.4 34.98 63.2 75.73 82.63 121.12 20.13 47.03 30.34 96.98 30.34 148.46 0 32.15 0 72.16-15.91 107.63-9.52 21.23-29.24 33.94-58.62 37.78-19.38 2.54-41.77 1.44-67.69 0.18-75-3.65-168.33-8.2-233.38 73.46-54.6 68.56-118.02 83.1-161.96 83.11z m152.35-619.22c-85.88 0-166.59 33.03-227.28 93-60.59 59.87-93.95 139.44-93.95 224.05 0 42.51 7.99 87.19 22.51 125.82 14.63 38.93 35.09 69.05 57.61 84.82 18.84 13.19 51.87 27.34 88.09 27.52h0.7c43.07 0 80.71-19.84 111.9-58.99 85.48-107.3 206.48-101.41 286.55-97.51 18.63 0.91 34.72 1.69 47.68 1.03 11.04-0.57 15.96-2.07 17.8-2.83 9.62-22.81 9.62-53.08 9.62-79.86 0-84.62-33.37-164.19-93.95-224.05-60.69-59.97-141.41-93-227.28-93z m310.93 398.49c-0.01 0-0.01 0 0 0-0.01 0-0.01 0 0 0z"
+            p-id="1243"
+        />
+        <path
+            d="M271.62 644.31a66.11 66.57 0 1 0 132.22 0 66.11 66.57 0 1 0-132.22 0Z"
+            p-id="1244"
+        />
+        <path d="M293.45 451.7a51.63 52 0 1 0 103.26 0 51.63 52 0 1 0-103.26 0Z" p-id="1245" />
+        <path d="M437.12 335.46a49.05 49.4 0 1 0 98.1 0 49.05 49.4 0 1 0-98.1 0Z" p-id="1246" />
+        <path d="M599.66 367.02a49.04 49.39 0 1 0 98.08 0 49.04 49.39 0 1 0-98.08 0Z" p-id="1247" />
+        <path d="M681.94 504.15a49.04 49.39 0 1 0 98.08 0 49.04 49.39 0 1 0-98.08 0Z" p-id="1248" />
+    </svg>
+</template>

packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss

@@ -269,3 +269,22 @@ $max-width: 1440px;
   }
 }
 
+[ui-theme=infinity-theme], [ui-theme=galaxy-theme] {
+  .nav-bar {
+    background-color: $devui-base-bg !important;
+  }
+}
+
+[ui-theme=sweet-theme], [ui-theme=provence-theme], [ui-theme=deep-theme] {
+  .nav-bar {
+    background-color: $devui-brand !important;
+
+    a {
+      color: #fff !important;
+    }
+
+    svg, path, polygon {
+      fill: #fff !important;
+    }
+  }
+}