样式配置

大约 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 变量写入，以下是支持的配置与默认值。

颜色设置

对于所有颜色，如果其在浅色模式和深色模式颜色相同，可直接设置；否则，请设置一个 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;
}

样式配置

# config.scss

# palette.scss

# 颜色设置

# 布局设置

# index.scss

config.scss

palette.scss

颜色设置

布局设置

index.scss