feat(theme): allow auto generating theme color

Author: Mister-Hope

demo/components/package.json

@@ -17,7 +17,7 @@
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
     "@vuepress/helper": "2.0.0-rc.47",
-    "@vuepress/theme-default": "2.0.0-rc.47",
+    "@vuepress/theme-default": "2.0.0-rc.49",
     "artplayer": "5.1.7",
     "artplayer-plugin-danmuku": "5.1.4",
     "dashjs": "4.7.4",

demo/lightgallery/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/theme-default": "2.0.0-rc.47",
+    "@vuepress/theme-default": "2.0.0-rc.49",
     "sass-embedded": "1.79.3",
     "sass-loader": "16.0.2",
     "vue": "3.5.8",

demo/md-enhance/package.json

@@ -18,7 +18,7 @@
     "@vue/repl": "4.4.2",
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/theme-default": "2.0.0-rc.47",
+    "@vuepress/theme-default": "2.0.0-rc.49",
     "chart.js": "4.4.4",
     "echarts": "5.5.1",
     "echarts-wordcloud": "2.1.0",

demo/md-enhance/src/.vuepress/styles/index.scss

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@vuepress/bundler-vite": "2.0.0-rc.15",
     "@vuepress/bundler-webpack": "2.0.0-rc.15",
-    "@vuepress/theme-default": "2.0.0-rc.47",
+    "@vuepress/theme-default": "2.0.0-rc.49",
     "nodejs-jieba": "0.1.2",
     "sass-embedded": "1.79.3",
     "sass-loader": "16.0.2",

demo/search-pro/package.json

@@ -29,14 +29,17 @@ Responsive breakpoints:
 
 Theme Colors:
 
+- `$theme-color`: primary theme color
 - `$theme-colors`: theme colors you want to use besides primary theme color
 
 Code block (Only available with shiki):
 
 - `$code-bg-color`: background color for code blocks
 - `$code-color`: font color for code blocks
 
-Color list: `$colors`
+Color list:
+
+- `$colors`: Used to generate color list.
 
 ::: details Demo
 
@@ -61,7 +64,7 @@ $pc: 1920px;
 
 All variables here (including your newly added variables) will be converted to kebab-case format and injected as CSS variables.
 
-For example `$theme-color` will be injected as `--theme-color`, and `$backgroundColor` will be injected as `--background-color`.
+For example `$vp-c-text` will be injected as `--vp-c-text`, and `$vp-c-bg` will be injected as `--vp-c-bg`.
 
 :::
 
@@ -74,6 +77,9 @@ Available color variables:
 #### Text
 
 - `$vp-c-text`: Default text color.
+
+By default, the theme automatically generates the following colors based on the `$vp-c-text`, but you can still customize them:
+
 - `$vp-c-text-mute`: Colors for muted texts, such as "inactive menu" or "info texts".
 - `$vp-c-text-subtle`: Color for subtle text, such as as "placeholders" or "caret icon".
 
@@ -91,6 +97,8 @@ Available color variables:
 
 Accent color and brand colors which used for interactive components.
 
+By default, the theme automatically generates the following accent colors based on the `$theme-color` in config file, but you can still customize them:
+
 - `$vp-c-accent`: The most solid color used mainly for colored text. It must satisfy the contrast ratio against when used on top of `$vp-c-accent-soft`.
 - `$vp-c-accent-hover`: Color used for hover state.
 - `$vp-c-accent-bg`: Color used for solid background. It must satisfy the contrast ratio with `$vp-c-accent-text` on top of it.
@@ -102,9 +110,12 @@ Accent color and brand colors which used for interactive components.
 #### Borders
 
 - `$vp-c-border`: Border color for interactive components. For example this should be used for a button outline.
-- `$vp-c-border-hard`: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.
 - `$vp-c-divider`: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.
 
+By default, the theme automatically generates the following colors based on the `$vp-c-border`, but you can still customize them:
+
+- `$vp-c-border-hard`: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.
+
 #### Controls
 
 - `$vp-c-control`: Background color for interactive controls, such as buttons or checkboxes.

docs/theme/src/config/style.md

@@ -1,5 +1,5 @@
 ---
-title: Customize color
+title: Customize colors
 icon: palette
 order: 1
 category:
@@ -9,29 +9,29 @@ tag:
   - Customize
 ---
 
-This page guides you how to customize theme colors.
+This page guides you how to customize colors in theme.
 
 <!-- more -->
 
 ## Modify the built-in color
 
