[Front] Add new icon for Dark and Light

front/assets/dark.scss

@@ -21,12 +21,16 @@
 
     & > div {
       & > div {
-        & > h1 > a {
-          color: var(--neutral-50);
+        & > img {
+          width: 100%;
+          transform: translateX(-10px);
         }
 
         & > div > div {
           & > img {
+            margin-left: 10px;
+            width: 30px;
+            height: 30px;
             border: solid 2px var(--blue-600);
           }
 

front/assets/light.scss

@@ -12,12 +12,16 @@
 
     & > div {
       & > div {
-        & > h1 > a {
-          color: var(--neutral-950);
+        & > img {
+          width: 100%;
+          transform: translateX(-10px);
         }
 
         & > div > div {
           & > img {
+            margin-left: 10px;
+            width: 30px;
+            height: 30px;
             border: solid 2px var(--blue-600);
           }
 

front/components/Navbar.vue

@@ -18,6 +18,8 @@ const isDropDownOpen = ref<boolean>(false);
 const isShowModal = ref<boolean>(false)
 const showProfileModal = ref<boolean>(false)
 
+const { isDark } = useSystemTheme()
+
 onMounted(async () => {
   document.addEventListener('click', () => isDropDownOpen.value = false)
 })
@@ -40,14 +42,13 @@ const logout = async () => {
   <div id="navbar">
     <div>
       <div>
-        <img src="assets/image/icon.png" alt="Icon app" />
-        <h1>
-          <NuxtLink to="/">Tempest Board</NuxtLink>
-        </h1>
+        <img v-if="!isDark" src="assets/image/icon_dark.png" alt="Icon app" />
+        <img v-if="isDark" src="assets/image/icon_white.png" alt="Icon app" />
         <div :class="{'is-active' : isDropDownOpen}" class="dropdown is-right">
           <div class="dropdown-trigger" aria-controls="user-menu" aria-haspopup="true" @click.stop="isDropDownOpen = !isDropDownOpen">
             <img v-if="user.thumbnail" :src="user.thumbnail" alt="user thumbnail" class="dropdown-thumbnail"/>
-            <img v-else src="assets/image/user.png" alt="user thumbnail" class="dropdown-thumbnail"/>
+            <img v-else-if="!isDark" src="assets/image/user.png" alt="user thumbnail" class="dropdown-thumbnail"/>
+            <img v-else-if="isDark" src="assets/image/user_light.png" alt="user thumbnail" class="dropdown-thumbnail"/>
           </div>
           <div class="dropdown-menu" id="user-menu">
             <div class="dropdown-content">

front/composables/useSystemTheme.ts

@@ -0,0 +1,33 @@
+// composables/useSystemTheme.js
+export function useSystemTheme() {
+  const isDark = ref(false)
+
+  onMounted(() => {
+    // Check if prefers-color-scheme is supported
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+    // Set initial value
+    isDark.value = mediaQuery.matches
+
+    // Listen for changes
+    const handleChange = (e) => {
+      isDark.value = e.matches
+    }
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange)
+    }
+    // Clean up
+    onUnmounted(() => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener('change', handleChange)
+      }
+    })
+  })
+
+  return {
+    isDark,
+    theme: computed(() => isDark.value ? 'dark' : 'light')
+  }
+}

front/nuxt.config.ts

@@ -11,8 +11,8 @@ export default defineNuxtConfig({
           viewport: 'width=device-width, height=device-height, initial-scale=1',
           link: [        {
           rel: 'icon',
-          type: 'image/x-icon',
-          href: '/favicon.ico'
+          type: 'image/png',
+          href: '/logo.png'
         }]
       }
   },