From 3404262af70e290c1f87a9e3e35f15afa2eee2c8 Mon Sep 17 00:00:00 2001
From: "Alisa | side.one" <alisa@side.one>
Date: Sun, 28 May 2023 02:33:24 +0800
Subject: [PATCH] feat: theme default dark

---
 src/components/ThemeSwitcher.vue              | 53 +++++++-----------
 .../components/NavbarThemeSwitcher.vue        | 56 +++++++++++++------
 2 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
index 252357ee..5a407d90 100644
--- a/src/components/ThemeSwitcher.vue
+++ b/src/components/ThemeSwitcher.vue
@@ -1,61 +1,50 @@
 <script setup lang="ts">
-import type { ThemeSwitcherTheme } from '@layouts/types';
 import { Icon } from '@iconify/vue';
-import { onMounted, watch, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const props = defineProps<{
-  themes: ThemeSwitcherTheme[];
+  themes: {
+    name: string;
+    icon: string;
+  }[];
 }>();
 
+const themeMap = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
+
 const theme = ref(window.localStorage.getItem('theme') || 'dark');
-const {
-  state: currentThemeName,
-  next: getNextThemeName,
-  index: currentThemeIndex,
-} = useCycleList(
-  props.themes.map((t) => t.name),
-  { initialValue: theme.value }
-);
 
-const changeTheme = () => {
-  theme.value = getNextThemeName();
-};
-
-const changeMode = (val: 'dark' | 'light' | 'system') => {
-  let value = val;
+const changeMode = () => {
+  let value = 'dark';
+  if (theme.value === 'dark') {
+    value = 'light';
+  }
   if (
     theme.value === 'system' &&
     window.matchMedia('(prefers-color-scheme: dark)').matches
   ) {
     value = 'dark';
   }
-  if (value === 'dark') {
-    document.documentElement.classList.add('dark');
-    document.documentElement.classList.remove('light');
-  } else {
+  if (value === 'light') {
     document.documentElement.classList.add('light');
     document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
   }
   document.documentElement.setAttribute('data-theme', value);
   window.localStorage.setItem('theme', value);
 };
-// Update icon if theme is changed from other sources
-watch(theme, (val: 'dark' | 'light' | 'system') => {
-  currentThemeName.value = val;
-  changeMode(val);
-});
+
 
 onMounted(() => {
-  if (currentThemeName.value) {
-    changeMode(currentThemeName.value);
-  }
+
 });
 </script>
 
 <template>
-  <div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
-    <button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeTheme">
-      <Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
+  <div class="tooltip tooltip-bottom delay-1000">
+    <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
+      <Icon :icon="props.themes[theme].icon" class="text-2xl" />
     </button>
   </div>
 </template>
diff --git a/src/layouts/components/NavbarThemeSwitcher.vue b/src/layouts/components/NavbarThemeSwitcher.vue
index ca167080..cc68a12c 100644
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -1,23 +1,45 @@
 <script setup lang="ts">
-import NewThemeSwitcher from '@/components/ThemeSwitcher.vue';
-const themes: Array<{ name: string; icon: string }> = [
-  {
-    name: 'system',
-    icon: 'mdi-laptop',
-  },
-  {
-    name: 'light',
-    icon: 'mdi-weather-sunny',
-  },
-  {
-    name: 'dark',
-    icon: 'mdi-weather-night',
-  },
-];
+import { Icon } from '@iconify/vue';
+import { onMounted, ref } from 'vue';
+
+const themeMap: Record<string, string> = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
+
+const theme = ref(window.localStorage.getItem('theme') || 'dark');
+
+const changeMode = (val?: string) => {
+  let value = 'dark';
+  const currentValue = val || theme.value;
+  if (currentValue === 'dark') {
+    value = 'light';
+  }
+  if (
+    currentValue === 'system' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
+    value = 'dark';
+  }
+  if (value === 'light') {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  }
+  document.documentElement.setAttribute('data-theme', value);
+  window.localStorage.setItem('theme', value);
+  theme.value = value;
+};
+
+
+onMounted(() => {
+  changeMode(theme.value === 'dark' ? 'light' : 'dark');
+});
 </script>
 
 <template>
-  <div>
-    <NewThemeSwitcher :themes="themes" />
+  <div class="tooltip tooltip-bottom delay-1000">
+    <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode()">
+      <Icon :icon="themeMap?.[theme]" class="text-2xl" />
+    </button>
   </div>
 </template>