theming

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>