chore(Widget): update sass file support dark theme (#2686)

* chore(Widget): update sass file support dark theme * doc: 更新示例
dotnetcore · Dec 29, 2023 · 1482150 · 1482150
1 parent 3d5f5ff
commit 1482150
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css b/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css
@@ -1,5 +1,6 @@
 .widget-demo {
-    background-color: #6c757d;
+    background-color: rgba(var(--bs-body-color-rgb), .12);
+    border-radius: var(--bs-border-radius);
 }
 
 .dropdown-item-center {

diff --git a/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss b/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss
@@ -8,6 +8,7 @@
     --bb-widget-body-max-height: #{$bb-widget-body-max-height};
     --bb-widget-item-odd-bg: #{$bb-widget-item-odd-bg};
     --bb-widget-footer-padding: #{$bb-widget-footer-padding};
+    --bb-widget-footer-bg: #{$bb-widget-footer-bg};
 
     .dropdown-toggle {
         color: var(--bb-widget-toggle-color);
@@ -56,7 +57,7 @@
 
     .dropdown-footer {
         padding: var(--bb-widget-footer-padding);
-        background-color: var(--bb-widget-border-color);
+        background-color: var(--bb-widget-footer-bg);
         border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
     }
 

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -237,13 +237,14 @@ $bb-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
 // Dropdown
 $bb-widget-toggle-color: var(--bs-body-color);
 $bb-widget-toggle-padding: 10px 16px;
-$bb-widget-border-color: #dcdfe6;
+$bb-widget-border-color: var(--bs-border-color);
 $bb-widget-badge-font-size: 9px;
 $bb-widget-badge-top: 5px;
 $bb-widget-header-padding: 0.5rem 0.625rem;
 $bb-widget-body-max-height: 300px;
-$bb-widget-item-odd-bg: #eef0f3;
+$bb-widget-item-odd-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-widget-footer-padding: 0.5rem 0.625rem;
+$bb-widget-footer-bg: rgba(var(--bs-body-color-rgb),.22);
 
 // Empty
 $bb-empty-image-margin: 1rem 0 .5rem 0;