@varlet/cli 2.20.5-alpha.1703836585426 → 3.0.0-alpha.1704352780759

package/lib/client/index.d.ts

@@ -5,7 +5,7 @@ interface PCLocationInfo {
     menuName: string;
     hash: string;
 }
-export type Theme = 'lightTheme' | 'darkTheme';
+export type Theme = 'lightTheme' | 'darkTheme' | 'md3LightTheme' | 'md3DarkTheme';
 export type StyleVars = Record<string, string>;
 export declare function getPCLocationInfo(): PCLocationInfo;
 export declare function getBrowserTheme(): Theme;
@@ -13,7 +13,8 @@ export declare function watchLang(cb: (lang: string) => void, platform?: 'pc' |
 export declare function withSiteConfigNamespace(styleVars: Record<string, any>): StyleVars;
 export declare function watchPlatform(cb: (platform: string) => void): void;
 export declare function useRouteListener(cb: () => void): void;
-export declare function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void): void;
+export declare function setTheme(theme: Theme): void;
+export declare function onThemeChange(cb?: (theme: Theme) => void): void;
 export declare function getSiteStyleVars(theme: Theme): StyleVars;
 export declare function setColorScheme(theme: Theme): void;
 export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;

package/lib/client/index.js

@@ -19,13 +19,13 @@ function getHashSearch() {
 }
 export function getBrowserTheme() {
     const themeKey = get(config, 'themeKey');
-    const darkThemeConfig = get(config, 'darkTheme');
-    if (!darkThemeConfig) {
-        return 'lightTheme';
-    }
+    const defaultLightTheme = get(config, 'defaultLightTheme');
+    const defaultDarkTheme = get(config, 'defaultDarkTheme');
     const storageTheme = window.localStorage.getItem(themeKey);
     if (!storageTheme) {
-        const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkTheme' : 'lightTheme';
+        const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+            ? defaultDarkTheme
+            : defaultLightTheme;
         window.localStorage.setItem(themeKey, preferTheme);
         return preferTheme;
     }
@@ -63,12 +63,21 @@ export function useRouteListener(cb) {
         window.removeEventListener('popstate', cb);
     });
 }
