Home Explore Help
Sign In
wangwei
/
ant-vue-admin
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

夜间模式优化

wangwei 3 years ago
parent
23e7bce657
commit
c02acab4c8
3 changed files with 60 additions and 7 deletions
Split View Show Diff Stats
  1. 26 2
      build/vite/plugin/theme.ts
  2. 21 3
      index.html
  3. 13 2
      src/logics/theme/dark.ts

+ 26 - 2
build/vite/plugin/theme.ts
View File 

@@ -33,14 +33,22 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
 
             return s;
 
           case '.ant-steps-item-icon > .ant-steps-icon':
 
             return s;
 
+          case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
 
+            return s;
 
+          default:
 
+            if (s.indexOf('.ant-btn') >= -1) {
 
+              // 按钮被重新定制过，需要过滤掉class防止覆盖
 
+              return s;
 
+            }
 
         }
 
-        return `[data-theme] ${s}`;
 
+        return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
 
       },
 
       colorVariables: [...getThemeColors(), ...colors],
 
     }),
 
     antdDarkThemePlugin({
 
       preloadFiles: [
 
         path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
 
+        //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
 
         path.resolve(process.cwd(), 'src/design/index.less'),
 
       ],
 
       filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
 
@@ -48,15 +56,31 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
 
       darkModifyVars: {
 
         ...generateModifyVars(true),
 
         'text-color': '#c9d1d9',
 
+        'primary-1': 'rgb(255 255 255 / 8%)',
 
         'text-color-base': '#c9d1d9',
 
         'component-background': '#151515',
 
+        'heading-color': 'rgb(255 255 255 / 65%)',
 
         // black: '#0e1117',
 
         // #8b949e
 
         'text-color-secondary': '#8b949e',
 
         'border-color-base': '#303030',
 
         // 'border-color-split': '#30363d',
 
         'item-active-bg': '#111b26',
 
-        'app-content-background': 'rgb(255 255 255 / 4%)',
 
+        'app-content-background': '#1e1e1e',
 
+        'tree-node-selected-bg': '#11263c',
 
+
 
+        'alert-success-border-color': '#274916',
 
+        'alert-success-bg-color': '#162312',
 
+        'alert-success-icon-color': '#49aa19',
 
+        'alert-info-border-color': '#153450',
 
+        'alert-info-bg-color': '#111b26',
 
+        'alert-info-icon-color': '#177ddc',
 
+        'alert-warning-border-color': '#594214',
 
+        'alert-warning-bg-color': '#2b2111',
 
+        'alert-warning-icon-color': '#d89614',
 
+        'alert-error-border-color': '#58181c',
 
+        'alert-error-bg-color': '#2a1215',
 
+        'alert-error-icon-color': '#a61d24',
 
       },
 
     }),
 
   ];

+ 21 - 3
index.html
View File 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" id="htmlRoot">
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
@@ -14,8 +14,26 @@
 
     <link rel="icon" href="/src/assets/images/logo.png" />
 
   </head>
 
   <body>
 
+    <script>
 
+      (() => {
 
+        var htmlRoot = document.getElementById('htmlRoot');
 
+        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
 
+        if (htmlRoot && theme) {
 
+          htmlRoot.setAttribute('data-theme', theme);
 
+          theme = htmlRoot = null;
 
+        }
 
+      })();
 
+    </script>
 
     <div id="app">
 
       <style>
 
+        html[data-theme='dark'] .app-loading {
 
+          background-color: #2c344a;
 
+        }
 
+
 
+        html[data-theme='dark'] .app-loading .app-loading-title {
 
+          color: rgba(255, 255, 255, 0.85);
 
+        }
 
+
 
         .app-loading {
 
           display: flex;
 
           width: 100%;
 
@@ -23,7 +41,7 @@
 
           justify-content: center;
 
           align-items: center;
 
           flex-direction: column;
 
-          background: #f4f7f9;
 
+          background-color: #f4f7f9;
 
         }
 
 
         .app-loading .app-loading-wrap {
 
@@ -146,4 +164,4 @@
 
     </div>
 
     <script type="module" src="/src/main.ts"></script>
 
   </body>
 
-</html>
 
+</html>

+ 13 - 2
src/logics/theme/dark.ts
View File 

@@ -1,13 +1,24 @@
 
 import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme/es/client';
 
+import { addClass, hasClass, removeClass } from '/@/utils/domUtils';
 
 
 export async function updateDarkTheme(mode: string | null = 'light') {
 
   const htmlRoot = document.getElementById('htmlRoot');
 
+  if (!htmlRoot) {
 
+    return;
 
+  }
 
+  const hasDarkClass = hasClass(htmlRoot, 'dark');
 
   if (mode === 'dark') {
 
     if (import.meta.env.PROD && !darkCssIsReady) {
 
       await loadDarkThemeCss();
 
     }
 
-    htmlRoot?.setAttribute('data-theme', 'dark');
 
+    htmlRoot.setAttribute('data-theme', 'dark');
 
+    if (!hasDarkClass) {
 
+      addClass(htmlRoot, 'dark');
 
+    }
 
   } else {
 
-    htmlRoot?.setAttribute('data-theme', 'light');
 
+    htmlRoot.setAttribute('data-theme', 'light');
 
+    if (hasDarkClass) {
 
+      removeClass(htmlRoot, 'dark');
 
+    }
 
   }
 
 }