feat: optimize the dark mode switching method, reduce the size of non-dark theme user packages, and add dark theme switching documents (#3153)

zzcr · web-flow · commit 6b7ee3ea82c6 · 2025-03-19T11:14:11.000+08:00
* feat: optimize the dark mode switching method, reduce the size of non-dark theme user packages, and add dark theme switching documents

* chore: 优化文字描述

* chore: 更新暗黑模式文档，调整样式文件引入方式，优化主题切换方法

* chore: 更新文档中的“暗黑模式”为“深色模式”，统一术语并优化相关描述
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
@@ -37,6 +37,11 @@ const docMenusChildren = [
       theme: ['default']
     }
   },
+  {
+    'title': '暗黑模式',
+    'titleEn': 'theme-dark',
+    'key': 'theme-dark'
+  },
   { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' },
   { 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' },
   {
diff --git a/examples/sites/demos/pc/webdoc/theme-dark-en.md b/examples/sites/demos/pc/webdoc/theme-dark-en.md
@@ -0,0 +1,69 @@
+# Dark Mode
+
+The `TinyVue` component library has supported dark mode since version `v3.22.0`.
+
+## Usage
+
+Import the dark theme style file in the entry file `main.js` (if you're using Method 3 `theme-tool`, you don't need to import `dark-theme.css`)
+
+```js
+// Import dark mode style file
+import '@opentiny/vue-theme/base/dark-theme.css'
+```
+
+## How to Enable Dark Mode
+
+### Method 1: HTML Class Toggle
+
+Add the `dark` class directly to the HTML root element
+
+```html
+<html class="dark">
+  <head></head>
+  <body></body>
+</html>
+```
+
+If you want to switch dynamically, we recommend using [useDark | VueUse](https://vueuse.org/core/useDark/)
+
+### Method 2: JavaScript Dynamic Switching
+
+```js
+// Switch to dark mode
+document.documentElement.classList.add('dark')
+
+// Switch to light mode
+document.documentElement.classList.remove('dark')
+```
+
+### Method 3: Use TinyThemeTool for Switching
+
+Similar to the theme switching feature, you can use the `TinyThemeTool` class to manage dark mode:
+
+```js
+import TinyThemeTool, { tinyDarkTheme } from '@opentiny/vue-theme/theme-tool'
+
+const themeTool = new TinyThemeTool(tinyDarkTheme)
+```
+
+## Customize Dark Mode Variables
+
+You can override the default dark mode variables by creating a new CSS file:
+
+```css
+html.dark {
+  /* Customize dark mode background color */
+  --tv-base-color: #1d1e1f;
+}
+```
+
+Then import it in your entry file:
+
+```js
+import '@opentiny/vue-theme/base/dark-theme.css'
+
+// Import custom dark mode variables
+import './styles/dark-theme.css'
+```
+
+This way, you can implement personalized dark theme customization while preserving the basic dark mode of the TinyVue component library.
diff --git a/examples/sites/demos/pc/webdoc/theme-dark.md b/examples/sites/demos/pc/webdoc/theme-dark.md
@@ -0,0 +1,67 @@
+# 深色模式
+
+`TinyVue` 组件库从 `v3.22.0` 版本开始支持深色模式啦！！！
+
+## 如何启用深色模式
+
+### 方法一：HTML 类名切换
+
+在入口文件 `main.js` 引入深色主题样式文件
+
+```js
+// 引入深色模式样式文件
+import '@opentiny/vue-theme/dark-theme-index.css'
+```
+
+然后直接在 HTML 根元素添加 `dark` 类名
+
+```html
+<html class="dark">
+  <head></head>
+  <body></body>
+</html>
+```
+
+如果您想动态切换，可以自己写 js 切换样式，示例如下：
+
+```js
+// 切换为深色模式
+document.documentElement.classList.add('dark')
+
+// 切换为亮色模式
+document.documentElement.classList.remove('dark')
+```
+
+也可以使用业界现成的切换方案，建议使用 [useDark | VueUse](https://vueuse.org/core/useDark/)
+
+### 方法二：使用 TinyThemeTool 切换
+
+类似于主题切换功能，您可以使用 `TinyThemeTool` 类来管理深色模式：
+
+```js
+import TinyThemeTool, { tinyDarkTheme } from '@opentiny/vue-theme/theme-tool'
+
+const themeTool = new TinyThemeTool(tinyDarkTheme)
+```
+
+## 自定义深色模式变量
+
+您可以通过创建新的 CSS 文件来覆盖默认的深色模式变量：
+
+```css
+html.dark {
+  /* 自定义深色模式背景色 */
+  --tv-base-color: #1d1e1f;
+}
+```
+
+然后在入口文件中导入：
+
+```js
+import '@opentiny/vue-theme/dark-theme-index.css'
+
+// 导入自定义深色模式变量
+import './styles/dark-theme.css'
+```
+
+这样，就可以在保留 TinyVue 组件库深色模式基础上，实现个性化的深色主题定制。
diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js
@@ -30,6 +30,7 @@ import html from 'highlight.js/lib/languages/xml'
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
+import '@opentiny/vue-theme/dark-theme-index.css'
 
 const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
 
diff --git a/internals/cli/src/config/vite.ts b/internals/cli/src/config/vite.ts
@@ -23,6 +23,9 @@ const getAlias = (vueVersion: string | number, theme = '', design?: string) => {
     '@opentiny/vue-icon$': pathFromWorkspaceRoot(`packages/vue-icon${ns(design || theme)}/index.ts`),
     '@opentiny/vue-icon-multicolor$': pathFromWorkspaceRoot(`packages/vue-icon-multicolor${ns(theme)}/index.ts`),
     '@opentiny/vue-renderless': pathFromWorkspaceRoot('packages/renderless/src'),
+    '@opentiny/vue-theme/dark-theme-index.css': pathFromWorkspaceRoot(
+      `packages/theme${ns(design || theme)}/src/base/dark-theme.less`
+    ),
     '@opentiny/vue-theme': pathFromWorkspaceRoot(`packages/theme${ns(design || theme)}/src`),
     '@opentiny/vue-theme-saas': pathFromWorkspaceRoot('packages/theme-saas/src'),
     '@opentiny/vue-common': pathFromWorkspaceRoot('packages/vue-common/src/index-dev'),
diff --git a/packages/theme/build/release.js b/packages/theme/build/release.js
@@ -49,6 +49,9 @@ export default {
 `
 cssStr = fs.readFileSync(path.resolve(root, 'dist/dark-theme-index.css'), 'utf8')
 
+// 2.3、把 :root.dark 替换为 :root
+cssStr = cssStr.replace(':root.dark', ':root')
+
 jsStr = jsStr.replace('#CSS#', cssStr)
 fs.writeFileSync(path.resolve(root, 'src/dark-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
 fs.writeFileSync(path.resolve(root, 'dist/dark-theme-index.js'), jsStr) // 打包发布用
diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less
@@ -14,5 +14,4 @@
 @import './vars.less';
 // @import './old-theme.less';
 // @import './aurora-theme.less';
-@import './dark-theme.less';
 @import './transition.less';

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,11 @@ const docMenusChildren = [`
`37`	`37`	`theme: ['default']`
`38`	`38`	`}`
`39`	`39`	`},`
	`40`	`+ {`
	`41`	`+ 'title': '暗黑模式',`
	`42`	`+ 'titleEn': 'theme-dark',`
	`43`	`+ 'key': 'theme-dark'`
	`44`	`+ },`
`40`	`45`	`{ 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' },`
`41`	`46`	`{ 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' },`
`42`	`47`	`{`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,9 @@ export default {`
`49`	`49`	`
`50`	`50`	`cssStr = fs.readFileSync(path.resolve(root, 'dist/dark-theme-index.css'), 'utf8')`
`51`	`51`
	`52`	`+// 2.3、把 :root.dark 替换为 :root`
	`53`	`+cssStr = cssStr.replace(':root.dark', ':root')`
	`54`	`+`
`52`	`55`	`jsStr = jsStr.replace('#CSS#', cssStr)`
`53`	`56`	`fs.writeFileSync(path.resolve(root, 'src/dark-theme-index.js'), jsStr) // 供开发时(pnpm site)，可以访问到最新的定制主题变量`
`54`	`57`	`fs.writeFileSync(path.resolve(root, 'dist/dark-theme-index.js'), jsStr) // 打包发布用`