✨ (litenote config) implement dark mode on notes

Closes #5

src/components/FluxNote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flux-note content note-container">
+  <main class="flux-note content note-container" v-if="!isLoading">
     <div class="note readme">
       <header-note class="header" :user="user" :repo="repo" />
       <div class="repo-title-breadcrumb">
@@ -31,7 +31,7 @@
       :sha="stackedNote"
       :title="titles[stackedNote ?? '']"
     />
-  </div>
+  </main>
 </template>
 
 <script lang="ts">
@@ -84,6 +84,7 @@ export default defineComponent({
     )
 
     const hasContent = computed(() => !!renderedContent.value)
+    const isLoading = computed(() => renderedContent.value === undefined)
 
     watch(
       renderedContent,
@@ -109,6 +110,7 @@ export default defineComponent({
 
     return {
       hasContent,
+      isLoading,
       renderedContent,
       stackedNotes,
       resetStackedNotes,
@@ -120,15 +122,35 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 $header-height: 40px;
 
 .flux-note {
   font-family: var(--font-family);
+  color: var(--font-color);
+  background-color: var(--background-color);
+  transition-property: color, background-color;
+  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
 
   display: flex;
   flex: 1;
 
+  &.content {
+    .title,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--font-color);
+    }
+
+    blockquote {
+      background-color: var(--background-color);
+    }
+  }
+
   .header {
     height: $header-height;
   }
@@ -154,7 +176,6 @@ $header-height: 40px;
     overflow-y: auto;
     height: 100vh;
     position: sticky;
-    background-color: #fff;
 
     &:not(:first-child) {
       border-top: 1px solid rgba(18, 19, 58, 0.2);
@@ -168,7 +189,7 @@ $header-height: 40px;
       transform: rotate(90deg);
 
       a {
-        color: #363636;
+        color: var(--font-color);
         display: block;
         text-align: center;
       }

src/components/GoBack.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="button is-primary go-back" @click="back">
+  <button class="button is-white go-back" @click="back">
     <img src="@/assets/icons/left-arrow.svg" alt="back" />
   </button>
 </template>
@@ -22,5 +22,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .go-back {
+  margin: 10px 0;
 }
 </style>

src/components/HeaderNote.vue

@@ -1,6 +1,9 @@
 <template>
   <header class="header-note">
-    <router-link :to="{ name: 'Home' }">
+    <router-link
+      :to="{ name: 'Home' }"
+      class="button is-small is-white back-button"
+    >
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
     <router-link
@@ -35,13 +38,16 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-top: 10px;
 
   .special-folder {
     text-align: center;
   }
 
-  img:hover {
+  img {
+    &:hover {
       cursor: pointer;
     }
   }
+}
 </style>

src/components/StackedNote.vue

@@ -66,6 +66,7 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 .stacked-note {
   padding: 1rem 1.5rem;
+  background-color: var(--background-color);
 
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
 
@@ -89,7 +90,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   top: 0;
 
   a {
-    color: #363636;
+    color: var(--font-color);
     display: block;
   }
 }
@@ -100,7 +101,6 @@ $border-color: rgba(18, 19, 58, 0.2);
 
     .title-stacked-note {
       padding: 0.5rem 0 0;
-      background-color: white;
     }
 
     section {

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
+  readme?: string | null
-  userSettings: UserSettings | null
+  userSettings?: UserSettings | null
 }
 
 export const useUserRepoStore = defineStore({
@@ -21,8 +21,8 @@ export const useUserRepoStore = defineStore({
     user: '',
     repo: '',
     files: [],
-    readme: null,
+    readme: undefined,
-    userSettings: null
+    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 ?? DEFAULT_FONT_POLICY)
-      root.style.setProperty('--font-family', fontFamily)
+
-    } else {
+    switch (mode) {
-      root.style.setProperty('--font-family', "'Courier Prime', monospace")
+      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
     }
   })
 }

src/styles/app.scss

@@ -15,6 +15,8 @@ $link: #3b7e70;
 
 :root {
   --font-family: 'Courier Prime', monospace;
+  --font-color: #4a4a4a;
+  --background-color: white;
 }
 
 @import '~bulma/bulma.sass';