feat(editor): detect system preferred color scheme

Novout · Nov 17, 2021 · c7d3303 · c7d3303
1 parent 4a3cfa4
commit c7d3303
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/plugin/theme/external.ts b/src/plugin/theme/external.ts
@@ -3,8 +3,9 @@ import { onAfterMounted } from '../core/cycle'
 import { ThemeNormalize } from './utils'
 import { useProjectStore } from '@/store/project'
 import { useEnv } from '@/use/env'
-import { useDefines } from '../../use/defines'
+import { useDefines } from '@/use/defines'
 import { BetterWriteThemes } from '@/types/editor'
+import { ColorSchemeType, usePreferredColorScheme } from '@vueuse/core'
 
 export const setTheme = () => {
   onAfterMounted(() => {
@@ -17,18 +18,36 @@ export const setThemeInvokate = () => {
   const PROJECT = useProjectStore()
 
   const env = useEnv()
-  const defines = useDefines()
 
   let theme = EDITOR.configuration.theme
 
-  if (PROJECT.name === env.projectEmpty()) theme = defines.themes()[1]
+  if (PROJECT.name === env.projectEmpty()) theme = setDefaultColorTheme()
 
   const value = ThemeNormalize(theme)
 
   document.body.removeAttribute('class')
   document.body.classList.add(value)
 }
 
+export const setDefaultColorTheme = (): BetterWriteThemes => {
+  const defines = useDefines()
+  const color = usePreferredColorScheme()
+
+  let _color = defines.themes()[1] // for any case, dark theme
+
+  switch (color.value) {
+    case 'light':
+      _color = defines.themes()[0] // white theme
+      break
+    case 'dark':
+    case 'no-preference':
+      _color = defines.themes()[1] // dark theme
+      break
+  }
+
+  return _color
+}
+
 export const setEditorLogo = (theme: BetterWriteThemes) => {
   let logo = ''
 

diff --git a/src/plugin/theme/utils.ts b/src/plugin/theme/utils.ts
@@ -1,4 +1,5 @@
 import { BetterWriteThemes } from '@/types/editor'
+import { setDefaultColorTheme } from './external'
 
 export const ThemeNormalize = (theme: BetterWriteThemes) => {
   return (
@@ -8,6 +9,6 @@ export const ThemeNormalize = (theme: BetterWriteThemes) => {
       'BetterWrite - Rise': 'betterwrite-rise',
       'BetterWrite - Ascend': 'betterwrite-ascend',
       'BetterWrite - Harmonic': 'betterwrite-harmonic',
-    }[theme] || 'betterwrite-dark'
+    }[theme] || setDefaultColorTheme()
   )
 }