Style config

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-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

Demo

// update pc breakpoint
$pc: 1920px;

Default value

/* 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 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 $theme-color will be injected as --theme-color, and $backgroundColor will be injected as --$background-color.

Color Config

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:

• $theme-color: theme color
• $text-color: text color
• $bg-color: background color
• $bg-color-secondary: another "light" background color
• $bg-color-tertiary: another "lighter" background color
• $border-color: border color
• $box-shadow: shadow color using on elements
• $card-shadow: shadow color using on cards

Demo

// set theme color to red
$theme-color: red;

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

Default value

$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,
);

Layout Config

Available layout variables:

Navbar:

• $navbar-height: navbar height
• $navbar-horizontal-padding: navbar horizontal padding
• $navbar-vertical-padding: navbar vertical padding
• $navbar-mobile-height: navbar height on mobile devices
• $navbar-mobile-horizontal-padding: navbar horizontal padding on mobile
• $navbar-mobile-vertical-padding: 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

Fonts:

• $font-family: font family used on normal text
• $font-family-heading: font family used on heading elements

Code:

• $font-family-mono: font family used on code
• $line-numbers-width: width of line number in code blocks

Transition:

• $color-transition: transition used on colors
• $transform-transition: transition used on transform animation

Demo

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

// Override default font
$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", sans-serif';

Default value

/* 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

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;
}