feat(vue-codemirror): themes

examples/naivebayes/index.vue

@@ -26,12 +26,7 @@
       </div>
     </div>
     <div class="divider"></div>
-    <codemirror
-      v-model="codes.disabled"
-      :style="{ height: 'auto' }"
-      :extensions="editorExtensions"
-      disabled
-    />
+    <codemirror v-model="codes.disabled" :style="{ height: 'auto' }" :extensions="editorExtensions" disabled />
     <div class="divider"></div>
     <codemirror
       v-model="codes.enabled"
@@ -54,7 +49,7 @@
   import { Codemirror } from 'vue-codemirror'
   import { javascript } from '@codemirror/lang-javascript'
   import { oneDark } from '@codemirror/theme-one-dark'
-  import { Theme, useTheme } from '@/composables/theme'
+  import { useTheme, Theme } from '@/composables/theme'
   import case1 from './01-base'
   import case2 from './02-spam'
   import case3 from './03-news'
@@ -92,8 +87,9 @@
       const handleEditorReady = (payload: any) => {
         editor.value = payload.view
       }
+
       const editorExtensions = computed(() => {
-        return [javascript(), useTheme().theme.value === Theme.Dark ? oneDark : []]
+        return [javascript(), useTheme().currentTheme.value === Theme.Dark ? oneDark : []]
       })
 
       const loading = ref(false)

examples/vue-codemirror/index.vue

@@ -26,7 +26,7 @@
   import { Theme, useTheme } from '@/composables/theme'
   import Loading from '@/components/common/loading.vue'
   import languages from './languages'
-  import themes from './themes'
+  import * as themes from './themes'
   import Toolbar from './toolbar.vue'
   import Editor from './editor.vue'
 
@@ -54,7 +54,7 @@
       const langCodeMap = reactive(new Map<string, { code: string; language: () => any }>())
       const currentLangCode = computed(() => langCodeMap.get(config.language)!)
       const currentTheme = computed(() => {
-        return config.theme !== 'default' ? themes[config.theme] : void 0
+        return config.theme !== 'default' ? (themes as any)[config.theme] : void 0
       })
 
       const ensureLanguageCode = async (targetLanguage: string) => {

examples/vue-codemirror/lang-code/vue/index.ts

@@ -0,0 +1,7 @@
+import { vue } from '@codemirror/lang-vue'
+import code from './vue.vue?raw'
+
+export default {
+  language: vue,
+  code
+}

examples/vue-codemirror/lang-code/vue/vue.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>{{ greeting }}</h1>
+    <button @click="changeGreeting">Click me!</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        greeting: 'Hello, Vue 3!'
+      }
+    },
+    methods: {
+      changeGreeting() {
+        this.greeting = 'Hello, Vue 3 Updated!'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  h1 {
+    color: blue;
+  }
+</style>

examples/vue-codemirror/themes.ts

@@ -1,5 +1,21 @@
-import { oneDark } from '@codemirror/theme-one-dark'
-
-export default {
-  oneDark
-} as Record<string, any>
+export { oneDark } from '@codemirror/theme-one-dark'
+export { materialDark } from 'cm6-theme-material-dark'
+export { nord } from 'cm6-theme-nord'
+export {
+  amy,
+  ayuLight,
+  barf,
+  bespin,
+  birdsOfParadise,
+  boysAndGirls,
+  clouds,
+  cobalt,
+  coolGlow,
+  dracula,
+  espresso,
+  noctisLilac,
+  rosePineDawn,
+  smoothy,
+  solarizedLight,
+  tomorrow
+} from 'thememirror'

package.json

@@ -29,6 +29,7 @@
     "@codemirror/lang-python": "^6.x",
     "@codemirror/lang-rust": "^6.x",
     "@codemirror/lang-sql": "^6.x",
+    "@codemirror/lang-vue": "^0.1.2",
     "@codemirror/lang-xml": "^6.x",
     "@codemirror/language": "^6.x",
     "@codemirror/legacy-modes": "^6.x",
@@ -42,6 +43,8 @@
     "@videojs-player/vue": "^1.0.0",
     "@videojs/themes": "^1.0.1",
     "axios": "^1.5.0",
+    "cm6-theme-material-dark": "^0.2.0",
+    "cm6-theme-nord": "^0.2.0",
     "codemirror": "^6.x",
     "dedent": "^1.5.1",
     "flv.js": "^1.6.2",
@@ -55,6 +58,7 @@
     "react-dom": "^18.2.0",
     "segmentit": "^2.0.3",
     "swiper": "^10.2.0",
+    "thememirror": "^2.0.1",
     "video.js": "^8.5.2",
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",

src/components/layout/navbar.vue

@@ -18,7 +18,7 @@
   const toggleTheme = () => {
     const currentIndex = THEMES.indexOf(theme.theme.value)
     const newIndex = currentIndex === THEMES.length - 1 ? 0 : currentIndex + 1
-    theme.set(THEMES[newIndex])
+    theme.setTheme(THEMES[newIndex])
   }
 
   const activatedTheme = computed(() => {

src/composables/theme.ts

@@ -1,4 +1,4 @@
-import { App, inject, ref, readonly } from 'vue'
+import { App, inject, ref, computed, readonly } from 'vue'
 import storage from '@/services/storage'
 
 export enum Theme {
@@ -38,9 +38,27 @@ const createThemeStore = (defaultTheme: Theme) => {
     }
   }
 
+  const systemTheme = ref(defaultTheme)
+  const initOnClient = () => {
+    systemTheme.value = getSystemTheme() || defaultTheme
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+      systemTheme.value = matches ? Theme.Dark : Theme.Light
+    })
+  }
+
+  const currentTheme = computed(() => {
+    if (theme.value === Theme.System) {
+      return systemTheme.value
+    } else {
+      return theme.value
+    }
+  })
+
   return {
     theme: readonly(theme),
-    set: setTheme
+    currentTheme,
+    setTheme,
+    initOnClient
   }
 }
 

src/csr.ts

@@ -8,7 +8,7 @@ import { createUniversalApp } from './main'
 
 import '@/styles/app.scss'
 
-const { app, router, visitor } = createUniversalApp({
+const { app, router, visitor, theme } = createUniversalApp({
   // MARK: use `createApp`, not `createSSRApp`, to avoid hydrate
   appCreator: createApp,
   routerHistory: createWebHistory(),
@@ -20,6 +20,7 @@ const { app, router, visitor } = createUniversalApp({
 app.use(highlight)
 app.use(adsense, { ID: GOOGLE_ADSENSE_CLIENT_ID, enabledAutoAD: false })
 visitor.resetStateOnClient()
+theme.initOnClient()
 
 router.isReady().finally(() => {
   app.mount('#app', true).$nextTick(() => {