From 83976897d64dd0c68d8dc5862faed1c78f0a6864 Mon Sep 17 00:00:00 2001
From: Surmon <surmon.me@gmail.com>
Date: Fri, 1 Sep 2023 20:11:53 +0700
Subject: [PATCH] feat: improve theme

---
 examples/vue-codemirror/index.vue | 12 ++----------
 src/composables/theme.ts          | 11 ++---------
 src/csr.ts                        |  4 ++--
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/examples/vue-codemirror/index.vue b/examples/vue-codemirror/index.vue
index 83e95f7c..b9fa6b07 100644
--- a/examples/vue-codemirror/index.vue
+++ b/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,7 +40,6 @@
       Editor
     },
     setup() {
-      const themeState = useTheme()
       const config = reactive({
         disabled: false,
         indentWithTab: true,
@@ -48,14 +47,7 @@
         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)
diff --git a/src/composables/theme.ts b/src/composables/theme.ts
index 89566b53..cf195fa9 100644
--- a/src/composables/theme.ts
+++ b/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,6 +20,7 @@ export const getSystemTheme = () => {
   }
 }
 
+// local theme
 export const getLocalTheme = () => {
   const historyTheme = storage.get(THEME_STORAGE_KEY) as Theme
   if (historyTheme && THEMES.includes(historyTheme)) {
@@ -26,15 +28,6 @@ export const getLocalTheme = () => {
   }
 }
 
-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)
diff --git a/src/csr.ts b/src/csr.ts
index d0cf609c..133df2cd 100644
--- a/src/csr.ts
+++ b/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
 })