Styles

The default theme uses SASS as the CSS pre-processor.

Users can customize style variables via a palette file,
and add extra styles via a style file.

Palette File

The path of the palette file is .vuepress/styles/palette.scss.

You can make use of it to override predefined SASS variables of the default theme.

Click to expand SASS variables


// responsive breakpoints
$MQNarrow: 959px !default;
$MQMobile: 719px !default;
$MQMobileNarrow: 419px !default;

Style File

The path of the style file is .vuepress/styles/index.scss.

You can add extra styles here, or override the default styles:

:root {
  scroll-behavior: smooth;
}

You can also make use of it to override predefined CSS variables of the default theme.

Click to expand CSS variables

// === colors ===
:root {
  // accent colors
  --vp-c-accent: #299764;
  --vp-c-accent-bg: #3eaf7c;
  --vp-c-accent-hover: #4abf8a;
  --vp-c-accent-text: var(--vp-c-white);
  --vp-c-accent-soft: rgb(16 185 129 / 14%);

  // background colors
  --vp-c-bg: #fff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-elv: #fff;

  // text colors
  --vp-c-text: rgb(60 60 67);
  --vp-c-text-mute: rgb(60 60 67 / 78%);
  --vp-c-text-subtle: rgb(60 60 67 / 56%);

  // border colors
  --vp-c-gutter: #e2e2e3;
  --vp-c-border: #c2c2c4;
  --vp-c-border-hard: #b8b8ba;

  // shadow colors
  --vp-c-shadow: rgb(0 0 0 / 15%);

  // control colors
  --vp-c-control: rgb(142 150 170 / 10%);
  --vp-c-control-hover: rgb(142 150 170 / 16%);
  --vp-c-control-disabled: #eaeaea;

  // layout colors
  --vp-navbar-c-bg: var(--vp-c-bg);
  --vp-sidebar-c-bg: var(--vp-c-bg);

  // code group colors
  --vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
  --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
  --vp-c-code-tab-active: var(--vp-c-accent);

  // badge colors
  --badge-c-tip-text: var(--vp-c-green-text);
  --badge-c-tip-bg: var(--vp-c-green-soft);
  --badge-c-warning-text: var(--vp-c-yellow-text);
  --badge-c-warning-bg: var(--vp-c-yellow-soft);
  --badge-c-danger-text: var(--vp-c-red-text);
  --badge-c-danger-bg: var(--vp-c-red-soft);
  --badge-c-important-text: var(--vp-c-purple-text);
  --badge-c-important-bg: var(--vp-c-purple-soft);
  --badge-c-info-text: var(--vp-c-indigo-text);
  --badge-c-info-bg: var(--vp-c-indigo-soft);
  --badge-c-note-text: var(--vp-c-grey-text);
  --badge-c-note-bg: var(--vp-c-grey-soft);

  // font vars
  --font-family:
    -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen, ubuntu,
    cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  // layout vars
  --navbar-height: 3.6rem;
  --navbar-padding-v: 0.7rem;
  --navbar-padding-h: 1.5rem;
  --sidebar-width: 20rem;
  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
  --content-width: 740px;
  --homepage-width: 960px;

  // header offset
  --header-offset: var(--navbar-height);

  // transition vars
  --vp-t-color: 0.3s ease;
  --vp-t-transform: 0.3s ease;

  // external-link-icon
  --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z'/%3E%3C/svg%3E");
  --external-link-c-icon: var(--vp-c-text-mute);
}

Click to expand dark mode CSS variables

[data-theme='dark'] {
  // brand colors
  --vp-c-accent: #3dd68c;
  --vp-c-accent-bg: #3aa675;
  --vp-c-accent-hover: #349469;
  --vp-c-accent-soft: rgb(16 185 129 / 16%);

  // background colors
  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-elv: #202127;

  // text colors
  --vp-c-text: rgb(235 235 245 / 86%);
  --vp-c-text-mute: rgb(235 235 245 / 60%);
  --vp-c-text-subtle: rgb(235 235 245 / 38%);

  // border colors
  --vp-c-gutter: #000;
  --vp-c-border: #3c3f44;
  --vp-c-border-hard: #45484e;

  // shadow color
  --vp-c-shadow: rgb(0 0 0 / 30%);

  // control colors
  --vp-c-control: rgb(101 117 133 / 12%);
  --vp-c-control-hover: rgb(101 117 133 / 18%);
  --vp-c-control-disabled: #363636;
}