-export function watchDarkMode(dark, cb) {
+const themeMap = {
+    lightTheme: null,
+    darkTheme: Themes.dark,
+    md3LightTheme: Themes.md3Light,
+    md3DarkTheme: Themes.md3Dark,
+};
+export function setTheme(theme) {
+    const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
+    const styleVars = { ...siteStyleVars, ...(themeMap[theme] ?? {}) };
+    StyleProvider(styleVars);
+    setColorScheme(theme);
+}
+export function onThemeChange(cb) {
     watchTheme((theme) => {
-        const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
-        const darkStyleVars = { ...siteStyleVars, ...Themes.dark, ...dark };
-        StyleProvider(theme === 'darkTheme' ? darkStyleVars : siteStyleVars);
-        setColorScheme(theme);
+        setTheme(theme);
         cb?.(theme);
     });
 }
@@ -76,7 +85,7 @@ export function getSiteStyleVars(theme) {
     return withSiteConfigNamespace(get(config, theme, {}));
 }
 export function setColorScheme(theme) {
-    document.documentElement.style.setProperty('color-scheme', theme === 'darkTheme' ? 'dark' : 'light');
+    document.documentElement.style.setProperty('color-scheme', theme.toLowerCase().includes('dark') ? 'dark' : 'light');
 }
 export function watchTheme(cb, shouldUnmount = true) {
     const handleThemeChange = (event) => {

package/lib/node/config/varlet.config.d.ts

@@ -70,6 +70,10 @@ export interface VarletConfig {
     useMobile?: boolean;
     lightTheme?: Record<string, string>;
     darkTheme?: Record<string, string>;
+    md3LightTheme?: Record<string, string>;
+    md3DarkTheme?: Record<string, string>;
+    defaultLightTheme?: 'lightTheme' | 'md3LightTheme';
+    defaultDarkTheme?: 'darkTheme' | 'md3DarkTheme';
     highlight?: {
         style: string;
     };

package/lib/node/config/varlet.default.config.js

@@ -418,11 +418,48 @@ export default defineConfig({
                 'zh-CN': '中文',
                 'en-US': 'English',
             },
-            versions: null,
+            currentVersion: 'Latest',
+            versions: [
+                {
+                    name: 'varlet.gitee.io',
+                    items: [
+                        {
+                            label: 'Latest',
+                            link: 'https://varlet.gitee.io/varlet-ui',
+                        },
+                        {
+                            label: 'v2.x',
+                            link: 'https://varlet.gitee.io/varlet-ui/v2',
+                        },
+                    ],
+                },
+                {
+                    name: 'varletjs.vercel.app',
+                    items: [
+                        {
+                            label: 'latest',
+                            link: 'varlet-varletjs.vercel.app',
+                        },
+                        {
+                            label: 'v2.x',
+                            link: 'https://varlet-git-v2x-varletjs.vercel.app',
+                        },
+                    ],
+                },
+            ],
             github: 'https://github.com/varletjs/varlet',
             changelog: 'https://github.com/varletjs/varlet/blob/main/CHANGELOG.md',
             playground: 'https://varlet.gitee.io/varlet-ui-playground',
+            /**
+             * @deprecated
+             */
             darkMode: true,
+            themes: [
+                { 'zh-CN': 'Md2 亮色', 'en-US': 'Md2 Light', value: 'lightTheme' },
+                { 'zh-CN': 'Md2 暗色', 'en-US': 'Md2 Dark', value: 'darkTheme' },
+                { 'zh-CN': 'Md3 亮色', 'en-US': 'Md3 Light', value: 'md3LightTheme' },
+                { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
+            ],
         },
         clipboard: {
             'zh-CN': '代码已复制到剪切板',
@@ -444,21 +481,27 @@ export default defineConfig({
                 'en-US': 'English',
             },
             github: 'https://github.com/varletjs/varlet',
-            darkMode: true,
+            themes: [
+                { 'zh-CN': 'Md2 亮色', 'en-US': 'Md2 Light', value: 'lightTheme' },
+                { 'zh-CN': 'Md2 暗色', 'en-US': 'Md2 Dark', value: 'darkTheme' },
+                { 'zh-CN': 'Md3 亮色', 'en-US': 'Md3 Light', value: 'md3LightTheme' },
+                { 'zh-CN': 'Md3 暗色', 'en-US': 'Md3 Dark', value: 'md3DarkTheme' },
+            ],
         },
     },
     themeKey: 'VARLET_THEME',
+    defaultLightTheme: 'md3LightTheme',
+    defaultDarkTheme: 'md3DarkTheme',
     lightTheme: {
         'color-body': '#fff',
         'color-index-page-background': '#fff',
         'color-index-page-get-started-button': '#3a7afe',
-        'color-index-page-github-button': '#212121',
-        'color-index-page-feature-background': '#fff',
         'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
         'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
         'color-index-page-divider-color': '#ddd',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
         'color-bar': '#fff',
-        'color-sub-bar': '#f5f5f5',
         'color-text': '#555',
         'color-sub-text': '#888',
         'color-border': 'rgba(0, 0, 0, 0.12)',
@@ -477,6 +520,11 @@ export default defineConfig({
         'color-pc-language-active-background': '#edf5ff',
         'color-mobile-language-active': '#3a7afe',
         'color-mobile-language-active-background': '#edf5ff',
+        'color-pc-theme-active': '#3a7afe',
+        'color-pc-theme-active-background': '#edf5ff',
+        'color-mobile-theme-active': '#3a7afe',
+        'color-mobile-theme-active-background': '#edf5ff',
+        'color-mobile-body': '#fff',
         'color-hl-background': '#fafafa',
         'color-hl-code': '#58727e',
         'color-hl-border': '#f3f3f3',
@@ -493,14 +541,13 @@ export default defineConfig({
     darkTheme: {
         'color-body': '#121212',
         'color-index-page-background': '#1e1e1e',
-        'color-index-page-get-started-button': '#4a7afe',
-        'color-index-page-github-button': '#303030',
         'color-index-page-feature-background': '#303030',
         'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
         'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
         'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
         'color-bar': '#1e1e1e',
-        'color-sub-bar': '#272727',
         'color-text': '#fff',
         'color-sub-text': '#aaa',
         'color-border': '#333',
@@ -519,6 +566,11 @@ export default defineConfig({
         'color-pc-language-active-background': '#4a7afe20',
         'color-mobile-language-active': '#4a7afe',
         'color-mobile-language-active-background': '#4a7afe20',
+        'color-pc-theme-active': '#4a7afe',
+        'color-pc-theme-active-background': '#4a7afe20',
+        'color-mobile-theme-active': '#4a7afe',
+        'color-mobile-theme-active-background': '#4a7afe20',
+        'color-mobile-body': '#1e1e1e',
         'color-hl-background': '#272727',
         'color-hl-code': '#fff',
         'color-hl-border': '#272727',
@@ -532,6 +584,98 @@ export default defineConfig({
         'color-hl-group-h': '#14a6e9',
         'color-hl-group-i': '#96cbfe',
     },
+    md3LightTheme: {
+        'color-body': '#fff',
+        'color-index-page-background': '#fff',
+        'color-index-page-feature-background': '#fff',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #8baff8 50%, #84e0ff 50%)',
+        'color-index-page-second-text-color': 'rgba(60, 60, 60, .7)',
+        'color-index-page-divider-color': '#ddd',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
+        'color-bar': '#fff',
+        'color-text': '#555',
+        'color-sub-text': '#888',
+        'color-border': 'rgba(0, 0, 0, 0.12)',
+        'color-shadow': '#eee',
+        'color-introduce-border': '#6750A4',
+        'color-primary': '#6750A4',
+        'color-link': '#21005D',
+        'color-type': '#21005D',
+        'color-loading-bar': '#6750A4',
+        'color-side-bar': '#6750A4',
+        'color-side-bar-active-background': '#E8DEF8',
+        'color-app-bar': '#6750A4',
+        'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
+        'color-mobile-cell-hover': '#6750A4',
+        'color-pc-language-active': '#6750A4',
+        'color-pc-language-active-background': '#E8DEF8',
+        'color-mobile-language-active': '#6750A4',
+        'color-mobile-language-active-background': '#E8DEF8',
+        'color-pc-theme-active': '#6750A4',
+        'color-pc-theme-active-background': '#E8DEF8',
+        'color-mobile-theme-active': '#6750A4',
+        'color-mobile-theme-active-background': '#E8DEF8',
+        'color-mobile-body': '#FEF7FF',
+        'color-hl-background': '#fafafa',
+        'color-hl-code': '#58727e',
+        'color-hl-border': '#f3f3f3',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#6750A4',
+        'color-hl-group-c': '#7D5260',
+        'color-hl-group-d': '#B3261E',
+        'color-hl-group-e': '#7D5260',
+        'color-hl-group-f': '#7D5260',
+        'color-hl-group-g': '#7D5260',
+        'color-hl-group-h': '#633B48',
+        'color-hl-group-i': '#633B48',
+    },
+    md3DarkTheme: {
+        'color-body': '#050505',
+        'color-index-page-background': '#1e1e1e',
+        'color-index-page-feature-background': '#303030',
+        'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
+        'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
+        'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
+        'card-border-radius': '12px',
+        'code-example-border-radius': '8px',
+        'color-bar': '#1e1e1e',
+        'color-text': '#fff',
+        'color-sub-text': '#aaa',
+        'color-border': '#333',
+        'color-shadow': '#090909',
+        'color-introduce-border': '#555',
+        'color-primary': '#D0BCFF',
+        'color-link': '#EADDFF',
+        'color-type': '#EADDFF',
+        'color-loading-bar': '#D0BCFF',
+        'color-side-bar': '#D0BCFF',
+        'color-side-bar-active-background': '#4A4458',
+        'color-app-bar': '#211F26',
+        'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+        'color-mobile-cell-hover': '#D0BCFF',
+        'color-pc-language-active': '#D0BCFF',
+        'color-pc-language-active-background': '#4A4458',
+        'color-mobile-language-active': '#D0BCFF',
+        'color-mobile-language-active-background': '#4A4458',
+        'color-pc-theme-active': '#D0BCFF',
+        'color-pc-theme-active-background': '#4A4458',
+        'color-mobile-theme-active': '#D0BCFF',
+        'color-mobile-theme-active-background': '#4A4458',
+        'color-mobile-body': '#141218',
+        'color-hl-background': '#272727',
+        'color-hl-code': '#fff',
+        'color-hl-border': '#272727',
+        'color-hl-group-a': '#7c7c7c',
+        'color-hl-group-b': '#D0BCFF',
+        'color-hl-group-c': '#EFB8C8',
+        'color-hl-group-d': '#F2B8B5',
+        'color-hl-group-e': '#EFB8C8',
+        'color-hl-group-f': '#EFB8C8',
+        'color-hl-group-g': '#EFB8C8',
+        'color-hl-group-h': '#EFB8C8',
+        'color-hl-group-i': '#EFB8C8',
+    },
     icons: {
         name: 'varlet-icons',
         namespace: 'var-icon',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.20.5-alpha.1703836585426",
+  "version": "3.0.0-alpha.1704352780759",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -37,13 +37,13 @@
     "@varlet/release": "^0.1.2",
     "@babel/core": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@vitejs/plugin-vue": "5.0.0",
+    "@vitejs/plugin-vue": "5.0.1",
     "@vitejs/plugin-vue-jsx": "3.1.0",
     "@vue/babel-plugin-jsx": "1.1.5",
-    "@vue/compiler-sfc": "3.4.0",
-    "@vue/runtime-core": "3.4.0",
+    "@vue/compiler-sfc": "3.4.3",
+    "@vue/runtime-core": "3.4.3",
+    "vue": "3.4.3",
     "vite": "5.0.10",
-    "vue": "3.4.0",
     "esbuild": "0.19.3",
     "vitest": "1.1.0",
     "chokidar": "^3.5.2",
@@ -64,8 +64,8 @@
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
     "webfont": "11.2.26",
-    "@varlet/shared": "2.20.5-alpha.1703836585426",
-    "@varlet/vite-plugins": "2.20.5-alpha.1703836585426"
+    "@varlet/shared": "3.0.0-alpha.1704352780759",
+    "@varlet/vite-plugins": "3.0.0-alpha.1704352780759"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,12 +80,12 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/touch-emulator": "2.20.5-alpha.1703836585426",
-    "@varlet/icons": "2.20.5-alpha.1703836585426",
-    "@varlet/ui": "2.20.5-alpha.1703836585426"
+    "@varlet/ui": "3.0.0-alpha.1704352780759",
+    "@varlet/icons": "3.0.0-alpha.1704352780759",
+    "@varlet/touch-emulator": "3.0.0-alpha.1704352780759"
   },
   "peerDependencies": {
-    "@vue/runtime-core": "3.3.4",
+    "@vue/runtime-core": "3.4.3",
     "@vue/test-utils": "2.4.1",
     "@vitest/coverage-istanbul": "1.1.0",
     "vitest": "1.1.0",
@@ -93,11 +93,11 @@
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
-    "vue": "3.3.4",
+    "vue": "3.4.3",
     "vue-router": "4.2.0",
-    "@varlet/touch-emulator": "2.20.5-alpha.1703836585426",
-    "@varlet/icons": "2.20.5-alpha.1703836585426",
-    "@varlet/ui": "2.20.5-alpha.1703836585426"
+    "@varlet/ui": "3.0.0-alpha.1704352780759",
+    "@varlet/icons": "3.0.0-alpha.1704352780759",
+    "@varlet/touch-emulator": "3.0.0-alpha.1704352780759"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/mobile/App.vue

@@ -20,22 +20,15 @@
         </template>
         <template #right>
           <var-button
-            v-if="darkMode"
+            v-if="themes.length > 1"
+            class="theme-button"
             text
-            round
             color="transparent"
             text-color="#fff"
-            :style="{
-              transform: languages ? 'translateX(-4px)' : 'translateX(-6px)',
-            }"
-            @click="toggleTheme"
+            @click.stop="showThemeMenu = true"
           >
-            <var-icon
-              class="theme"
-              color="#fff"
-              :size="24"
-              :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
-            />
+            <var-icon name="palette" :size="28" class="palette"/>
+            <var-icon name="chevron-down" class="arrow-down"/>
           </var-button>
           <var-button
             v-if="languages"
@@ -69,6 +62,21 @@
         </var-cell>
       </div>
     </transition>
+
+    <transition name="site-menu">
+      <div class="theme-settings var-elevation--3" v-if="showThemeMenu">
+        <var-cell
+          v-for="t in themes"
+          :key="t.value"
+          class="mobile-theme-cell"
+          :class="[currentTheme === t.value && 'mobile-theme-cell--active']"
+          v-ripple
+          @click="toggleTheme(t.value)"
+        >
+          {{ t[language] }}
+        </var-cell>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -78,11 +86,12 @@ import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   getBrowserTheme,
-  type Theme,
   watchLang,
-  watchTheme
+  watchTheme,
+  setTheme,
+  type Theme,
 } from '@varlet/cli/client'
-import { removeEmpty, setTheme, inIframe, isPhone } from '../utils'
+import { removeEmpty, inIframe, isPhone } from '../utils'
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
@@ -92,8 +101,10 @@ export default defineComponent({
     const route = useRoute()
     const showBackIcon: Ref<boolean> = ref(false)
     const showMenu: Ref<boolean> = ref(false)
+    const showThemeMenu: Ref<boolean> = ref(false)
     const language: Ref<string> = ref('')
     const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
+    const themes: Ref<Record<string, any>[]> = ref(get(config, 'mobile.header.themes'))
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
     const redirect = get(config, 'mobile.redirect', '')
     const github: Ref<string> = ref(get(config, 'mobile.header.github'))
@@ -144,13 +155,14 @@ export default defineComponent({
 
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
-      setTheme(config, currentTheme.value)
+      setTheme(currentTheme.value)
       window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
     }
 
-    const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+    const toggleTheme = (value: Theme) => {
+      setCurrentTheme(value)
       window.postMessage(getThemeMessage(), '*')
+      showThemeMenu.value = false
 
       if (!isPhone() && inIframe()) {
         ;(window.top as any).postMessage(getThemeMessage(), '*')
@@ -158,11 +170,12 @@ export default defineComponent({
     }
 
     ;(window as any).toggleTheme = toggleTheme
-    setTheme(config, currentTheme.value)
+    setTheme(currentTheme.value)
     window.postMessage(getThemeMessage(), '*')
 
     document.body.addEventListener('click', () => {
       showMenu.value = false
+      showThemeMenu.value = false
     })
 
     watchTheme((theme, from) => {
@@ -175,6 +188,7 @@ export default defineComponent({
       github,
       showMenu,
       languages,
+      themes,
       language,
       nonEmptyLanguages,
       currentTheme,
@@ -183,6 +197,7 @@ export default defineComponent({
       back,
       changeLanguage,
       toggleTheme,
+      showThemeMenu,
     }
   },
 })
@@ -197,11 +212,11 @@ export default defineComponent({
 body {
   margin: 0;
   padding: 0;
-  min-height: 100%;
+  min-height: 100vh;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background: var(--site-config-color-bar);
+  background: var(--site-config-color-mobile-body);
   color: var(--site-config-color-text);
   transition: background-color 0.25s, color 0.25s;
 }
@@ -248,6 +263,14 @@ header {
   background: var(--site-config-color-bar);
 }
 
+.theme-settings {
+  position: fixed;
+  z-index: 200;
+  top: 48px;
+  right: 68px;
+  background: var(--site-config-color-bar);
+}
+
 .router-view__block {
   padding: 55px 15px 15px;
 }
@@ -263,6 +286,17 @@ header {
   }
 }
 
+.mobile-theme-cell {
+  color: var(--site-config-color-text) !important;
+  background: var(--site-config-color-bar) !important;
+  cursor: pointer !important;
+
+  &--active {
+    color: var(--site-config-color-mobile-theme-active) !important;
+    background: var(--site-config-color-mobile-theme-active-background) !important;
+  }
+}
+
 .arrow-left {
   font-size: 28px !important;
 }
@@ -271,11 +305,11 @@ header {
   font-size: 28px !important;
 }
 
-.theme {
+.i18n {
   font-size: 24px !important;
 }
 
-.i18n {
+.palette {
   font-size: 24px !important;
 }
 
@@ -289,6 +323,12 @@ header {
   padding-left: 12px !important;
 }
 
+.theme-button {
+  padding-right: 6px !important;
+  margin-right: 4px;
+  padding-left: 12px !important;
+}
+
 .app-bar {
   background: var(--site-config-color-app-bar) !important;
 }

package/site/pc/Layout.vue

@@ -429,7 +429,7 @@ iframe {
       }
 
       .card {
-        border-radius: 6px;
+        border-radius: var(--site-config-card-border-radius);
         background: var(--site-config-color-bar);
         padding: 20px;
         margin-bottom: 30px;

package/site/pc/components/AppHeader.vue

@@ -10,9 +10,9 @@
         class="varlet-site-header__versions"
         @mouseenter="isOpenVersionsMenu = true"
         @mouseleave="isOpenVersionsMenu = false"
-        v-if="nonEmptyVersions && Object.keys(nonEmptyVersions).length"
+        v-if="isShowVersion"
       >
-        <span style="font-size: 14px;">{{ currentVersion }}</span>
+        <span style="font-size: 16px;">{{ currentVersion }}</span>
         <var-icon name="chevron-down"/>
         <transition name="fade">
           <div
@@ -21,12 +21,13 @@
             :style="{ pointerEvents: isOpenVersionsMenu ? 'auto' : 'none' }"
           >
             <var-cell
-              v-for="(value, key) in nonEmptyVersions"
+              v-for="(i, key) in versionItems"
               v-ripple
               :key="key"
-              :class="{ 'varlet-site-header__animation-list--active': currentVersion === key }"
-              @click="open(value)"
-            >{{ key }}
+              :class="{ 'varlet-site-header__animation-list--active': currentVersion === i.label }"
+              @click="open(i.link)"
+            >
+            {{ i.label }}
             </var-cell>
           </div>
         </transition>
@@ -41,15 +42,30 @@
       <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
         <var-icon name="github" :size="28"/>
       </a>
-      <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
-        <var-icon
-          size="26px"
-          :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
-          :style="{
-            marginBottom: currentTheme === 'darkTheme' && '2px',
-            marginTop: currentTheme === 'lightTheme' && '2px',
-          }"
-        />
+      <div
+        class="varlet-site-header__theme"
+        @mouseenter="isOpenThemeMenu = true"
+        @mouseleave="isOpenThemeMenu = false"
+        v-if="themes.length > 1"
+      >
+        <var-icon name="palette" :size="28" />
+        <var-icon name="chevron-down"/>
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list var-elevation--5"
+            v-show="isOpenThemeMenu"
+            :style="{ pointerEvents: isOpenThemeMenu ? 'auto' : 'none' }"
+          >
+            <var-cell
+              v-for="t in themes"
+              v-ripple
+              :key="t.value"
+              :class="{ 'varlet-site-header__animation-list--active': currentTheme === t.value }"
+              @click="() => toggleTheme(t.value as Theme)"
+            >{{ t[language as keyof typeof t] }}
+            </var-cell>
+          </div>
+        </transition>
       </div>
       <div
         class="varlet-site-header__language"
@@ -85,8 +101,7 @@
 import config from '@config'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme } from '@varlet/cli/client'
-import { setTheme } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme, setTheme } from '@varlet/cli/client'
 import { removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
@@ -102,20 +117,23 @@ export default defineComponent({
     const title: Ref<string> = ref(get(config, 'title'))
     const logo: Ref<string> = ref(get(config, 'logo'))
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
-    const currentVersion: Ref<string> = ref(get(config, 'pc.header.version.current'))
-    const versionItems: Ref<Record<string, string>> = ref(get(config, 'pc.header.version.items'))
+    const currentVersion: Ref<string> = ref(get(config, 'pc.header.currentVersion'))
+    const versions = get(config, 'pc.header.versions') 
+    const isShowVersion: Ref<boolean> = ref(!!versions)
+    const versionItems: Ref<Array<Record<string, any>>> = ref((versions ?? []).find((i: any) => window.location.host.includes(i.name))?.items ?? versions?.[0]?.items ?? [])
     const playground: Ref<string> = ref(get(config, 'pc.header.playground'))
     const github: Ref<string> = ref(get(config, 'pc.header.github'))
+    const themes: Ref<Record<string, any>> = ref(get(config, 'pc.header.themes'))
     const changelog: Ref<string> = ref(get(config, 'pc.header.changelog'))
     const redirect = get(config, 'pc.redirect')
     const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
     const currentTheme = ref(getBrowserTheme())
 
     const isOpenLanguageMenu: Ref<boolean> = ref(false)
+    const isOpenThemeMenu: Ref<boolean> = ref(false)
     const isOpenVersionsMenu: Ref<boolean> = ref(false)
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
-    const nonEmptyVersions: ComputedRef<Record<string, string>> = computed(() => removeEmpty(versionItems.value))
 
     const backRoot = () => {
       const { language: lang } = getPCLocationInfo()
@@ -130,29 +148,31 @@ export default defineComponent({
 
     const setCurrentTheme = (theme: Theme) => {
       currentTheme.value = theme
-      setTheme(config, currentTheme.value)
+      setTheme(currentTheme.value)
       window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
     }
 
     const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
 
-    const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+    const toggleTheme = (value: Theme) => {
+      setCurrentTheme(value)
 
       window.postMessage(getThemeMessage(), '*')
       notifyThemeChange('mobile')
+      isOpenThemeMenu.value = false
     }
 
     const notifyThemeChange = (target: 'mobile' | 'window') => {
-      const contentWindow = target === 'window' ? window : (document.getElementById(target) as HTMLIFrameElement).contentWindow!
+      const contentWindow = target === 'window' ? window : (document.getElementById(target) as HTMLIFrameElement | undefined)?.contentWindow
+      if (!contentWindow) {
+        return
+      }
 
       contentWindow.postMessage(getThemeMessage(), '*')
     }
 
     const open = (value: string) => {
-      setTimeout(() => {
-        window.location.href = value
-      }, 350)
+      window.location.href = value
     }
 
     watchTheme((theme, from) => {
@@ -166,7 +186,7 @@ export default defineComponent({
       }
     })
 
-    setTheme(config, currentTheme.value)
+    setTheme(currentTheme.value)
     notifyThemeChange('window')
 
     return {
@@ -175,14 +195,16 @@ export default defineComponent({
       title,
       currentVersion,
       languages,
+      isShowVersion,
       versionItems,
+      themes,
       nonEmptyLanguages,
-      nonEmptyVersions,
       playground,
       changelog,
       github,
       isOpenLanguageMenu,
       isOpenVersionsMenu,
+      isOpenThemeMenu,
       darkMode,
       currentTheme,
       open,
@@ -241,21 +263,6 @@ export default defineComponent({
     }
   }
 
-  &__language {
-    border-radius: 3px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    position: relative;
-    cursor: pointer;
-    transition: background-color 0.25s;
-
-    &:hover {
-      background: var(--site-config-color-nav-button-hover-background);
-    }
-  }
-
   &__versions {
     border-radius: 3px;
     height: 40px;
@@ -295,16 +302,31 @@ export default defineComponent({
     }
   }
 
+  &__language {
+    border-radius: 3px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.25s;
+
+    &:hover {
+      background: var(--site-config-color-nav-button-hover-background);
+    }
+  }
+
   &__theme {
-    border-radius: 50%;
-    width: 42px;
-    height: 42px;
+    border-radius: 3px;
+    height: 40px;
     display: flex;
-    justify-content: center;
     align-items: center;
+    padding: 0 10px;
+    position: relative;
     cursor: pointer;
     transition: background-color 0.25s;
-    margin-right: 4px;
+    margin-right: 6px;
 
     &:hover {
       background: var(--site-config-color-nav-button-hover-background);
@@ -335,6 +357,30 @@ export default defineComponent({
     }
   }
 
+  &__theme-animation-list {
+    background: var(--site-config-color-bar);
+    cursor: pointer;
+    color: var(--site-config-color-text);
+    border-radius: 2px;
+    position: absolute;
+    top: 40px;
+    left: -20px;
+
+    .var-cell {
+      width: 100px !important;
+      color: var(--site-config-color-text);
+
+      &__content {
+        color: inherit !important;
+      }
+    }
+
+    &--active {
+      background: var(--site-config-color-pc-theme-active-background) !important;
+      color: var(--site-config-color-pc-theme-active) !important;
+    }
+  }
+
   &__animation-versions {
     left: -7px;
   }

package/site/pc/components/code-example/CodeExample.vue

@@ -93,7 +93,7 @@ export default defineComponent({
     const toPlayground = () => {
       const codeText = code.value?.innerText ?? ''
       const file = { 'App.vue': codeText }
-      const initialTheme = getBrowserTheme().replace('Theme', '')
+      const initialTheme = getBrowserTheme()
 
       context.showPlayground = true
       context.playgroundURL = `${playground.value}/?initialTheme=${initialTheme}#${utoa(JSON.stringify(file))}`

package/site/pc/components/code-example/codeExample.less

@@ -30,7 +30,7 @@
   &__code {
     transition: all .25s;
     overflow: hidden;
-    border-radius: 4px;
+    border-radius: var(--site-config-code-example-border-radius);
   }
 
   &--scroller {

package/site/pc/pages/index/index.vue

@@ -7,10 +7,11 @@ import { useRoute, useRouter } from 'vue-router'
 import {
   getPCLocationInfo,
   watchTheme,
+  onThemeChange,
   getBrowserTheme,
+  setTheme,
   type Theme
 } from '@varlet/cli/client'
-import { setTheme } from '../../../utils'
 
 const route = useRoute()
 const router = useRouter()
@@ -32,7 +33,7 @@ const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: curre
 
 const setCurrentTheme = (theme: Theme) => {
   currentTheme.value = theme
-  setTheme(config, currentTheme.value)
+  setTheme(currentTheme.value)
   window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
 }
 
@@ -48,7 +49,7 @@ const to = (url: string) => {
   window.open(url)
 }
 
-setTheme(config, currentTheme.value)
+setTheme(currentTheme.value)
 
 window.postMessage(getThemeMessage(), '*')
 
@@ -56,8 +57,10 @@ watchTheme((theme, from) => {
   from === 'mobile' && setCurrentTheme(theme)
 })
 
+onThemeChange()
+
 watch(() => route.path, () => {
-  language.value =  getPCLocationInfo().language
+  language.value = getPCLocationInfo().language
   setLocale()
 }, { immediate: true })
 </script>
@@ -79,7 +82,7 @@ watch(() => route.path, () => {
             <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
             {{ indexPage.started[language] }}
             </var-button>
-            <var-button class="varlet-doc-index__github-button" type="primary" style="line-height: 1.2" @click="toGithub">
+            <var-button class="varlet-doc-index__github-button" style="line-height: 1.2" @click="toGithub">
               {{ indexPage.viewOnGithub[language] }}
             </var-button>
           </var-space>
@@ -239,7 +242,6 @@ watch(() => route.path, () => {
     font-size: 19px !important;
     transition: all .2s !important;
     margin-top: 38px !important;
-    background: var(--site-config-color-index-page-get-started-button) !important;
   }
 
   &__github-button {
@@ -248,7 +250,6 @@ watch(() => route.path, () => {
     font-size: 19px !important;
     transition: all .2s !important;
     margin-top: 38px !important;
-    background: var(--site-config-color-index-page-github-button) !important;
   }
 
   &__features {
@@ -262,7 +263,7 @@ watch(() => route.path, () => {
     width: 300px;
     margin: 12px;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 12px;
     background: var(--site-config-color-index-page-feature-background);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
@@ -306,7 +307,7 @@ watch(() => route.path, () => {
     width: 300px;
     margin: 12px;
     padding: 30px 20px;
-    border-radius: 10px;
+    border-radius: 12px;
     background: var(--site-config-color-index-page-feature-background);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 

package/site/utils.ts

@@ -31,12 +31,6 @@ export function inIframe() {
   return window.self !== window.top
 }
 
-export function setTheme(config: Record<string, any>, theme: Theme) {
-  const styleVars = withSiteConfigNamespace(get(config, theme, {}))
-  StyleProvider({ ...styleVars, ...(theme === 'darkTheme' ? Themes.dark : {}) })
-  setColorScheme(theme)
-}
-
 export function utoa(data: string): string {
   return btoa(unescape(encodeURIComponent(data)))
 }

package/template/generators/base/package.json

@@ -44,7 +44,7 @@
     "@varlet/shared": "workspace:*",
     "@varlet/ui": "workspace:*",
     "@vue/test-utils": "2.4.1",
-    "@vue/runtime-core": "3.4.0",
+    "@vue/runtime-core": "3.4.3",
     "@vitest/coverage-istanbul": "1.1.0",
     "jsdom": "22.1.0",
     "vitest": "1.1.0",
@@ -56,7 +56,7 @@
     "prettier": "^2.8.8",
     "simple-git-hooks": "^2.8.0",
     "typescript": "^5.1.5",
-    "vue": "3.4.0",
+    "vue": "3.4.3",
     "vue-router": "4.2.0"
   },
   "lint-staged": {

package/template/generators/base/tsconfig.json

@@ -8,6 +8,7 @@
     "allowJs": true,
     "lib": ["esnext", "dom"],
     "allowSyntheticDefaultImports": true,
+    "jsxImportSource": "vue",
     "jsx": "preserve",
     "types": ["vitest/globals"]
   },

package/template/generators/config/i18n/base/varlet.config.mjs

@@ -12,7 +12,7 @@ export default defineConfig({
       {
         text: {
           'zh-CN': '开发指南',
-          'en-US': 'Developer guide',
+          'en-US': 'Developer Guide',
         },
         type: 1,
       },