Merge pull request #895 from dataease/pr@dev@perf_theme_switch

frontend/src/layout/components/AppMain.vue

@@ -37,7 +37,7 @@ export default {
 
     .ms-main-container {
         height: 100%;
-        padding: 0;
+        padding: 0 !important;
     }
 </style>
 

frontend/src/layout/components/Topbar.vue

@@ -257,6 +257,14 @@ export default {
             value: val
           })
         }
+
+        if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
+          if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
+            document.body.className = 'blackTheme'
+          } else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
+            document.body.className = ''
+          }
+        }
         this.axiosFinished = true
       })
     },

frontend/src/styles/index.scss

@@ -386,15 +386,31 @@ div:focus {
     }
 }
 
+.blackTheme .el-textarea__inner {
+    background-color: var(--MainBG) !important;    
+}
+.blackTheme .el-textarea__inner:not(:focus) {
+    
+    border-color: var(--border-color-input) !important;
+}
+
 .blackTheme .el-input__inner {
     background-color: var(--MainBG) !important;    
 }
 .blackTheme .el-input__inner:not(:focus) {
     
-    // border: none !important;
     border-color: var(--border-color-input) !important;
 }
 
+.blackTheme .el-input-number__decrease {
+    background-color: var(--MainBG) !important;
+    border: none !important;
+}
+.blackTheme .el-input-number__increase {
+    background-color: var(--MainBG) !important;
+    border: none !important;
+}
+
 
 .el-pagination {
     button:disabled {

frontend/src/styles/topbar.scss

@@ -25,7 +25,7 @@
   .el-menu {
     float: left;
     border: none !important;
-
+    background-color: var(--MainBG, #ffffff) !important;
     .nav-item {
       display: inline-block;
 
@@ -47,29 +47,7 @@
 
     }
   }
-/* .blackTheme .el-menu {
-    
-    .nav-item {
-      
-
-      .el-menu-item:not(.is-active) {
-
-        &:hover {
-          background-color: var(--ContentBG) !important;
-        }
 
-        &:focus {
-          background-color: var(--ContentBG) !important;
-        }
-
-      }
-      .blackTheme .el-menu-item.is-active {
-        background-color: var(--ContentBG) !important;
-        color: var(--TextActive) !important;
-      }
-
-    }
-} */
 
   .right-menu {
     float: right;

frontend/src/views/panel/list/PanelViewShow.vue

@@ -62,7 +62,7 @@
       </el-row>
     </el-col>
     <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
-      <el-row style="height: 100%;" class="custom-position">
+      <el-row style="height: 100%; background-color: var(--MainBG);" class="custom-position">
         {{ $t('panel.select_panel_from_left') }}
       </el-row>
     </el-col>