docs: optimize themes system related

Author: haoziqaq

packages/varlet-ui/src/style-provider/docs/en-US.md

@@ -50,28 +50,7 @@ function toggleTheme() {
 
 ### Function Call
 
-A functional call is to update variables directly on `:root`, which is suitable for situations where a global update style is required.
-
-```html
-<script setup>
-import { StyleProvider } from '@varlet/ui'
-
-let rootStyleVars = null
-
-const darkTheme = {
-  '--color-primary': 'var(--color-info)'
-}
-
-function toggleRootTheme() {
-  rootStyleVars = rootStyleVars ? null : darkTheme
-  StyleProvider(rootStyleVars)
-}
-</script>
-
-<template>
-  <var-button type="primary" block @click="toggleRootTheme">Toggle Root Theme</var-button>
-</template>
-```
+A functional call is to update variables directly on `:root`, which is suitable for situations where a global update style is required. Details see [Theme Customization](#/en-US/themes).
 
 ## API
 

packages/varlet-ui/src/style-provider/docs/zh-CN.md

@@ -6,7 +6,7 @@
 
 ### 组件式调用
 
-组件式调用范围性的定制组件样式，需要注意是有些使用 `teleport` 传送到  `StyleProvider` 外的元素将不会生效。
+局部的定制组件样式，需要注意的是使用 `teleport` 传送到  `StyleProvider` 外的元素将不会生效。
 
 ```html
 <script setup>
@@ -49,28 +49,7 @@ function toggleTheme() {
 
 ### 函数式调用
 
-函数式的调用直接更新 `:root` 上的变量，适合需要全局更新样式的情况。
-
-```html
-<script setup>
-import { StyleProvider } from '@varlet/ui'
-
-let rootStyleVars = null
-
-const darkTheme = {
-  '--color-primary': 'var(--color-info)'
-}
-
-function toggleRootTheme() {
-  rootStyleVars = rootStyleVars ? null : darkTheme
-  StyleProvider(rootStyleVars)
-}
-</script>
-
-<template>
-  <var-button type="primary" block @click="toggleRootTheme">切换根节点样式变量</var-button>
-</template>
-```
+直接更新 `:root` 上的样式变量，适合需要全局更新样式的情况，详情见[主题定制](#/zh-CN/themes)。
 
 ## API
 

packages/varlet-ui/src/style-provider/example/index.vue

@@ -1,62 +1,27 @@
 <script setup>
-import { onUnmounted, reactive, ref } from 'vue'
-import { AppType, getBrowserTheme, getSiteStyleVars, onThemeChange, watchLang } from '@varlet/cli/client'
-import { StyleProvider, Themes } from '@varlet/ui'
+import { reactive, ref } from 'vue'
+import { AppType, watchLang } from '@varlet/cli/client'
 import { t, use } from './locale'
 
-const VarStyleProvider = StyleProvider.Component
-
 const state = reactive({
   score: 5,
   license: true,
 })
 
 const styleVars = ref(null)
 
-let isRootStyleChanged = false
-
 const successTheme = {
   '--rate-primary-color': 'var(--color-success)',
   '--button-primary-color': 'var(--color-success)',
   '--switch-handle-active-background': 'var(--color-success)',
   '--switch-track-active-background': 'var(--color-success)',
 }
 
-const themeMap = {
-  lightTheme: null,
-  darkTheme: Themes.dark,
-  md3LightTheme: Themes.md3Light,
-  md3DarkTheme: Themes.md3Dark,
-}
-
 watchLang(use)
 
-onThemeChange(() => {
-  isRootStyleChanged = false
-})
-
-onUnmounted(() => {
-  const siteTheme = getBrowserTheme()
-  StyleProvider({ ...getSiteStyleVars(siteTheme), ...themeMap[siteTheme] })
-})
-
 function toggleTheme() {
   styleVars.value = styleVars.value ? null : successTheme
 }
-
-function toggleRootTheme() {
-  const siteTheme = getBrowserTheme()
-  const styleVars = isRootStyleChanged
-    ? themeMap[siteTheme]
-    : {
-        ...themeMap[siteTheme],
-        ...{
-          '--color-primary': 'var(--color-info)',
-        },
-      }
-  StyleProvider({ ...getSiteStyleVars(siteTheme), ...styleVars })
-  isRootStyleChanged = !isRootStyleChanged
-}
 </script>
 
 <template>
@@ -66,7 +31,4 @@ function toggleRootTheme() {
     <var-switch v-model="state.license" />
     <var-button style="margin-top: 10px" type="primary" block @click="toggleTheme">{{ t('toggleTheme') }}</var-button>
   </var-style-provider>
-
-  <app-type>{{ t('functionCall') }}</app-type>
-  <var-button type="primary" block @click="toggleRootTheme">{{ t('toggleRootTheme') }}</var-button>
 </template>

packages/varlet-ui/src/themes/docs/en-US.md

@@ -1,46 +1,66 @@
-# Theme System
+# Theme Customization
 
 ### Intro
 
-The component library organizes styles through [css variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties). Variables are divided into general style variables and component style variables. It is recommended to use the [StyleProvider](#/en-US/style-provider) component to load theme files and customize the theme. The themes supported by the component library are as follows.
+The component library organizes styles through [css variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties). It is recommended to use [StyleProvider](#/zh-CN/style-provider) to load and customize themes. The built-in themes of the component library are as follows.
 
-### Available Themes
+### Built-in themes
 
-| Available Themes | Theme Pack |
+| Theme name | Theme package |
 | --- | --- |
-| `Material Design 2 Light` | _CSS Default_ |
+| `Material Design 2 Light` | _Default theme, based on css file_ |
 | `Material Design 2 Dark` | _Themes.dark_ |
 | `Material Design 3 Light` | _Themes.md3Light_ |
 | `Material Design 3 Dark` | _Themes.md3Dark_ |
 
-### Toggle Theme
+### Set body variables
+
+Set some basic style variables recommended by the component library to control the basic style of the application.
+
+```css
+/* playground-ignore */
+body { 
+  transition: background-color .25s, color .25s; 
+  color: var(--color-text); 
+  background-color: var(--color-body); 
+  color-scheme: var(--color-scheme);
+}
+```
+
+### Switch Theme
 
 ```html
 <!-- playground-ignore -->
 <script setup>
 import { StyleProvider, Themes } from '@varlet/ui'
 </script>
 
-<template>
-  <var-space direction="column" size="large">
-    <var-button type="primary" block @click="StyleProvider(null)">Material Design 2 Light</var-button>
-    <var-button type="primary" block @click="StyleProvider(Themes.dark)">Material Design 2 Dark</var-button>
+<template> 
+  <var-space direction="column" size="large"> 
+    <var-button type="primary" block @click="StyleProvider(null)">Material Design 2 Light</var-button> 
+    <var-button type="primary" block @click="StyleProvider(Themes.dark)">Material Design 2 dark</var-button> 
     <var-button type="primary" block @click="StyleProvider(Themes.md3Light)">Material Design 3 Light</var-button>
     <var-button type="primary" block @click="StyleProvider(Themes.md3Dark)">Material Design 3 Dark</var-button>
   </var-space>
 </template>
 ```
 
-Inject the `text color` and `background color` variables recommended by the component library to control the overall color.
+### Theme Customization
 
-```css
-/* playground-ignore */
-body {
-  transition: background-color .25s, color .25s;
-  color: var(--color-text);
-  background-color: var(--color-body);
-  color-scheme: var(--color-scheme);
+Due to the huge workload of defining a theme, it is recommended to extend it based on the built-in theme.
+
+```html
+<!-- playground-ignore -->
+<script setup>
+import { StyleProvider, Themes } from '@varlet/ui'
+
+const customTheme = {
+  ...Themes.md3Light,
+  '--color-primary': 'red'
 }
+
+StyleProvider(customTheme)
+</script>
 ```
 
 ### Theme Builder

packages/varlet-ui/src/themes/docs/zh-CN.md

@@ -1,18 +1,32 @@
-# 主题系统
+# 主题定制
 
 ### 介绍
 
-组件库通过 [css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，变量分为通用样式变量和组件样式变量。推荐使用 [StyleProvider](#/zh-CN/style-provider) 组件加载主题文件、对主题进行定制。组件库支持的主题如下。
+组件库通过 [css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 组织样式。推荐使用 [StyleProvider](#/zh-CN/style-provider) 加载主题、对主题进行定制。组件库内置的主题如下。
 
-### 可用主题
+### 内置主题
 
 | 主题名称 | 主题包 |
 | --- | --- |
-| `Material Design 2 亮色` | _css 样式_ |
+| `Material Design 2 亮色` | _默认主题，基于 css 文件_ |
 | `Material Design 2 暗色` | _Themes.dark_ |
 | `Material Design 3 亮色` | _Themes.md3Light_ |
 | `Material Design 3 暗色` | _Themes.md3Dark_ |
 
+### 设置 body 变量
+
+给 body 设置组件库推荐的一些基础样式变量，以控制应用的基本样式。
+
+```css
+/* playground-ignore */
+body {
+  transition: background-color .25s, color .25s;
+  color: var(--color-text);
+  background-color: var(--color-body);
+  color-scheme: var(--color-scheme);
+}
+```
+
 ### 切换主题
 
 ```html
@@ -31,16 +45,22 @@ import { StyleProvider, Themes } from '@varlet/ui'
 </template>
 ```
 
-注入组件库推荐的 `文字颜色` 和 `背景颜色` 变量来控制整体颜色。
+### 主题定制
 
-```css
-/* playground-ignore */
-body {
-  transition: background-color .25s, color .25s;
-  color: var(--color-text);
-  background-color: var(--color-body);
-  color-scheme: var(--color-scheme);
+由于定义一套主题的工作量巨大，推荐基于内置主题进行扩展。
+
+```html
+<!-- playground-ignore -->
+<script setup>
+import { StyleProvider, Themes } from '@varlet/ui'
+
+const customTheme = {
+  ...Themes.md3Light,
+  '--color-primary': 'red'
 }
+
+StyleProvider(customTheme)
+</script>
 ```
 
 ### 主题生成器

packages/varlet-ui/varlet.config.mjs

@@ -51,8 +51,8 @@ export default defineConfig({
       },
       {
         text: {
-          'zh-CN': '主题系统',
-          'en-US': 'Theme System',
+          'zh-CN': '主题定制',
+          'en-US': 'Theme Customization',
         },
         doc: 'themes',
         type: 2,