样式配置

大约 3 分钟

你可以在 .vuepress/styles 中通过在 config.scsspalette.scss 文件中写入变量值来更改主题的样式。

你也可以在 .vuepress/styles/index.scss 中添加你自己的样式。

config.scss

config.scss 用于纯变量配置,以下是支持的变量与默认值。

响应式布局断点:

  • $pc
  • $laptop
  • $pad
  • $tablet
  • $mobile

代码块:

  • $code-light-theme: 日间模式代码块主题
  • $code-dark-theme: 夜间模式代码块主题
  • $code-lang: 代码块语言

内容类名: $content-class

颜色列表: $colors

例子
// 修改日间模式代码主题
$code-light-theme: "coy";

// 修改电脑响应式布局断点
$pc: 1920px;
默认值
/* 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;

/* Content Class */
$content-class: ".theme-hope-content" !default;

/* Color list */
$colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #10a5a5, #096dd9, #aa6fe9,
  #eb2f96 !default;

/* Code Block */
// theme
$code-light-theme: "one-light" !default;
$code-dark-theme: "one-dark" !default;
// code languages
$code-lang: "c" "cpp" "cs" "css" "dart" "docker" "fs" "go" "html" "java" "js"
  "json" "kt" "less" "makefile" "md" "php" "py" "rb" "rs" "sass" "scss" "sh"
  "ts" "vue" "yml" !default;

palette.scss

palette.scss 用于 CSS 变量写入,以下是支持的配置与默认值。

相关信息

此处的所有变量 (包括你新添加的变量) 都会被转换为 kebab-case 的格式注入为 CSS 变量。

$theme-color 会被注入为 --theme-color$backgroundColor 会被注入为 --background-color

颜色设置

对于所有颜色,如果其在浅色模式和深色模式颜色相同,可直接设置;否则,请设置一个 Map 类型的 Sass 变量分别给出浅色和深色模式下的颜色值。

可用的颜色变量:

  • $theme-color: 主题色
  • $text-color: 字体颜色
  • $bg-color: 背景色
  • $bg-color-light: 浅背景色
  • $bg-color-active: 用于激活元素的背景色
  • $bg-color-back: 用于背景元素的背景色
  • $bg-color-float: 用于浮动元素的背景色
  • $bg-color-blur: 用于模糊元素的背景色
  • $bg-color-float-blur: 用于浮动模糊元素的背景色
  • $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: #1d2025,
) !default;

$bg-color-light: (
  light: #fff,
  dark: #252934,
) !default;

$bg-color-active: (
  light: #f8f8f8,
  dark: #252934,
) !default;

$bg-color-back: (
  light: #f8f8f8,
  dark: #1d2025,
) !default;

$bg-color-float: (
  light: #fff,
  dark: #252934,
) !default;

$bg-color-blur: (
  light: rgba(255, 255, 255, 0.9),
  dark: rgba(29, 32, 37, 0.9),
) !default;

$bg-color-float-blur: (
  light: rgba(255, 255, 255, 0.9),
  dark: rgba(37, 41, 52, 0.9),
) !default;

$border-color: (
  light: #eaecef,
  dark: #302d28,
) !default;

// shadow
$box-shadow: (
  light: #f0f1f2,
  dark: #282a32,
) !default;

$card-shadow: (
  light: rgba(0, 0, 0, 0.15),
  dark: rgba(0, 0, 0, 0.3),
) !default;

布局设置

可用的布局变量:

导航栏:

  • $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-fancy: 用于花哨元素的字体

代码:

  • $font-family-code: 代码上使用的字体
  • $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: 740px !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-fancy: '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-code: '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;
}
Loading...