theming

src/styles/jetbrains-dark.scss

@@ -1,5 +1,5 @@
 :root {
-  --spp-white: #A9B7C6;
+  --spp-white: #808080;
   --spp-light-grey: #A9B7C6;
   --spp-grey: #A9B7C6;
   --spp-light-blue: #629755;
@@ -66,6 +66,7 @@
 
 .el-popper.is-light {
   background: var(--nice-black);
+  border: 1px solid var(--border-color) !important;
 }
 
 .micro-topo-chart .operations-list {
@@ -213,11 +214,20 @@
 
 .el-sub-menu__title {
   background-color: var(--spp-other-green) !important;
+
+  &:hover {
+    background-color: var(--dashboard-tool-background) !important;
+  }
+}
+
+.el-menu-item {
+  &:hover {
+    background-color: var(--dashboard-tool-background) !important;
+  }
 }
 
 .el-menu-item.is-active {
-  color: var(--spp-red) !important;
+  background-color: var(--dashboard-tool-background) !important;
-  background-color: var(--menu-selected-color) !important;
 }
 
 .bar-select {
@@ -231,7 +241,7 @@
 .nav-bar {
   background-color: var(--spp-darkest-green) !important;
   border-bottom: 1px solid var(--spp-darkest-green) !important;
-  color: var(--spp-white) !important;
+  color: var(--spp-light-grey) !important;
 }
 
 .nav-bar.dark {
@@ -241,11 +251,15 @@
 
 .tools {
   &:hover {
-    color: var(--spp-red) !important;
+    color: var(--spp-white) !important;
   }
 }
 
 .chart-card {
+  color: var(--spp-light-grey) !important;
+}
+
+.unit {
   color: var(--spp-white) !important;
 }
 
@@ -312,7 +326,7 @@
 }
 
 .vue-grid-item.active {
-  border: 1px solid var(--spp-red) !important;
+  border: 1px solid var(--border-color) !important;
 }
 
 .vue-grid-layout {
@@ -323,10 +337,6 @@
   background: var(--spp-dark-green) !important;
 }
 
-.vue-grid-item.active {
-  border: 1px solid var(--spp-red) !important;
-}
-
 .dashboard-tool {
   background: var(--dashboard-tool-background) !important;
   border-bottom: 1px solid var(--border-color) !important;
@@ -366,7 +376,7 @@
 }
 
 .link {
-  color: var(--spp-red) !important;
+  color: var(--spp-light-grey) !important;
 }
 
 .dark-dialog {
@@ -416,3 +426,58 @@ a {
 .log-tips {
   color: red;
 }
+
+.el-progress-bar__outer {
+  background-color: var(--widget-background) !important;
+}
+
+.menu-control {
+  color: var(--spp-white) !important;
+}
+
+.el-notification {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-notification__title {
+  color: var(--spp-white) !important;
+}
+
+.el-notification__content {
+  color: var(--spp-light-grey) !important;
+}
+
+.graph {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.header,
+.footer {
+  background-color: var(--table-header-color) !important;
+  border-top: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__header {
+  background-color: var(--spp-darkest-green) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__wrap {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__content {
+  background-color: var(--dashboard-tool-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.attributes {
+  color: var(--spp-light-grey) !important;
+}
+
+.scroll-handler__wrapper .scroll-to.active {
+  background-color: var(--border-color) !important;
+}

src/views/dashboard/controls/Tab.vue

@@ -424,7 +424,7 @@ export default defineComponent({
   right: 0;
   top: 40vh;
   height: auto;
-  width: 20px;
+  width: 17px;
   .scroll-to {
     opacity: 0.5;
     width: 10px;

src/views/dashboard/data.ts

@@ -253,14 +253,14 @@ export const QueryOrders = [
   { label: "Duration", value: "BY_DURATION" },
 ];
 export const TextColors: { [key: string]: string } = {
-  green: "#67C23A",
+  green: "#629755",
   blue: "#409EFF",
-  red: "#F56C6C",
+  red: "#e1483b",
   grey: "#909399",
   white: "#fff",
   black: "#000",
   orange: "#E6A23C",
-  purple: "#bf99f8",
+  purple: "#9876AA",
 };
 
 export const CalculationOpts = [

src/views/dashboard/graphs/Bar.vue

@@ -118,7 +118,7 @@ function getOption() {
         "#9876AA",
         "#CC7832",
         "#8A653B",
-        "#FF0000",
+        "#e1483b",
         "#FFC66D",
       ];
       break;

src/views/dashboard/graphs/Line.vue

@@ -128,7 +128,7 @@ function getOption() {
         "#9876AA",
         "#CC7832",
         "#8A653B",
-        "#FF0000",
+        "#e1483b",
         "#FFC66D",
       ];
       break;

src/views/dashboard/graphs/TopList.vue

@@ -35,7 +35,7 @@ limitations under the License. -->
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        :color="TextColors[config.color || 'purple']"
+        :color="TextColors[config.color || 'red']"
         :show-text="false"
       />
     </div>

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

@@ -46,7 +46,7 @@ limitations under the License. -->
                 <Icon
                   iconName="timeline"
                   size="middle"
-                  style="color: #409eff"
+                  style="color: #629755"
                 />
               </span>
             </template>