Dark mode support

BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor

@@ -1,6 +1,5 @@
 @namespace BlazorBootstrap.Demo.RCL
-
-@inherits LayoutComponentBase
+@inherits MainLayoutBase
 
 <Skippy Url="https://github.com/vikramlearning/blazorbootstrap">
     <i class="bi bi-star-fill"></i>
@@ -64,6 +63,33 @@
                             <small class="d-lg-none ms-2">Open Collective</small>
                         </a>
                     </li>
+                    <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+                        <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+                        <hr class="d-lg-none my-2 text-white-50">
+                    </li>
+                    <li class="nav-item dropdown">
+                        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
+                            <span class="blazorbootstrap-theme-indicator"><i class="bi bi-sun-fill"></i></span>
+                            <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
+                            <li class="blazorbootstrap-theme-item px-1">
+                                <button type="button" class="dropdown-item d-flex align-items-center active rounded" data-bs-theme-value="light" aria-pressed="true" @onclick="SetLightTheme">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto"></i>
+                                </button>
+                            </li>
+                            <li class="blazorbootstrap-theme-item px-1">
+                                <button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="dark" aria-pressed="false" @onclick="SetDarkTheme">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check2 d-none ms-auto"></i>
+                                </button>
+                            </li>
+                            <li class="blazorbootstrap-theme-item px-1">
+                                <button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="auto" aria-pressed="false" @onclick="SetAutoTheme">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 d-none ms-auto"></i>
+                                </button>
+                            </li>
+                        </ul>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -74,79 +100,13 @@
     @Body
 </main>
 
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
-    <div class="container py-4 py-md-5 px-4 px-md-3">
-        <div class="row">
-            <div class="col-lg-4 mb-3">
-                <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
-                    <img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap" />
-                    <span class="fs-5">Blazor Bootstrap</span>
-                </a>
-                <ul class="list-unstyled small text-muted">
-                    <li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
-                    <li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
-                    <li class="mb-2">Currently @version.</li>
-                </ul>
-            </div>
-            <div class="col-6 col-lg-2 offset-lg-1 mb-3">
-                <h5>Links</h5>
-                <ul class="list-unstyled">
-                    <li class="mb-2"><a href="/">Home</a></li>
-                    <li class="mb-2"><a href="@docsUrl" target="_blank" rel="noopener">Docs</a></li>
-                    <li class="mb-2"><a href="@blogUrl" target="_blank" rel="noopener">Blog</a></li>
-                    <li class="mb-2"><a href="@githubUrl" target="_blank" rel="noopener">Github</a></li>
-                </ul>
-            </div>
-            <div class="col-6 col-lg-2 mb-3">
-                <h5>Guides</h5>
-                <ul class="list-unstyled">
-                    <li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
-                    <li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
-                    <li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
-                </ul>
-            </div>
-            <div class="col-6 col-lg-2 mb-3">
-                <h5>Community</h5>
-                <ul class="list-unstyled">
-                    <li class="mb-2"><a href="@githubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
-                    <li class="mb-2"><a href="@githubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
-                    <li class="mb-2"><a href="@openCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
-                    <li class="mb-2"><a href="@stackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
-                </ul>
-            </div>
-            <div class="col-6 col-lg-2 mb-3">
-            </div>
-        </div>
-    </div>
-</footer>
-
-@code {
-    private string version = default!;
-    private string docsUrl = default!;
-    private string blogUrl = default!;
-    private string githubUrl = default!;
-    private string twitterUrl = default!;
-    private string linkedInUrl = default!;
-    private string openCollectiveUrl = default!;
-    private string githubIssuesUrl = default!;
-    private string githubDiscussionsUrl = default!;
-    private string stackoverflowUrl = default!;
-
-    [Inject] public IConfiguration Configuration { get; set; } = default!;
-
-    protected override void OnInitialized()
-    {
-        version = $"v{Configuration["version"]}"; // example: v0.6.1
-        docsUrl = $"{Configuration["urls:docs"]}";
-        blogUrl = $"{Configuration["urls:blog"]}";
-        githubUrl = $"{Configuration["urls:github"]}";
-        twitterUrl = $"{Configuration["urls:twitter"]}";
-        linkedInUrl = $"{Configuration["urls:linkedin"]}";
-        openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
-        githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
-        githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
-        stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
-
-        base.OnInitialized();
-    }
-}
+<MainLayoutBaseFooter Version="@Version"
+                      DocsUrl="@DocsUrl"
+                      BlogUrl="@BlogUrl"
+                      GithubUrl="@GithubUrl"
+                      TwitterUrl="@TwitterUrl"
+                      LinkedInUrl="@LinkedInUrl"
+                      OpenCollectiveUrl="@OpenCollectiveUrl"
+                      GithubIssuesUrl="@GithubIssuesUrl"
+                      GithubDiscussionsUrl="@GithubDiscussionsUrl"
+                      StackoverflowUrl="@StackoverflowUrl" />

BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs

@@ -0,0 +1,5 @@
+namespace BlazorBootstrap.Demo.RCL;
+
+public partial class EmptyLayout : MainLayoutBase
+{
+}

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor

@@ -1,5 +1,4 @@
 @namespace BlazorBootstrap.Demo.RCL
-
 @inherits MainLayoutBase
 
 <div class="bb-page">

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs

@@ -2,22 +2,32 @@
 
 public class MainLayoutBase : LayoutComponentBase
 {
-    private string version = default!;
-    private string docsUrl = default!;
-    private string blogUrl = default!;
-    private string githubUrl = default!;
-    private string twitterUrl = default!;
-    private string linkedInUrl = default!;
-    private string openCollectiveUrl = default!;
-    private string githubIssuesUrl = default!;
-    private string githubDiscussionsUrl = default!;
-    private string stackoverflowUrl = default!;
+    internal string version = default!;
+    internal string docsUrl = default!;
+    internal string blogUrl = default!;
+    internal string githubUrl = default!;
+    internal string twitterUrl = default!;
+    internal string linkedInUrl = default!;
+    internal string openCollectiveUrl = default!;
+    internal string githubIssuesUrl = default!;
+    internal string githubDiscussionsUrl = default!;
+    internal string stackoverflowUrl = default!;
 
     internal Sidebar2 sidebar2 = default!;
     internal IEnumerable<NavItem> navItems = default!;
 
     [Inject] public IConfiguration Configuration { get; set; } = default!;
 
+    [Inject] protected IJSRuntime JS { get; set; } = default!;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await JS.InvokeVoidAsync("initializeTheme");
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     protected override void OnInitialized()
     {
         version = $"v{Configuration["version"]}"; // example: v0.6.1
@@ -33,6 +43,14 @@ protected override void OnInitialized()
         base.OnInitialized();
     }
 
+    internal Task SetAutoTheme() => SetTheme("system");
+
+    internal Task SetDarkTheme() => SetTheme("dark");
+
+    internal Task SetLightTheme() => SetTheme("light");
+
+    internal async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
+
     internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
     {
         if (navItems is null)

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor

@@ -1,11 +1,11 @@
 @namespace BlazorBootstrap.Demo.RCL
 @inherits ComponentBase
 
-<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light">
+<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-body-tertiary">
     <div class="container px-4 px-md-3">
         <div class="row">
             <div class="col-lg-4 mb-3">
-                <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+                <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap">
                     <img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap">
                     <span class="fs-5">Blazor Bootstrap</span>
                 </a>

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor

@@ -12,7 +12,7 @@
                 </Tooltip>
             </div>
         </div>
-         <div class="highlight">
+        <div class="highlight border border-top-0">
              <pre>
                 <code class="@LanguageCode.ToLanguageCssClass()">
                     @if (snippet is not null)
@@ -27,7 +27,7 @@
 else if (!Tabs)
 {
     <div class="bd-example-snippet bd-code-snippet">
-        <div class="bb-example">
+        <div class="bb-example border">
             <DynamicComponent Type="this.Type"/>
         </div>
         <div class="d-flex align-items-center highlight-toolbar px-4 py-2 border border-top-0">
@@ -38,7 +38,7 @@ else if (!Tabs)
                 </Tooltip>
             </div>
         </div>
-        <div class="highlight">
+        <div class="highlight border border-top-0">
             <pre>
                 <code class="@LanguageCode.ToLanguageCssClass()">
                     @if (snippet is not null)
@@ -58,7 +58,7 @@ else // Tabs = true
                 <Icon Name="IconName.Display" Class="me-2" /><b>Example</b>
             </TitleTemplate>
             <Content>
-                <div class="bb-example border-top-0 mt-0">
+                <div class="bb-example border border-top-0 mt-0">
                     <DynamicComponent Type="this.Type"/>
                 </div>
             </Content>

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs

@@ -4,7 +4,7 @@ public partial class Demo : ComponentBase
 {
     #region Fields and Constants
 
-    private IconColor clipboardTooltipIconColor = IconColor.Dark;
+    private IconColor clipboardTooltipIconColor = IconColor.None;
 
     private IconName clipboardTooltipIconName = IconName.Clipboard;
 
@@ -92,7 +92,7 @@ public void ResetCopyStatusJS()
     {
         clipboardTooltipTitle = "Copy to clipboard";
         clipboardTooltipIconName = IconName.Clipboard;
-        clipboardTooltipIconColor = IconColor.Dark;
+        clipboardTooltipIconColor = IconColor.None;
 
         StateHasChanged();
     }

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.css

@@ -1,4 +1,6 @@
 .highlight-toolbar {
-    color: #212529;
-    background-color: #f8f9fa;
+    /*color: #212529;*/
+    /*background-color: #f8f9fa;*/
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
 }

BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css

@@ -1,16 +1,24 @@
 /*** START: home ***/
-:root {
-    --bd-purple: #4c0bce;
-    --bd-violet: #712cf9;
+:root, [data-bs-theme="light"] {
     --bd-accent: #ffe484;
-    --bd-violet-rgb: 112.520718,44.062154,249.437846;
     --bd-accent-rgb: 255,228,132;
+    --bs-body-color: #212529;
+    --bs-body-color-rgb: 33, 37, 41;
+    --bs-emphasis-color: #000;
+    --bs-link-color: #0d6efd;
+    --bs-link-color-rgb: 13, 110, 253;
     --bd-pink-rgb: 214,51,132;
+    --bd-purple: #4c0bce;
+    --bs-secondary-color: rgba(33, 37, 41, 0.75);
     --bd-teal-rgb: 32,201,151;
+    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+    --bs-tertiary-color-rgb: 33, 37, 41;
+    --bs-tertiary-bg: #f8f9fa;
+    --bs-tertiary-bg-rgb: 248, 249, 250;
+    --bd-violet: #712cf9;
+    --bd-violet-rgb: 112.520718,44.062154,249.437846;
     --docsearch-primary-color: var(--bd-violet);
     --docsearch-logo-color: var(--bd-violet);
-    --bs-body-color: #212529;
-    --bs-tertiary-bg: #f8f9fa;
 }
 
 h1:focus-visible {
@@ -124,7 +132,8 @@ h1:focus-visible {
 
     .bd-masthead h1 {
         font-size: calc(1.525rem + 3.3vw);
-        line-height: 1
+        line-height: 1;
+        --bs-heading-color: var(--bs-emphasis-color);
     }
 
 @media (min-width: 1200px) {
@@ -136,7 +145,7 @@ h1:focus-visible {
 .bd-masthead .lead {
     font-size: 1rem;
     font-weight: 400;
-    color: #495057
+    color: var(--bs-secondary-color);
 }
 
 .bd-masthead .bd-code-snippet {
@@ -184,6 +193,14 @@ h1:focus-visible {
     }
 }
 
+.masthead-followup h2, .masthead-followup h3, .masthead-followup h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
+}
+
+.masthead-followup h4 {
+    --bs-heading-color: var(--bs-link-color-rgb) !important;
+}
+
 .masthead-followup .lead {
     font-size: 1rem
 }
@@ -225,7 +242,7 @@ h1:focus-visible {
 }
 
 .bd-footer a {
-    color: #495057;
+    color: var(--bs-body-color);
     text-decoration: none
 }
 
@@ -299,7 +316,8 @@ h1:focus-visible {
 .highlight {
     padding: 1rem;
     margin-bottom: 1rem;
-    background-color: #f8f9fa;
+    /*background-color: #f8f9fa;*/
+    background-color: var(--bs-body-bg);
     border: solid #dee2e6;
     border-width: 0 1px 1px 1px;
     border-bottom-left-radius: .25rem;
@@ -324,7 +342,7 @@ h1:focus-visible {
 
     .highlight pre code {
         font-size: inherit;
-        color: #212529;
+        /*color: #212529;*/
         word-wrap: normal
     }
 
@@ -415,3 +433,24 @@ h1:focus-visible {
     margin-top: .75rem;
     color: var(--bs-body-color) !important
 }
+
+.bg-body-tertiary {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
+}
+
+[data-bs-theme=dark] {
+    color-scheme: dark;
+    --bs-body-color: #dee2e6;
+    --bs-body-color-rgb: 222, 226, 230;
+    --bs-emphasis-color: #fff;
+    --bs-link-color: #6ea8fe;
+    --bs-link-hover-color: #8bb9fe;
+    --bs-link-color-rgb: 110, 168, 254;
+    --bs-link-hover-color-rgb: 139, 185, 254;
+    --bs-secondary-color: rgba(222, 226, 230, 0.75);
+    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+    --bs-tertiary-color-rgb: 222, 226, 230;
+    --bs-tertiary-bg: #2b3035;
+    --bs-tertiary-bg-rgb: 43, 48, 53;
+}