Ergberg's  Jotter
🔍
×

Drop me a note



If you wish, you may send your message anonymously.
However, if you would like me to be able to reach you, please include your e-mail address.
(I do not use social networks.)



    



⟳
As of
Est. 

Dark Mode in VitePress ​

   

VitePress v1.0 supports dark mode right out of the box. The default theme has an appearance toggle to switch between light and dark.

Previous versions of VitePress

Ergberg's Jotter had a dark mode right from the start, even with the VitePress v0.4.x. Click here for the VitePress v0.x dark mode jotting.

VitePress Theme CSS Variables ​

The 1.0.0 theme got a complete overhaul. Styles that used fixed color values in previous versions, such as the custom blocks for tip and info, now consequently use CSS variables. There are about 150 CSS variables, mainly for color values.[1] A list of variables can be found in the default theme at src/client/theme-default/styles/vars.css. That file also shows how to define your own values:

css
:root {
  --vp-custom-block-info-border: var(--vp-c-divider-light);
  --vp-custom-block-info-text: var(--vp-c-text-2);
  --vp-custom-block-info-bg: var(--vp-c-white-soft);
  --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
}
.dark {
  --vp-custom-block-info-border: var(--vp-c-divider-light);
  --vp-custom-block-info-bg: var(--vp-c-black-mute);
  --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
}
:root {
  --vp-custom-block-info-border: var(--vp-c-divider-light);
  --vp-custom-block-info-text: var(--vp-c-text-2);
  --vp-custom-block-info-bg: var(--vp-c-white-soft);
  --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
}
.dark {
  --vp-custom-block-info-border: var(--vp-c-divider-light);
  --vp-custom-block-info-bg: var(--vp-c-black-mute);
  --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
}

Fenced Code ​

VitePress uses Shiki to colorize code. By default, fenced code is styled the same way for both light mode and dark mode. This can be changed with the theme property in the markdown configuration of VitePress.

js
theme: { light: [light-theme], dark: [dark-theme] }
theme: { light: [light-theme], dark: [dark-theme] }

On this site I use:

js
theme: { light: "vitesse-light", dark: "vitesse-dark" }
theme: { light: "vitesse-light", dark: "vitesse-dark" }

On the Shiki website you can find a list of supported themes and languages. There you will also find instructions on how to add more themes and languages.

The trick for color-switching is to define two code themes for Shiki. One for dark and one for light mode. VitePress then renders both versions and adds its CSS classes vp-code-light and vp-code-dark to the two versions. CSS rules ensure that only the dark version is displayed in dark mode and only the light version is displayed in light mode.

  1. A subset of those variables also existed in the previous versions with similar names. Now they all have a common --vp- prefix. ↩︎