refactor(Scroll): support dark theme (#2644)

* refactor: 精简代码

* chore: 更新字典

* doc: 更新示例

* chore: 引入 dark 文件

* refactor: 增加 dark 样式

exclusion.dic

@@ -40,6 +40,7 @@ Func
 Prev
 Textarea
 rendermode
+Motronic
 motronic
 webassembly
 netcore

src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor

@@ -8,7 +8,7 @@
 <p>@((MarkupString)Localizer["ScrollTips"].Value)</p>
 
 <DemoBlock Title="@Localizer["ScrollNormalTitle"]" Introduction="@Localizer["ScrollNormalIntro"]" Name="Normal">
-    <div class="scroll-demo">
+    <div class="scroll-demo border">
         <Scroll Height="200px">
             <div style="height: 400px;">@Localizer["ScrollNormalDescription"]</div>
             <div>@Localizer["ScrollNormalBottom"]</div>

src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.css

@@ -1,5 +1,4 @@
 .scroll-demo {
-    border: solid 1px var(--bs-secondary);
     padding: .5rem;
     border-radius: var(--bs-border-radius);
 }

src/BootstrapBlazor/Components/Scroll/Scroll.razor.scss

@@ -24,6 +24,11 @@
     }
 }
 
+[data-bs-theme='dark'] .scroll {
+    --bb-scorll-thumb-bg: #{$bb-scorll-thumb-bg-dark};
+    --bb-scorll-thumb-hover-bg: #{$bb-scorll-thumb-hover-bg-dark};
+}
+
 @media (min-width: 992px) {
     .scroll {
         overflow: hidden;

src/BootstrapBlazor/Options/BootstrapBlazorOptions.cs

@@ -87,16 +87,16 @@ public class BootstrapBlazorOptions
     /// <summary>
     /// 获得/设置 网站主题集合
     /// </summary>
-    public List<KeyValuePair<string, string>> Themes { get; } = new()
-    {
+    public List<KeyValuePair<string, string>> Themes { get; } =
+    [
         new("Bootstrap", "bootstrap.blazor.bundle.min.css"),
         new("Motronic", "motronic.min.css")
-    };
+    ];
 
     /// <summary>
     /// 获得支持多语言集合
     /// </summary>
     /// <returns></returns>
     public IList<CultureInfo> GetSupportedCultures() => SupportedCultures?.Select(name => new CultureInfo(name)).ToList()
-        ?? new List<CultureInfo> { new("en"), new("zh") };
+        ?? [new("en"), new("zh")];
 }

src/BootstrapBlazor/wwwroot/scss/bootstrap.blazor-dark.scss

@@ -0,0 +1,3 @@
+// Scroll
+$bb-scorll-thumb-bg-dark: rgba(255,255,255,0.2);
+$bb-scorll-thumb-hover-bg-dark: rgba(255,255,255,0.3);

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -1,3 +1,5 @@
+@import "bootstrap.blazor-dark.scss";
+
 @import "root.scss";
 @import "../../Components/Alert/Alert.razor.scss";
 @import "../../Components/AnchorLink/AnchorLink.razor.scss";

src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor-dark.scss

@@ -1,52 +0,0 @@
-$alert-bar-width: 8px;
-$alert-icon-margin-right: 1rem;
-
-/*
-    DialogButton
-*/
-$dial-list-zindex: 5;
-$dial-item-padding: 0.25rem 1rem;
-$dial-item-bg: #fff;
-$dial-item-hover-bg: #e9ecef;
-$dial-item-hover-color: var(--bs-body-color);
-$dial-item-hover-border-color: #c0c4cc;
-$dial-item-border: 1px solid #dee2e6;
-$dial-item-margin: 6px;
-$dial-item-width: 40px;
-$dial-item-height: 40px;
-$dial-item-radius: 50%;
-$dial-item-shadow: 0 1px 6px #c0c4cc;
-$dial-list-radial-offset: 8px;
-
-/*
-    PopConfirmButtonContent
-*/
-$popover-min-width: 240px;
-$popover-buttons-justify-content: flex-end;
-$popover-buttons-margin-left: 0.5rem;
-$popover-buttons-padding: 0.25rem 1rem;
-$popover-body-span-margin-left: 0.25rem;
-
-/*
-    PopConfirmButtonContent
-*/
-$border-width: 3px;
-
-/*
-    SlideButton
-*/
-$slide-list-bg: #fff;
-$slide-list-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
-$slide-list-border: var(--bs-border-width) solid var(--bs-border-color-translucent);
-$slide-list-width: 260px;
-$slide-list-height: 306px;
-$slide-item-header-bg: var(--bs-primary);
-$slide-item-header-color: #fff;
-$slide-item-header-padding: 0.75rem 1rem;
-$slide-item-header-border-radius: 5px 5px 0 0;
-$slide-item-body-padding: .25rem 0;
-$slide-item-padding: 0.25rem 1rem;
-$slide-item-active-bg: #0d6efd;
-$slide-item-active-color: #fff;
-$slide-item-hover-bg: var(--bs-tertiary-bg);
-$slide-item-hover-color: var(--bs-body-color);

src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss

@@ -626,5 +626,4 @@ $bb-upload-card-item-width: 168px;
 // ValidateForm
 $bb-form-control-padding: 0.375rem 0.75rem;
 
-
 @import "../components.scss";