feat: improve theme

examples/vue-codemirror/index.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
   import { defineComponent, reactive, computed, shallowRef, onBeforeMount } from 'vue'
-  import { Theme, useTheme, getSystemTheme } from '@/composables/theme'
+  import { Theme, useTheme } from '@/composables/theme'
   import Loading from '@/components/common/loading.vue'
   import languages from './languages'
   import themes from './themes'
@@ -40,22 +40,14 @@
       Editor
     },
     setup() {
-      const themeState = useTheme()
       const config = reactive({
         disabled: false,
         indentWithTab: true,
         tabSize: 2,
         autofocus: true,
         height: 'auto',
         language: 'javascript',
-        theme:
-          themeState.theme.value === Theme.Light
-            ? 'default'
-            : themeState.theme.value === Theme.Dark
-            ? 'oneDark'
-            : getSystemTheme() === Theme.Light
-            ? 'default'
-            : 'oneDark'
+        theme: useTheme().theme.value === Theme.Dark ? 'oneDark' : 'default'
       })
 
       const loading = shallowRef(false)

src/composables/theme.ts

@@ -10,6 +10,7 @@ export enum Theme {
 const THEME_STORAGE_KEY = '__theme'
 export const THEMES = [Theme.System, Theme.Light, Theme.Dark]
 
+// system theme
 export const getSystemTheme = () => {
   if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
     return Theme.Dark
@@ -19,22 +20,14 @@ export const getSystemTheme = () => {
   }
 }
 
+// local theme
 export const getLocalTheme = () => {
   const historyTheme = storage.get(THEME_STORAGE_KEY) as Theme
   if (historyTheme && THEMES.includes(historyTheme)) {
     return historyTheme
   }
 }
 
-export const getClientTheme = () => {
-  // local theme
-  const localTheme = getLocalTheme()
-  // system theme
-  const systemTheme = getSystemTheme()
-  // not specified
-  return localTheme ?? systemTheme ?? Theme.System
-}
-
 const ThemeSymbol = Symbol('theme')
 const createThemeStore = (defaultTheme: Theme) => {
   const theme = ref(defaultTheme)

src/csr.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import { createWebHistory } from 'vue-router'
 import highlight from './plugins/highlight'
 import adsense from './composables/adsense'
-import { getClientTheme } from './composables/theme'
+import { Theme, getLocalTheme } from './composables/theme'
 import { GOOGLE_ADSENSE_CLIENT_ID } from './config'
 import { createUniversalApp } from './main'
 
@@ -12,7 +12,7 @@ const { app, router, visitor } = createUniversalApp({
   // MARK: use `createApp`, not `createSSRApp`, to avoid hydrate
   appCreator: createApp,
   routerHistory: createWebHistory(),
-  initTheme: getClientTheme(),
+  initTheme: getLocalTheme() ?? Theme.System,
   language: navigator.language,
   userAgent: navigator.userAgent
 })