Style config

About 3 min

You can change the theme's styles in .vuepress/styles by setting variable values in the config.scss and palette.scss files.

Also, you can add your own styles in .vuepress/styles/index.scss.

config.scss

config.scss is used for pure variable config, the following are supported variables and default values.

Responsive breakpoints:

$pc
$laptop
$pad
$tablet
$mobile

Theme Colors:

$theme-color: primary theme color
$theme-colors: theme colors you want to use besides primary theme color

Code block (Only available with shiki):

$code-bg-color: background color for code blocks
$code-color: font color for code blocks

Color list:

$colors: Used to generate color list.

Demo

// update pc breakpoint
$pc: 1920px;

Default value

$laptop: 1280px !default;

// narrow desktop / iPad
$pad: 959px !default;

// wide mobile
$tablet: 719px !default;

// narrow mobile
$mobile: 419px !default;

/* theme color */
$theme-color: #3eaf7c !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 is used for CSS variable injecting, the following are supported configurations and default values.

Info

All variables here (including your newly added variables) will be converted to kebab-case format and injected as CSS variables.

For example $vp-c-text will be injected as --vp-c-text, and $vp-c-bg will be injected as --vp-c-bg.

For all colors, if they are the same in light mode and dark mode, you can set them directly; otherwise, please set a Sass variable of type Map to give the color values in light and dark modes respectively.

Available color variables:

Text

$vp-c-text: Default text color.

By default, the theme automatically generates the following colors based on the $vp-c-text, but you can still customize them:

$vp-c-text-mute: Colors for muted texts, such as "inactive menu" or "info texts".
$vp-c-text-subtle: Color for subtle text, such as as "placeholders" or "caret icon".

Background

$vp-c-bg: The bg color used for main screen.
$vp-c-bg-alt: The alternative bg color used in places such as "sidebar", or "code block".
$vp-c-bg-elv: The elevated bg color. This is used at parts where it "floats", such as "dialog".

Shadow

$vp-c-shadow: Shadow color

Accent

Accent color and brand colors which used for interactive components.

By default, the theme automatically generates the following accent colors based on the $theme-color in config file, but you can still customize them:

$vp-c-accent: The most solid color used mainly for colored text. It must satisfy the contrast ratio against when used on top of $vp-c-accent-soft.
$vp-c-accent-hover: Color used for hover state.
$vp-c-accent-bg: Color used for solid background. It must satisfy the contrast ratio with $vp-c-accent-text on top of it.
$vp-c-accent-text: Color used for text with $vp-c-accent-bg background. It must satisfy the contrast ratio with $vp-c-accent-bg.
$vp-c-accent-soft: The color used for subtle background such as custom container or badges. It must satisfy the contrast ratio when putting $vp-c-accent colors on top of it.
The soft color must be semi transparent alpha channel. This is crucial because it allows adding multiple "soft" colors on top of each other to create a accent, such as when having inline code block inside custom containers.

Borders

$vp-c-border: Border color for interactive components. For example this should be used for a button outline.
$vp-c-divider: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.

By default, the theme automatically generates the following colors based on the $vp-c-border, but you can still customize them:

$vp-c-border-hard: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.

Controls

$vp-c-control: Background color for interactive controls, such as buttons or checkboxes.
$vp-c-control-hover: Background color for hover state of interactive controls.
$vp-c-control-disabled: Color for disabled state of interactive controls.

Demo

// set accent color to red
// Note: you should also set other accent color variables to make them constant
$vp-c-accent: red;

// setting border color with a darker value
$vp-c-border: (
  light: #ddd,
  dark: #444,
);

Default value

// background
$vp-c-bg: (
  light: #fff,
  dark: #1b1b1f,
) !default;
$vp-c-bg-alt: (
  light: #f6f6f7,
  dark: #161618,
) !default;
$vp-c-bg-elv: (
  light: #fff,
  dark: #202127,
) !default;

// text
$vp-c-text: (
  light: rgb(60 60 67),
  dark: rgb(235 235 245 / 86%),
) !default;

// border
$vp-c-border: (
  light: #c2c2c4,
  dark: #3c3f44,
) !default;
$vp-c-gutter: (
  light: #e2e2e3,
  dark: #000,
) !default;

// shadow
$vp-c-shadow: (
  light: rgb(0 0 0 / 15%),
  dark: rgb(0 0 0 / 30%),
) !default;

// control
$vp-c-control: (
  light: rgb(142 150 170 / 10%),
  dark: rgb(101 117 133 / 12%),
) !default;
$vp-c-control-hover: (
  light: rgb(142 150 170 / 16%),
  dark: rgb(101 117 133 / 18%),
) !default;
$vp-c-control-disabled: (
  light: #eaeaea,
  dark: #363636,
) !default;

Layout Config

Available layout variables:

Navbar:

$navbar-height: navbar height
$navbar-padding-x: navbar horizontal padding
$navbar-padding-y: navbar vertical padding
$navbar-mobile-height: navbar height on mobile devices
$navbar-mobile-padding-x: navbar horizontal padding on mobile
$navbar-mobile-padding-y: navbar vertical padding on mobile

Sidebar:

$sidebar-width: sidebar width
$sidebar-mobile-width: sidebar width on mobile

Content:

$content-width: width of main content
$home-page-width: width of homepage content

Demo

// update navbar height on mobile
$navbar-mobile-height: 3.5rem;

Default value

// navbar
$navbar-height: 3.75rem !default;
$navbar-padding-x: 1.5rem !default;
$navbar-padding-y: 0.7rem !default;
$navbar-mobile-height: 3.25rem !default;
$navbar-mobile-padding-x: 1rem !default;
$navbar-mobile-padding-y: 0.5rem !default;

// sidebar
$sidebar-width: 18rem !default;
$sidebar-mobile-width: 16rem !default;

// content
$content-width: 780px !default;
$home-page-width: 1160px !default;

Font

Available font variables:

$vp-font: font family for normal text
$vp-font-heading: font family for heading elements
$vp-font-mono: font family for code blocks

Default value

// font
$vp-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", STHeiti, "Microsoft YaHei", SimSun, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"' !default;
$vp-font-heading: $vp-font !default;
$vp-font-mono: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace' !default;

Transition

Available transition variables:

$vp-t-color: transition used on colors
$vp-t-transform: transition used on transform animation

Default value

// transition
$vp-t-color: "0.3s ease" !default;
$vp-t-transform: "0.3s ease" !default;

index.scss

Everything filling in this will be parsed to standard CSS and then injected after theme and plugins styles.

So you can add new styles or override styles here:

Demo

// make site name in navbar italic
.site-name {
  font-style: italic;
}