样式配置
大约 3 分钟配置主题配置样式
你可以在 .vuepress/styles
中通过在 config.scss
和 palette.scss
文件中写入变量值来更改主题的样式。
你也可以在 .vuepress/styles/index.scss
中添加你自己的样式。
config.scss
config.scss
用于纯变量配置,以下是支持的变量与默认值。
响应式布局断点:
$pc
$laptop
$pad
$tablet
$mobile
代码块 (仅限 shiki):
$code-bg-color
: 代码块的背景颜色$code-color
: 代码块的字体颜色
颜色列表: $colors
例子
// 修改电脑响应式布局断点
$pc: 1920px;
默认值
/* Content Class */
$content-class: ".theme-hope-content";
/* responsive breakpoints */
// wide screen
$pc: 1440px !default;
// desktop
$laptop: 1280px !default;
// narrow desktop / iPad
$pad: 959px !default;
// wide mobile
$tablet: 719px !default;
// narrow mobile
$mobile: 419px !default;
/* Color list */
$colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #10a5a5, #096dd9, #aa6fe9,
#eb2f96 !default;
/* Code Block */
// only available with shiki highlighter
$code-color: (
light: #383a42,
dark: #abb2bf,
) !default;
$code-bg-color: (
light: #ecf4fa,
dark: #282c34,
) !default;
palette.scss
palette.scss
用于 CSS 变量写入,以下是支持的配置与默认值。
相关信息
此处的所有变量 (包括你新添加的变量) 都会被转换为 kebab-case 的格式注入为 CSS 变量。
如 $theme-color
会被注入为 --theme-color
,$backgroundColor
会被注入为 --background-color
。
颜色设置
对于所有颜色,如果其在浅色模式和深色模式颜色相同,可直接设置;否则,请设置一个 Map 类型的 Sass 变量分别给出浅色和深色模式下的颜色。此变量键名为 light
和 dark
,值为颜色值。
可用的颜色变量:
$theme-color
: 主题色$text-color
: 字体颜色$bg-color
: 背景色$bg-color-secondary
: 另一个浅背景色$bg-color-tertiary
: 另一个更浅的背景色$border-color
: 边框颜色$box-shadow
: 元素阴影色$card-shadow
: 卡片阴影色
例子
// 将主题颜色设置为红色
$theme-color: red;
// 将边框颜色加深
$border-color: (
light: #ddd,
dark: #444,
);
默认值
$theme-color: #3eaf7c !default;
$text-color: (
light: #2c3e50,
dark: #9e9e9e,
) !default;
$bg-color: (
light: #fff,
dark: #0d1117,
) !default;
$bg-color-secondary: (
light: #f8f8f8,
dark: #161b22,
) !default;
$bg-color-tertiary: (
light: #efeef4,
dark: #21262c,
) !default;
$border-color: (
light: #eaecef,
dark: #30363d,
) !default;
// shadow
$box-shadow: (
light: #f0f1f2,
dark: #282a32,
) !default;
$card-shadow: (
light: rgb(0 0 0 / 15%),
dark: rgb(0 0 0 / 30%),
) !default;
// constants
$black: (
light: #000,
dark: #fff,
);
$dark-grey: (
light: #666,
dark: #999,
);
$light-grey: (
light: #999,
dark: #666,
);
$white: (
light: #fff,
dark: #000,
);
$grey3: (
light: #333,
dark: #bbb,
);
$grey12: (
light: #bbb,
dark: #333,
);
布局设置
可用的布局变量:
导航栏:
$navbar-height
: 导航栏高度$navbar-horizontal-padding
: 导航栏水平填充$navbar-vertical-padding
: 导航栏垂直填充$navbar-mobile-height
: 移动设备上的导航栏高度$navbar-mobile-horizontal-padding
: 移动设备上的导航栏水平填充$navbar-mobile-vertical-padding
: 移动设备上的导航栏垂直填充
侧边栏:
$sidebar-width
: 侧边栏宽度$sidebar-mobile-width
: 移动设备侧边栏宽度
内容:
$content-width
: 主要内容的宽度$home-page-width
: 主页内容的宽度
字体:
$font-family
: 普通文本上使用的字体$font-family-heading:
用于标题元素的字体
代码:
$font-family-mono
: 代码上使用的字体$line-numbers-width
: 代码块中行号的宽度
过渡:
$color-transition
: 用于颜色的过渡$transform-transition
: 用于变换动画的过渡
例子
// 加大移动设备上的导航栏高度
$navbar-mobile-height: 3.5rem;
// 将 Windows 网页字体设置为思源宋体 (当然你也要记得导入这个字体)
$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "ST Heiti", sans-serif';
默认值
/* layout */
// navbar
$navbar-height: 3.75rem !default;
$navbar-horizontal-padding: 1.5rem !default;
$navbar-vertical-padding: 0.7rem !default;
$navbar-mobile-height: 3.25rem !default;
$navbar-mobile-horizontal-padding: 1rem !default;
$navbar-mobile-vertical-padding: 0.5rem !default;
// sidebar
$sidebar-width: 18rem !default;
$sidebar-mobile-width: 16rem !default;
// content
$content-width: 780px !default;
$home-page-width: 1160px !default;
// font
$font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif' !default;
$font-family-heading: 'Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif' !default;
// code
$font-family-mono: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace' !default;
$line-numbers-width: 2.5rem !default;
// transition
$color-transition: "0.3s ease" !default;
$transform-transition: "0.3s ease" !default;
index.scss
填入此文件所有内容都将解析为标准 CSS,然后在主题和插件样式之后注入。
因此,你可以在此处添加新样式或覆盖样式:
例子
// 在导航栏中将站点名称改为斜体
.site-name {
font-style: italic;
}