fix: 添加backtop，badge，calendar暗黑主题，日历组件提取样式变量 (jd-opensource#1493)

Co-authored-by: lkjh3214 <[email protected]>
yangbinji · Jul 27, 2022 · 47fe719 · 47fe719
1 parent 77a00fb
commit 47fe719
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 1 deletion.
diff --git a/src/packages/__VUE/backtop/index.scss b/src/packages/__VUE/backtop/index.scss
@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-backtop {
+    &.show {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
 .nut-backtop {
   display: none;
   position: fixed;

diff --git a/src/packages/__VUE/badge/index.scss b/src/packages/__VUE/badge/index.scss
@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-badge {
+    &.show {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
 .nut-badge {
   position: relative;
   display: inline-block;

diff --git a/src/packages/__VUE/calendar/index.scss b/src/packages/__VUE/calendar/index.scss
@@ -1,10 +1,36 @@
+.nut-theme-dark {
+  .nut-calendar {
+    background: $dark-background;
+    color: $dark-color;
+    .nut-calendar-header {
+      background: $dark-background;
+      color: $dark-color;
+    }
+    .nut-calendar-content {
+      .calendar-months-panel {
+        .calendar-month-con {
+          .calendar-month-day {
+            &-choose {
+              background-color: $dark-calendar-choose-color;
+              color: $calendar-choose-font-color;
+            }
+          }
+        }
+      }
+    }
+    .nut-calendar-footer {
+      background: $dark-background2;
+      color: $dark-color;
+    }
+  }
+}
 .nut-calendar {
   position: relative;
   display: flex;
   flex: 1;
   color: #333333;
   font-size: 16px;
-  background-color: #fff;
+  background-color: $white;
   overflow: hidden;
   height: 100%;
   flex-direction: column;

diff --git a/src/packages/styles/variables-jdb.scss b/src/packages/styles/variables-jdb.scss
@@ -92,6 +92,7 @@ $dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
 
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
 

diff --git a/src/packages/styles/variables-jdt.scss b/src/packages/styles/variables-jdt.scss
@@ -22,6 +22,7 @@ $dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
 
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
 

diff --git a/src/packages/styles/variables.scss b/src/packages/styles/variables.scss
@@ -23,6 +23,7 @@ $dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
 
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;