feat: alert and settings

src/components/SelectSingle.vue

@@ -112,7 +112,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -133,7 +133,7 @@ limitations under the License. -->
   }
 
   .opt-wrapper {
-    color: #606266;
+    color: var(--sw-setting-color);
     position: absolute;
     top: 26px;
     left: 0;

src/styles/theme.scss

@@ -46,6 +46,9 @@ html {
   --sw-list-selected: #ededed;
   --sw-table-header: #f3f4f9;
   --sw-list-hover: rgb(0 0 0 / 4%);
+  --sw-setting-color: #606266;
+  --sw-alarm-tool: #f0f2f5;
+  --sw-alarm-tool-border: #c1c5ca41;
 }
 
 html.dark {
@@ -78,6 +81,9 @@ html.dark {
   --sw-list-hover: #262629;
   --sw-table-header: #303133;
   --sw-list-selected: #3d444f;
+  --sw-setting-color: #eee;
+  --sw-alarm-tool: #303133;
+  --sw-alarm-tool-border: #444;
 }
 
 .el-table tr {

src/views/Settings.vue

@@ -156,7 +156,7 @@ limitations under the License. -->
   }
 
   .settings {
-    color: #606266;
+    color: var(--sw-setting-color);
     font-size: 13px;
     padding: 20px;
 

src/views/alarm/Content.vue

@@ -157,7 +157,7 @@ limitations under the License. -->
 
   .timeline-table-i {
     padding: 10px 15px;
-    border-left: 4px solid #eee;
+    border-left: 4px solid var(--border-color-primary);
     position: relative;
 
     &::after {

src/views/alarm/Header.vue

@@ -39,7 +39,11 @@ limitations under the License. -->
           @current-change="changePage"
           :pager-count="5"
           small
-          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+          :style="
+            appStore.theme === Themes.Light
+              ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
+              : ''
+          "
         />
       </div>
     </div>
@@ -54,6 +58,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useAlarmStore } from "@/store/modules/alarm";
   import { ElMessage } from "element-plus";
+  import { Themes } from "@/constants/data";
 
   const appStore = useAppStoreWithOut();
   const alarmStore = useAlarmStore();
@@ -99,8 +104,8 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .alarm-tool {
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #c1c5ca41;
-    background-color: #f0f2f5;
+    border-bottom: 1px solid var(--sw-alarm-tool-border);
+    background-color: var(--sw-alarm-tool);
     padding: 10px;
     position: relative;
   }

src/views/dashboard/related/continuous-profiling/components/Policy.vue

@@ -216,7 +216,7 @@ limitations under the License. -->
     cursor: text;
     padding: 0 5px;
     border-radius: 4px;
-    color: #606266;
+    color: var(--sw-setting-color);
     outline: none;
     height: 100px;