fix dark and light mode in playground editor

docs/.vitepress/theme/Playground.vue

@@ -6,6 +6,7 @@ import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { useBreakpoints } from './breakpoint';
 import { useDialect } from './dialect';
+import { useDarkMode } from './dark-mode';
 
 const formatter = {
   cockroachdb: 'postgresql',
@@ -20,6 +21,7 @@ const formatter = {
 };
 
 const { dialect } = useDialect();
+const { isDark } = useDarkMode();
 const { type } = useBreakpoints();
 const isVertical = computed(() => ['xs', 'sm'].includes(type.value));
 
@@ -125,7 +127,7 @@ watch([code, dialect], () => {
     <vue-monaco-editor
       id="editor"
       language="typescript"
-      theme="vs-dark"
+      :theme="isDark ? 'vs-dark' : 'vs-light'"
       v-model:value="code"
       :options="editorOptions"
       :saveViewState="false"
@@ -135,7 +137,7 @@ watch([code, dialect], () => {
     <vue-monaco-editor
       id="output"
       language="sql"
-      theme="vs-dark"
+      :theme="isDark ? 'vs-dark' : 'vs-light'"
       v-model:value="sql"
       :options="outputEditorOptions"
       :saveViewState="false"

docs/.vitepress/theme/ToggleDark.vue

@@ -1,27 +1,14 @@
 <script setup>
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, watch } from 'vue';
+import { useDarkMode } from './dark-mode';
+const { isDark, toggleDark } = useDarkMode();
 
-const prefersDark = ref(false);
-const setting = ref('auto');
-const isDark = computed(
-  () =>
-    setting.value === 'dark' || (prefersDark.value && setting.value !== 'light')
-);
-const toggleDark = () => {
-  setting.value = setting.value === 'dark' ? 'light' : 'dark';
-  localStorage.setItem('color-scheme', setting.value);
-};
-watch(isDark, () => {
+function onDarkChange() {
   document.documentElement.classList.toggle('dark', isDark.value);
-});
+}
 
-onMounted(() => {
-  prefersDark.value =
-    window.matchMedia &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches;
-  setting.value = localStorage.getItem('color-scheme') || 'auto';
-  document.documentElement.classList.toggle('dark', isDark.value);
-});
+watch(isDark, onDarkChange);
+onMounted(onDarkChange);
 </script>
 
 <template>

docs/.vitepress/theme/dark-mode.js

@@ -0,0 +1,27 @@
+import { ref, computed, inject } from 'vue';
+
+export function createDarkMode(app) {
+  const prefersDark = ref(false);
+  const setting = ref('auto');
+
+  const isDark = computed(
+    () =>
+      setting.value === 'dark' ||
+      (prefersDark.value && setting.value !== 'light')
+  );
+  const toggleDark = () => {
+    setting.value = setting.value === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('color-scheme', setting.value);
+  };
+
+  prefersDark.value =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  setting.value = localStorage.getItem('color-scheme') || 'auto';
+
+  app.provide('is-dark', { isDark, toggleDark });
+}
+
+export function useDarkMode() {
+  return inject('is-dark');
+}

docs/.vitepress/theme/index.js

@@ -5,6 +5,7 @@ import { createDialect } from './dialect';
 import SqlOutput from './SqlOutput.vue';
 import Playground from './Playground.vue';
 import './styles.css';
+import { createDarkMode } from './dark-mode';
 
 // @todo: hack, vite.config.ts define option seem not to work
 globalThis.process = globalThis.process || {
@@ -17,6 +18,7 @@ export default {
 
   enhanceApp({ app }) {
     createDialect(app);
+    createDarkMode(app);
     app.component('SqlOutput', SqlOutput);
     app.component('Playground', Playground);
     app.use(VueMonacoEditorPlugin, {