You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/theme/src/config/style.md
+14-3Lines changed: 14 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,14 +29,17 @@ Responsive breakpoints:
29
29
30
30
Theme Colors:
31
31
32
+
-`$theme-color`: primary theme color
32
33
-`$theme-colors`: theme colors you want to use besides primary theme color
33
34
34
35
Code block (Only available with shiki):
35
36
36
37
-`$code-bg-color`: background color for code blocks
37
38
-`$code-color`: font color for code blocks
38
39
39
-
Color list: `$colors`
40
+
Color list:
41
+
42
+
-`$colors`: Used to generate color list.
40
43
41
44
::: details Demo
42
45
@@ -61,7 +64,7 @@ $pc: 1920px;
61
64
62
65
All variables here (including your newly added variables) will be converted to kebab-case format and injected as CSS variables.
63
66
64
-
For example `$theme-color` will be injected as `--theme-color`, and `$backgroundColor` will be injected as `--background-color`.
67
+
For example `$vp-c-text` will be injected as `--vp-c-text`, and `$vp-c-bg` will be injected as `--vp-c-bg`.
65
68
66
69
:::
67
70
@@ -74,6 +77,9 @@ Available color variables:
74
77
#### Text
75
78
76
79
-`$vp-c-text`: Default text color.
80
+
81
+
By default, the theme automatically generates the following colors based on the `$vp-c-text`, but you can still customize them:
82
+
77
83
-`$vp-c-text-mute`: Colors for muted texts, such as "inactive menu" or "info texts".
78
84
-`$vp-c-text-subtle`: Color for subtle text, such as as "placeholders" or "caret icon".
79
85
@@ -91,6 +97,8 @@ Available color variables:
91
97
92
98
Accent color and brand colors which used for interactive components.
93
99
100
+
By default, the theme automatically generates the following accent colors based on the `$theme-color` in config file, but you can still customize them:
101
+
94
102
-`$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`.
95
103
-`$vp-c-accent-hover`: Color used for hover state.
96
104
-`$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.
102
110
#### Borders
103
111
104
112
-`$vp-c-border`: Border color for interactive components. For example this should be used for a button outline.
105
-
-`$vp-c-border-hard`: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.
106
113
-`$vp-c-divider`: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.
107
114
115
+
By default, the theme automatically generates the following colors based on the `$vp-c-border`, but you can still customize them:
116
+
117
+
-`$vp-c-border-hard`: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.
118
+
108
119
#### Controls
109
120
110
121
-`$vp-c-control`: Background color for interactive controls, such as buttons or checkboxes.
Copy file name to clipboardExpand all lines: docs/theme/src/guide/customize/color.md
+20-18Lines changed: 20 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Customize color
2
+
title: Customize colors
3
3
icon: palette
4
4
order: 1
5
5
category:
@@ -9,29 +9,29 @@ tag:
9
9
- Customize
10
10
---
11
11
12
-
This page guides you how to customize theme colors.
12
+
This page guides you how to customize colors in theme.
13
13
14
14
<!-- more -->
15
15
16
16
## Modify the built-in color
17
17
18
-
The theme controls the color through the palette, you may need to set your color in two situations:
18
+
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.
19
19
20
-
1. This color remains the same in day mode and night mode, like theme color.
21
-
2. This color is different in day mode, night mode, such as background color, font, border color, etc.
20
+
You may need to set colors under two situations:
22
21
23
-
The palette file is the `.vuepress/styles/palette.scss` file under the VuePress project folder.
22
+
1. This color remains the same in day mode and night mode, e.g.: theme color.
23
+
1. This color is different in lightmode and darkmode, such as background color, font color, border color, etc.
24
24
25
-
For the former, you need to write variable values in `palette.scss`, e.g.:
25
+
For the former, you need to write variable values directly, e.g.:
26
26
27
-
```scss title=".vuepress/styles/palette.scss"
27
+
```scss title=".vuepress/styles/config.scss"
28
28
$theme-color: #3eaf7c;
29
29
```
30
30
31
-
For the latter, you need to set up a Map with key names `light` and `dark`, and values as color values, e.g.:
31
+
For the latter, you need to set a color map with `light` and `dark` keys and color values, e.g.:
32
32
33
33
```scss title=".vuepress/styles/palette.scss"
34
-
$bg-color: (
34
+
$vp-c-bg: (
35
35
light: #fff,
36
36
dark: #000,
37
37
);
@@ -41,27 +41,29 @@ See [Theme Configuration → Color Settings](../../config/style.md#color-config)
41
41
42
42
## Modify other colors
43
43
44
-
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:
44
+
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.
45
+
46
+
If so, you can go to `index.scss` to manually override this variable value:
45
47
46
48
```scss title=".vuepress/styles/index.scss"
47
-
// override code demo header color
49
+
// override code block background color
48
50
#app {
49
-
--code-demo-c-bg-header: #fff;
51
+
--code-c-bg: #fff;
50
52
51
-
html[data-theme="dark"] & {
52
-
--code-demo-c-bg-header: #000;
53
+
[data-theme="dark"] & {
54
+
--code-c-bg: #000;
53
55
}
54
56
}
55
57
```
56
58
57
59
If not, write your own selectors to override them:
0 commit comments