style: update css

src/components/DateCalendar.vue

@@ -544,22 +544,22 @@ limitations under the License. -->
 
   .calendar-date:hover,
   .calendar-date-on {
-    color: #3f97e3;
+    color: $font-color;
-    background-color: #f8f8f8;
+    background-color: $theme-background;
   }
 
   .calendar-date-selected,
   .calendar-date-selected:hover {
-    color: #fff;
+    color: $text-color;
     font-weight: bold;
     border-radius: 14px;
-    background: #3f97e3;
+    background: $active-background;
   }
 
   .calendar-date-disabled {
     cursor: not-allowed !important;
     color: #ccc !important;
-    background: #fff !important;
+    background: $theme-background !important;
   }
 
   .calendar-foot {
@@ -591,7 +591,7 @@ limitations under the License. -->
     width: 100%;
     height: 100%;
     position: absolute;
-    background: #fff;
+    background: $theme-background;
     left: 0;
     top: 0;
   }
@@ -626,7 +626,7 @@ limitations under the License. -->
     margin-top: -30px;
     height: 30px;
     line-height: 30px;
-    background: #fff;
+    background: $theme-background;
     text-align: center;
     font-weight: bold;
   }

src/components/SelectSingle.vue

@@ -86,7 +86,7 @@ limitations under the License. -->
     position: relative;
     justify-content: space-between;
     border: 1px solid #ddd;
-    background: #fff;
+    background: $theme-background;
     border-radius: 3px;
     color: #000;
     font-size: 12px;
@@ -137,7 +137,7 @@ limitations under the License. -->
     position: absolute;
     top: 26px;
     left: 0;
-    background: #fff;
+    background-color: $theme-background;
     box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     border: 1px solid #ddd;
     width: 100%;

src/components/TimePicker.vue

@@ -302,7 +302,7 @@ limitations under the License. -->
       transform: scaleY(0.8);
     }
 
-    to {
+    100% {
       opacity: 1;
       transform: scaleY(1);
     }
@@ -314,7 +314,7 @@ limitations under the License. -->
       transform: scaleY(1);
     }
 
-    to {
+    100% {
       opacity: 0;
       transform: scaleY(0.8);
     }
@@ -343,7 +343,7 @@ limitations under the License. -->
     cursor: pointer;
   }
 
-  .datepicker-close:before {
+  .datepicker-close::before {
     display: block;
     content: "";
     position: absolute;
@@ -354,14 +354,14 @@ limitations under the License. -->
     margin-left: -8px;
     margin-top: -8px;
     text-align: center;
-    color: #fff;
+    color: $text-color;
     border-radius: 50%;
     background: #ccc
       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
       no-repeat 50% 50%;
   }
 
-  .datepicker__clearable:hover:before {
+  .datepicker__clearable:hover::before {
     display: none;
   }
 
@@ -369,7 +369,7 @@ limitations under the License. -->
     display: block;
   }
 
-  .datepicker-close:hover:before {
+  .datepicker-close:hover::before {
     background-color: #afafaf;
   }
 
@@ -385,7 +385,7 @@ limitations under the License. -->
     padding: 0 5px;
     width: 100%;
     user-select: none;
-    font-family: "Monaco";
+    font-family: Monaco;
     letter-spacing: -0.7px;
   }
 
@@ -399,7 +399,7 @@ limitations under the License. -->
     cursor: not-allowed;
     background-color: #ebebe4;
     border-color: #e5e5e5;
-    -webkit-box-shadow: none;
+    box-shadow: none;
     box-shadow: none;
   }
 
@@ -410,8 +410,8 @@ limitations under the License. -->
     opacity: 1;
     transform: scaleY(1);
     font-size: 12px;
-    background: #fff;
+    background: $theme-background;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     margin-top: 2px;
     outline: 0;
     padding: 5px;
