Improve dark mode switch animation #225

src/App.vue

@@ -39,7 +39,7 @@ watch(
   (isDark: boolean) => {
     setTimeout(() => {
       activeTheme.value = isDark ? darkTheme : lightTheme
-    }, 250)
+    }, 50)
   },
   { immediate: true },
 )
@@ -59,6 +59,12 @@ watch(
   },
 )
 
+onMounted(() =>
+  setTimeout(() => {
+    getToggleElementPosition()
+  }, 200),
+)
+
 const transitionDone = ref(true)
 watch(
   () => layout.isDark,
@@ -74,7 +80,7 @@ watch(
       document.documentElement.classList.remove('dark')
       setTimeout(() => {
         transitionDone.value = true
-      }, 1010)
+      }, 1000)
     }
   },
   { immediate: true },
@@ -124,6 +130,17 @@ function setThemeColor(newValue: string) {
     colorFocus: shade3,
   }
 }
+const toggleButtonPosition = ref<DOMRect>({ left: 0, top: 0 })
+function getToggleElementPosition() {
+  const element = document.querySelector('#theme-toggle') as HTMLElement
+  const rect = element.getBoundingClientRect()
+
+  toggleButtonPosition.value = {
+    left: layout.isRtl ? 'auto' : `${rect.left + window.scrollX}px`,
+    right: layout.isRtl ? `${window.innerWidth - rect.right}px` : 'auto',
+    top: `${rect.top + window.scrollY}px`,
+  }
+}
 </script>
 
 <template>
