vuepress-theme-vdoing vuepress-theme-vdoing
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 配置

    • 主题配置
    • 首页配置
    • front matter配置
    • 目录页配置
    • 添加摘要
    • 修改主题颜色和样式
      • 主题样式变量
      • 样式修改与适配
    • 评论栏
目录

修改主题颜色和样式

# 主题样式变量

下面是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()

上面的变量值可能不是最新的,最新的变量值可查看:palette.styl (opens new window)

# 样式修改与适配

当你想修改主题某个地方的样式时,或者你在给博客添加了一些新的模块或插件,发现样式和主题的样式不协调时,都可以在.vuepress/styles/index.styl 添加css样式来做修改。 需要注意的是,你在自己写的css样式中,请尽量使用主题提供的变量来进行适配。

小技巧:当你发现自己写的css样式优先级没有原来的样式高时,可以在样式后面添加!improtant后缀,使你的样式优先级是最高的。

上次更新: 2023/07/09, 11:40:24
添加摘要
评论栏

← 添加摘要 评论栏→

Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式