feat: enhance the Dark Theme (#336)

src/components/Graph.vue

@@ -252,11 +252,11 @@ limitations under the License. -->
     display: block;
     white-space: nowrap;
     z-index: 9999999;
-    box-shadow: #ddd 1px 2px 10px;
+    box-shadow: var(--sw-topology-box-shadow);
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
-    background-color: rgb(255 255 255);
+    background-color: var(--sw-bg-color-overlay);
     border-radius: 4px;
-    color: rgb(51 51 51);
+    color: $font-color;
     padding: 5px;
   }
 
@@ -267,7 +267,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/hooks/data.ts

@@ -130,3 +130,43 @@ export const RespFields: Indexable = {
     error
   }`,
 };
+
+export const DarkChartColors = [
+  "#79bbff",
+  "#a0a7e6",
+  "#30A4EB",
+  "#45BFC0",
+  "#ebbf93",
+  "#884dde",
+  "#1bbf93",
+  "#7289ab",
+  "#f56c6c",
+  "#81feb7",
+  "#4094fa",
+  "#ff894d",
+  "#884dde",
+  "#ebbf93",
+  "#fedc6d",
+  "#da7cfa",
+  "#b88230",
+  "#a0cfff",
+];
+
+export const LightChartColors = [
+  "#3f96e3",
+  "#a0a7e6",
+  "#45BFC0",
+  "#FFCC55",
+  "#FF6A84",
+  "#c23531",
+  "#2f4554",
+  "#61a0a8",
+  "#d48265",
+  "#91c7ae",
+  "#749f83",
+  "#ca8622",
+  "#bda29a",
+  "#6e7074",
+  "#546570",
+  "#c4ccd3",
+];

src/hooks/useLegendProcessor.ts

@@ -16,6 +16,9 @@
  */
 import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -96,37 +99,11 @@ export default function useLegendProcess(legend?: LegendOptions) {
 
     return { source, headers };
   }
-  function chartColors(keys: string[]) {
-    let color: string[] = [];
-    switch (keys.length) {
-      case 2:
-        color = ["#FF6A84", "#a0b1e6"];
-        break;
-      case 1:
-        color = ["#3f96e3"];
-        break;
-      default:
-        color = [
-          "#30A4EB",
-          "#45BFC0",
-          "#FFCC55",
-          "#FF6A84",
-          "#a0a7e6",
-          "#c23531",
-          "#2f4554",
-          "#61a0a8",
-          "#d48265",
-          "#91c7ae",
-          "#749f83",
-          "#ca8622",
-          "#bda29a",
-          "#6e7074",
-          "#546570",
-          "#c4ccd3",
-        ];
-        break;
-    }
-    return color;
+  function chartColors() {
+    const appStore = useAppStoreWithOut();
+    const list = appStore.theme === Themes.Dark ? DarkChartColors : LightChartColors;
+
+    return list;
   }
   return { showEchartsLegend, isRight, aggregations, chartColors };
 }

src/styles/reset.scss

@@ -123,89 +123,3 @@ code,
 pre {
   font-family: Consolas, Menlo, Courier, monospace;
 }
-
-.el-menu {
-  --el-menu-item-height: 50px;
-}
-
-.el-menu-item-group__title {
-  display: none;
-}
-
-.el-sub-menu .el-menu-item {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 0 0 56px !important;
-}
-
-.el-sub-menu__title {
-  .el-icon.menu-icons {
-    margin-top: -5px !important;
-  }
-}
-
-.el-drawer__header {
-  margin-bottom: 0;
-  padding-left: 10px;
-  font-size: 16px;
-}
-
-.el-drawer__body {
-  padding: 0;
-}
-
-.switch {
-  margin: 0 5px;
-}
-
-div.vis-tooltip {
-  max-width: 600px;
-  overflow: hidden;
-  background-color: var(--vis-tooltip-bg) !important;
-  white-space: normal !important;
-  font-size: $font-size-smaller !important;
-  color: var(--font-color) !important;
-}
-
-.vis-item {
-  cursor: pointer;
-  height: 20px;
-}
-
-.vis-item.Error {
-  background-color: #e66;
-  opacity: 0.8;
-  border-color: #e66;
-  color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-item.Normal {
-  background-color: #fac858;
-  border-color: #fac858;
-  color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-item .vis-item-content {
-  padding: 0 3px !important;
-}
-
-.vis-item.vis-selected.Error,
-.vis-item.vis-selected.Normal {
-  color: var(--sw-event-vis-selected) !important;
-}
-
-.vis-time-axis .vis-text {
-  color: var(--sw-time-axis-text) !important;
-}
-
-.el-menu--vertical.sub-list {
-  display: none;
-}
-
-div:has(> a.menu-title) {
-  display: none;
-}
-
-.el-input-number .el-input__inner {
-  text-align: left !important;
-}

src/styles/theme.scss

@@ -54,6 +54,7 @@ html {
   --sw-time-axis-text: #4d4d4d;
   --sw-drawer-header: #72767b;
   --sw-marketplace-border: #dedfe0;
+  --sw-grid-item-active: #79bbff;
 }
 
 html.dark {
@@ -94,6 +95,7 @@ html.dark {
   --sw-time-axis-text: #aaa;
   --sw-drawer-header: #e9e9eb;
   --sw-marketplace-border: #606266;
+  --sw-grid-item-active: #73767a;
 }
 
 .el-drawer__header {
@@ -150,3 +152,89 @@ $theme-background: var(--theme-background);
 $active-background: var(--el-color-primary);
 $font-size-smaller: 12px;
 $font-size-normal: 14px;
+
+.el-menu {
+  --el-menu-item-height: 50px;
+}
+
+.el-menu-item-group__title {
+  display: none;
+}
+
+.el-sub-menu .el-menu-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 0 0 56px !important;
+}
+
+.el-sub-menu__title {
+  .el-icon.menu-icons {
+    margin-top: -5px !important;
+  }
+}
+
+.el-drawer__header {
+  margin-bottom: 0;
+  padding-left: 10px;
+  font-size: 16px;
+}
+
+.el-drawer__body {
+  padding: 0;
+}
+
+.switch {
+  margin: 0 5px;
+}
+
+div.vis-tooltip {
+  max-width: 600px;
+  overflow: hidden;
+  background-color: var(--vis-tooltip-bg) !important;
+  white-space: normal !important;
+  font-size: $font-size-smaller !important;
+  color: var(--font-color) !important;
+}
+
+.vis-item {
+  cursor: pointer;
+  height: 20px;
+}
+
+.vis-item.Error {
+  background-color: #e66;
+  opacity: 0.8;
+  border-color: #e66;
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item.Normal {
+  background-color: #fac858;
+  border-color: #fac858;
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item .vis-item-content {
+  padding: 0 3px !important;
+}
+
+.vis-item.vis-selected.Error,
+.vis-item.vis-selected.Normal {
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-time-axis .vis-text {
+  color: var(--sw-time-axis-text) !important;
+}
+
+.el-menu--vertical.sub-list {
+  display: none;
+}
+
+div:has(> a.menu-title) {
+  display: none;
+}
+
+.el-input-number .el-input__inner {
+  text-align: left !important;
+}

src/views/dashboard/controls/Tab.vue

@@ -375,7 +375,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item.active {
-    border: 1px solid $active-color;
+    border: 1px solid var(--sw-grid-item-active);
   }
 
   .no-data-tips {

src/views/dashboard/graphs/Bar.vue

@@ -74,7 +74,7 @@ limitations under the License. -->
         },
       };
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     return {
       color,
       tooltip: {

src/views/dashboard/graphs/Line.vue

@@ -92,7 +92,7 @@ limitations under the License. -->
       }
       return serie;
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     const tooltip = {
       trigger: "axis",
       backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",

src/views/dashboard/graphs/components/Legend.vue

@@ -111,9 +111,8 @@ limitations under the License. -->
   const isRight = computed(() => useLegendProcess(props.config).isRight);
   const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%"));
   const colors = computed(() => {
-    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
     const { chartColors } = useLegendProcess(props.config);
-    return chartColors(keys);
+    return chartColors();
   });
 </script>
 <style lang="scss" scoped>

src/views/dashboard/panel/Layout.vue

@@ -91,7 +91,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item.active {
-    border: 1px solid $active-color;
+    border: 1px solid var(--sw-grid-item-active);
   }
 
   .no-data-tips {

src/views/dashboard/related/topology/components/Sankey.vue

@@ -44,6 +44,12 @@ limitations under the License. -->
       tooltip: {
         trigger: "item",
         confine: true,
+        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        textStyle: {
+          fontSize: 12,
+          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
+        },
       },
       series: {
         type: "sankey",