wip: Dark theme transformation

src/App.vue

@@ -4,6 +4,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { isDark } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
+import { useCache } from '@/hooks/web/useCache'
 
 const { getPrefixCls } = useDesign()
 
@@ -15,8 +16,14 @@ const currentSize = computed(() => appStore.getCurrentSize)
 
 const greyMode = computed(() => appStore.getGreyMode)
 
+const { wsCache } = useCache()
+
 // 根据浏览器当前主题设置系统主题色
 const setDefaultTheme = () => {
+  if (wsCache.get('isDark')) {
+    appStore.setIsDark(wsCache.get('isDark'))
+    return
+  }
   const isDarkTheme = isDark()
   appStore.setIsDark(isDarkTheme)
 }

src/components/Logo/src/Logo.vue

@@ -59,7 +59,8 @@ watch(
     :class="[
       prefixCls,
       layout !== 'classic' ? `${prefixCls}__Top` : '',
-      'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
+      'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative',
+      'dark:bg-[var(--el-bg-color)]'
     ]"
     to="/"
   >

src/components/Setting/src/Setting.vue

@@ -92,7 +92,7 @@ const setMenuTheme = (color: string) => {
   appStore.setTheme(theme)
   appStore.setCssVarTheme()
 }
-if (layout.value === 'top') {
+if (layout.value === 'top' && !appStore.getIsDark) {
   headerTheme.value = '#fff'
   setHeaderTheme('#fff')
 }
@@ -101,7 +101,7 @@ if (layout.value === 'top') {
 watch(
   () => layout.value,
   (n) => {
-    if (n === 'top') {
+    if (n === 'top' && !appStore.getIsDark) {
       headerTheme.value = '#fff'
       setHeaderTheme('#fff')
     } else {

src/layout/components/ToolHeader.vue

@@ -41,7 +41,8 @@ export default defineComponent({
         id={`${variables.namespace}-tool-header`}
         class={[
           prefixCls,
-          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+          'dark:bg-[var(--el-bg-color)]'
         ]}
       >
         {layout.value !== 'top' ? (

src/layout/components/useRenderLayout.tsx

@@ -106,7 +106,7 @@ export const useRenderLayout = () => {
   const renderTopLeft = () => {
     return (
       <>
-        <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
+        <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
           {logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
 
           <ToolHeader class="flex-1"></ToolHeader>

src/styles/index.less

@@ -1 +1,2 @@
 @import './var.css';
+@import 'element-plus/theme-chalk/dark/css-vars.css';

src/styles/theme.less

@@ -1,6 +1,6 @@
-.text-color {
-  color: var(--el-text-color-regular);
-}
-.dark .dark\:text-color {
-  color: rgba(255, 255, 255, var(--dark-text-color));
-}
+// .text-color {
+//   color: var(--el-text-color-regular);
+// }
+// .dark .dark\:text-color {
+//   color: rgba(255, 255, 255, var(--dark-text-color));
+// }

src/views/Login/components/LoginForm.vue

@@ -171,6 +171,7 @@ const getRole = async () => {
     label-position="top"
     hide-required-asterisk
     size="large"
+    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
     @register="register"
   >
     <template #title>