feat: 适配下dark主题

client/packages/rtc-web/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vueuse/core": "^10.2.0",
-    "theme-change": "^2.5.0",
     "vue": "^3.3.4",
     "vue-router": "4"
   },

client/packages/rtc-web/src/components/base/menu-side.vue

@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="menu h-full w-80 bg-base-200 p-4">MenuSide</div>
+  <div class="menu h-full w-80 p-4">MenuSide</div>
 </template>
 
 <style scoped>

client/packages/rtc-web/src/components/base/nav-icons.vue

@@ -6,7 +6,7 @@ defineOptions({
   name: 'NavIcons',
 });
 
-const { themeInfo, setTheme } = useSwitchTheme();
+const { themeInfo, setTheme, isDark } = useSwitchTheme();
 
 const themeIcon = computed(() =>
   themeInfo.value === ThemeEnum.DARK ? 'moon' : 'sun'
@@ -25,14 +25,18 @@ const switchTheme = () =>
       <svg-icon
         name="github"
         class="h-6 w-6 stroke-current"
-        hoverColor="#ffffffde"
+        :hoverColor="isDark ? '#ffffffde' : '#3c3c3cb3'"
       />
     </a>
     <button
       class="btn-circle btn ml-6 border-0 bg-transparent"
       @click="switchTheme"
     >
-      <svg-icon :name="themeIcon" class="h-6 w-6 stroke-current" />
+      <svg-icon
+        :name="themeIcon"
+        :color="!isDark ? 'black' : undefined"
+        class="h-6 w-6"
+      />
     </button>
   </div>
 </template>

client/packages/rtc-web/src/components/base/svg-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg aria-hidden="true" class="svg-icon">
+  <svg aria-hidden="true" class="svg-icon stroke-current">
     <use :href="symbolId" :fill="color" />
   </svg>
 </template>

client/packages/rtc-web/src/components/lib.tsx

@@ -3,17 +3,17 @@ import { MenuSide, SvgIcon, NavIcons } from './base';
 
 export const NavHeader = () => {
   return (
-    <div class="drawer">
+    <div class="drawer shadow-md dark:shadow-sm dark:shadow-neutral-600">
       <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content flex flex-col">
         {/* Navbar */}
-        <div class="navbar w-full bg-base-300">
+        <div class="navbar w-full">
           <div class="flex-none lg:hidden">
             <label for="my-drawer-3" class="btn-ghost btn-square btn">
               <SvgIcon
                 name="nav-menu"
                 color="#A6ADBA"
-                class="inline-block h-6 w-6 stroke-current"
+                class="inline-block h-6 w-6"
               />
             </label>
           </div>

client/packages/rtc-web/src/hooks/useTheme.ts

@@ -1,6 +1,5 @@
-import { themeChange } from 'theme-change';
 import { useLocalStorage, usePreferredDark } from '@vueuse/core';
-import { onMounted, watch } from 'vue';
+import { watch, computed } from 'vue';
 
 export enum ThemeEnum {
   DARK = 'dark',
@@ -19,14 +18,18 @@ export const useTheme = () => {
     themeInfo.value = theme;
   };
 
+  const isDark = computed(() => themeInfo.value === ThemeEnum.DARK);
+
   return {
     themeInfo,
     setTheme,
+    isDark,
   };
 };
 
 export const useSwitchTheme = () => {
-  const { themeInfo, setTheme } = useTheme();
+  const themeInfomation = useTheme();
+  const { themeInfo } = themeInfomation;
 
   watch(
     () => themeInfo.value,
@@ -38,5 +41,5 @@ export const useSwitchTheme = () => {
     }
   );
 
-  return { themeInfo, setTheme };
+  return { ...themeInfomation };
 };

client/packages/rtc-web/src/layout/index.vue

@@ -11,7 +11,9 @@ defineOptions({
   <FullHeightFlexBox dire="col">
     <NavHeader />
     <FullHeightFlexBox type="full">
-      <MenuSide class="hidden lg:block" />
+      <MenuSide
+        class="hidden dark:shadow-sm dark:shadow-neutral-600 lg:block lg:shadow-md"
+      />
       <RouterView />
     </FullHeightFlexBox>
   </FullHeightFlexBox>

client/packages/rtc-web/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
+  darkMode: ['class', '[data-theme="dark"]'],
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   daisyui: {
     themes: ['light', 'dark'],

client/pnpm-lock.yaml

@@ -2,9 +2,6 @@ lockfileVersion: 5.4
 
 importers:
 
-  .:
-    specifiers: {}
-
   packages/rtc-web:
     specifiers:
       '@types/node': ^20.3.1
@@ -24,7 +21,6 @@ importers:
       prettier: ^2.8.8
       prettier-plugin-tailwindcss: ^0.3.0
       tailwindcss: ^3.3.2
-      theme-change: ^2.5.0
       typescript: ^5.1.3
       vite: ^4.3.9
       vite-plugin-eslint: ^1.8.1
@@ -36,7 +32,6 @@ importers:
     dependencies:
       '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.3.9+vue@3.3.4
       '@vueuse/core': 10.2.0_vue@3.3.4
-      theme-change: 2.5.0
       vue: 3.3.4
       vue-router: 4.2.2_vue@3.3.4
     devDependencies:
@@ -3322,10 +3317,6 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /theme-change/2.5.0:
-    resolution: {integrity: sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ==}
-    dev: false
-
   /thenify-all/1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}