feat(Theme): add Fluent UI theme

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -79,6 +79,7 @@
     <PackageReference Include="BootstrapBlazor.TableExport" Version="10.0.2" />
     <PackageReference Include="BootstrapBlazor.Tasks.Dashboard" Version="10.0.1" />
     <PackageReference Include="BootstrapBlazor.Term" Version="10.0.0" />
+    <PackageReference Include="BootstrapBlazor.Theme.Fluent" Version="10.0.0-beta01" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverIcon" Version="10.0.0" />
     <PackageReference Include="BootstrapBlazor.UniverSheet" Version="10.0.15" />

src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css

@@ -54,12 +54,12 @@
 
 .card-footer-control {
     text-align: center;
-    color: #d3dce6;
+    color: var(--bs-secondary-color);
     display: block;
 }
 
     .card-footer-control:hover {
-        color: #409eff;
+        color: var(--bs-primary);
     }
 
     .card-footer-control i {

src/BootstrapBlazor.Server/Components/Components/Header.razor.css

@@ -1,4 +1,4 @@
-.navbar-header {
+.navbar-header {
     background-color: transparent;
     background-image: linear-gradient(to right, rgba(var(--bb-primary-color-rgb), 1), rgba(var(--bb-primary-color-rgb), 0.9));
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
@@ -41,6 +41,8 @@
 .nav-link img {
     height: 24px;
     width: auto;
+    /* the repo svgs ship without a fill (render black) — invert to white on the colored header */
+    filter: brightness(0) invert(1);
 }
 
 .navbar-version {

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -45,7 +45,7 @@ private void OnClickTheme(SelectedItem item)
         var theme = WebsiteOption.Value.Themes.FirstOrDefault(i => i.Key == item.Value);
         if (theme is { Files: not null })
         {
-            _currentTheme.AddRange(theme.Files);
+            _currentTheme.AddRange(theme.Files.Select(i => Assets[i]));
         }
     }
 

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css

@@ -1,4 +1,4 @@
-.theme-list {
+.theme-list {
     position: fixed;
     z-index: 47;
     bottom: 12rem;
@@ -13,7 +13,7 @@
 }
 
     .theme-list.is-open {
-        height: 306px;
+        height: 355px;
     }
 
 .theme-header {

src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js

@@ -7,19 +7,47 @@ export function init(id) {
     }
 
     const themeList = document.querySelector('.theme-list');
-    const close = document.querySelector('.theme-list .btn-close');
+    if (themeList === null) {
+        return;
+    }
+
     EventHandler.on(el, 'click', () => {
         themeList.classList.toggle('is-open');
     });
-    EventHandler.on(close, 'click', () => {
+
+    const close = themeList.querySelector('.btn-close');
+    if (close) {
+        EventHandler.on(close, 'click', () => {
+            themeList.classList.remove('is-open');
+        });
+    }
+
+    EventHandler.on(themeList, 'click', '.theme-item', () => {
         themeList.classList.remove('is-open');
     });
+
+    const outsideClick = e => {
+        if (!el.contains(e.target) && !themeList.contains(e.target)) {
+            themeList.classList.remove('is-open');
+        }
+    };
+    EventHandler.on(document, 'click', outsideClick);
+    el.themeOutsideClick = outsideClick;
 }
 
 export function dispose(id) {
     const el = document.getElementById(id);
     if (el) {
         EventHandler.off(el, 'click');
+        if (el.themeOutsideClick) {
+            EventHandler.off(document, 'click', el.themeOutsideClick);
+            delete el.themeOutsideClick;
+        }
+    }
+
+    const themeList = document.querySelector('.theme-list');
+    if (themeList) {
+        EventHandler.off(themeList, 'click');
     }
 
     const close = document.querySelector('.theme-list .btn-close');

src/BootstrapBlazor.Server/Components/Pages/Install.razor

@@ -1,4 +1,4 @@
-@page "/install"
+@page "/install"
 @inject IStringLocalizer<Install> Localizer
 @inject IOptions<WebsiteOptions> WebsiteOption
 
@@ -30,6 +30,9 @@
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;
 @Localizer["BootstrapStyle"]
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"]" /&gt;
+@Localizer["FluentDesc"]
+dotnet add package BootstrapBlazor.Theme.Fluent
+&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.Theme.Fluent/fluent.min.css"]" /&gt;
 @Localizer["MotronicDesc"]
 &lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/motronic.min.css"]" /&gt;</Pre>
 	</TabItem>
@@ -38,6 +41,9 @@
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" /&gt;
 @Localizer["BootstrapStyle"]
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" /&gt;
+@Localizer["FluentDesc"]
+dotnet add package BootstrapBlazor.Theme.Fluent
+&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Theme.Fluent/fluent.min.css" /&gt;
 @Localizer["MotronicDesc"]
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" /&gt;</Pre>
 	</TabItem>