@@ -132,7 +149,9 @@ function setThemeColor(newValue: string) {
     <n-notification-provider placement="bottom-right">
       <n-message-provider placement="bottom-right">
         <n-dialog-provider>
-          <div class="dark-mode-container" :class="{ 'done': transitionDone }">
+          <div class="dark-mode-container"
+            :style="{ 'left': toggleButtonPosition.left, 'right': toggleButtonPosition.right, 'top': toggleButtonPosition.top }"
+            :class="{ 'done': transitionDone }">
             <div class="dark-mode" :class="{ 'active': layout.isDark }"></div>
           </div>
           <RouterView />
@@ -145,20 +164,17 @@ function setThemeColor(newValue: string) {
 
 
 <style scoped lang="scss">
-
 .rtl {
   .dark-mode-container {
-    left: 148px;
     right: auto;
   }
 }
+
 .dark-mode-container {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  right: 148px;
-  top: 30px;
   width: 20px;
   height: 20px;
   z-index: 1;

src/common/theme/theme-overrides.ts

@@ -24,7 +24,7 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     warningColor: '#FF8000',
     borderRadius: '5px',
     borderRadiusSmall: '3px',
-    cardColor: '#0f172a',
+    // cardColor: '#0f172a33',
     borderColor: '#1c2334',
   },
   Card: {

src/components.d.ts

@@ -55,9 +55,12 @@ declare module 'vue' {
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NList: typeof import('naive-ui')['NList']
     NListItem: typeof import('naive-ui')['NListItem']
@@ -72,7 +75,6 @@ declare module 'vue' {
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
-    NStore: typeof import('naive-ui')['NStore']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']

src/components/Dashboard/Ecommerce/RevenueChart.vue

@@ -90,7 +90,7 @@ const { t } = useI18n()
           v-model:value="period"
           :ranges="[{ label: t('common.day'), value: 'day' }, { label: t('common.week'), value: 'week' }, { label: t('common.month'), value: 'month' }]"
         />
-        <div v-if="revenueStat.length > 0" class="-mx-4">
+        <div v-if="revenueStat.length > 0" class="my-2 -mx-4">
           <VueApexCharts type="area" width="100%" height="150" :options="chartOptions" :series="series" />
         </div>
       </div>

src/components/Navbar/Navbar.vue

@@ -51,16 +51,10 @@ const { collapsed, isRtl, mobileMode } = storeToRefs(layoutStore)
 
 <style lang="scss">
 .navbar {
-  border-bottom: solid 1px #ececec;
+  border-bottom: solid 1px var(--border-color);
   padding-bottom: 0.4rem;
 }
 
-.dark {
-  .navbar {
-    border-bottom-color: #2f3339;
-  }
-}
-
 .rtl {
   .n-page-header .n-page-header__title {
     margin-right: 0;

src/components/Navbar/Search.vue

@@ -24,7 +24,7 @@ const options = computed(() => {
     .map((item, i) => {
       return {
         label: t(`menu.${item.meta?.title || item.name}`),
-        value: item,
+        value: item.name,
         key: i,
       }
     })
@@ -40,10 +40,11 @@ const { ctrl_k } = useMagicKeys({
 whenever(ctrl_k, () => searchInput.value.focus())
 
 const router = useRouter()
-function gotoRoute(route: RouteRecordRaw) {
+function gotoRoute(name: string) {
+  const route = generatedRoutes.find((x) => x.name === name)
   if (route) {
     searchTerm.value = ''
-    router.push(route.path)
+    router.push(route)
   }
 }
 </script>
@@ -84,7 +85,6 @@ function gotoRoute(route: RouteRecordRaw) {
   .kbd {
     border: solid 1px var(--border-color);
     margin: 0.2rem 0;
-    background: var(--n-background-color);
     border-radius: var(--n-border-radius);
     padding: 0 0.4rem;
     height: 23px;

src/components/Navbar/ThemeSwitch.vue

@@ -7,7 +7,7 @@ const { t } = useI18n()
   <div v-bind="$attrs">
     <n-tooltip placement="top" trigger="hover">
       <template #trigger>
-        <n-button quaternary circle @click="layout.toggleTheme()" class="theme-toggle"
+        <n-button quaternary circle @click="layout.toggleTheme()" class="theme-toggle" id="theme-toggle"
           :class="{ 'theme-toggle--toggled': layout.isDark }">
           <template #icon>
             <NIcon size="1.4rem">

src/components/shared/Card.vue

@@ -19,14 +19,13 @@ const { flatDesign } = storeToRefs(layout)
     </div>
     <div class="card-container" :class="{ 'h-full': stretchHeight }">
       <div
-        class="card-content bg-white dark:bg-slate-900 rounded-md border-solid border-cool-gray-200 dark:border-slate-8 p-4 relative z-10"
-        :class="{ 'shadow-lg': !flatDesign, 'drop-shadow-md': !flatDesign, 'border-1': flatDesign, 'h-full': stretchHeight }"
-      >
-        <div v-if="slots.title">
+        class="card-content dark:bg-slate-900 rounded-md border-solid border-color-default p-4 relative z-10"
+        :class="{ 'shadow-lg': !flatDesign, 'drop-shadow-md': !flatDesign, 'border-1': flatDesign, 'h-full': stretchHeight }">
+        <div v-if="slots.title" class="mix-blend-difference">
           <slot name="title" />
         </div>
         <div v-else-if="title">
-          <h3 class="title pb-2 text-dark-400 dark:text-light-800" :class="`title-${titleSize}`">
+          <h3 class="title pb-2 text-dark-400 dark:text-light-800 mix-blend-difference" :class="`title-${titleSize}`">
             {{ title }}
           </h3>
         </div>
@@ -43,6 +42,9 @@ const { flatDesign } = storeToRefs(layout)
 .card-container {
   position: relative;
 
+  .card-content {
+    --un-bg-opacity: .7;
+  }
   .title {
     font-size: 1.1rem;
     font-weight: 500;

src/layouts/default.vue

@@ -42,7 +42,7 @@ watch(
     <Sidebar />
 
     <n-layout :native-scrollbar="false" position="static">
-      <div class="main-content flex-1 bg-slate-100 dark:bg-slate-800 dark:text-white my-2">
+      <div class="main-content flex-1 dark:bg-slate-800 dark:text-white my-2">
         <Navbar />
         <div class="relative h-full">
           <NScrollbar>
@@ -70,4 +70,8 @@ watch(
   padding: 0 4px;
   background-color: transparent !important;
 }
+
+.main-content {
+  --un-bg-opacity: .6;
+}
 </style>

src/pages/Account/login.vue

@@ -62,7 +62,7 @@ meta:
 <template>
   <div class="bg flex justify-center items-center h-screen">
     <div class="login-box w-full px-3 md:px-0">
-      <div class="md:shadow-lg bg-white dark:bg-slate-800 rounded-md w-full" :class="{ failed: loginFailed }">
+      <div class="md:shadow-lg bg-white dark:bg-slate-800  rounded-md w-full" :class="{ failed: loginFailed }">
         <div class="p-5">
           <div class="text-2xl font-medium mb-8">
             {{ t('login.title') }}
@@ -149,6 +149,8 @@ meta:
 
 .login-box {
   max-width: 380px;
+  position: relative;
+  z-index:2;
 
   .failed {
     animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

src/pages/Dashboard/Analytics.vue

@@ -1,7 +1,7 @@
 <route lang="yaml">
 meta:
-  name: dashboard
-  title: dashboard
+  name: analytics-dashboard
+  title: analytics
   breadcrumb:
     - dashboard
 </route>

src/pages/Dashboard/Ecommerce.vue

@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  name: dashboard
+  name: ecommerce-dashboard
   title: dashboard
   breadcrumb:
     - dashboard

src/store/layout.store.ts

@@ -44,7 +44,9 @@ export const useLayoutStore = defineStore(
 
     function toggleTheme() {
       isDark.value = !isDark.value
-      window.umami?.track('SwitchTheme', { theme: isDark ? 'Dark' : 'Light' })
+      window.umami?.track('ToggleDarkMode', {
+        theme: isDark.value ? 'Dark' : 'Light',
+      })
     }
 
     function changeLanguage(lang: string) {

src/styles/main.scss

@@ -6,16 +6,18 @@
     --primary-color: #00ad4c;
     --background: #EEE;
     --main-content: #FFF;
-    --border-color: #ECECEC;
+    --border-color: #e0dfdf74;
     --background-dark: #283046;
 }
 
+
 .dark {
   --background: var(--background-dark);
   --main-content: #222;
-  --border-color: #2f3339;
+  --border-color: #161c2d78;
 }
 
+
 html,
 body,
 .n-drawer,

src/styles/utils/_override.scss

@@ -90,6 +90,9 @@ select:-webkit-autofill:focus {
   transition: background-color 5000s ease-in-out 0s;
 }
 
+.border-color-default {
+  border-color: var(--border-color);
+}
 // ApexCharts
 .dark {
   .apexcharts-text {