VitePressでは、dark modeのtoggleをデフォルトで使用することが出来ますが、dark modeの色を変更することも可能です。

方法

VitePressでdark themeの色を変更する方法をご紹介します。
以下のようにCSS変数を使って設定することができます。

:root {
  --sample-bg: #ffffff;
}

.dark {
  --sample-bg: #000000;
}

body {
  background-color: var(--sample-bg);
}

仕組み

toggleを切り替えると（darkモードにすると）、html要素に.darkクラスが追加されます。
lightモードにすると、.darkクラスが削除されます。

.darkクラスがある場合は、--sample-bgの値が.darkの時の色に上書きされるので色の切り替えができます。

サンプル

template

<template>
  <v-btn class="sample">button</v-btn>
</template>

style

<!-- :rootで設定するサンプルとしたいため、scopedは付けていない -->
<style>
:root {
  --sample-bg: red;
}

.dark {
  --sample-bg: blue;
}

.sample {
  background-color: var(--sample-bg);
}
</style>