From 133ddb1ecec2ee33b464ddd94273489e60ad7633 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 30 Sep 2024 21:39:41 +0530 Subject: [PATCH 01/13] dark theme - inprogress --- .../Components/Layout/EmptyLayout.razor | 36 +++++++- .../Components/Layout/EmptyLayout.razor.cs | 20 +++++ .../Components/Layout/MainLayout.razor | 1 - .../Components/Layout/MainLayoutBase.cs | 2 + .../wwwroot/js/blazorbootstrap.demo.rcl.js | 90 +++++++++++++++++++ 5 files changed, 146 insertions(+), 3 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index 2858d1aa1..08028b5d7 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,39 @@ Open Collective + + 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..1bcdd52a4 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs @@ -0,0 +1,20 @@ +namespace BlazorBootstrap.Demo.RCL; + +public partial class EmptyLayout : MainLayoutBase +{ + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await JS.InvokeVoidAsync("initializeTheme"); + + await base.OnAfterRenderAsync(firstRender); + } + + private Task SetAutoTheme() => SetTheme("system"); + + private Task SetDarkTheme() => SetTheme("dark"); + + private Task SetLightTheme() => SetTheme("light"); + + private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName); +} 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..4ec1e62ea 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs @@ -18,6 +18,8 @@ public class MainLayoutBase : LayoutComponentBase [Inject] public IConfiguration Configuration { get; set; } = default!; + [Inject] protected IJSRuntime JS { get; set; } = default!; + protected override void OnInitialized() { version = $"v{Configuration["version"]}"; // example: v0.6.1 diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js index d7b5c529f..2e149ee2b 100644 --- a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js +++ b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js @@ -33,3 +33,93 @@ function navigateToHeading() { } } + +// THEMES +const STORAGE_KEY = "be-bulma-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(".be-theme-indicator i"); + if (state.appliedTheme === "light") { + $themeIndicator.className = "bi bi-sun"; + } else if (state.appliedTheme === "dark") { + $themeIndicator.className = "bi bi-moon-stars-fill"; + } else { + $themeIndicator.className = "bi bi-circle-half"; + } + + let $themeSwitchers = document.querySelectorAll(".be-theme-item"); + $themeSwitchers.forEach((el) => { + const dataScheme = el.dataset.scheme; + if (state.chosenTheme === dataScheme) { + el.classList.add("is-selected"); + } else { + el.classList.remove("is-selected"); + } + }); +}; + +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-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/BlazorExpress.Bulma.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/BlazorExpress.Bulma.Demo.RCL/css/prism-vs.min.css"); + prismThemeLightLinkEl.setAttribute("id", "prismThemeLightLink"); + + document.head.append(prismThemeLightLinkEl); + } +} \ No newline at end of file From f9983aae12846875f0f23584bccfec09bf69201d Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 30 Sep 2024 22:38:04 +0530 Subject: [PATCH 02/13] dark theme - updates inprogress --- .../Components/Layout/EmptyLayout.razor | 53 +--- .../Components/Layout/EmptyLayout.razor.cs | 15 -- .../Components/Layout/MainLayoutBase.cs | 36 ++- .../wwwroot/css/prism-vs.min.css | 117 +++++++++ .../wwwroot/css/prism-vsc-dark-plus.min.css | 226 ++++++++++++++++++ .../wwwroot/js/blazorbootstrap.demo.rcl.js | 45 ++-- .../Components/App.razor | 1 - 7 files changed, 401 insertions(+), 92 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vs.min.css create mode 100644 BlazorBootstrap.Demo.RCL/wwwroot/css/prism-vsc-dark-plus.min.css diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index 08028b5d7..11f705c26 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor @@ -69,29 +69,23 @@
- - -@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(); - } -} + \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs index 1bcdd52a4..278295750 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor.cs @@ -2,19 +2,4 @@ public partial class EmptyLayout : MainLayoutBase { - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await JS.InvokeVoidAsync("initializeTheme"); - - await base.OnAfterRenderAsync(firstRender); - } - - private Task SetAutoTheme() => SetTheme("system"); - - private Task SetDarkTheme() => SetTheme("dark"); - - private Task SetLightTheme() => SetTheme("light"); - - private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName); } diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs index 4ec1e62ea..92ce935ec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs @@ -2,16 +2,16 @@ 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!; @@ -20,6 +20,14 @@ public class MainLayoutBase : LayoutComponentBase [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 @@ -35,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/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 2e149ee2b..bee6c6dc7 100644 --- a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js +++ b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js @@ -33,9 +33,8 @@ function navigateToHeading() { } } - // THEMES -const STORAGE_KEY = "be-bulma-theme"; +const STORAGE_KEY = "blazorbootstrap-theme"; const DEFAULT_THEME = "light"; const SYSTEM_THEME = "system"; @@ -45,24 +44,28 @@ const state = { }; const showActiveTheme = () => { - let $themeIndicator = document.querySelector(".be-theme-indicator i"); - if (state.appliedTheme === "light") { - $themeIndicator.className = "bi bi-sun"; - } else if (state.appliedTheme === "dark") { - $themeIndicator.className = "bi bi-moon-stars-fill"; - } else { - $themeIndicator.className = "bi bi-circle-half"; - } - - let $themeSwitchers = document.querySelectorAll(".be-theme-item"); - $themeSwitchers.forEach((el) => { - const dataScheme = el.dataset.scheme; - if (state.chosenTheme === dataScheme) { - el.classList.add("is-selected"); + 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 { - el.classList.remove("is-selected"); + $themeIndicator.className = "bi bi-circle-half"; } - }); + } + + let $themeSwitchers = document.querySelectorAll(".blazorbootstrap-theme-item>button"); + if ($themeSwitchers) { + $themeSwitchers.forEach((el) => { + const dataScheme = el.dataset.scheme; + if (state.chosenTheme === dataScheme) { + el.classList.add("active"); + } else { + el.classList.remove("active"); + } + }); + } }; function setTheme(theme, save = true) { @@ -73,7 +76,7 @@ function setTheme(theme, save = true) { state.appliedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } - document.documentElement.setAttribute("data-theme", state.appliedTheme); + document.documentElement.setAttribute("data-bs-theme", state.appliedTheme); if (save) { window.localStorage.setItem(STORAGE_KEY, state.chosenTheme); } @@ -105,7 +108,7 @@ function updateDemoCodeThemeCss(theme) { let prismThemeDarkLinkEl = document.createElement("link"); prismThemeDarkLinkEl.setAttribute("rel", "stylesheet"); - prismThemeDarkLinkEl.setAttribute("href", "/_content/BlazorExpress.Bulma.Demo.RCL/css/prism-vsc-dark-plus.min.css"); + prismThemeDarkLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vsc-dark-plus.min.css"); prismThemeDarkLinkEl.setAttribute("id", "prismThemeDarkLink"); document.head.append(prismThemeDarkLinkEl); @@ -117,7 +120,7 @@ function updateDemoCodeThemeCss(theme) { let prismThemeLightLinkEl = document.createElement("link"); prismThemeLightLinkEl.setAttribute("rel", "stylesheet"); - prismThemeLightLinkEl.setAttribute("href", "/_content/BlazorExpress.Bulma.Demo.RCL/css/prism-vs.min.css"); + prismThemeLightLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vs.min.css"); prismThemeLightLinkEl.setAttribute("id", "prismThemeLightLink"); document.head.append(prismThemeLightLinkEl); diff --git a/BlazorBootstrap.Demo.Server/Components/App.razor b/BlazorBootstrap.Demo.Server/Components/App.razor index 48894caed..44a718912 100644 --- a/BlazorBootstrap.Demo.Server/Components/App.razor +++ b/BlazorBootstrap.Demo.Server/Components/App.razor @@ -10,7 +10,6 @@ - From 197c2476411fb6c10f9816e5bd30a5e0c4023032 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 1 Oct 2024 12:54:31 +0530 Subject: [PATCH 03/13] Demos - Landing page updated --- .../Components/Layout/EmptyLayout.razor | 55 ++++-------------- .../Layout/MainLayoutBaseFooter.razor | 4 +- .../wwwroot/css/blazorbootstrap.demo.rcl.css | 56 ++++++++++++++++--- 3 files changed, 59 insertions(+), 56 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index 11f705c26..c2ad8e129 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor @@ -100,48 +100,13 @@ @Body - \ No newline at end of file + 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 -