修改主题颜色和样式
# 主题样式变量
下面是vdoing主题使用的css变量，你可以在.vuepress/styles/palette.styl修改这些变量覆盖它们：
//***vdoing主题-CSS变量***//
// 颜色
$bannerTextColor = #fff // 首页banner区(博客标题区)的文本颜色
$accentColor = #11A8CD
$activeColor = #ff5722
$arrowBgColor = #ccc
// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1100px
$rightMenuWidth = 230px // 右侧菜单
// 代码块
$lineNumbersWrapperWidth = 2.5rem
// 浅色模式
.theme-mode-light
--bodyBg: #f4f4f4
--mainBg: rgba(255,255,255,1)
--sidebarBg: rgba(255,255,255,.8)
--blurBg: rgba(255,255,255,.9)
--textColor: #004050
--textLightenColor: #0085AD
--borderColor: rgba(0,0,0,.15)
// 代码块浅色主题
--codeBg: #f6f6f6
--codeColor: #525252
codeThemeLight()
// 代码块深色主题
// --codeBg: #252526
// --codeColor: #fff
// codeThemeDark()
// 深色模式
.theme-mode-dark
--bodyBg: rgb(39,39,43)
--mainBg: rgba(30,30,34,1)
--sidebarBg: rgba(30,30,34,.8)
--blurBg: rgba(30,30,34,.8)
--textColor: rgb(140,140,150)
--textLightenColor: #0085AD
--borderColor: #2C2C3A
--codeBg: #252526
--codeColor: #fff
codeThemeDark()
// 阅读模式
.theme-mode-read
--bodyBg: rgb(240,240,208)
--mainBg: rgba(245,245,213,1)
--sidebarBg: rgba(245,245,213,.8)
--blurBg: rgba(245,245,213,.9)
--textColor: #004050
--textLightenColor: #0085AD
--borderColor: rgba(0,0,0,.15)
--codeBg: #282c34
--codeColor: #fff
codeThemeDark()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
上面的变量值可能不是最新的，最新的变量值可查看：palette.styl (opens new window)
# 样式修改与适配
当你想修改主题某个地方的样式时，或者你在给博客添加了一些新的模块或插件，发现样式和主题的样式不协调时，都可以在.vuepress/styles/index.styl
添加css样式来做修改。
需要注意的是，你在自己写的css样式中，请尽量使用主题提供的变量来进行适配。
小技巧：当你发现自己写的css样式优先级没有原来的样式高时，可以在样式后面添加
!improtant后缀，使你的样式优先级是最高的。
编辑 (opens new window)
上次更新: 2024/11/14, 23:52:33