feat: implement the Dark Theme (#334)

src/views/dashboard/graphs/Bar.vue

@@ -24,6 +24,8 @@ limitations under the License. -->
   import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import Legend from "./components/Legend.vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -46,6 +48,7 @@ limitations under the License. -->
       default: () => ({}),
     },
   });
+  const appStore = useAppStoreWithOut();
   const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
   const option = computed(() => getOption());
 
@@ -91,8 +94,11 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
+        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
         textStyle: {
-          color: "#333",
+          fontSize: 12,
+          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
         },
       },
       grid: {

src/views/dashboard/graphs/Card.vue

@@ -61,7 +61,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .chart-card {
-    color: #333;
+    color: $font-color;
     width: 100%;
     height: 100%;
     display: flex;

src/views/dashboard/graphs/Line.vue

@@ -31,6 +31,8 @@ limitations under the License. -->
   import Legend from "./components/Legend.vue";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -40,7 +42,6 @@ limitations under the License. -->
       default: () => ({}),
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-    theme: { type: String, default: "light" },
     config: {
       type: Object as PropType<
         LineConfig & {
@@ -62,6 +63,7 @@ limitations under the License. -->
       }),
     },
   });
+  const appStore = useAppStoreWithOut();
   const setRight = ref<boolean>(false);
   const option = computed(() => getOption());
   function getOption() {
@@ -93,9 +95,11 @@ limitations under the License. -->
     const color: string[] = chartColors(keys);
     const tooltip = {
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+      borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
       enterable: true,
       confine: true,
@@ -108,9 +112,11 @@ limitations under the License. -->
       confine: true,
       extraCssText: `height: 20px; padding:0 2px;`,
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
+      borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
     };
 
@@ -125,7 +131,7 @@ limitations under the License. -->
         left: 0,
         itemWidth: 12,
         textStyle: {
-          color: props.theme === "dark" ? "#fff" : "#333",
+          color: appStore.theme === Themes.Dark ? "#fff" : "#333",
         },
       },
       grid: {

src/views/dashboard/graphs/Table.vue

@@ -106,12 +106,12 @@ limitations under the License. -->
     .row:first-child {
       div {
         border-top: 1px solid $disabled-color;
-        background: #eee;
+        background-color: var(--border-color-primary);
       }
     }
 
     .header {
-      color: #000;
+      color: var(--sw-table-color);
       font-weight: bold;
     }
 

src/views/dashboard/graphs/TopList.vue

@@ -141,7 +141,7 @@ limitations under the License. -->
 
   .progress-bar {
     font-size: $font-size-smaller;
-    color: #333;
+    color: $font-color;
   }
 
   .chart-slow-i {
@@ -171,7 +171,7 @@ limitations under the License. -->
     padding: 4px 10px 7px;
     border-radius: 4px;
     border: 1px solid #ddd;
-    color: #333;
+    color: $font-color;
     background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
@@ -188,12 +188,12 @@ limitations under the License. -->
   }
 
   .operation-icon {
-    color: #333;
+    color: $font-color;
   }
 
   .operation {
     padding: 5px 0;
-    color: #333;
+    color: $font-color;
     cursor: pointer;
     position: relative;
     text-align: center;
@@ -201,7 +201,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>