-The theme controls the color through the palette, you may need to set your color in two situations:
+The theme controls the color through config file and palette file. These files are `.vuepress/styles/{config|palette}.scss` files under the VuePress project folder.
 
-1. This color remains the same in day mode and night mode, like theme color.
-2. This color is different in day mode, night mode, such as background color, font, border color, etc.
+You may need to set colors under two situations:
 
-The palette file is the `.vuepress/styles/palette.scss` file under the VuePress project folder.
+1. This color remains the same in day mode and night mode, e.g.: theme color.
+1. This color is different in lightmode and darkmode, such as background color, font color, border color, etc.
 
-For the former, you need to write variable values in `palette.scss`, e.g.:
+For the former, you need to write variable values directly, e.g.:
 
-```scss title=".vuepress/styles/palette.scss"
+```scss title=".vuepress/styles/config.scss"
 $theme-color: #3eaf7c;
 ```
 
-For the latter, you need to set up a Map with key names `light` and `dark`, and values as color values, e.g.:
+For the latter, you need to set a color map with `light` and `dark` keys and color values, e.g.:
 
 ```scss title=".vuepress/styles/palette.scss"
-$bg-color: (
+$vp-c-bg: (
   light: #fff,
   dark: #000,
 );
@@ -41,27 +41,29 @@ See [Theme Configuration → Color Settings](../../config/style.md#color-config)
 
 ## Modify other colors
 
-Sometimes, you may want to modify some colors that are not in `palette.scss`, such as the background color of the code block. At this time, you can check whether the corresponding color attribute value is a CSS variable through the devTools. If so, you can go to `index.scss` to manually override this variable value:
+Sometimes, you may want to modify some colors that are not in `palette.scss`, such as the background color of the code block. At this time, you can check whether the corresponding color attribute value is a CSS variable through the devTools.
+
+If so, you can go to `index.scss` to manually override this variable value:
 
 ```scss title=".vuepress/styles/index.scss"
-// override code demo header color
+// override code block background color
 #app {
-  --code-demo-c-bg-header: #fff;
+  --code-c-bg: #fff;
 
-  html[data-theme="dark"] & {
-    --code-demo-c-bg-header: #000;
+  [data-theme="dark"] & {
+    --code-c-bg: #000;
   }
 }
 ```
 
 If not, write your own selectors to override them:
 
 ```scss title=".vuepress/styles/index.scss"
-// override code block language font color
-pre[class*="language-"]::before {
+// override code block background color
+pre[class*="language-"] {
   color: #fff !important;
 
-  html[data-theme="dark"] & {
+  [data-theme="dark"] & {
     background-color: #222 !important;
   }
 }

docs/theme/src/guide/customize/color.md

@@ -15,7 +15,7 @@ The theme allows you to customize theme color and even provide a picker.
 
 ## Setting Default Theme Color
 
-You should set the default theme color of your site in `.vuepress/styles/palette.scss` through `$theme-color`:
+You should set the default theme color of your site in `.vuepress/styles/config.scss` through `$theme-color`:
 
 ```scss
 $theme-color: #f00;

docs/theme/src/guide/interface/theme-color.md

@@ -29,14 +29,17 @@ tag:
 
 主题色:
 
+- `$theme-color`: 主要主题色
 - `$theme-colors`: 除了主要主题色之外，你想使用的其他主题颜色
 
-代码块 (仅限 shiki):
+代码块 (仅限 shiki 高亮器):
 
 - `$code-bg-color`: 代码块的背景颜色
 - `$code-color`: 代码块的字体颜色
 
-颜色列表: `$colors`
+颜色列表:
+
+- `$colors`: 用于生成颜色列表。
 
 ::: details 例子
 
@@ -61,7 +64,7 @@ $pc: 1920px;
 
 此处的所有变量 (包括你新添加的变量) 都会被转换为 kebab-case 的格式注入为 CSS 变量。
 
-如 `$theme-color` 会被注入为 `--theme-color`，`$backgroundColor` 会被注入为 `--background-color`。
+如 `$vp-c-text` 会被注入为 `--vp-c-text`，`$vp-c-bg` 会被注入为 `--vp-c-bg`。
 
 :::
 
@@ -74,6 +77,9 @@ $pc: 1920px;
 #### 文字
 
 - `$vp-c-text`：默认文本颜色。
+
+默认情况下，主题会根据 `$vp-c-text` 自动生成以下颜色，但你仍然可以自定义它们：
+
 - `$vp-c-text-mute`：用于静音文本的颜色，例如“非活动菜单”或“信息文本”。
 - `$vp-c-text-subtle`：用于细微文本的颜色，例如“占位符”或“插入符号”。
 
@@ -91,6 +97,8 @@ $pc: 1920px;
 
 用于交互组件的强调颜色和品牌颜色。
 
+默认情况下，主题会根据配置文件中的 `$theme-color` 自动生成以下强调颜色，但你仍然可以自定义它们：
+
 - `$vp-c-accent`：主要用于彩色文本的最实色。它必须满足与放在 `$vp-c-accent-soft` 顶部时的对比度。
 - `$vp-c-accent-hover`：用于悬停状态的颜色。
 - `$vp-c-accent-bg`：用于实色背景的颜色。它必须满足与放在其顶部的 `$vp-c-accent-text` 的对比度。
@@ -102,9 +110,12 @@ $pc: 1920px;
 #### 边框
 
 - `$vp-c-border`：交互组件的边框颜色。例如，这应该用于按钮轮廓。
-- `$vp-c-border-hard`：较暗的边框颜色，用于紧贴文本的“硬”边框，例如表格和 kbd。
 - `$vp-c-divider`：分隔符的颜色，用于在同一组件内分隔部分，例如在“h2”标题上放置分隔符。
 
+默认情况下，主题会根据 `$vp-c-border` 自动生成以下颜色，但你仍然可以自定义它们：
+
+- `$vp-c-border-hard`：较暗的边框颜色，用于紧贴文本的“硬”边框，例如表格和 kbd。
+
 #### 控件
 
 - `$vp-c-control`：用于交互控件（例如按钮或复选框）的背景颜色。

docs/theme/src/zh/config/style.md

@@ -15,20 +15,20 @@ tag:
 
 ## 修改内置颜色
 
-主题通过调色板控制颜色，你可能需要分为两种情况设置你的颜色：
+主题通过配置文件和调色板控制颜色。这些文件是 VuePress 项目文件夹下的 `.vuepress/styles/{config,palette}.scss` 文件。
+
+你可能需要分为两种情况设置你的颜色：
 
 1. 此颜色在日间模式和夜间模式保持不变，如主题色。
 2. 此颜色在日间模式、夜间模式下不同，如背景色、字体、边框颜色等。
 
-调色板文件是 VuePress 项目文件夹下的 `.vuepress/styles/palette.scss` 文件。
-
-对于前者，你需要在 `palette.scss` 中写入变量值，如：
+对于前者，你需要直接写入变量值，如：
 
-```scss title=".vuepress/styles/palette.scss"
+```scss title=".vuepress/styles/config.scss"
 $theme-color: #3eaf7c;
 ```
 
-对于后者，你需要设置一个 Map，键名为 `light` 和 `dark`，值为颜色值，如：
+对于后者，你需要设置拥有 `light` 和 `dark` 键名的颜色映射，如：
 
 ```scss title=".vuepress/styles/palette.scss"
 $bg-color: (
@@ -41,15 +41,17 @@ $bg-color: (
 
 ## 修改其他颜色
 
-有些时候，你可能希望修改一些不在 `palette.scss` 中的颜色，比如代码块的背景色，此时你可以通过开发者工具查看对应的颜色属性值是否是 CSS 变量，如果是你可以在 `index.scss` 中手动覆盖这一变量值:
+有些时候，你可能希望修改一些不在 `palette.scss` 中的颜色，比如代码块的背景色，此时你可以通过开发者工具查看对应的颜色属性值是否为 CSS 变量。
+
+如果是你可以在 `index.scss` 中手动覆盖这一变量值:
 
 ```scss title=".vuepress/styles/index.scss"
 // 覆盖代码块演示标题颜色
 #app {
-  --code-demo-c-bg-header: #fff;
+  --code-c-bg: #fff;
 
-  html[data-theme="dark"] & {
-    --code-demo-c-bg-header: #000;
+  [data-theme="dark"] & {
+    --code-c-bg: #000;
   }
 }
 ```
@@ -61,7 +63,7 @@ $bg-color: (
 pre[class*="language-"]::before {
   color: #fff !important;
 
-  html[data-theme="dark"] & {
+  [data-theme="dark"] & {
     background-color: #222 !important;
   }
 }