feat(theme): adds dark/light theme switch

Author: dvcol

src/components/AppView.vue

@@ -18,15 +18,15 @@ const store = useRouterStore();
       <HelloWorld :msg="i18n('app_name')" />
 
       <nav>
-        <RouterLink :to="`${store.baseName}/`">Home</RouterLink>
-        <RouterLink :to="`${store.baseName}/about`">About</RouterLink>
+        <NButtonGroup class="buttons">
+          <RouterLink v-slot="{ href, navigate, isActive }" :to="`${ store.baseName }/`" custom>
+            <NButton round :class="{ active: isActive }" :href="href" @click="navigate">Home</NButton>
+          </RouterLink>
+          <RouterLink v-slot="{ href, navigate, isActive }" :to="`${store.baseName}/about`" custom>
+            <NButton round :class="{ active: isActive }" :href="href" @click="navigate">About</NButton>
+          </RouterLink>
+        </NButtonGroup>
       </nav>
-
-      <NButtonGroup class="buttons">
-        <RouterLink :to="`${store.baseName}/`"><NButton>Home</NButton></RouterLink>
-        <NButton ghost> One More </NButton>
-        <RouterLink :to="`${store.baseName}/about`"><NButton>About/NButton></NButton></RouterLink>
-      </NButtonGroup>
     </div>
   </header>
   <main>
@@ -40,9 +40,20 @@ header {
   flex-direction: column;
   justify-content: center;
 
+  nav {
+    margin-top: 2rem;
+    font-size: 12px;
+    text-align: center;
+  }
+
   .buttons {
     display: flex;
     justify-content: center;
+
+    .active {
+      color: var(--n-text-color-pressed);
+      background-color: var(--n-color-pressed);
+    }
   }
 }
 
@@ -54,29 +65,4 @@ main {
   display: block;
   margin: 2rem auto;
 }
-
-nav {
-  margin-top: 2rem;
-  font-size: 12px;
-  text-align: center;
-
-  & a {
-    display: inline-block;
-    padding: 0 1rem;
-    border-left: 1px solid var(--color-border);
-
-    &.router-link-exact-active {
-      color: var(--color-text);
-
-      &:hover,
-      &:focus {
-        background-color: transparent;
-      }
-    }
-
-    &:first-of-type {
-      border: 0;
-    }
-  }
-}
 </style>

src/components/web/AppWeb.ce.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { darkTheme, lightTheme, NConfigProvider } from 'naive-ui';
+
+import { computed } from 'vue';
+
+import { watchPreferDark } from '~/utils';
 import { lazyComponent } from '~/utils/lazy.utils';
 
 const AppView = lazyComponent(() => import('~/components/AppView.vue'));
+
+const isDark = watchPreferDark();
+const theme = computed(() => (isDark.value ? darkTheme : lightTheme));
 </script>
 
 <template>
   <div id="trakt-extension-root">
-    <AppView />
+    <NConfigProvider :theme="theme">
+      <AppView />
+    </NConfigProvider>
   </div>
 </template>
 

src/utils/window.utils.ts

@@ -1 +1,19 @@
-export { isDarkTheme } from '@dvcol/web-extension-utils/lib/common/utils/window.utils';
+import { isDarkTheme } from '@dvcol/web-extension-utils/lib/common/utils/window.utils';
+import { onUnmounted, ref } from 'vue';
+
+export { isDarkTheme };
+
+export const watchMedia = (query: string) => {
+  const media = window.matchMedia(query);
+  const matchMedia = ref(media.matches);
+
+  const listener = (_change: MediaQueryListEvent) => {
+    matchMedia.value = _change.matches;
+    console.info('value change', matchMedia.value);
+  };
+  media.addEventListener('change', listener);
+  onUnmounted(() => media.removeEventListener('change', listener));
+  return matchMedia;
+};
+
+export const watchPreferDark = () => watchMedia('(prefers-color-scheme: dark');