fix dark mode bugs (#11740)

console-ui/package-lock.json

@@ -10019,6 +10019,11 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-icons": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmmirror.com/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js

@@ -457,7 +457,6 @@ class HistoryRollback extends React.Component {
               pageSize={this.state.pageSize}
               onChange={this.changePage.bind(this)}
             />
-            ,
           </div>
           <DiffEditorDialog
             ref={this.diffEditorDialog}

console-ui/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js

@@ -334,7 +334,6 @@ class ListeningToQuery extends React.Component {
               pageSize={this.state.pageSize}
               onChange={this.changePage}
             />
-            ,
           </div>
         </Loading>
       </>

console-ui/src/theme/index.scss

@@ -30,11 +30,12 @@ $dark-aside-border: #1C1D1F;
 $dark-table-header-bg: #4A4A4A;
 $dark-pull-bac: #373737;
 $dark-input-bak: #303030;
-$dark-input-border: #414141;
+$dark-input-border: #8D8D93;
+$dark-input-border-focus: #B8B8BC;
 $dark-input-color: #585858;
 //contain
 .dark {
-  filter: grayscale(.2);
+  filter: grayscale(.25);
   //侧边栏背景
   .next-shell-navigation.next-shell-mini.next-shell-aside, .next-menu-item:not(.next-disabled).next-focused {
     background-color: $dark-menu-bac !important;
@@ -73,6 +74,9 @@ $dark-input-color: #585858;
   .main-container .right-panel {
     background-color: $dark-container-bgc !important;
   }
+  .main-container .right-panel::-webkit-scrollbar, .main-container .right-panel::-webkit-scrollbar-track, .main-container .right-panel::-webkit-scrollbar-corner {
+    background-color: $dark-container-bgc !important;
+  }
   //title颜色
   .page-title {
     color: $dark-color-deep;
@@ -80,6 +84,14 @@ $dark-input-color: #585858;
   .nav-title, .nav-mode {
     border-color: $dark-aside-border
   }
+  //通知栏
+  .next-message.next-message-notice.next-inline {
+    background-color: $dark-container-bgc;
+    border-color: $dark-color-grep;
+  }
+  .next-message.next-message-notice.next-inline .next-message-content {
+    color: $dark-color-light-grep;
+  }
 }
 //namespacewrapper
 .dark {
@@ -115,11 +127,18 @@ $dark-input-color: #585858;
   .next-table td, .next-table th {
     border-color: $dark-bg-border!important;
   }
+  .next-table-row.selected {
+    background: $dark-aside-color !important;
+    color: $dark-color-light-grep;
+  }
   //table tr hover
   .next-table-row.hovered {
     background: $dark-table-header-bg !important;
     color: $dark-color-deep;
   }
+  .next-table-header-fixer {
+    background: $dark-table-header-bg !important;
+  }
   .next-table-cell-wrapper a {
     color: $dark-bg-hover;
   }
@@ -168,6 +187,9 @@ $dark-input-color: #585858;
       color: $dark-color-grep;
     }
   }
+  .next-input:hover, .next-input.next-focus {
+    border-color: $dark-input-border-focus !important;
+  }
   .next-input.next-small, .next-input.next-input-textarea {
     background-color: $dark-input-bak!important;
     border-color: $dark-input-border!important;
@@ -185,7 +207,7 @@ $dark-input-color: #585858;
   .setting-box {
     background-color: $dark-main-bgc !important;
     color: $dark-color-deep!important;
-    border-color: $dark-bg-border;
+    border-color: $dark-input-border;
   }
   .next-radio-group .next-radio-label {
     color: $dark-color-light-grep !important;
@@ -248,3 +270,37 @@ $dark-input-color: #585858;
     }
   }
 }
+//button
+.dark {
+  .next-btn.next-btn-normal,.next-btn.next-btn-secondary {
+    background-color: $dark-input-bak !important;
+    border-color: $dark-input-border !important;
+    color: $dark-color-light-grep !important;
+  }
+  .next-btn.next-btn-normal:hover,.next-btn.next-btn-secondary:hover {
+    background-color: $dark-pull-bac !important;
+    color: $dark-color-deep !important;
+    border-color: $dark-input-border-focus !important;
+  }
+  .next-pagination .next-pagination-item.next-current {
+    background-color: $dark-input-border !important;
+    color: $dark-color-deep !important;
+  }
+  .next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i, .next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i {
+    color: $dark-color-light-grep !important;
+  }
+  .next-switch-on .next-switch-btn,.next-switch-off .next-switch-btn {
+    background-color: $dark-color-light-grep !important;
+  }
+  .next-switch-on:hover .next-switch-btn, .next-switch-on:focus .next-switch-btn,.next-switch-off:hover .next-switch-btn, .next-switch-off:focus .next-switch-btn {
+    background-color: $dark-color-deep !important;
+  }
+  .next-switch-off {
+    background-color: $dark-input-bak !important;
+    border-color: $dark-input-border !important;
+  }
+  .next-switch-off:hover {
+    border-color: $dark-input-border-focus !important;
+    background-color: $dark-pull-bac !important;
+  }
+}

console/src/main/resources/static/index.html

@@ -35,7 +35,7 @@
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/icon.css">
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/font-awesome.css">
 	<!-- 第三方css结束 -->
-<link href="./css/main.css?31bc8618f12b5f782632" rel="stylesheet"></head>
+<link href="./css/main.css?95cd0f64829dcbfb990e" rel="stylesheet"></head>
 
 <body>
 	<div id="root" style="overflow:hidden"></div>
@@ -56,6 +56,6 @@
 	<script src="console-ui/public/js/merge.js"></script>
 	<script src="console-ui/public/js/loader.js"></script>
 	<!-- 第三方js结束 -->
-<script type="text/javascript" src="./js/main.js?31bc8618f12b5f782632"></script></body>
+<script type="text/javascript" src="./js/main.js?95cd0f64829dcbfb990e"></script></body>
 
 </html>