From 1482150fd2c4f02bf109759c08961e9e61f2bbdf Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Wed, 27 Dec 2023 15:50:46 +0800
Subject: [PATCH] chore(Widget): update sass file support dark theme (#2686)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(Widget): update sass file support dark theme

* doc: 更新示例
---
 .../Components/Samples/DropdownWidgets.razor.css             | 3 ++-
 .../Components/DropdownWidget/DropdownWidget.razor.scss      | 3 ++-
 src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css b/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css
index 64d27d70371..0331bffb14d 100644
--- 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
index 0a664696ba0..e26681b7c03 100644
--- 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
index 7955da59704..7b1c19c4e7c 100644
--- 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;