style: 颜色选择器深色主题适配

data-room-ui/packages/BasicComponents/CurrentTime/setting.vue

@@ -55,7 +55,11 @@
           label="字体颜色"
           label-width="100px"
         >
-          <el-color-picker v-model="config.customize.color" />
+          <el-color-picker
+            v-model="config.customize.color"
+            class="bs-el-color-picker"
+            popper-class="bs-el-color-picker"
+          />
         </el-form-item>
         <el-form-item
           label="时间格式"
@@ -125,6 +129,7 @@ export default {
 
 <style lang="scss" scoped>
  @import "../../assets/style/settingWrap.scss";
+ @import "../../assets/style/bsTheme.scss";
 .setting-wrap{
   padding: 12px 16px;
 }

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -202,7 +202,8 @@
               :key="index"
               v-model="config.customize.rangeColor[index]"
               show-alpha
-              class="start-color"
+              popper-class="bs-el-color-picker"
+              class="start-color bs-el-color-picker"
             />
             <span
               class="el-icon-circle-plus-outline"
@@ -300,6 +301,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/settingWrap.scss';
+@import '../../assets/style/bsTheme.scss';
 // 筛选条件的按钮样式
 .add-filter-box {
   position: relative;

data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue

@@ -54,7 +54,11 @@
           label="字体颜色"
           label-width="100px"
         >
-          <el-color-picker v-model="config.customize.color" />
+          <el-color-picker
+            v-model="config.customize.color"
+            popper-class="bs-el-color-picker"
+            class="bs-el-color-picker"
+          />
         </el-form-item>
         <el-form-item
           label="结束日期"
@@ -62,8 +66,10 @@
         >
           <el-date-picker
             v-model="config.endTime"
-            popper-class="bs-date-popper-class"
+            popper-class="bs-el-date-picker"
             type="datetime"
+            align="left"
+            size="mini"
             placeholder="请选择结束日期"
             :picker-options="pickerOptions"
             value-format="timestamp"

data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -100,6 +100,7 @@
                   v-else-if="setting.type === 'colorPicker'"
                   v-model="setting.value"
                   popper-class="bs-el-color-picker"
+                  class="bs-el-color-picker"
                   show-alpha
                 />
                 <!-- 渐变色设置 -->
@@ -281,6 +282,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/settingWrap.scss';
+@import '../../assets/style/bsTheme.scss';
 
 // 筛选条件的按钮样式
 .add-filter-box {

data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue

@@ -1,7 +1,17 @@
 /** * @Description: 渐变色配置 * @author liu.shiyi * @date 2023/4/13 16:01 */
 <template>
   <div class="bs-gradual-wrap">
-    <el-color-picker v-model="startColor" /> <div class="el-icon-right" /> <el-color-picker v-model="endColor" />
+    <el-color-picker
+      v-model="startColor"
+      class="bs-el-color-picker"
+      popper-class="bs-el-color-picker"
+    />
+    <div class="el-icon-right" />
+    <el-color-picker
+      v-model="endColor"
+      class="bs-el-color-picker"
+      popper-class="bs-el-color-picker"
+    />
   </div>
 </template>
 
@@ -58,6 +68,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
   .bs-gradual-wrap{
     width: 100%;
     display: flex;

data-room-ui/packages/BigScreenDesign/RightSetting/TextGradient/index.vue

@@ -22,7 +22,17 @@
       label-width="100px"
     >
       <div class="color-picker-box">
-        <el-color-picker v-model="startColor" /> <div class="el-icon-right" /> <el-color-picker v-model="endColor" />
+        <el-color-picker
+          v-model="startColor"
+          class="bs-el-color-picker"
+          popper-class="bs-el-color-picker"
+        />
+        <div class="el-icon-right" />
+        <el-color-picker
+          v-model="endColor"
+          class="bs-el-color-picker"
+          popper-class="bs-el-color-picker"
+        />
       </div>
     </el-form-item>
   </div>
@@ -96,6 +106,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../../../assets/style/bsTheme.scss";
 .color-picker-box{
   width: 100%;
   display: flex;

data-room-ui/packages/ColorPicker/index.vue

@@ -2,6 +2,7 @@
   <div class="border-color">
     <el-input
       v-model="localValue"
+      class="bs-el-input"
       :placeholder="placeholder"
       clearable
     />
@@ -10,6 +11,7 @@
       v-model="localValue"
       popper-class="bs-el-color-picker"
       show-alpha
+      class="bs-el-color-picker"
       :predefine="predefineColors"
     />
   </div>
@@ -61,9 +63,9 @@ export default {
 <style lang="scss"></style>
 
 <style lang="scss" scoped>
+@import "../assets/style/bsTheme.scss";
 .border-color {
   display: flex;
-
   ::v-deep .el-input {
     width: auto;
     position: relative;

data-room-ui/packages/assets/style/bsTheme.scss

@@ -537,9 +537,20 @@
 }
 
 .bs-el-color-picker {
-  border-color: var(--bs-el-border) !important;
-  background-color: var(--bs-background-1) !important;
-
+  background: var(--bs-background-2) !important;
+  border-color: var(--bs-background-1) !important;
+  background-color: var(--bs-background-2) !important;
+  .el-button--default{
+    color: var(--bs-el-text) !important;
+    border-color: var(--bs-background-1) !important;
+    background-color: var(--bs-background-2) !important;
+  }
+  .el-color-picker__trigger{
+    border-color:   var(--bs-background-1) !important;
+  }
+  .el-color-picker__panel{
+    border-color: var(--bs-background-1) !important;
+  }
   .el-input__inner {
     color: var(--bs-el-text) !important;
     border-color: var(--bs-el-border) !important;