perf: light mode

Author: ZhaoJiSen

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <n-config-provider :theme-overrides="overrides[theme]" :theme="darkTheme" :class="theme">
+  <n-config-provider
+    :theme-overrides="overrides[theme]"
+    :theme="theme === 'dark' ? darkTheme : null"
+    :class="theme"
+  >
     <n-message-provider>
       <router-view />
     </n-message-provider>

src/layouts/Content/SliceList/index.vue

@@ -274,11 +274,17 @@ setVideoInfoSetting();
   max-width: 100%;
   padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(156, 163, 175, 0.1);
+  border: 1px solid rgba(156, 163, 175, 0.15);
   transition:
     background 0.2s,
     border-color 0.2s;
+
+  :global(.dark) & {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
   &.is-empty {
     opacity: 0.7;
   }
@@ -336,19 +342,33 @@ setVideoInfoSetting();
   transition:
     background 0.15s,
     border-color 0.15s;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(156, 163, 175, 0.15);
   border-radius: 10px;
 
+  :global(.dark) & {
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
   &:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: rgba(156, 163, 175, 0.08);
+
+    :global(.dark) & {
+      background: rgba(255, 255, 255, 0.06);
+    }
+
     .item-close {
       opacity: 1;
       transform: translateX(0);
     }
   }
   &.active {
-    background: rgba(64, 158, 255, 0.14);
-    border-color: rgba(64, 158, 255, 0.35);
+    background: rgba(64, 158, 255, 0.12);
+    border-color: rgba(64, 158, 255, 0.3);
+
+    :global(.dark) & {
+      background: rgba(64, 158, 255, 0.14);
+      border-color: rgba(64, 158, 255, 0.35);
+    }
   }
   .item-main {
     display: flex;

src/layouts/Content/index.vue

@@ -1,29 +1,30 @@
 <template>
-  <n-flex class="!gap-0 !flex-nowrap">
+  <n-flex class="!gap-0 !flex-nowrap main-bg-base">
     <Side />
 
-    <n-layout class="flex flex-col">
-      <n-layout-header class="flex items-center w-full h-14">
+    <n-layout class="flex flex-col main-bg-base">
+      <n-layout-header class="flex items-center w-full h-14 header-base">
         <Header @back="handleBack" />
       </n-layout-header>
 
-      <n-divider class="!m-0" />
+      <n-divider class="!m-0 divider-base" />
 
       <n-layout
         has-sider
-        :content-style="{ gap: '24px', height: 'calc(100vh - 4rem)' }"
+        :content-style="{ gap: '24px', height: 'calc(100vh - 3.6rem)' }"
         sider-placement="right"
-        class="w-full"
+        class="w-full main-bg-base"
       >
         <n-layout-content
           :content-style="{
             display: 'flex',
             padding: '0 12px 0 20px'
           }"
+          class="main-bg-base"
         >
           <Upload v-if="!showPlayer" @parser="handleParser" />
 
-          <div v-else ref="playerWrapRef" class="w-full h-full">
+          <div v-else ref="playerWrapRef" class="w-full h-full main-bg-base">
             <router-view :key="route.fullPath" />
           </div>
         </n-layout-content>
@@ -37,6 +38,7 @@
           collapse-mode="width"
           v-model:collapsed="siderCollapsed"
           content-style="padding: 24px;"
+          class="right-side"
         >
           <SliceList
             @play="handlePlay"

src/layouts/index.vue

@@ -19,11 +19,27 @@ export default defineConfig({
     'upload-bg-base': 'bg-[#F0F2F5] dark:bg-[#202225] switch-animation',
     'list-bg-base': 'bg-[#F6F7F8] dark:bg-[#252627] switch-animation',
     'text-base': 'text-[#20202a] dark:text-[#f0f0f0] switch-animation',
+    'text-secondary': 'text-[#666666] dark:text-[#a0a0a0] switch-animation',
+    'text-muted': 'text-[#999999] dark:text-[#767676] switch-animation',
     'icon-hover': 'hover:color-[#1ab394] switch-animation',
     'header-base':
       'bg-[#F0F2F5] dark:bg-[#202225] text-[#20202a] dark:text-[#F6F7F8] switch-animation',
     'right-side':
-      'text-[#20202a] dark:text-[#F6F7F8] bg-[#FFFFFF] dark:bg-[#18191B]  switch-animation'
+      'text-[#20202a] dark:text-[#F6F7F8] bg-[#FFFFFF] dark:bg-[#18191B] switch-animation',
+    'card-bg-base': 'bg-[#FFFFFF] dark:bg-[#1E1E1E] switch-animation',
+    'border-base': 'border-[#E5E7EB] dark:border-[#374151] switch-animation',
+    'border-light': 'border-[#F3F4F6] dark:border-[#2D3748] switch-animation',
+    'divider-base': 'bg-[#E5E7EB] dark:bg-[#374151] switch-animation',
+    'hover-bg-light': 'hover:bg-[#F9FAFB] dark:hover:bg-[#2D3748] switch-animation',
+    'hover-bg-medium': 'hover:bg-[#F3F4F6] dark:hover:bg-[#374151] switch-animation',
+    'active-bg': 'bg-[#EBF8FF] dark:bg-[#1A202C] switch-animation',
+    'shadow-light': 'shadow-sm shadow-[#00000008] dark:shadow-[#FFFFFF08]',
+    'shadow-medium': 'shadow-md shadow-[#00000010] dark:shadow-[#FFFFFF10]',
+    'input-bg':
+      'bg-[#FFFFFF] dark:bg-[#2D3748] border-[#D1D5DB] dark:border-[#4A5568] switch-animation',
+    'btn-primary': 'bg-[#3B82F6] hover:bg-[#2563EB] text-white switch-animation',
+    'btn-secondary':
+      'bg-[#F3F4F6] hover:bg-[#E5E7EB] dark:bg-[#374151] dark:hover:bg-[#4A5568] switch-animation'
   },
   theme: {
     fontSize: {