✨ (litenote config) implement dark mode on notes

Closes #5

src/modules/repo/interfaces/UserSettings.ts

@@ -6,4 +6,5 @@ export interface UserSettings {
     | 'Maven Pro'
     | 'Noto Sans KR'
     | 'Tajawal'
+  mode?: 'light' | 'dark'
 }

src/modules/repo/store/userRepo.store.ts

@@ -11,8 +11,8 @@ interface State {
   user: string
   repo: string
   files: RepoFile[]
-  readme: string | null
-  userSettings: UserSettings | null
+  readme?: string | null
+  userSettings?: UserSettings | null
 }
 
 export const useUserRepoStore = defineStore({
@@ -21,8 +21,8 @@ export const useUserRepoStore = defineStore({
     user: '',
     repo: '',
     files: [],
-    readme: null,
-    userSettings: null
+    readme: undefined,
+    userSettings: undefined
   }),
   actions: {
     async setUserRepo(newUser: string, newRepo: string) {
@@ -45,7 +45,7 @@ export const useUserRepoStore = defineStore({
     resetFiles() {
       this.files = []
       this.readme = null
-      this.userSettings = null
+      this.userSettings = undefined
     }
   }
 })

src/modules/user/hooks/useUserSettings.hook.ts

@@ -1,17 +1,38 @@
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { watchEffect } from 'vue'
 
+const DEFAULT_FONT_POLICY = "'Courier Prime', monospace"
+
+const LIGHT_FONT_COLOR = '#4a4a4a'
+const LIGHT_BACKGROUND = '#ffffff'
+
+const DARK_FONT_COLOR = '#f7f1e3'
+const DARK_BACKGROUND = '#202020'
+
 export const useUserSettings = () => {
   const store = useUserRepoStore()
 
   watchEffect(() => {
+    if (store.userSettings === undefined) {
+      return
+    }
+
     const fontFamily = store.userSettings?.fontFamily
+    const mode = store.userSettings?.mode
     const root = document.documentElement
 
-    if (fontFamily) {
-      root.style.setProperty('--font-family', fontFamily)
-    } else {
-      root.style.setProperty('--font-family', "'Courier Prime', monospace")
+    root.style.setProperty('--font-family', fontFamily ?? DEFAULT_FONT_POLICY)
+
+    switch (mode) {
+      case 'dark':
+        root.style.setProperty('--font-color', DARK_FONT_COLOR)
+        root.style.setProperty('--background-color', DARK_BACKGROUND)
+        break
+      case 'light':
+      default:
+        root.style.setProperty('--font-color', LIGHT_FONT_COLOR)
+        root.style.setProperty('--background-color', LIGHT_BACKGROUND)
+        break
     }
   })
 }