[Wip 0000] 设备详情页面主题化

README.md

@@ -54,8 +54,8 @@
 function themifyScript(
   str,
   options = {
-    color: true,
-    gradient: true,
+    color: false,
+    gradient: false,
     url: true,
   }
 ) {
@@ -64,7 +64,7 @@ function themifyScript(
   let varstr = '';
 
   // process url, extract all css url and replace them to css var and record them.
-  if (options.url) {
+  {
     keySet.clear();
     const regexp = /url\('?(\/[@|0-9|a-z|A-Z|\-|_]+)+.(png|svg)'?\)/g;
     let res = regexp.exec(str);
@@ -75,13 +75,15 @@ function themifyScript(
         keySet.add(image);
         varstr += `${varname}: ${url};`;
       }
-      strcopy = strcopy.replace(url, `var(${varname})`);
+      if (options.url) {
+        strcopy = strcopy.replace(url, `var(${varname})`);
+      }
       res = regexp.exec(str);
     }
   }
 
   // process gradient, extract all css gradient and replace them to css var and record them.
-  if (options.gradient) {
+  {
     keySet.clear();
     let key = 0;
     const regexp = /linear-gradient\([0-9|a-z|A-Z|#|,|\s|%|.]+\)/g;
@@ -93,12 +95,14 @@ function themifyScript(
         keySet.add(gradient);
         varstr += `${varname}: ${gradient};`;
       }
-      strcopy = strcopy.replace(gradient, `var(${varname})`);
+      if (options.gradient) {
+        strcopy = strcopy.replace(gradient, `var(${varname})`);
+      }
       res = regexp.exec(str);
       key += 1;
     }
   }
-  if (options.gradient) {
+  {
     keySet.clear();
     let key = 0;
     const regexp = /radial-gradient\([0-9|a-z|A-Z|#|,|\s|%|.]+\)/g;
@@ -110,14 +114,16 @@ function themifyScript(
         keySet.add(gradient);
         varstr += `${varname}: ${gradient};`;
       }
-      strcopy = strcopy.replace(gradient, `var(${varname})`);
+      if (options.gradient) {
+        strcopy = strcopy.replace(gradient, `var(${varname})`);
+      }
       res = regexp.exec(str);
       key += 1;
     }
   }
 
   // process color, extract all css colors and replace them to css var and record them.
-  if (options.color) {
+  {
     keySet.clear();
     let key = 0;
     const regexp = /#[0-9|a-z|A-Z]{3,8}/g;
@@ -129,7 +135,9 @@ function themifyScript(
         keySet.add(color);
         varstr += `${varname}: ${color};`;
       }
-      strcopy = strcopy.replace(color, `var(${varname})`);
+      if (options.color) {
+        strcopy = strcopy.replace(color, `var(${varname})`);
+      }
       res = regexp.exec(str);
       key += 1;
     }

src/design/theme.less

@@ -25,7 +25,7 @@ html[data-theme='light'] {
     color: rgba(0, 0, 0, 0.65);
   }
 
-  .@{ventSpace}-input-affix-wrapper>input.@{ventSpace}-input {
+  .@{ventSpace}-input-affix-wrapper > input.@{ventSpace}-input {
     color: rgba(0, 0, 0, 0.65);
   }
 
@@ -62,11 +62,19 @@ html[data-theme='light'] {
   }
 
   .@{ventSpace}-card-grid-hoverable:hover {
-    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%), 0 9px 28px 8px rgb(0 0 0 / 20%);
+    box-shadow:
+      0 3px 6px -4px rgb(0 0 0 / 48%),
+      0 6px 16px 0 rgb(0 0 0 / 32%),
+      0 9px 28px 8px rgb(0 0 0 / 20%);
   }
 
   .@{ventSpace}-card-grid {
-    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset, 0 1px 0 0 #434343 inset;
+    box-shadow:
+      1px 0 0 0 #434343,
+      0 1px 0 0 #434343,
+      1px 1px 0 0 #434343,
+      1px 0 0 0 #434343 inset,
+      0 1px 0 0 #434343 inset;
   }
 
   .@{ventSpace}-calendar-selected-day .@{ventSpace}-calendar-date {
@@ -120,9 +128,12 @@ html[data-theme='light'] {
 @vent-modal-bg2: var(--vent-modal-bg2);
 @vent-primary-color: var(--vent-primary-color);
 @vent-modal-title: var(--vent-modal-title);
+@vent-base-border: var(--vent-base-border);
+@vent-device-manager-control-btn: var(--vent-device-manager-control-btn);
+@vent-device-manager-control-btn-hover: var(--vent-device-manager-control-btn-hover);
 
 // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
 @theme-dark: ~"html[data-theme='dark2']";
 @theme-light: ~"html[data-theme='light']";
-@theme-default: ~"html";
+@theme-default: ~'html';
 @theme-deepblue: ~"html[data-theme='deepblue']";

src/design/themify/dark.less

@@ -1,59 +1,62 @@
 html[data-theme='dark2'] {
-    --vent-primary-color: #1580cc;
-
-    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
-
-    --vent-btn-primary-hover-color: #389bd9;
-    --vent-btn-primary-focus-color: #1c638a99;
-    --vent-btn-primary-color: #1c638a;
-    --vent-btn-primary-border-color: #56b3c96b;
-
-    --vent-table-thead: #3d9dd45d;
-    --vent-table-thead-border: #91e9fe;
-    --vent-table-hover: #0dc3ff22;
-    --vent-table-no-hover: #00bfff10;
-    --vent-table-action-link: #00e7ff;
-    
-    --vent-modal-title: #39e9fe;
-    --vent-modal-border: #04bdaa;
-    --vent-modal-bg: #0042ab22;
-    --vent-modal-box-shadow: #2b87ff;
-    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
-
-    --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
-    --vent-tabs-table-thead: #3d9dd433;
-    --vent-tabs-action-link: #28f3f3;
-    
-    --vent-form-item-border: #3ad8ff77;
-    
-    --vent-text-base: #ddd;
-    --vent-base-color: #09172c;
-    --vent-base-light-bg: #60f4ff;
-    --vent-base-light-bg-opcity: #60f4ff55;
-    --vent-transparent: #ffffff00;
-    --vent-font-color: #ffffff;
-    --vent-font-action-link: #7af5ff;
-
-    --vent-configurable-bg: #09316a;
-    --vent-configurable-module-bg: #3df6ff22;
-    --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
-    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
-    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
-    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-    --vent-configurable-home-light-border: #3df6ff;
-
-    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
-    --vent-gas-tab-bg: #10427a;
-    --vent-gas-tab-bg-avtived: #166ab5;
-    --vent-gas-tab-border: #5590d8;
-    --vent-gas-primary-text: #00c8d9;
-    --vent-gas-primary-bg: #1673bf;
-    --vent-gas-primary-trasparent-bg: #0091ff12;
-    
-    --vent-device-manager-box-border: #44d3ff70;
-    --vent-device-manager-box-bg: #ffffff11;
-    
-    --vent-warn-tab-bg: #0f376ccc;
-    --vent-warn-tab-border: #166ab5;
-    --vent-warn-tab-bg-actived: #209dfc;
-}
+  --vent-primary-color: #1580cc;
+
+  --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+
+  --vent-btn-primary-hover-color: #389bd9;
+  --vent-btn-primary-focus-color: #1c638a99;
+  --vent-btn-primary-color: #1c638a;
+  --vent-btn-primary-border-color: #56b3c96b;
+
+  --vent-table-thead: #3d9dd45d;
+  --vent-table-thead-border: #91e9fe;
+  --vent-table-hover: #0dc3ff22;
+  --vent-table-no-hover: #00bfff10;
+  --vent-table-action-link: #00e7ff;
+
+  --vent-modal-title: #39e9fe;
+  --vent-modal-border: #04bdaa;
+  --vent-modal-bg: #0042ab22;
+  --vent-modal-box-shadow: #2b87ff;
+  --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
+  --vent-tabs-table-thead: #3d9dd433;
+  --vent-tabs-action-link: #28f3f3;
+
+  --vent-form-item-border: #3ad8ff77;
+
+  --vent-text-base: #ddd;
+  --vent-base-color: #09172c;
+  --vent-base-border: #5cfaff;
+  --vent-base-light-bg: #60f4ff;
+  --vent-base-light-bg-opcity: #60f4ff55;
+  --vent-transparent: #ffffff00;
+  --vent-font-color: #ffffff;
+  --vent-font-action-link: #7af5ff;
+
+  --vent-configurable-bg: #09316a;
+  --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+  --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
+  --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+  --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+  --vent-configurable-home-light-border: #3df6ff;
+
+  --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+  --vent-gas-tab-bg: #10427a;
+  --vent-gas-tab-bg-avtived: #166ab5;
+  --vent-gas-tab-border: #5590d8;
+  --vent-gas-primary-text: #00c8d9;
+  --vent-gas-primary-bg: #1673bf;
+  --vent-gas-primary-trasparent-bg: #0091ff12;
+
+  --vent-device-manager-box-border: #44d3ff70;
+  --vent-device-manager-box-bg: #ffffff11;
+  --vent-device-manager-control-btn: linear-gradient(#1fa6cb, #127cb5);
+  --vent-device-manager-control-btn-hover: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-warn-tab-bg: #0f376ccc;
+  --vent-warn-tab-border: #166ab5;
+  --vent-warn-tab-bg-actived: #209dfc;
+}

src/design/themify/deepblue.less

@@ -1,62 +1,65 @@
 html[data-theme='deepblue'] {
-    --vent-primary-color: #0A84FF;
-
-    --vent-header-bg-color: linear-gradient(#0A84FF99, #0A84FF22);
-
-    --vent-btn-primary-hover-color: #2986e9;
-    --vent-btn-primary-focus-color: #0359b5;
-    --vent-btn-primary-color: #0963c1;
-    --vent-btn-primary-border-color: #3F506A;
-
-    --vent-table-thead: #172943;
-    --vent-table-thead-border: #3F506A;
-    --vent-table-hover: #283851;
-    --vent-table-no-hover: #28385180;
-    --vent-table-action-link: #0a80fa;
-
-    --vent-modal-title: #0a80fa;
-    --vent-modal-border: #3F506A;
-    --vent-modal-bg: #0b1f3980;
-    --vent-modal-box-shadow: #316b92;
-    --vent-modal-bg2: linear-gradient(#2986e955, #0963c155);
-
-    --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
-    --vent-tabs-table-thead: #3d9dd433;
-    // --vent-tabs-action-link: #28f3f3;
-    // --vent-tabs-bg: linear-gradient(#28385155, #27334722);
-    // --vent-tabs-table-thead: #172943;
-    --vent-tabs-action-link: #0a80fa;
-    
-    --vent-form-item-border: #3aa6ff77;
-
-    --vent-text-base: #fff;
-    --vent-base-color: #021632;
-    --vent-base-light-bg: #8691a3;
-    --vent-base-light-bg-opcity: #8691a355;
-    --vent-transparent: #ffffff00;
-    --vent-font-color: #ffffff;
-    --vent-font-action-link: #0a80fa;
-
-    --vent-configurable-bg: #02132c;
-    --vent-configurable-module-bg: #0d2037;
-    --vent-configurable-module-border-bd: linear-gradient(#3b4c65 0%, #3b4c65 60%, #000723);
-    --vent-configurable-dropdown: linear-gradient(to bottom, #2d3e55, #09172c);
-    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
-    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-    --vent-configurable-home-light-border: #fbfdff;
-
-    --vent-gas-list-item-bg-img: linear-gradient(to right, #213248, #21324800);
-    --vent-gas-tab-bg: #10427a;
-    --vent-gas-tab-bg-actived: #166ab5;
-    --vent-gas-tab-border: #3F506A;
-    --vent-gas-primary-text: #ededed;
-    --vent-gas-primary-bg: #244d84;
-    --vent-gas-primary-trasparent-bg: #0091ff12;
-
-    --vent-device-manager-box-border: #3F506A50;
-    --vent-device-manager-box-bg: #aaaaaa11;
-
-    --vent-warn-tab-bg: #0f376c;
-    --vent-warn-tab-border: #107eec;
-    --vent-warn-tab-bg-actived: #0963c1;
-}
+  --vent-primary-color: #0a84ff;
+
+  --vent-header-bg-color: linear-gradient(#0a84ff99, #0a84ff22);
+
+  --vent-btn-primary-hover-color: #2986e9;
+  --vent-btn-primary-focus-color: #0359b5;
+  --vent-btn-primary-color: #0963c1;
+  --vent-btn-primary-border-color: #3f506a;
+
+  --vent-table-thead: #172943;
+  --vent-table-thead-border: #3f506a;
+  --vent-table-hover: #283851;
+  --vent-table-no-hover: #28385180;
+  --vent-table-action-link: #0a80fa;
+
+  --vent-modal-title: #0a80fa;
+  --vent-modal-border: #3f506a;
+  --vent-modal-bg: #0b1f3980;
+  --vent-modal-box-shadow: #316b92;
+  --vent-modal-bg2: linear-gradient(#2986e955, #0963c155);
+
+  --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
+  --vent-tabs-table-thead: #3d9dd433;
+  // --vent-tabs-action-link: #28f3f3;
+  // --vent-tabs-bg: linear-gradient(#28385155, #27334722);
+  // --vent-tabs-table-thead: #172943;
+  --vent-tabs-action-link: #0a80fa;
+
+  --vent-form-item-border: #3aa6ff77;
+
+  --vent-text-base: #fff;
+  --vent-base-color: #021632;
+  --vent-base-border: #3f506a;
+  --vent-base-light-bg: #8691a3;
+  --vent-base-light-bg-opcity: #8691a355;
+  --vent-transparent: #ffffff00;
+  --vent-font-color: #ffffff;
+  --vent-font-action-link: #0a80fa;
+
+  --vent-configurable-bg: #02132c;
+  --vent-configurable-module-bg: #0d2037;
+  --vent-configurable-module-border-bd: linear-gradient(#3b4c65 0%, #3b4c65 60%, #000723);
+  --vent-configurable-dropdown: linear-gradient(to bottom, #2d3e55, #09172c);
+  --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+  --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+  --vent-configurable-home-light-border: #fbfdff;
+
+  --vent-gas-list-item-bg-img: linear-gradient(to right, #213248, #21324800);
+  --vent-gas-tab-bg: #10427a;
+  --vent-gas-tab-bg-actived: #166ab5;
+  --vent-gas-tab-border: #3f506a;
+  --vent-gas-primary-text: #ededed;
+  --vent-gas-primary-bg: #244d84;
+  --vent-gas-primary-trasparent-bg: #0091ff12;
+
+  --vent-device-manager-box-border: #3f506a50;
+  --vent-device-manager-box-bg: #aaaaaa11;
+  --vent-device-manager-control-btn: linear-gradient(#1572d5, #0963c1);
+  --vent-device-manager-control-btn-hover: linear-gradient(#1572d555, #0963c155);
+
+  --vent-warn-tab-bg: #0f376c;
+  --vent-warn-tab-border: #107eec;
+  --vent-warn-tab-bg-actived: #0963c1;
+}

src/design/themify/default.less

@@ -1,60 +1,63 @@
 html {
-    // html[data-theme='vent1'] {
-    --vent-primary-color: #1580cc;
-
-    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
-
-    --vent-btn-primary-hover-color: #389bd9;
-    --vent-btn-primary-focus-color: #1c638a99;
-    --vent-btn-primary-color: #1c638a;
-    --vent-btn-primary-border-color: #56b3c96b;
-
-    --vent-table-thead: #3d9dd45d;
-    --vent-table-thead-border: #91e9fe;
-    --vent-table-hover: #0dc3ff22;
-    --vent-table-no-hover: #00bfff10;
-    --vent-table-action-link: #00e7ff;
-    
-    --vent-modal-title: #39e9fe;
-    --vent-modal-border: #04bdaa;
-    --vent-modal-bg: #0042ab22;
-    --vent-modal-box-shadow: #2b87ff;
-    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
-
-    --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
-    --vent-tabs-table-thead: #3d9dd433;
-    --vent-tabs-action-link: #28f3f3;
-    
-    --vent-form-item-border: #3ad8ff77;
-    
-    --vent-text-base: #ddd;
-    --vent-base-color: #09172c;
-    --vent-base-light-bg: #60f4ff;
-    --vent-base-light-bg-opcity: #60f4ff55;
-    --vent-transparent: #ffffff00;
-    --vent-font-color: #ffffff;
-    --vent-font-action-link: #7af5ff;
-
-    --vent-configurable-bg: #09316a;
-    --vent-configurable-module-bg: #3df6ff22;
-    --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
-    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
-    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
-    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-    --vent-configurable-home-light-border: #3df6ff;
-
-    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
-    --vent-gas-tab-bg: #10427a;
-    --vent-gas-tab-bg-avtived: #166ab5;
-    --vent-gas-tab-border: #5590d8;
-    --vent-gas-primary-text: #00c8d9;
-    --vent-gas-primary-bg: #1673bf;
-    --vent-gas-primary-trasparent-bg: #0091ff12;
-    
-    --vent-device-manager-box-border: #44d3ff70;
-    --vent-device-manager-box-bg: #ffffff11;
-    
-    --vent-warn-tab-bg: #0f376ccc;
-    --vent-warn-tab-border: #166ab5;
-    --vent-warn-tab-bg-actived: #209dfc;
-}
+  // html[data-theme='vent1'] {
+  --vent-primary-color: #1580cc;
+
+  --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+
+  --vent-btn-primary-hover-color: #389bd9;
+  --vent-btn-primary-focus-color: #1c638a99;
+  --vent-btn-primary-color: #1c638a;
+  --vent-btn-primary-border-color: #56b3c96b;
+
+  --vent-table-thead: #3d9dd45d;
+  --vent-table-thead-border: #91e9fe;
+  --vent-table-hover: #0dc3ff22;
+  --vent-table-no-hover: #00bfff10;
+  --vent-table-action-link: #00e7ff;
+
+  --vent-modal-title: #39e9fe;
+  --vent-modal-border: #04bdaa;
+  --vent-modal-bg: #0042ab22;
+  --vent-modal-box-shadow: #2b87ff;
+  --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
+  --vent-tabs-table-thead: #3d9dd433;
+  --vent-tabs-action-link: #28f3f3;
+
+  --vent-form-item-border: #3ad8ff77;
+
+  --vent-text-base: #ddd;
+  --vent-base-color: #09172c;
+  --vent-base-border: #5cfaff;
+  --vent-base-light-bg: #60f4ff;
+  --vent-base-light-bg-opcity: #60f4ff55;
+  --vent-transparent: #ffffff00;
+  --vent-font-color: #ffffff;
+  --vent-font-action-link: #7af5ff;
+
+  --vent-configurable-bg: #09316a;
+  --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+  --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
+  --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+  --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+  --vent-configurable-home-light-border: #3df6ff;
+
+  --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+  --vent-gas-tab-bg: #10427a;
+  --vent-gas-tab-bg-avtived: #166ab5;
+  --vent-gas-tab-border: #5590d8;
+  --vent-gas-primary-text: #00c8d9;
+  --vent-gas-primary-bg: #1673bf;
+  --vent-gas-primary-trasparent-bg: #0091ff12;
+
+  --vent-device-manager-box-border: #44d3ff70;
+  --vent-device-manager-box-bg: #ffffff11;
+  --vent-device-manager-control-btn: linear-gradient(#1fa6cb, #127cb5);
+  --vent-device-manager-control-btn-hover: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-warn-tab-bg: #0f376ccc;
+  --vent-warn-tab-border: #166ab5;
+  --vent-warn-tab-bg-actived: #209dfc;
+}

src/design/themify/light.less

@@ -1,59 +1,62 @@
 html[data-theme='light'] {
-    --vent-primary-color: #1580cc;
-
-    --vent-header-bg-color: linear-gradient(#005177, #0a344c);
-
-    --vent-btn-primary-hover-color: #389bd9;
-    --vent-btn-primary-focus-color: #1c638a99;
-    --vent-btn-primary-color: #1c638a;
-    --vent-btn-primary-border-color: #56b3c96b;
-
-    --vent-table-thead: #3d9dd45d;
-    --vent-table-thead-border: #91e9fe;
-    --vent-table-hover: #0dc3ff22;
-    --vent-table-no-hover: #00bfff10;
-    --vent-table-action-link: #00e7ff;
-    
-    --vent-modal-title: #39e9fe;
-    --vent-modal-border: #04bdaa;
-    --vent-modal-bg: #0042ab22;
-    --vent-modal-box-shadow: #2b87ff;
-    --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
-
-    --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
-    --vent-tabs-table-thead: #3d9dd433;
-    --vent-tabs-action-link: #28f3f3;
-    
-    --vent-form-item-border: #3ad8ff77;
-    
-    --vent-text-base: #ddd;
-    --vent-base-color: #09172c;
-    --vent-base-light-bg: #60f4ff;
-    --vent-base-light-bg-opcity: #60f4ff55;
-    --vent-transparent: #ffffff00;
-    --vent-font-color: #ffffff;
-    --vent-font-action-link: #7af5ff;
-
-    --vent-configurable-bg: #09316a;
-    --vent-configurable-module-bg: #3df6ff22;
-    --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
-    --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
-    --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
-    --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
-    --vent-configurable-home-light-border: #3df6ff;
-
-    --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
-    --vent-gas-tab-bg: #10427a;
-    --vent-gas-tab-bg-avtived: #166ab5;
-    --vent-gas-tab-border: #5590d8;
-    --vent-gas-primary-text: #00c8d9;
-    --vent-gas-primary-bg: #1673bf;
-    --vent-gas-primary-trasparent-bg: #0091ff12;
-    
-    --vent-device-manager-box-border: #44d3ff70;
-    --vent-device-manager-box-bg: #ffffff11;
-    
-    --vent-warn-tab-bg: #0f376ccc;
-    --vent-warn-tab-border: #166ab5;
-    --vent-warn-tab-bg-actived: #209dfc;
-}
+  --vent-primary-color: #1580cc;
+
+  --vent-header-bg-color: linear-gradient(#005177, #0a344c);
+
+  --vent-btn-primary-hover-color: #389bd9;
+  --vent-btn-primary-focus-color: #1c638a99;
+  --vent-btn-primary-color: #1c638a;
+  --vent-btn-primary-border-color: #56b3c96b;
+
+  --vent-table-thead: #3d9dd45d;
+  --vent-table-thead-border: #91e9fe;
+  --vent-table-hover: #0dc3ff22;
+  --vent-table-no-hover: #00bfff10;
+  --vent-table-action-link: #00e7ff;
+
+  --vent-modal-title: #39e9fe;
+  --vent-modal-border: #04bdaa;
+  --vent-modal-bg: #0042ab22;
+  --vent-modal-box-shadow: #2b87ff;
+  --vent-modal-bg2: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-tabs-bg: linear-gradient(#0091aa33, #2081ff11);
+  --vent-tabs-table-thead: #3d9dd433;
+  --vent-tabs-action-link: #28f3f3;
+
+  --vent-form-item-border: #3ad8ff77;
+
+  --vent-text-base: #ddd;
+  --vent-base-color: #09172c;
+  --vent-base-border: #5cfaff;
+  --vent-base-light-bg: #60f4ff;
+  --vent-base-light-bg-opcity: #60f4ff55;
+  --vent-transparent: #ffffff00;
+  --vent-font-color: #ffffff;
+  --vent-font-action-link: #7af5ff;
+
+  --vent-configurable-bg: #09316a;
+  --vent-configurable-module-bg: #3df6ff22;
+  --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
+  --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
+  --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+  --vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
+  --vent-configurable-home-light-border: #3df6ff;
+
+  --vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+  --vent-gas-tab-bg: #10427a;
+  --vent-gas-tab-bg-avtived: #166ab5;
+  --vent-gas-tab-border: #5590d8;
+  --vent-gas-primary-text: #00c8d9;
+  --vent-gas-primary-bg: #1673bf;
+  --vent-gas-primary-trasparent-bg: #0091ff12;
+
+  --vent-device-manager-box-border: #44d3ff70;
+  --vent-device-manager-box-bg: #ffffff11;
+  --vent-device-manager-control-btn: linear-gradient(#1fa6cb, #127cb5);
+  --vent-device-manager-control-btn-hover: linear-gradient(#2cd1ff55, #1eb0ff55);
+
+  --vent-warn-tab-bg: #0f376ccc;
+  --vent-warn-tab-border: #166ab5;
+  --vent-warn-tab-bg-actived: #209dfc;
+}

src/design/vent/modal.less

@@ -379,7 +379,7 @@
         z-index: -1;
         border-radius: inherit;
         /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        background: var(--vent-device-manager-control-btn);
       }
 
       &::after {
@@ -538,7 +538,7 @@
           z-index: -1;
           border-radius: inherit;
           /*important*/
-          background: linear-gradient(#1fa6cb, #127cb5);
+          background: var(--vent-device-manager-control-btn);
         }
       }
     }

src/views/vent/monitorManager/deviceMC/index.vue

@@ -305,7 +305,14 @@
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
+  @{theme-deepblue} {
+    .device-box {
+      --color-18: #4795b6;
+    }
+  }
+
   .device-box {
+    --color-18: #74e9fe;
     width: 100%;
     height: calc(100% - 100px);
     padding-bottom: 10px;
@@ -333,7 +340,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        color: #fff;
+        color: var(--vent-font-color);
         position: relative;
         cursor: pointer;
 
@@ -406,14 +413,14 @@
         background: linear-gradient(45deg, #04e6fb, #0c5cab);
 
         &::before {
-          border-color: #0efcff;
-          box-shadow: 1px 1px 3px 1px #0efcff inset;
+          border-color: var(--vent-base-border);
+          box-shadow: 1px 1px 3px 1px var(--vent-base-border) inset;
         }
       }
     }
 
     .enter-detail {
-      color: #fff;
+      color: var(--vent-font-color);
       cursor: pointer;
       position: absolute;
       right: 120px;
@@ -427,12 +434,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #fff;
+      color: var(--vent-font-color);
       padding: 5px 15px 5px 15px;
       cursor: pointer;
 
       &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+        background: var(--vent-device-manager-control-btn-hover);
       }
 
       &::before {
@@ -447,7 +454,7 @@
         z-index: -1;
         border-radius: inherit;
         /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        background: var(--vent-device-manager-control-btn);
       }
     }
   }
@@ -464,12 +471,12 @@
 
   :deep(.@{ventSpace}-tabs-card) {
     .@{ventSpace}-tabs-tab {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      border-color: #74e9fe;
+      background: var(--vent-device-manager-control-btn-hover);
+      border-color: var(--color-18);
       border-radius: 0%;
 
       &:hover {
-        color: #64d5ff;
+        color: var(--color-18);
       }
     }
 
@@ -478,11 +485,11 @@
     }
 
     .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: aqua;
+      color: var(--vent-tabs-action-link);
     }
 
     .@{ventSpace}-tabs-nav::before {
-      border-color: #74e9fe;
+      border-color: var(--color-18);
     }
 
     .@{ventSpace}-picker,
@@ -494,7 +501,7 @@
       input,
       .@{ventSpace}-select-selection-item,
       .@{ventSpace}-picker-suffix {
-        color: #fff !important;
+        color: var(--vent-font-color) !important;
       }
 
       .@{ventSpace}-select-selection-placeholder {
@@ -506,7 +513,7 @@
     .action,
     .@{ventSpace}-select-arrow,
     .@{ventSpace}-picker-separator {
-      color: #fff !important;
+      color: var(--vent-font-color) !important;
     }
 
     .@{ventSpace}-table-cell-row-hover {
@@ -527,8 +534,7 @@
 
       & > tr > th,
       .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff !important;
+        border-color: var(--color-18) !important;
         border-left: none !important;
         border-right: none !important;
         padding: 7px;

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -1702,7 +1702,7 @@
       cursor: pointer;
 
       &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+        background: var(--vent-device-manager-control-btn-hover);
       }
 
       &::before {
@@ -1717,7 +1717,7 @@
         z-index: -1;
         border-radius: inherit;
         /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        background: var(--vent-device-manager-control-btn);
       }
     }
   }

src/views/vent/monitorManager/fanLocalMonitor/index.vue

@@ -10,14 +10,14 @@
               >局扇工作面风速：<span class="value">{{
                 selectData.windInputSpeed1 ? selectData.windInputSpeed1 : selectData.windInputSpeed_merge ? selectData.windInputSpeed_merge : '-'
               }}</span>
-              <span class="unit"> m/s</span></p
-            >
+              <span class="unit"> m/s</span>
+            </p>
             <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge"
               >风筒入口风量：<span class="value">{{
                 selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-'
               }}</span>
-              <span class="unit"> m³/min</span></p
-            >
+              <span class="unit"> m³/min</span>
+            </p>
           </div>
         </div>
         <div class="elementTag" id="inputBox1">
@@ -29,8 +29,8 @@
               >风筒入口风量：<span class="value">{{
                 selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-'
               }}</span>
-              <span class="unit"> m³/min</span></p
-            >
+              <span class="unit"> m³/min</span>
+            </p>
             <p v-if="selectData.gas3"
               >风筒入口瓦斯浓度: <span class="value">{{ selectData.gas3 ? selectData.gas3 : '-' }}</span> <span class="unit"> %</span></p
             >
@@ -46,8 +46,8 @@
               selectData.ductOutletAirVolume_merge
             "
           >
-            <p v-if="selectData.windQuantity2 || selectData.m3 || selectData.ductOutletAirVolume_merge || selectData.windOutSpeed_merge"
-              >迎头供风量：<span class="value">{{
+            <p v-if="selectData.windQuantity2 || selectData.m3 || selectData.ductOutletAirVolume_merge || selectData.windOutSpeed_merge">
+              迎头供风量：<span class="value">{{
                 selectData.windQuantity2
                   ? selectData.windQuantity2
                   : selectData.m3
@@ -56,8 +56,8 @@
                   ? selectData.ductOutletAirVolume_merge
                   : '-'
               }}</span>
-              <span class="unit"> m³/min</span></p
-            >
+              <span class="unit"> m³/min</span>
+            </p>
             <p v-if="selectData.gas1"
               >迎头瓦斯浓度：<span class="value">{{ selectData.gas1 ? selectData.gas1 : '-' }}</span> <span class="unit"> %</span></p
             >
@@ -65,8 +65,8 @@
               >风筒出口风速<span class="value">{{
                 selectData.windOutSpeed1 ? selectData.windOutSpeed1 : selectData.windOutSpeed_merge ? selectData.windOutSpeed_merge : '-'
               }}</span>
-              <span class="unit"> %</span></p
-            >
+              <span class="unit"> %</span>
+            </p>
           </div>
         </div>
         <div class="elementTag" id="returnBox">
@@ -85,8 +85,9 @@
         <div class="elementTag" id="windownBox">
           <div class="elementContent" v-if="modalType == 'fc'">
             <p style="pointer-events: auto"
-              ><a class="action-link" @click="goDetailDevice('window_fWindowM3')">风窗详情</a> <ArrowRightOutlined :style="{ color: '#157DC8' }"
-            /></p>
+              ><a class="action-link" @click="goDetailDevice('window_fWindowM3')">风窗详情</a>
+              <ArrowRightOutlined :style="{ color: '#157DC8' }" />
+            </p>
             <p v-if="selectData.windSpeed"
               >风窗风流风速：<span class="value">{{ selectData.windSpeed ? selectData.windSpeed : '-' }}</span> <span class="unit"> m/s</span></p
             >
@@ -119,7 +120,7 @@
     <div class="top-box" v-if="!loading">
       <div class="top-center row">
         <div class="vent-flex-row" id="fanLocalSelectDom" v-if="!globalConfig?.simulatedPassword && getDictItemsByCode('fanlocaltype')">
-          <span style="color: #00f5fe; margin-left: 5px">风机类型：</span>
+          <span style="color: var(--vent-font-color); margin-left: 5px">风机类型：</span>
           <JDictSelectTag
             style="width: 180px"
             v-model:value="devicekide"
@@ -135,8 +136,8 @@
             v-if="!(selectData.fanFrequencyType == 'fandp' && item.permission.startsWith('btn:frequency')) && hasPermission(item.permission)"
             :class="{ 'button-box': btnClick, 'button-disable': !btnClick }"
             @click="showModal(item)"
-            >{{ item.value }}</div
-          >
+            >{{ item.value }}
+          </div>
         </template>
       </div>
       <div class="top-right row">
@@ -225,7 +226,7 @@
                           }}</div>
                         </div>
                         <div v-else>
-                          <div class="item-value">{{ selectData[state.dataIndex] ? selectData[state.dataIndex] : '-' }}</div>
+                          <div class="item-value">{{ selectData[state.dataIndex] ? selectData[state.dataIndex] : '-' }} </div>
                         </div>
                       </div>
                     </template>
@@ -380,7 +381,7 @@
           <a-tab-pane key="6" tab="风机曲线" v-if="hasPermission('show:fanEcharts')">
             <div v-if="activeKey == '6'" class="tab-item" style="display: flex">
               <div style="width: calc(50% - 20px); height: 100%">
-                <div style="color: #fff; width: 100%; text-align: center; margin: 5px 0px">主机</div>
+                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">主机</div>
                 <BarAndLine
                   class="echarts-line"
                   xAxisPropType="readTime"
@@ -393,7 +394,7 @@
                 />
               </div>
               <div style="width: calc(50% - 20px); height: 100%">
-                <div style="color: #fff; width: 100%; text-align: center; margin: 5px 0px">备机</div>
+                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">备机</div>
                 <BarAndLine
                   class="echarts-line"
                   xAxisPropType="readTime"
@@ -1493,19 +1494,42 @@
   });
 </script>
 <style scoped lang="less">
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
+
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     height: 100%;
   }
+
   :deep(.zxm-tabs-content) {
     height: 100%;
   }
+
+  // @{theme-deepblue} {
+  //   .scene-box {
+  //     --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+  //     --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+  //     --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+  //     --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+  //     --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+  //     --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
+  //   }
+  // }
+
   .scene-box {
+    --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+    --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+    --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+    --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+    --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+    --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
     .title-text {
       height: 32px;
     }
+
     .bottom-tabs-box {
       height: 280px;
+
       .tabs-box {
         position: relative !important;
       }
@@ -1518,14 +1542,16 @@
     flex-direction: row;
     justify-content: space-between;
     padding: 10px 5px;
-    color: #ffffff;
+    color: var(--vent-font-color);
     z-index: 999;
     top: 60px;
+
     .data-item {
       pointer-events: auto;
+
       .item-header {
         width: 374px;
-        background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
+        background: var(--image-lr-top-bg) no-repeat;
         background-size: auto;
         height: 32px;
         text-align: center;
@@ -1534,16 +1560,19 @@
         font-weight: 600;
         color: #fafafa;
       }
+
       .item-container {
         width: 346px;
         margin: 0 14px;
         padding: 10px;
         background: #00377c33;
         backdrop-filter: blur(2px);
+
         .tab {
           width: 323px;
-          background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
+          background: var(--image-lr-tab-bg) no-repeat;
           display: flex;
+
           .tab-item {
             flex: 1;
             text-align: center;
@@ -1551,20 +1580,23 @@
             color: #ffffff99;
             cursor: pointer;
           }
+
           .tab-item-active-l {
-            color: #00ffea;
-            background-image: url('/@/assets/images/vent/l-tab-active.png');
+            color: var(--vent-font-action-link);
+            background-image: var(--image-l-tab-active);
             background-repeat: no-repeat;
             background-size: auto;
             background-position: 6px 3px;
           }
+
           .tab-item-active-r {
-            color: #00ffea;
-            background-image: url('/@/assets/images/vent/r-tab-active.png');
+            color: var(--vent-font-action-link);
+            background-image: var(--image-r-tab-active);
             background-repeat: no-repeat;
             background-position: 0 3px;
           }
         }
+
         .container-group {
           width: 314px;
           margin: 0px 4px;
@@ -1574,6 +1606,7 @@
           max-height: 440px;
           overflow-y: auto;
         }
+
         .container-item {
           width: 100%;
           height: 60px;
@@ -1581,9 +1614,10 @@
           padding: 10px 0 0 20px;
           margin-bottom: 5px;
           position: relative;
-          background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
+          background: var(--image-plane-bottom) no-repeat;
           background-size: auto;
           background-position: bottom;
+
           &::before {
             content: '';
             display: block;
@@ -1595,21 +1629,25 @@
             background-color: #73f4ff66;
             backdrop-filter: blur(5px);
           }
+
           .item-icon {
             width: 54px;
             height: 45px;
-            background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
+            background: var(--image-plane-icon-bg) no-repeat;
             background-size: cover;
+
             .icon-style {
               font-size: 18px;
               margin: 10px 0 0 20px;
               color: #ffc800;
             }
           }
+
           .item-name {
             width: 180px;
             line-height: 60px;
           }
+
           .item-value {
             position: relative;
             height: 26px;
@@ -1617,9 +1655,10 @@
             margin: 15px 0;
             text-align: center;
             width: 80px;
-            border: 1px solid #00f5fe;
+            border: 1px solid var(--vent-base-border);
             border-radius: 13px;
             background: linear-gradient(to right, #00f5fe44, #0090ff44);
+
             &::before {
               width: 6px;
               height: 6px;
@@ -1632,22 +1671,26 @@
             }
           }
         }
+
         .warning-header {
           display: flex;
           font-size: 14px;
+
           .header-item {
             flex: 1;
             display: flex;
             justify-content: center;
             align-items: center;
+
             .header-title {
               width: 100%;
               text-align: center;
               padding: 1px 0;
-              color: #39e7fe;
+              color: var(--vent-font-action-link);
               margin-top: 10px;
               background: #1eb0ff22;
             }
+
             .header-value {
               // width: 133px;
               height: 36px;
@@ -1660,10 +1703,10 @@
               align-items: center;
               margin-top: 15px;
               margin-left: 8px;
-              // background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
             }
           }
         }
+
         .warning-group {
           padding: 0 10px;
           position: relative;
@@ -1674,18 +1717,21 @@
             justify-content: space-between;
             align-items: center;
             height: 38px;
+
             .item-name {
               display: flex;
               align-items: center;
+
               // padding-left: 5px;
               .icon {
                 width: 6px;
                 height: 6px;
                 display: inline-block;
-                background-color: #1cd5ff;
+                background-color: var(--vent-base-light-bg);
                 border-radius: 3px;
                 position: relative;
                 margin-right: 8px;
+
                 &::before {
                   content: '';
                   width: 10px;
@@ -1698,6 +1744,7 @@
                   left: -2px;
                 }
               }
+
               &::before {
                 content: '';
                 display: block;
@@ -1705,11 +1752,12 @@
                 height: 38px;
                 position: absolute;
                 left: 12px;
-                background-color: #00f5fe;
+                background-color: var(--vent-base-light-bg);
               }
             }
           }
         }
+
         .warning-group-r {
           &::before {
             content: '';
@@ -1718,44 +1766,53 @@
             height: 100%;
             position: absolute;
             left: 12px;
-            background-color: #00f5fe;
+            background-color: var(--vent-base-light-bg);
           }
         }
       }
     }
   }
+
   .input-box {
     display: flex;
     align-items: center;
+
     .input-title {
       color: #73e8fe;
       width: auto;
     }
+
     margin-right: 10px;
   }
+
   .label {
     max-width: 220px;
   }
+
   #fanLocalSelectDom {
     :deep(.@{ventSpace}-select-dropdown) {
       left: 0px !important;
       top: 35px !important;
     }
   }
+
   .@{ventSpace}-input {
     width: 150px;
   }
+
   :deep(#LivePlayerBox) {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     padding-right: 380px;
     pointer-events: none;
+
     .video-parent {
       height: 208px;
       pointer-events: auto !important;
     }
   }
+
   .to-right {
     :deep(#LivePlayerBox) {
       padding-right: 0px;
@@ -1776,12 +1833,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--vent-font-color);
     padding: 0 15px 5px 15px;
     cursor: pointer;
+
     &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      background: var(--vent-device-manager-control-btn-hover);
     }
+
     &::before {
       width: calc(100% - 6px);
       height: 27px;
@@ -1792,9 +1851,11 @@
       left: 3px;
       bottom: 0;
       z-index: -1;
-      border-radius: inherit; /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+      border-radius: inherit;
+      /*important*/
+      background: var(--vent-device-manager-control-btn);
     }
+
     &::after {
       width: calc(100% + 32px);
       height: 10px;
@@ -1805,22 +1866,25 @@
       left: -16px;
       bottom: 0;
       z-index: -1;
-      border-radius: inherit; /*important*/
+      border-radius: inherit;
+      /*important*/
       background-position: center;
       background-size: 100%;
       z-index: 999;
     }
   }
+
   .video-icon {
     width: 30px;
     height: 38px;
     position: absolute;
     top: 580px;
     right: 395px;
-    color: #fff;
+    color: var(--vent-font-color);
     z-index: 1;
     font-size: 28px;
   }
+
   .no-play {
     &::after {
       position: absolute;

src/views/vent/monitorManager/fanLocalMonitor1/index.vue

@@ -1216,15 +1216,35 @@
   });
 </script>
 <style scoped lang="less">
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
 
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     height: 100%;
   }
 
-  .scene-box {
+  :deep(.zxm-tabs-content) {
     height: 100%;
-    z-index: 99999;
+  }
+
+  // @{theme-deepblue} {
+  //   .scene-box {
+  //     --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+  //     --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+  //     --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+  //     --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+  //     --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+  //     --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
+  //   }
+  // }
+
+  .scene-box {
+    --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+    --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+    --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+    --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+    --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+    --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
     .title-text {
       height: 32px;
     }
@@ -1236,7 +1256,7 @@
     flex-direction: row;
     justify-content: space-between;
     padding: 10px 5px;
-    color: #ffffff;
+    color: var(--vent-font-color);
     z-index: 999;
     top: 60px;
 
@@ -1245,7 +1265,7 @@
 
       .item-header {
         width: 374px;
-        background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
+        background: var(--image-lr-top-bg) no-repeat;
         background-size: auto;
         height: 32px;
         text-align: center;
@@ -1256,17 +1276,15 @@
       }
 
       .item-container {
-        height: 780px; //lxh
         width: 346px;
         margin: 0 14px;
         padding: 10px;
         background: #00377c33;
         backdrop-filter: blur(2px);
-        overflow: hidden;
 
         .tab {
           width: 323px;
-          background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
+          background: var(--image-lr-tab-bg) no-repeat;
           display: flex;
 
           .tab-item {
@@ -1278,16 +1296,16 @@
           }
 
           .tab-item-active-l {
-            color: #00ffea;
-            background-image: url('/@/assets/images/vent/l-tab-active.png');
+            color: var(--vent-font-action-link);
+            background-image: var(--image-l-tab-active);
             background-repeat: no-repeat;
             background-size: auto;
             background-position: 6px 3px;
           }
 
           .tab-item-active-r {
-            color: #00ffea;
-            background-image: url('/@/assets/images/vent/r-tab-active.png');
+            color: var(--vent-font-action-link);
+            background-image: var(--image-r-tab-active);
             background-repeat: no-repeat;
             background-position: 0 3px;
           }
@@ -1295,12 +1313,11 @@
 
         .container-group {
           width: 314px;
-          height: calc(100% - 50px);
           margin: 0px 4px;
           padding: 10px 0;
           min-height: 432px;
           background: linear-gradient(to right, #00deff22, #2081ff05);
-          // max-height: 440px;lxh
+          max-height: 440px;
           overflow-y: auto;
         }
 
@@ -1311,7 +1328,7 @@
           padding: 10px 0 0 20px;
           margin-bottom: 5px;
           position: relative;
-          background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
+          background: var(--image-plane-bottom) no-repeat;
           background-size: auto;
           background-position: bottom;
 
@@ -1330,7 +1347,7 @@
           .item-icon {
             width: 54px;
             height: 45px;
-            background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
+            background: var(--image-plane-icon-bg) no-repeat;
             background-size: cover;
 
             .icon-style {
@@ -1352,7 +1369,7 @@
             margin: 15px 0;
             text-align: center;
             width: 80px;
-            border: 1px solid #00f5fe;
+            border: 1px solid var(--vent-base-border);
             border-radius: 13px;
             background: linear-gradient(to right, #00f5fe44, #0090ff44);
 
@@ -1380,7 +1397,7 @@
             align-items: center;
 
             .header-title {
-              color: #39e7fe;
+              color: var(--vent-font-color);
               margin-top: 10px;
             }
 
@@ -1396,7 +1413,6 @@
               align-items: center;
               margin-top: 15px;
               margin-left: 8px;
-              // background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
             }
           }
         }
@@ -1421,7 +1437,7 @@
                 width: 6px;
                 height: 6px;
                 display: inline-block;
-                background-color: #1cd5ff;
+                background-color: var(--vent-base-light-bg);
                 border-radius: 3px;
                 position: relative;
                 margin-right: 8px;
@@ -1446,7 +1462,7 @@
                 height: 38px;
                 position: absolute;
                 left: 12px;
-                background-color: #00f5fe;
+                background-color: var(--vent-base-light-bg);
               }
             }
           }
@@ -1460,7 +1476,7 @@
             height: 100%;
             position: absolute;
             left: 12px;
-            background-color: #00f5fe;
+            background-color: var(--vent-base-light-bg);
           }
         }
       }
@@ -1527,12 +1543,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--vent-font-color);
     padding: 0 15px 5px 15px;
     cursor: pointer;
 
     &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      background: var(--vent-device-manager-control-btn-hover);
     }
 
     &::before {
@@ -1547,7 +1563,7 @@
       z-index: -1;
       border-radius: inherit;
       /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+      background: var(--vent-device-manager-control-btn);
     }
 
     &::after {

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -271,7 +271,7 @@
           </div>
           <div class="container-group fault-container-group">
             <div class="electric-box">
-              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{ item.title }}</div>
+              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }"> {{ item.title }}</div>
             </div>
             <div class="fault-group">
               <template v-if="deviceType">
@@ -304,7 +304,7 @@
           </div>
           <div class="container-group fault-container-group">
             <div class="electric-box">
-              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{ item.title }}</div>
+              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }"> {{ item.title }}</div>
             </div>
             <div class="fault-group">
               <template v-if="deviceType">
@@ -395,7 +395,7 @@
           <a-tab-pane key="5" tab="曲线配置" v-if="hasPermission('show:fanEcharts')">
             <div v-if="activeKey == '5'" class="tab-item" style="display: flex">
               <div style="width: 50%; height: 100%">
-                <div style="color: #fff; width: 100%; text-align: center; margin: 5px 0px">主机</div>
+                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">主机</div>
                 <BarAndLine
                   class="echarts-line"
                   xAxisPropType="readTime"
@@ -408,7 +408,7 @@
                 />
               </div>
               <div style="width: 50%; height: 100%">
-                <div style="color: #fff; width: 100%; text-align: center; margin: 5px 0px">备机</div>
+                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">备机</div>
                 <BarAndLine
                   class="echarts-line"
                   xAxisPropType="readTime"
@@ -1482,10 +1482,29 @@
 </script>
 
 <style scoped lang="less">
+  @import '/@/design/theme.less';
   @import '/@/design/vent/modal.less';
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
+  // @{theme-deepblue} {
+  //   .scene-box {
+  //     --image-tab-group-bg: url('/@/assets/images/vent/tab-group-bg.png');
+  //     --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+  //     --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+  //     --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+  //     --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+  //     --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+  //     --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
+  //   }
+  // }
+
+  .scene-box {
+    --image-tab-group-bg: url('/@/assets/images/vent/tab-group-bg.png');
+    --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
+    --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
+    --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
+    --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
+    --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
+    --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
   }
 
   .head-line {
@@ -1498,15 +1517,13 @@
       padding: 5px;
       border: 1px transparent solid;
       border-radius: 5px;
-      // margin-left: 8px;
-      // margin-right: 8px;
       width: auto;
       height: 34px;
-      border: 1px solid #65dbea;
+      border: 1px solid var(--vent-base-border);
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #fff;
+      color: var(--vent-font-color);
       padding: 0 10px;
       cursor: pointer;
 
@@ -1542,7 +1559,7 @@
     left: 50% !important;
     top: 85px !important;
     transform: translateX(-50%) !important;
-    background: url('/@/assets/images/vent/tab-group-bg.png') no-repeat !important;
+    background: var(--image-tab-group-bg) no-repeat !important;
     background-size: 100% 75px !important;
     padding: 0 30px !important;
 
@@ -1551,15 +1568,15 @@
       min-width: 100px;
       padding-top: 3px !important;
       border: 1px transparent solid;
-      border: 1px solid #65dbea;
+      border: 1px solid var(--vent-base-border);
 
       &:hover {
-        background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
+        background: var(--vent-device-manager-control-btn-hover) !important;
       }
 
       &::before {
         height: 27px !important;
-        background: linear-gradient(#1fa6cb, #127cb5) !important;
+        background: var(--vent-device-manager-control-btn) !important;
       }
 
       &::after {
@@ -1568,7 +1585,7 @@
     }
 
     .button-box-disable {
-      border: 1px solid #65dbea !important;
+      border: 1px solid var(--vent-base-border) !important;
 
       &:hover {
         background: none !important;
@@ -1579,22 +1596,24 @@
       }
     }
   }
+
   .top-right {
     position: absolute;
     display: flex;
     right: 0px;
     top: 55px;
     align-items: center;
-    color: #fff;
+    color: var(--vent-font-color);
     z-index: 1;
   }
+
   .data-show-box {
     position: relative;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding: 10px;
-    color: #ffffff;
+    color: var(--vent-font-color);
     z-index: 999;
     top: 70px;
 
@@ -1603,7 +1622,7 @@
 
       .item-header {
         width: 374px;
-        background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
+        background: var(--image-lr-top-bg) no-repeat;
         background-size: cover;
         height: 32px;
         text-align: center;
@@ -1622,7 +1641,7 @@
 
         .tab {
           width: 323px;
-          background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
+          background: var(--image-lr-tab-bg) no-repeat;
           background-size: cover;
           display: flex;
 
@@ -1634,14 +1653,15 @@
             cursor: pointer;
             height: calc(100% - 10px);
             overflow-y: auto;
+
             &:hover {
-              color: #ffffff;
+              color: var(--vent-font-color);
             }
           }
 
           .tab-item-active-l {
             color: #aff3ff;
-            background-image: url('/@/assets/images/vent/l-tab-active.png');
+            background-image: var(--image-l-tab-active);
             background-repeat: no-repeat;
             background-size: auto;
             background-position: 6px 3px;
@@ -1649,7 +1669,7 @@
 
           .tab-item-active-r {
             color: #aff3ff;
-            background-image: url('/@/assets/images/vent/r-tab-active.png');
+            background-image: var(--image-r-tab-active);
             background-repeat: no-repeat;
             background-position: 0 3px;
           }
@@ -1673,7 +1693,7 @@
             padding: 10px 0 0 20px;
             margin-bottom: 5px;
             position: relative;
-            background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
+            background: var(--image-plane-bottom) no-repeat;
             background-size: auto;
             background-position: bottom;
 
@@ -1692,7 +1712,7 @@
             .item-icon {
               width: 54px;
               height: 45px;
-              background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
+              background: var(--image-plane-icon-bg) no-repeat;
               background-size: cover;
 
               .icon-style {
@@ -1712,7 +1732,7 @@
               margin: 15px 0;
               text-align: center;
               width: 80px;
-              border: 1px solid #00f5fe;
+              border: 1px solid var(--vent-base-border);
               border-radius: 13px;
               background: linear-gradient(to right, #00f5fe44, #0090ff44);
 
@@ -1743,11 +1763,10 @@
             align-items: center;
 
             .header-title {
-              color: #39e7fe;
+              color: var(--vent-font-action-link);
             }
 
             .header-value {
-              // width: 26px;
               position: relative;
               height: 56px;
               padding-left: 5px;
@@ -1758,29 +1777,26 @@
               display: flex;
               justify-content: center;
               align-items: center;
-              // &::before {
-              //   content: '';
-              //   position: absolute;
-              //   width: 26px;
-              //   height: 56px;
-              //   background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
-              // }
             }
           }
         }
+
         .fault-container-group {
           overflow: hidden;
+
           .fault-warning {
             color: #ff7b00;
             font-weight: 600px;
             font-size: 16px;
           }
+
           .fault-error {
             color: #ff3410;
             font-weight: 600px;
             font-size: 16px;
           }
         }
+
         .warning-group {
           padding: 0 10px;
           position: relative;
@@ -1792,7 +1808,7 @@
             height: 100%;
             position: absolute;
             left: 12px;
-            background-color: #00f5fe;
+            background-color: var(--vent-base-border);
           }
 
           .warning-item {
@@ -1807,7 +1823,7 @@
                 width: 6px;
                 height: 6px;
                 display: inline-block;
-                background-color: #1cd5ff;
+                background-color: var(--vent-base-light-bg);
                 border-radius: 3px;
                 position: relative;
                 margin-right: 5px;
@@ -1827,25 +1843,31 @@
             }
           }
         }
+
         .electric-box {
           display: flex;
+
           .item {
             text-align: center;
             color: #aff3ffee;
           }
         }
+
         .fault-group {
           height: 425px;
           margin-top: 5px;
           overflow-y: auto;
+
           .fault-item {
             display: flex;
             padding: 3px 0px;
             border-bottom: 1px solid #ffffff22;
+
             .item {
               padding: 0 2px;
               text-align: center;
             }
+
             &:nth-child(odd) {
               background-color: #c3fdff05;
             }
@@ -1854,16 +1876,20 @@
       }
     }
   }
+
   .fault-box {
     .item-header {
       width: 394px !important;
     }
+
     .item-container {
       width: 366px !important;
+
       .tab {
         width: 343px !important;
       }
     }
+
     .container-group {
       width: 334px !important;
     }
@@ -1884,35 +1910,40 @@
       top: 10px;
     }
   }
-  // 保德在线监测和故障诊断切换组件
+
+  /** 保德在线监测和故障诊断切换组件 */
   .monitor-tab {
     display: flex;
     position: absolute;
     top: 600px;
     left: 395px;
     align-items: center;
+
     .item {
       font-size: 15px;
-      color: #fff;
+      color: var(--vent-font-color);
       padding: 0 5px;
       cursor: pointer;
     }
+
     .item-active {
       transform: skew(-15deg, 0);
-      color: #00f5fe;
-      border-bottom: 1px solid #00f5fe;
+      color: var(--vent-font-action-link);
+      border-bottom: 1px solid var(--vent-base-border);
     }
   }
+
   .video-icon {
     width: 30px;
     height: 38px;
     position: absolute;
     top: 600px;
     right: 395px;
-    color: #fff;
+    color: var(--vent-font-color);
     z-index: 1;
     font-size: 28px;
   }
+
   .no-play {
     &::after {
       position: absolute;
@@ -1937,9 +1968,9 @@
       .elementContent {
         backdrop-filter: blur(2px);
         width: 220px;
-        background-color: rgba(0, 0, 0, 0.6);
-        box-shadow: 0px 0px 40px rgb(0 90 131 / 55%) inset;
-        border: 2px solid rgb(153 176 195 / 55%);
+        background-color: #00000099;
+        box-shadow: 0px 0px 40px #005a838c inset;
+        border: 2px solid #99b0c38c;
         padding: 15px 20px 15px 20px;
         font-size: 15px;
 
@@ -1951,12 +1982,11 @@
 
         span {
           color: #f2a500;
-          // color: #74e9fe;
         }
 
         .data-title {
           display: inline-block;
-          color: #fff;
+          color: var(--vent-font-color);
         }
       }
 
@@ -1967,7 +1997,7 @@
 
         &::after {
           right: 270px;
-          border: 4px solid rgb(0, 221, 255); //rgb(0 220 255 / 75%)
+          border: 4px solid #00ddff;
           background: #a7a7a766;
         }
       }
@@ -1993,7 +2023,7 @@
     padding: 4px 12px;
     position: relative;
     border-radius: 2px;
-    color: #fff;
+    color: var(--vent-font-color);
     cursor: pointer;
 
     &::before {
@@ -2026,7 +2056,7 @@
   }
 
   .btn2 {
-    border: 1px solid #19c3e9;
+    border: 1px solid var(--vent-base-border);
     margin-left: 10px;
 
     &::before {
@@ -2043,23 +2073,20 @@
   :deep(.button-box) {
     position: relative;
     padding: 5px;
-    // border: 1px transparent solid;
     border-radius: 5px;
     margin-left: 8px;
     margin-right: 8px;
     width: auto;
-    // height: 40px;
-    // border: 1px solid #65dbea;
     height: 35px !important;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--vent-font-color);
     padding: 0 15px 5px 15px;
     cursor: pointer;
 
     &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      background: var(--vent-device-manager-control-btn-hover);
     }
 
     &::before {
@@ -2074,7 +2101,7 @@
       z-index: -1;
       border-radius: inherit;
       /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+      background: var(--vent-device-manager-control-btn);
     }
 
     &::after {
@@ -2096,8 +2123,9 @@
   }
 
   :deep(.zxm-radio-disabled + span) {
-    color: #fff !important;
+    color: var(--vent-font-color) !important;
   }
+
   :deep(.zxm-radio-disabled .zxm-radio-inner::after) {
     background-color: #127cb5 !important;
   }
@@ -2124,6 +2152,10 @@
     overflow-y: auto;
   }
 
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+  }
+
   .label {
     max-width: 220px;
   }