[다크모드] 프로젝트 변경 시 로그 이미지 화이트로 고정

Author: jschoiRR

ui/src/components/header/Logo.vue

@@ -64,13 +64,29 @@ export default {
   },
   data () {
     return {
-      logoPath: this.$store.getters.darkMode ? this.$config.whiteLogo : this.$config.logo
+      logoPath: (this.$store.getters.darkMode || this.$store.getters.theme === 'dark') ? this.$config.whiteLogo : this.$config.logo
     }
   },
   watch: {
+    '$store.getters.theme' (theme) {
+      this.logoPath = (this.$store.getters.darkMode || theme === 'dark') ? this.$config.whiteLogo : this.$config.logo
+    },
     '$store.getters.darkMode' (darkMode) {
-      this.logoPath = darkMode ? this.$config.whiteLogo : this.$config.logo
+      document.body.classList.toggle('dark-mode', darkMode)
+      this.logoPath = (darkMode || this.$store.getters.theme === 'dark') ? this.$config.whiteLogo : this.$config.logo
     }
+  },
+  mounted () {
+    // 시스템 테마 변경되었을때 감지 후 테마 변경
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      this.$localStorage.set('DARK_MODE', event.matches)
+      this.$store.dispatch('SetDarkMode', event.matches)
+      document.body.classList.toggle('dark-mode', event.matches)
+    })
+    // 로컬스토리지 다크 모드 확인 후 변경
+    const isDark = !!this.$localStorage.get('DARK_MODE')
+    this.$store.dispatch('SetDarkMode', isDark)
+    document.body.classList.toggle('dark-mode', isDark)
   }
 }
 </script>