Theme Appearance Options

The following options control the appearance of the theme. You don’t need to pay attention to them in most cases, they are only provided for a small amount of users with needs.

Note

These options are only valid when setting directly under the theme options, setting them in each language as no effect.

iconAssets Root only

• Type: FontIconAssets

  type Link = `//${string}` | `http://${string}` | `https://${string}`;
  
  export type FontIconAssets =
    | "iconfont"
    | "fontawesome"
    | "fontawesome-with-brand"
    | Link
    | Link[];
  

• Required: No

• Details: Interface → Icon

Link of font icon asset, 'iconfont' and 'fontawesome' keywords are supported.

darkmode Enabled by default Root only

• Type: "switch" | "toggle" | "auto" | "enable" | "disable"
• Default: "switch"
• Details: Interface → Darkmode

Dark mode support options:

• "switch": switch between dark, light and auto
• "toggle": toggle between lightmode and darkmode
• "auto": Automatically decide whether to apply dark mode based on user device’s color-scheme or current time
• "enable": only dark mode
• "disable": disable dark mode

Note

If you don’t need this feature, set darkmode: "disable" to disable it.

themeColor Root only

• Type: Record<string, string> | false
• Default: false
• Details: Interface → ThemeColor

Theme color picker configuration.

fullscreen Root only

• Type: boolean
• Default: false
• Details: Interface → FullScreen

Whether show the "full screen" button.

backToTop Root only

• Type: boolean | number
• Default: true
• Details: Interface → Back to top button

Whether show back to top button.

The default trigger distance is 300px, which can be changed when you fill in the number. Filling in false disables the back to top button.

mobileBreakPoint Root only

• Type: number
• Default: 719

Window width switching mobile view and desktop view in pixels

Note

You should keep this option same value with $tablet in .vuepress/config.scss

wideBreakPoint Root only

• Type: number
• Default: 1440

Window width switching wide screen view and desktop view in pixels

Note

You should keep this option same value with $pc in .vuepress/config.scss

pure Root only

• Type: boolean
• Default: false
• Details: Interface → Pure mode

Whether enable pure mode.

Tips

Enabling this will disable some of the fancy styles.

Useful when you want to provide "A pure document site".

print Root only

• Type: boolean
• Default: true

Whether display print icon in desktop mode.

iconPrefix Root only

• Type: string
• Default: Inferred from iconAssets
• Details: Interface → Icon

Prefix of icon FontClass， usually, it can be automatically set by the theme.