refactor(Calendar): support dark theme (#2671)

* refactor: 更新样式适配暗黑主题 * refactor: 更新样式
dotnetcore · Dec 26, 2023 · 432f9f6 · 432f9f6
1 parent dd492ae
commit 432f9f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss
@@ -97,14 +97,14 @@
 
         tr {
             td {
-                border-bottom: 1px solid var(--bs-border-color);
-                border-right: 1px solid var(--bs-border-color);
+                border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+                border-right: var(--bs-border-width) solid var(--bs-border-color);
                 vertical-align: top;
                 transition: background-color .2s ease;
                 cursor: pointer;
 
                 &:first-child {
-                    border-left: 1px solid var(--bs-border-color);
+                    border-left: var(--bs-border-width) solid var(--bs-border-color);
                 }
 
                 &.is-today {
@@ -118,7 +118,7 @@
             }
 
             &:first-child td {
-                border-top: 1px solid var(--bs-border-color);
+                border-top: var(--bs-border-width) solid var(--bs-border-color);
             }
 
             &:not(.is-range) td.next, &:not(.is-range) td.prev {

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -93,27 +93,27 @@ $bb-slide-item-hover-color: var(--bs-body-color);
 
 // Calendar
 $bb-calendar-padding: 12px 20px;
-$bb-calendar-header-border-bottom: 1px solid var(--bs-border-color);
-$bb-calendar-title-color: #000;
+$bb-calendar-header-border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+$bb-calendar-title-color: var(--bs-body-color);
 $bb-calendar-title-font-size: 1rem;
 $bb-calendar-toolbar-border: 1px solid var(--bs-border-color);
 $bb-calendar-toolbar-font-size: .75rem;
 $bb-calendar-toolbar-padding: 7px 15px;
-$bb-calendar-toolbar-hover-bg: #ecf5ff;
+$bb-calendar-toolbar-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-calendar-toolbar-hover-color: #409eff;
-$bb-calendar-toolbar-hover-border-color: #c6e2ff;
-$bb-calendar-toolbar-focus-bg: #ecf5ff;
+$bb-calendar-toolbar-hover-border-color: var(--bs-border-color);
+$bb-calendar-toolbar-focus-bg: rgba(var(--bs-body-color-rgb),.1);
 $bb-calendar-toolbar-focus-color: #409eff;
-$bb-calendar-toolbar-focus-border-color: #c6e2ff;
+$bb-calendar-toolbar-focus-border-color: var(--bs-border-color);
 $bb-calendar-toolbar-active-color: #409eff;
-$bb-calendar-toolbar-active-border-color: #c6e2ff;
+$bb-calendar-toolbar-active-border-color: var(--bs-border-color);
 $bb-calendar-cell-padding: 8px;
 $bb-calendar-cell-height: 85px;
-$bb-calendar-cell-hover-bg: #f2f8fe;
+$bb-calendar-cell-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-calendar-header-padding: 12px 0;
 $bb-calendar-today-color: #409eff;
-$bb-calendar-selected-color: #1989fa;
-$bb-calendar-selected-bg: #f2f8fe;
+$bb-calendar-selected-color: #409eff;
+$bb-calendar-selected-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-calendar-week-header-border-bottom: 2px solid var(--bs-border-color);
 $bb-calendar-week-header-min-width: 52px;
 $bb-calendar-week-header-padding: 4px;