diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index 2858d1aa1..c2ad8e129 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor @@ -1,6 +1,5 @@ @namespace BlazorBootstrap.Demo.RCL - -@inherits LayoutComponentBase +@inherits MainLayoutBase @@ -64,6 +63,33 @@ Open Collective +
  • +
    +
    +
    • +
  • + + +
    • @@ -74,79 +100,13 @@ @Body - - -@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(); - } -} + diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs new file mode 100644 index 000000000..278295750 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs @@ -0,0 +1,5 @@ +namespace BlazorBootstrap.Demo.RCL; + +public partial class EmptyLayout : MainLayoutBase +{ +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index a81e746b9..2298ef346 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -1,5 +1,4 @@ @namespace BlazorBootstrap.Demo.RCL - @inherits MainLayoutBase
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs index 2c7a5d8db..92ce935ec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs +++ b/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 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 Sidebar2DataProvider(Sidebar2DataProviderRequest request) { if (navItems is null) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor index 42c32ab15..c35d8360e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor @@ -1,11 +1,11 @@ @namespace BlazorBootstrap.Demo.RCL @inherits ComponentBase -
    +
    - + Blazor Bootstrap Blazor Bootstrap diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor index c8d9f8db5..84d057fa8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor @@ -12,7 +12,7 @@
    -
    + 
                     
                     @if (snippet is not null)
@@ -27,7 +27,7 @@
 else if (!Tabs)
 {
     
    
-        
    
+        
    
             
         
    
         
    
@@ -38,7 +38,7 @@ else if (!Tabs)
                 
             
    
         
    
-        
    
+        
    
             
                     
                     @if (snippet is not null)
@@ -58,7 +58,7 @@ else // Tabs = true
                 Example
             
             
-                
    
+                
    
                     
                 
    
             
diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs
index 91c4d5466..8be134615 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs
+++ b/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();
     }
diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.css b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.css
index 6d21ea991..2ac0b89e6 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.css
+++ b/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);
 }
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css b/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css
index 32d30b5de..05be8dea8 100644
--- a/BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vs.min.css b/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vs.min.css
new file mode 100644
index 000000000..612398812
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vs.min.css
@@ -0,0 +1,117 @@
+code[class*=language-], pre[class*=language-] {
+    color: #393a34;
+    text-shadow: none;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5em;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none
+}
+
+    code[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection {
+        background: #c1def1
+    }
+
+    code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection {
+        background: #c1def1
+    }
+
+pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    background-color: #fff
+}
+
+:not(pre) > code[class*=language-] {
+    padding: .1em .3em;
+    border-radius: .3em;
+    background: #f8f8f8;
+}
+
+.prism-token.prism-cdata, .prism-token.prism-comment, .prism-token.prism-doctype, .prism-token.prism-prolog {
+    color: green;
+}
+
+.prism-token.prism-namespace {
+    opacity: .7
+}
+
+.prism-token.prism-string {
+    color: #a31515
+}
+
+.prism-token.prism-operator, .prism-token.prism-punctuation {
+    color: #393a34
+}
+
+.prism-token.prism-boolean, .prism-token.prism-constant, .prism-token.prism-inserted, .prism-token.prism-number, .prism-token.prism-symbol, .prism-token.prism-url, .prism-token.prism-variable {
+    color: #36acaa
+}
+
+.language-autohotkey .prism-token.prism-selector, .prism-language-json .prism-token.prism-boolean, .prism-language-json .prism-token.prism-number, .prism-token.prism-atrule, .prism-token.prism-attr-value, .prism-token.prism-keyword, code[class*=language-css] {
+    color: #00f
+}
+
+.prism-token.prism-function {
+    color: #393a34
+}
+
+.language-autohotkey .prism-token.prism-tag, .prism-token.prism-deleted {
+    color: #9a050f
+}
+
+.language-autohotkey .prism-token.prism-keyword, .prism-token.prism-selector {
+    color: #00009f
+}
+
+.prism-token.prism-important {
+    color: #e90
+}
+
+.prism-token.prism-bold, .prism-token.prism-important {
+    font-weight: 700
+}
+
+.prism-token.prism-italic {
+    font-style: italic
+}
+
+.language-json .prism-token.prism-property, .prism-token.prism-class-name {
+    color: #2b91af
+}
+
+.prism-token.prism-selector, .prism-token.prism-tag {
+    color: maroon
+}
+
+.prism-token.prism-attr-name, .prism-token.prism-entity, .prism-token.prism-property, .prism-token.prism-regex {
+    color: red
+}
+
+.prism-token.prism-directive.prism-tag .prism-tag {
+    background: #ff0;
+    color: #393a34
+}
+
+.prism-line-numbers.prism-line-numbers .prism-line-numbers-rows {
+    border-right-color: #a5a5a5
+}
+
+.prism-line-numbers .prism-line-numbers-rows > span:before {
+    color: #2b91af
+}
+
+.line-highlight.line-highlight {
+    background: rgba(193,222,241,.2);
+    background: -webkit-linear-gradient(left,rgba(193,222,241,.2) 70%,rgba(221,222,241,0));
+    background: linear-gradient(to right,rgba(193,222,241,.2) 70%,rgba(221,222,241,0))
+}
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vsc-dark-plus.min.css b/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vsc-dark-plus.min.css
new file mode 100644
index 000000000..0e85e720d
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vsc-dark-plus.min.css
@@ -0,0 +1,226 @@
+code[class*=language-], pre[class*=language-] {
+    color: #d4d4d4;
+    text-shadow: none;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none
+}
+
+    code[class*=language-] ::selection, code[class*=language-]::selection, pre[class*=language-] ::selection, pre[class*=language-]::selection {
+        text-shadow: none;
+        background: #264f78
+    }
+
+@media print {
+    code[class*=language-], pre[class*=language-] {
+        text-shadow: none
+    }
+}
+
+pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    background: #1e1e1e
+}
+
+:not(pre) > code[class*=language-] {
+    padding: .1em .3em;
+    border-radius: .3em;
+    color: #db4c69;
+    background: #1e1e1e
+}
+
+.prism-namespace {
+    opacity: .7
+}
+
+.prism-token.prism-doctype .prism-token.prism-doctype-tag {
+    color: #569cd6
+}
+
+.prism-token.prism-doctype .prism-token.prism-name {
+    color: #9cdcfe
+}
+
+.prism-token.prism-comment, .prism-token.prism-prolog {
+    color: #6a9955
+}
+
+.language-html .language-css .prism-token.prism-punctuation, .language-html .language-javascript .prism-token.prism-punctuation, .prism-token.prism-punctuation {
+    color: #d4d4d4
+}
+
+.prism-token.prism-boolean, .prism-token.prism-constant, .prism-token.prism-inserted, .prism-token.prism-number, .prism-token.prism-property, .prism-token.prism-symbol, .prism-token.prism-tag, .prism-token.prism-unit {
+    color: #b5cea8
+}
+
+.prism-token.prism-attr-name, .prism-token.prism-builtin, .prism-token.prism-char, .prism-token.prism-deleted, .prism-token.prism-selector, .prism-token.prism-string {
+    color: #ce9178
+}
+
+.language-css .prism-token.prism-string.prism-url {
+    text-decoration: underline
+}
+
+.prism-token.prism-entity, .prism-token.prism-operator {
+    color: #d4d4d4
+}
+
+    .prism-token.prism-operator.prism-arrow {
+        color: #569cd6
+    }
+
+.prism-token.prism-atrule {
+    color: #ce9178
+}
+
+    .prism-token.prism-atrule .prism-token.prism-rule {
+        color: #c586c0
+    }
+
+    .prism-token.prism-atrule .prism-token.prism-url {
+        color: #9cdcfe
+    }
+
+        .prism-token.prism-atrule .prism-token.prism-url .prism-token.prism-function {
+            color: #dcdcaa
+        }
+
+        .prism-token.prism-atrule .prism-token.prism-url .prism-token.prism-punctuation {
+            color: #d4d4d4
+        }
+
+.prism-token.prism-keyword {
+    color: #569cd6
+}
+
+    .prism-token.prism-keyword.prism-control-flow, .prism-token.prism-keyword.prism-module {
+        color: #c586c0
+    }
+
+.prism-token.prism-function, .prism-token.prism-function .prism-token.prism-maybe-class-name {
+    color: #dcdcaa
+}
+
+.prism-token.prism-regex {
+    color: #d16969
+}
+
+.prism-token.prism-important {
+    color: #569cd6
+}
+
+.prism-token.prism-bold, .prism-token.prism-important {
+    font-weight: 700
+}
+
+.prism-token.prism-italic {
+    font-style: italic
+}
+
+.prism-token.prism-constant {
+    color: #9cdcfe
+}
+
+.prism-token.prism-class-name, .prism-token.prism-maybe-class-name {
+    color: #4ec9b0
+}
+
+.prism-token.prism-console {
+    color: #9cdcfe
+}
+
+.prism-token.prism-parameter {
+    color: #9cdcfe
+}
+
+.prism-token.prism-interpolation {
+    color: #9cdcfe
+}
+
+.prism-token.prism-punctuation.prism-interpolation-punctuation {
+    color: #569cd6
+}
+
+.prism-token.prism-boolean {
+    color: #569cd6
+}
+
+.prism-token.prism-exports .prism-token.prism-maybe-class-name, .prism-token.prism-imports .prism-token.prism-maybe-class-name, .prism-token.prism-property, .prism-token.prism-variable {
+    color: #9cdcfe
+}
+
+.prism-token.prism-selector {
+    color: #d7ba7d
+}
+
+.prism-token.prism-escape {
+    color: #d7ba7d
+}
+
+.prism-token.prism-tag {
+    color: #569cd6
+}
+
+    .prism-token.prism-tag .prism-token.prism-punctuation {
+        color: grey
+    }
+
+.prism-token.prism-cdata {
+    color: grey
+}
+
+.prism-token.prism-attr-name {
+    color: #9cdcfe
+}
+
+.prism-token.prism-attr-value, .prism-token.prism-attr-value .prism-token.prism-punctuation {
+    color: #ce9178
+}
+
+    .prism-token.prism-attr-value .prism-token.prism-punctuation.prism-attr-equals {
+        color: #d4d4d4
+    }
+
+.prism-token.prism-entity {
+    color: #569cd6
+}
+
+.prism-token.prism-namespace {
+    color: #4ec9b0
+}
+
+code[class*=language-javascript], code[class*=language-jsx], code[class*=language-tsx], code[class*=language-typescript], pre[class*=language-javascript], pre[class*=language-jsx], pre[class*=language-tsx], pre[class*=language-typescript] {
+    color: #9cdcfe
+}
+
+code[class*=language-css], pre[class*=language-css] {
+    color: #ce9178
+}
+
+code[class*=language-html], pre[class*=language-html] {
+    color: #d4d4d4
+}
+
+.language-regex .prism-token.prism-anchor {
+    color: #dcdcaa
+}
+
+.language-html .prism-token.prism-punctuation {
+    color: grey
+}
+
+.line-highlight.line-highlight {
+    background: #f7ebc6;
+}
diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js
index d7b5c529f..2414e3695 100644
--- a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js
+++ b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js
@@ -17,6 +17,7 @@
 
 function highlightCode() {
     if (Prism) {
+        Prism.plugins.customClass.prefix('prism-');
         Prism.highlightAll();
     }
 };