@@ -497,7 +497,7 @@ limitations under the License. -->
   .datepicker-btn {
     padding: 5px 10px;
     background: #3f97e3;
-    color: #fff;
+    color: $text-color;
     border-radius: 2px;
     display: inline-block;
     cursor: pointer;
@@ -525,7 +525,7 @@ limitations under the License. -->
     cursor: pointer;
     margin: 10px 0 0 5px;
     padding: 5px 15px;
-    color: #ffffff;
+    color: $text-color;
   }
 
   .datepicker__buttons .datepicker__button-select {

src/styles/light.scss

@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$font-color: #3d444f;
+$text-color: #fff;
+$font-color-black: #000;
+$font-color-grey: #ccc;
+$active-color: #409eff;
+$theme-background: #fff;
+$active-background: #409eff;

src/styles/reset.scss

@@ -173,7 +173,7 @@ pre {
 div.vis-tooltip {
   max-width: 600px;
   overflow: hidden;
-  background-color: #fff !important;
+  background-color: $theme-background !important;
   white-space: normal !important;
   font-size: 12px !important;
 }
@@ -187,7 +187,7 @@ div.vis-tooltip {
   background-color: #e66;
   opacity: 0.8;
   border-color: #e66;
-  color: #fff !important;
+  color: $text-color !important;
 }
 
 .vis-item.Normal {

src/types/components.d.ts

@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/views/Settings.vue

@@ -146,7 +146,7 @@ limitations under the License. -->
 
   .auto-select {
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
     padding: 1px;
 
     input {

src/views/dashboard/List.vue

@@ -480,7 +480,7 @@ limitations under the License. -->
 
   .table {
     padding: 20px 10px;
-    background-color: #fff;
+    background-color: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 5px;
     width: 100%;
@@ -490,7 +490,7 @@ limitations under the License. -->
 
   .toggle-selection {
     margin-top: 20px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .pagination {

src/views/dashboard/Widget.vue

@@ -185,12 +185,12 @@ limitations under the License. -->
   .content {
     min-width: 100px;
     border: 1px solid #eee;
-    background-color: #fff;
+    background-color: $theme-background;
     position: relative;
   }
 
   .widget-chart {
-    background: #fff;
+    background-color: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
     padding: 5px;

src/views/dashboard/configuration/ContinuousProfiling.vue

@@ -95,7 +95,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .item {

src/views/dashboard/configuration/Event.vue

@@ -72,6 +72,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

src/views/dashboard/configuration/Text.vue

@@ -155,6 +155,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

src/views/dashboard/configuration/ThirdPartyApp.vue

@@ -84,6 +84,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

src/views/dashboard/configuration/TimeRange.vue

@@ -151,6 +151,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

src/views/dashboard/configuration/Topology.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .label {

src/views/dashboard/configuration/Widget.vue

@@ -202,7 +202,7 @@ limitations under the License. -->
     position: relative;
     min-width: 1280px;
     border: 1px solid #eee;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .header {
@@ -253,7 +253,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .collapse {

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -612,7 +612,7 @@ limitations under the License. -->
       display: inline-block;
       padding: 2px 10px;
       border: 1px solid #ccc;
-      background-color: #fff;
+      background-color: $theme-background;
       border-right: 0;
       cursor: pointer;
     }
@@ -624,7 +624,7 @@ limitations under the License. -->
 
   span.active {
     background-color: $active-color;
-    color: #fff;
+    color: $theme-background;
   }
 
   .expression-param {

src/views/dashboard/controls/Tab.vue

@@ -359,7 +359,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #fff;
+    background: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }

src/views/dashboard/graphs/TopList.vue

@@ -172,7 +172,7 @@ limitations under the License. -->
     border-radius: 4px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fff;
+    background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
   }

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

@@ -136,7 +136,7 @@ limitations under the License. -->
     top: 0;
     z-index: 1;
     width: 25vw;
-    background: #fff;
+    background: $theme-background;
     text-align: left;
   }
 
@@ -158,7 +158,7 @@ limitations under the License. -->
     font-weight: bold;
     font-style: normal;
     text-align: left;
-    background: #fff;
+    background-color: $theme-background;
     position: sticky;
     left: 0;
     z-index: 1;

src/views/dashboard/panel/Layout.vue

@@ -85,7 +85,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #fff;
+    background-color: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -570,6 +570,6 @@ limitations under the License. -->
     padding: 5px;
     border: 1px solid #000;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

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

@@ -20,7 +20,7 @@ limitations under the License. -->
     element-loading-background="rgba(0, 0, 0, 0)"
     :style="`height: ${height}px`"
   >
-    <svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
+    <svg class="svg-topology" :width="width - 100" :height="height" @click="svgEvent">
       <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
         <g
           class="topo-node"
@@ -631,6 +631,7 @@ limitations under the License. -->
 
     .svg-topology {
       cursor: move;
+      background-color: $theme-background;
     }
 
     .legend {
@@ -667,7 +668,7 @@ limitations under the License. -->
       border-radius: 3px;
       color: #ccc;
       border: 1px solid #ccc;
-      background-color: #fff;
+      background-color: $theme-background;
       box-shadow: #eee 1px 2px 10px;
       transition: all 0.5ms linear;
 
@@ -686,7 +687,7 @@ limitations under the License. -->
       position: absolute;
       color: #333;
       cursor: pointer;
-      background-color: #fff;
+      background-color: $theme-background;
       border-radius: 5px;
       padding: 10px 0;
       border: 1px solid #999;
@@ -716,7 +717,7 @@ limitations under the License. -->
       cursor: pointer;
       transition: all 0.5ms linear;
       background: rgb(0 0 0 / 30%);
-      color: #fff;
+      color: $text-color;
       display: inline-block;
       padding: 2px 4px;
       border-radius: 3px;
@@ -762,6 +763,6 @@ limitations under the License. -->
     padding: 5px;
     border: 1px solid #000;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>

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

@@ -316,7 +316,7 @@ limitations under the License. -->
     padding: 10px 0;
     color: #333;
     cursor: pointer;
-    background-color: #fff;
+    background-color: $theme-background;
     border-radius: 3px;
 
     span {

src/views/dashboard/related/trace/Detail.vue

@@ -178,13 +178,13 @@ limitations under the License. -->
     height: 95px;
 
     .grey {
-      color: #fff;
+      color: $text-color;
       background-color: #448dfe;
     }
 
     .ghost {
       cursor: pointer;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgb(0 0 0 / 30%);
     }
   }
 
@@ -193,7 +193,7 @@ limitations under the License. -->
   }
 
   .trace-detail-ids {
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgb(0 0 0 / 0%);
     outline: 0;
     border-style: unset;
     color: inherit;
@@ -209,7 +209,7 @@ limitations under the License. -->
   .tag {
     display: inline-block;
     border-radius: 4px;
-    padding: 0px 7px;
+    padding: 0 7px;
     background-color: #40454e;
     color: #eee;
   }

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -245,7 +245,7 @@ limitations under the License. -->
   }
 
   .popup-btn {
-    color: #fff;
+    color: $text-color;
     margin-top: 40px;
     width: 100%;
     text-align: center;

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -252,7 +252,7 @@ limitations under the License. -->
   });
 </script>
 <style lang="scss" scoped>
-  @import "./table.scss";
+  @import url("./table.scss");
 
   .event-tag {
     width: 12px;
@@ -267,7 +267,7 @@ limitations under the License. -->
     color: #448dfe;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background: rgb(0 0 0 / 4%);
     }
   }
 
@@ -276,7 +276,7 @@ limitations under the License. -->
     position: relative;
   }
 
-  .profiled:before {
+  .profiled::before {
     content: attr(data-text);
     position: absolute;
     top: 30px;
@@ -286,24 +286,24 @@ limitations under the License. -->
     border-radius: 5px;
     border: 1px solid #ccc;
     background-color: #333;
-    color: #fff;
+    color: $text-color;
     text-align: center;
     box-shadow: #eee 1px 2px 10px;
     display: none;
   }
 
-  .profiled:after {
+  .profiled::after {
     content: "";
     position: absolute;
     left: 250px;
     top: 20px;
     border: 6px solid #333;
-    border-color: transparent transparent #333 transparent;
+    border-color: transparent transparent #333;
     display: none;
   }
 
-  .profiled:hover:before,
+  .profiled:hover::before,
-  .profiled:hover:after {
+  .profiled:hover::after {
     display: block;
     z-index: 999;
   }
@@ -320,11 +320,11 @@ limitations under the License. -->
   }
 
   .trace-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .trace-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .trace-item > div {
@@ -351,7 +351,7 @@ limitations under the License. -->
       width: 100%;
       height: 6px;
       border-radius: 3px;
-      background: rgb(63, 177, 227);
+      background: rgb(63 177 227);
       position: relative;
       margin-top: 11px;
       border: none;
@@ -359,7 +359,7 @@ limitations under the License. -->
 
     .inner-progress_bar {
       position: absolute;
-      background: rgb(110, 64, 170);
+      background: rgb(110 64 170);
       height: 4px;
       border-radius: 2px;
       left: 0;

vite.config.ts

@@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         //define global scss variable
         scss: {
-          additionalData: `@import "@/styles/variables.scss";`,
+          additionalData: `@import "@/styles/light.scss";`,
         },
       },
     },