@@ -33,3 +34,101 @@ function navigateToHeading() {
     }
 }
 
+// THEMES
+const STORAGE_KEY = "blazorbootstrap-theme";
+const DEFAULT_THEME = "light";
+const SYSTEM_THEME = "system";
+
+const state = {
+    chosenTheme: SYSTEM_THEME, // light|dark|system
+    appliedTheme: DEFAULT_THEME // light|dark
+};
+
+const showActiveTheme = () => {
+    let $themeIndicator = document.querySelector(".blazorbootstrap-theme-indicator>i");
+    if ($themeIndicator) {
+        if (state.appliedTheme === "light") {
+            $themeIndicator.className = "bi bi-sun-fill";
+        } else if (state.appliedTheme === "dark") {
+            $themeIndicator.className = "bi bi-moon-stars-fill";
+        } else {
+            $themeIndicator.className = "bi bi-circle-half";
+        }
+    }
+
+    let $themeSwitchers = document.querySelectorAll(".blazorbootstrap-theme-item>button");
+    if ($themeSwitchers) {
+        $themeSwitchers.forEach((el) => {
+            const bsThemeValue = el.dataset.bsThemeValue;
+            const iEl = el.querySelector(".bi.bi-check2");
+            if (state.chosenTheme === bsThemeValue) {
+                el.classList.add("active");
+                if (iEl)
+                    iEl.classList.remove("d-none");
+            } else {
+                el.classList.remove("active");
+                if (iEl)
+                    iEl.classList.add("d-none");
+            }
+        });
+    }
+};
+
+function setTheme(theme, save = true) {
+    state.chosenTheme = theme;
+    state.appliedTheme = theme;
+
+    if (theme === SYSTEM_THEME) {
+        state.appliedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    document.documentElement.setAttribute("data-bs-theme", state.appliedTheme);
+    if (save) {
+        window.localStorage.setItem(STORAGE_KEY, state.chosenTheme);
+    }
+    showActiveTheme();
+    updateDemoCodeThemeCss(state.appliedTheme);
+};
+
+function initializeTheme() {
+    const localTheme = window.localStorage.getItem(STORAGE_KEY);
+    if (localTheme) {
+        setTheme(localTheme, false);
+    } else {
+        setTheme(SYSTEM_THEME);
+    }
+}
+
+window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => {
+        const theme = event.matches ? "dark" : "light";
+        setTheme(theme);
+    });
+
+function updateDemoCodeThemeCss(theme) {
+    if (theme === "dark") {
+        let prismThemeLightLinkEl = document.getElementById('prismThemeLightLink');
+        if (prismThemeLightLinkEl)
+            prismThemeLightLinkEl?.remove();
+
+        let prismThemeDarkLinkEl = document.createElement("link");
+        prismThemeDarkLinkEl.setAttribute("rel", "stylesheet");
+        prismThemeDarkLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vsc-dark-plus.min.css");
+        prismThemeDarkLinkEl.setAttribute("id", "prismThemeDarkLink");
+
+        document.head.append(prismThemeDarkLinkEl);
+    }
+    else if (theme === "light") {
+        let prismThemeDarkLinkEl = document.getElementById('prismThemeDarkLink');
+        if (prismThemeDarkLinkEl)
+            prismThemeDarkLinkEl?.remove();
+
+        let prismThemeLightLinkEl = document.createElement("link");
+        prismThemeLightLinkEl.setAttribute("rel", "stylesheet");
+        prismThemeLightLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vs.min.css");
+        prismThemeLightLinkEl.setAttribute("id", "prismThemeLightLink");
+
+        document.head.append(prismThemeLightLinkEl);
+    }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.Server/Components/App.razor b/BlazorBootstrap.Demo.Server/Components/App.razor
index 48894caed..36d417c47 100644
--- a/BlazorBootstrap.Demo.Server/Components/App.razor
+++ b/BlazorBootstrap.Demo.Server/Components/App.razor
@@ -10,7 +10,6 @@
     
     
     
-    
     
     
     
@@ -51,9 +50,10 @@
     
     
     
-    
     
     
+    
+    
 
 
 
diff --git a/blazorbootstrap/Components/Callout/Callout.razor.css b/blazorbootstrap/Components/Callout/Callout.razor.css
index 5fb5e2a29..99676fc1d 100644
--- a/blazorbootstrap/Components/Callout/Callout.razor.css
+++ b/blazorbootstrap/Components/Callout/Callout.razor.css
@@ -1,6 +1,9 @@
 .bb-callout {
-    --bs-link-color-rgb: var(--bb-callout-link);
+    --bb-callout-color: var(--bs-secondary-text-emphasis);
+    --bb-callout-bg: var(--bs-secondary-bg-subtle);
+    --bb-callout-border: var(--bs-secondary-border-subtle);
     --bs-code-color: var(--bb-callout-code-color);
+    --bs-link-color-rgb: var(--bb-callout-link);
     padding: 1.25rem;
     margin-top: 1.25rem;
     margin-bottom: 1.25rem;
diff --git a/blazorbootstrap/Components/Modals/Modal.razor.cs b/blazorbootstrap/Components/Modals/Modal.razor.cs
index 2183d9506..d840f81fe 100644
--- a/blazorbootstrap/Components/Modals/Modal.razor.cs
+++ b/blazorbootstrap/Components/Modals/Modal.razor.cs
@@ -245,7 +245,7 @@ private async Task ShowAsync(string? title, string? message, Type? type, Diction
 
     // Modal close "X" button with bootstrap 5.3.3 - https://github.com/vikramlearning/blazorbootstrap/issues/714
     // Review this fix after bootstrap 5.3.4 or 5.4 release. Ref: https://github.com/twbs/bootstrap/issues/39798
-    private string headerCssClassInternal => $"justify-content-between {ModalType.ToModalHeaderColorClass()}";
+    private string headerCssClassInternal => $"justify-content-between {ModalType.ToModalHeaderColorClass()}".Trim();
 
     /// 
     /// Gets or sets the header template.
@@ -302,10 +302,10 @@ private async Task ShowAsync(string? title, string? message, Type? type, Diction
     /// Gets or sets the modal type.
     /// 
     /// 
-    /// Default value is .
+    /// Default value is .
     /// 
     [Parameter]
-    public ModalType ModalType { get; set; } = ModalType.Light;
+    public ModalType ModalType { get; set; } = ModalType.None;
 
     /// 
     /// This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to
diff --git a/blazorbootstrap/Components/Toasts/Toast.razor.cs b/blazorbootstrap/Components/Toasts/Toast.razor.cs
index d16ec42c6..c013f7979 100644
--- a/blazorbootstrap/Components/Toasts/Toast.razor.cs
+++ b/blazorbootstrap/Components/Toasts/Toast.razor.cs
@@ -149,9 +149,7 @@ private IconName GetToastIconName() =>
     #region Properties, Indexers
 
     protected override string? ClassNames =>
-        BuildClassNames(Class,
-            (BootstrapClass.Toast, true),
-            (BackgroundColor.White.ToBackgroundClass(), true));
+        BuildClassNames(Class, (BootstrapClass.Toast, true));
 
     /// 
     /// Gets or sets the auto hide state.
diff --git a/blazorbootstrap/Enums/ModalType.cs b/blazorbootstrap/Enums/ModalType.cs
index 9b065670a..8b99f7ed2 100644
--- a/blazorbootstrap/Enums/ModalType.cs
+++ b/blazorbootstrap/Enums/ModalType.cs
@@ -2,6 +2,7 @@
 
 public enum ModalType
 {
+    None,
     Primary,
     Secondary,
     Success,
diff --git a/blazorbootstrap/Models/ModalOption.cs b/blazorbootstrap/Models/ModalOption.cs
index 58abb9e55..76cd24e0f 100644
--- a/blazorbootstrap/Models/ModalOption.cs
+++ b/blazorbootstrap/Models/ModalOption.cs
@@ -45,9 +45,9 @@ public class ModalOption
     public string Title { get; set; } = default!;
 
     /// 
-    /// Gets or sets the modal type. Default value is `ModalType.Light`.
+    /// Gets or sets the modal type. Default value is `ModalType.None`.
     /// 
-    public ModalType Type { get; set; } = ModalType.Light;
+    public ModalType Type { get; set; } = ModalType.None;
 
     #endregion
 }
diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css
index 5571ea62b..5e532d082 100644
--- a/blazorbootstrap/wwwroot/blazor.bootstrap.css
+++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css
@@ -11,28 +11,6 @@
     --bb-offcanvas-footer-padding-x: 1rem;
     --bb-offcanvas-horizontal-width-sm: 300px;
     --bb-offcanvas-horizontal-width-lg: 800px;
-    /* sidebar */
-    --bb-violet: #712cf9;
-    --bb-sidebar-width: 270px;
-    --bb-sidebar-collapsed-width: 50px;
-    --bb-sidebar-background-color: rgba(255, 255, 255, 1);
-    --bb-sidebar-top-row-background-color: var(--bb-violet);
-    --bb-sidebar-top-row-border-color: var(--bb-violet);
-    --bb-sidebar-title-text-color: rgb(255,255,255);
-    --bb-sidebar-brand-icon-color: rgb(255,255,255);
-    --bb-sidebar-brand-image-width: 24px;
-    --bb-sidebar-brand-image-height: 24px;
-    --bb-sidebar-title-badge-text-color: var(--bb-violet);
-    --bb-sidebar-title-badge-background-color: rgb(255,255,255);
-    --bb-sidebar-navbar-toggler-icon-color: var(--bb-violet);
-    --bb-sidebar-navbar-toggler-background-color: rgb(255,255,255);
-    --bb-sidebar-content-border-color: rgb(214,213,213);
-    --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
-    --bb-sidebar-nav-item-text-active-color-rgb: 112.520718,44.062154,249.437846;
-    --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
-    --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
-    --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
-    --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
     /* custom tooltip */
     --bb-tooltip-primary: var(--bs-primary);
     --bb-tooltip-secondary: var(--bs-secondary);
@@ -48,30 +26,54 @@
     --bs-border-radius-xs: 0.125rem;
     --bs-border-radius-md: 0.375rem;
     /* table */
-    --bb-table-sticky-background-color: #fff;
-    --bb-table-freeze-column-background-color: #efefef;
+    --bb-table-sticky-background-color: var(--bs-body-bg);
+    --bb-table-freeze-column-background-color: var(--bs-body-bg);
     --bb-table-selected-row-color: #000;
-    --bb-table-selected-row-hover-color: #000;
     --bb-table-selected-row-background-color: rgba(0,0,0,0.075);
+    --bb-table-selected-row-hover-color: #000;
     --bb-table-selected-row-hover-background-color: rgba(0,0,0,0.075);
     /* enum filter */
     --bb-grid-filter-dropdown-max-height: 300px;
     /* callout */
     --bb-callout-link: 10, 88, 202;
     --bb-callout-code-color: #ab296a;
+    /* sidebar */
+    --bb-violet: #9461fb;
+    --bb-violet-bg: #712cf9;
+    --bb-violet-bg-rgb: 113,44,249;
+    --bb-sidebar-width: 270px;
+    --bb-sidebar-collapsed-width: 50px;
+    --bb-sidebar-background-color: rgba(255, 255, 255, 1);
+    --bb-sidebar-top-row-background-color: var(--bb-violet-bg);
+    --bb-sidebar-top-row-border-color: var(--bb-violet-bg);
+    --bb-sidebar-title-text-color: rgb(255,255,255);
+    --bb-sidebar-brand-icon-color: rgb(255,255,255);
+    --bb-sidebar-brand-image-width: 24px;
+    --bb-sidebar-brand-image-height: 24px;
+    --bb-sidebar-title-badge-text-color: var(--bb-violet-bg);
+    --bb-sidebar-title-badge-background-color: rgb(255,255,255);
+    --bb-sidebar-navbar-toggler-icon-color: var(--bb-violet-bg);
+    --bb-sidebar-navbar-toggler-background-color: rgb(255,255,255);
+    --bb-sidebar-content-border-color: rgb(214,213,213);
+    --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
+    --bb-sidebar-nav-item-text-active-color-rgb: 112.520718,44.062154,249.437846;
+    --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
+    --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
+    --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
+    --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
     /* sidebar2 */
     --bb-sidebar2-width: 270px;
     --bb-sidebar2-collapsed-width: 50px;
     --bb-sidebar2-background-color: rgba(255, 255, 255, 1);
-    --bb-sidebar2-top-row-background-color: var(--bb-violet);
-    --bb-sidebar2-top-row-border-color: var(--bb-violet);
+    --bb-sidebar2-top-row-background-color: var(--bb-violet-bg);
+    --bb-sidebar2-top-row-border-color: var(--bb-violet-bg);
     --bb-sidebar2-title-text-color: rgb(255,255,255);
     --bb-sidebar2-brand-icon-color: rgb(255,255,255);
     --bb-sidebar2-brand-image-width: 24px;
     --bb-sidebar2-brand-image-height: 24px;
-    --bb-sidebar2-title-badge-text-color: var(--bb-violet);
+    --bb-sidebar2-title-badge-text-color: var(--bb-violet-bg);
     --bb-sidebar2-title-badge-background-color: rgb(255,255,255);
-    --bb-sidebar2-navbar-toggler-icon-color: var(--bb-violet);
+    --bb-sidebar2-navbar-toggler-icon-color: var(--bb-violet-bg);
     --bb-sidebar2-navbar-toggler-background-color: rgb(255,255,255);
     --bb-sidebar2-content-border-color: rgb(214,213,213);
     --bb-sidebar2-nav-item-text-color: rgba(0,0,0,0.9);
@@ -82,6 +84,43 @@
     --bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar2-nav-item-text-active-color-rgb),0.08);
 }
 
+[data-bs-theme=dark] {
+    /* sidebar */
+    --bb-sidebar-background-color: var(--bs-body-bg);
+    --bb-sidebar-top-row-background-color: var(--bs-body-bg);
+    --bb-sidebar-top-row-border-color: var(--bs-border-color);
+    --bb-sidebar-title-text-color: var(--bs-body-color);
+    --bb-sidebar-brand-icon-color: var(--bs-body-color);
+    --bb-sidebar-title-badge-text-color: var(--bs-body-color);
+    --bb-sidebar-title-badge-background-color: var(--bs-border-color);
+    --bb-sidebar-navbar-toggler-icon-color: var(--bs-body-color);
+    --bb-sidebar-navbar-toggler-background-color: var(--bs-body-bg);
+    --bb-sidebar-content-border-color: var(--bs-border-color);
+    --bb-sidebar-nav-item-text-color: var(--bs-body-color);
+    --bb-sidebar-nav-item-text-active-color-rgb: 112.520718,44.062154,249.437846;
+    --bb-sidebar-nav-item-text-hover-color: var(--bs-emphasis-color);
+    --bb-sidebar-nav-item-text-active-color: var(--bs-emphasis-color);
+    --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-violet-bg-rgb),0.5);
+    --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-violet-bg-rgb),0.2);
+    /* sidebar2 */
+    --bb-sidebar2-background-color: var(--bs-body-bg);
+    --bb-sidebar2-top-row-background-color: var(--bs-body-bg);
+    --bb-sidebar2-top-row-border-color: var(--bs-border-color);
+    --bb-sidebar2-title-text-color: var(--bs-body-color);
+    --bb-sidebar2-brand-icon-color: var(--bs-body-color);
+    --bb-sidebar2-title-badge-text-color: var(--bs-body-color);
+    --bb-sidebar2-title-badge-background-color: var(--bs-border-color);
+    --bb-sidebar2-navbar-toggler-icon-color: var(--bs-body-color);
+    --bb-sidebar2-navbar-toggler-background-color: var(--bs-body-bg);
+    --bb-sidebar2-content-border-color: var(--bs-border-color);
+    --bb-sidebar2-nav-item-text-color: var(--bs-body-color);
+    --bb-sidebar2-nav-item-text-active-color-rgb: 112.520718,44.062154,249.437846;
+    --bb-sidebar2-nav-item-text-hover-color: var(--bs-emphasis-color);
+    --bb-sidebar2-nav-item-text-active-color: var(--bs-emphasis-color);
+    --bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-violet-bg-rgb),0.5);
+    --bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-violet-bg-rgb),0.2);
+}
+
 /* grid - enum dropdown */
 @media (max-width: 767px) {
     .table-responsive .bb-dropdown-menu-enum,
@@ -450,8 +489,8 @@ main {
 }
 
 .bb-top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
+    background-color: var(--bs-body-bg);
+    border-bottom: 1px solid var(--bs-border-color);
     justify-content: flex-end;
     height: 3.5rem;
     display: flex;