Skip to content

Commit d4cc266

Browse files
gvreddy04gvreddy04
authored
Dark mode support (#895)
* dark mode support
1 parent a5bcc4c commit d4cc266

File tree

19 files changed

+658
-152
lines changed

19 files changed

+658
-152
lines changed

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

Lines changed: 38 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@namespace BlazorBootstrap.Demo.RCL
2-
3-
@inherits LayoutComponentBase
2+
@inherits MainLayoutBase
43

54
<Skippy Url="https://github.com/vikramlearning/blazorbootstrap">
65
<i class="bi bi-star-fill"></i>
@@ -64,6 +63,33 @@
6463
<small class="d-lg-none ms-2">Open Collective</small>
6564
</a>
6665
</li>
66+
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
67+
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
68+
<hr class="d-lg-none my-2 text-white-50">
69+
</li>
70+
<li class="nav-item dropdown">
71+
<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)">
72+
<span class="blazorbootstrap-theme-indicator"><i class="bi bi-sun-fill"></i></span>
73+
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
74+
</button>
75+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
76+
<li class="blazorbootstrap-theme-item px-1">
77+
<button type="button" class="dropdown-item d-flex align-items-center active rounded" data-bs-theme-value="light" aria-pressed="true" @onclick="SetLightTheme">
78+
<i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto"></i>
79+
</button>
80+
</li>
81+
<li class="blazorbootstrap-theme-item px-1">
82+
<button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="dark" aria-pressed="false" @onclick="SetDarkTheme">
83+
<i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check2 d-none ms-auto"></i>
84+
</button>
85+
</li>
86+
<li class="blazorbootstrap-theme-item px-1">
87+
<button type="button" class="dropdown-item d-flex align-items-center rounded" data-bs-theme-value="auto" aria-pressed="false" @onclick="SetAutoTheme">
88+
<i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 d-none ms-auto"></i>
89+
</button>
90+
</li>
91+
</ul>
92+
</li>
6793
</ul>
6894
</div>
6995
</div>
@@ -74,79 +100,13 @@
74100
@Body
75101
</main>
76102

77-
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
78-
<div class="container py-4 py-md-5 px-4 px-md-3">
79-
<div class="row">
80-
<div class="col-lg-4 mb-3">
81-
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
82-
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap" />
83-
<span class="fs-5">Blazor Bootstrap</span>
84-
</a>
85-
<ul class="list-unstyled small text-muted">
86-
<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>
87-
<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>
88-
<li class="mb-2">Currently @version.</li>
89-
</ul>
90-
</div>
91-
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
92-
<h5>Links</h5>
93-
<ul class="list-unstyled">
94-
<li class="mb-2"><a href="/">Home</a></li>
95-
<li class="mb-2"><a href="@docsUrl" target="_blank" rel="noopener">Docs</a></li>
96-
<li class="mb-2"><a href="@blogUrl" target="_blank" rel="noopener">Blog</a></li>
97-
<li class="mb-2"><a href="@githubUrl" target="_blank" rel="noopener">Github</a></li>
98-
</ul>
99-
</div>
100-
<div class="col-6 col-lg-2 mb-3">
101-
<h5>Guides</h5>
102-
<ul class="list-unstyled">
103-
<li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
104-
<li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
105-
<li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
106-
</ul>
107-
</div>
108-
<div class="col-6 col-lg-2 mb-3">
109-
<h5>Community</h5>
110-
<ul class="list-unstyled">
111-
<li class="mb-2"><a href="@githubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
112-
<li class="mb-2"><a href="@githubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
113-
<li class="mb-2"><a href="@openCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
114-
<li class="mb-2"><a href="@stackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
115-
</ul>
116-
</div>
117-
<div class="col-6 col-lg-2 mb-3">
118-
</div>
119-
</div>
120-
</div>
121-
</footer>
122-
123-
@code {
124-
private string version = default!;
125-
private string docsUrl = default!;
126-
private string blogUrl = default!;
127-
private string githubUrl = default!;
128-
private string twitterUrl = default!;
129-
private string linkedInUrl = default!;
130-
private string openCollectiveUrl = default!;
131-
private string githubIssuesUrl = default!;
132-
private string githubDiscussionsUrl = default!;
133-
private string stackoverflowUrl = default!;
134-
135-
[Inject] public IConfiguration Configuration { get; set; } = default!;
136-
137-
protected override void OnInitialized()
138-
{
139-
version = $"v{Configuration["version"]}"; // example: v0.6.1
140-
docsUrl = $"{Configuration["urls:docs"]}";
141-
blogUrl = $"{Configuration["urls:blog"]}";
142-
githubUrl = $"{Configuration["urls:github"]}";
143-
twitterUrl = $"{Configuration["urls:twitter"]}";
144-
linkedInUrl = $"{Configuration["urls:linkedin"]}";
145-
openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
146-
githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
147-
githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
148-
stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
149-
150-
base.OnInitialized();
151-
}
152-
}
103+
<MainLayoutBaseFooter Version="@Version"
104+
DocsUrl="@DocsUrl"
105+
BlogUrl="@BlogUrl"
106+
GithubUrl="@GithubUrl"
107+
TwitterUrl="@TwitterUrl"
108+
LinkedInUrl="@LinkedInUrl"
109+
OpenCollectiveUrl="@OpenCollectiveUrl"
110+
GithubIssuesUrl="@GithubIssuesUrl"
111+
GithubDiscussionsUrl="@GithubDiscussionsUrl"
112+
StackoverflowUrl="@StackoverflowUrl" />

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public partial class EmptyLayout : MainLayoutBase
4+
{
5+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@namespace BlazorBootstrap.Demo.RCL
2-
32
@inherits MainLayoutBase
43

54
<div class="bb-page">

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

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,32 @@
22

33
public class MainLayoutBase : LayoutComponentBase
44
{
5-
private string version = default!;
6-
private string docsUrl = default!;
7-
private string blogUrl = default!;
8-
private string githubUrl = default!;
9-
private string twitterUrl = default!;
10-
private string linkedInUrl = default!;
11-
private string openCollectiveUrl = default!;
12-
private string githubIssuesUrl = default!;
13-
private string githubDiscussionsUrl = default!;
14-
private string stackoverflowUrl = default!;
5+
internal string version = default!;
6+
internal string docsUrl = default!;
7+
internal string blogUrl = default!;
8+
internal string githubUrl = default!;
9+
internal string twitterUrl = default!;
10+
internal string linkedInUrl = default!;
11+
internal string openCollectiveUrl = default!;
12+
internal string githubIssuesUrl = default!;
13+
internal string githubDiscussionsUrl = default!;
14+
internal string stackoverflowUrl = default!;
1515

1616
internal Sidebar2 sidebar2 = default!;
1717
internal IEnumerable<NavItem> navItems = default!;
1818

1919
[Inject] public IConfiguration Configuration { get; set; } = default!;
2020

21+
[Inject] protected IJSRuntime JS { get; set; } = default!;
22+
23+
protected override async Task OnAfterRenderAsync(bool firstRender)
24+
{
25+
if (firstRender)
26+
await JS.InvokeVoidAsync("initializeTheme");
27+
28+
await base.OnAfterRenderAsync(firstRender);
29+
}
30+
2131
protected override void OnInitialized()
2232
{
2333
version = $"v{Configuration["version"]}"; // example: v0.6.1
@@ -33,6 +43,14 @@ protected override void OnInitialized()
3343
base.OnInitialized();
3444
}
3545

46+
internal Task SetAutoTheme() => SetTheme("system");
47+
48+
internal Task SetDarkTheme() => SetTheme("dark");
49+
50+
internal Task SetLightTheme() => SetTheme("light");
51+
52+
internal async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
53+
3654
internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
3755
{
3856
if (navItems is null)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@namespace BlazorBootstrap.Demo.RCL
22
@inherits ComponentBase
33

4-
<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light">
4+
<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-body-tertiary">
55
<div class="container px-4 px-md-3">
66
<div class="row">
77
<div class="col-lg-4 mb-3">
8-
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
8+
<a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap">
99
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap">
1010
<span class="fs-5">Blazor Bootstrap</span>
1111
</a>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</Tooltip>
1313
</div>
1414
</div>
15-
<div class="highlight">
15+
<div class="highlight border border-top-0">
1616
<pre>
1717
<code class="@LanguageCode.ToLanguageCssClass()">
1818
@if (snippet is not null)
@@ -27,7 +27,7 @@
2727
else if (!Tabs)
2828
{
2929
<div class="bd-example-snippet bd-code-snippet">
30-
<div class="bb-example">
30+
<div class="bb-example border">
3131
<DynamicComponent Type="this.Type"/>
3232
</div>
3333
<div class="d-flex align-items-center highlight-toolbar px-4 py-2 border border-top-0">
@@ -38,7 +38,7 @@ else if (!Tabs)
3838
</Tooltip>
3939
</div>
4040
</div>
41-
<div class="highlight">
41+
<div class="highlight border border-top-0">
4242
<pre>
4343
<code class="@LanguageCode.ToLanguageCssClass()">
4444
@if (snippet is not null)
@@ -58,7 +58,7 @@ else // Tabs = true
5858
<Icon Name="IconName.Display" Class="me-2" /><b>Example</b>
5959
</TitleTemplate>
6060
<Content>
61-
<div class="bb-example border-top-0 mt-0">
61+
<div class="bb-example border border-top-0 mt-0">
6262
<DynamicComponent Type="this.Type"/>
6363
</div>
6464
</Content>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ public partial class Demo : ComponentBase
44
{
55
#region Fields and Constants
66

7-
private IconColor clipboardTooltipIconColor = IconColor.Dark;
7+
private IconColor clipboardTooltipIconColor = IconColor.None;
88

99
private IconName clipboardTooltipIconName = IconName.Clipboard;
1010

@@ -92,7 +92,7 @@ public void ResetCopyStatusJS()
9292
{
9393
clipboardTooltipTitle = "Copy to clipboard";
9494
clipboardTooltipIconName = IconName.Clipboard;
95-
clipboardTooltipIconColor = IconColor.Dark;
95+
clipboardTooltipIconColor = IconColor.None;
9696

9797
StateHasChanged();
9898
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.highlight-toolbar {
2-
color: #212529;
3-
background-color: #f8f9fa;
2+
/*color: #212529;*/
3+
/*background-color: #f8f9fa;*/
4+
color: var(--bs-body-color);
5+
background-color: var(--bs-body-bg);
46
}

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

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
/*** START: home ***/
2-
:root {
3-
--bd-purple: #4c0bce;
4-
--bd-violet: #712cf9;
2+
:root, [data-bs-theme="light"] {
53
--bd-accent: #ffe484;
6-
--bd-violet-rgb: 112.520718,44.062154,249.437846;
74
--bd-accent-rgb: 255,228,132;
5+
--bs-body-color: #212529;
6+
--bs-body-color-rgb: 33, 37, 41;
7+
--bs-emphasis-color: #000;
8+
--bs-link-color: #0d6efd;
9+
--bs-link-color-rgb: 13, 110, 253;
810
--bd-pink-rgb: 214,51,132;
11+
--bd-purple: #4c0bce;
12+
--bs-secondary-color: rgba(33, 37, 41, 0.75);
913
--bd-teal-rgb: 32,201,151;
14+
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
15+
--bs-tertiary-color-rgb: 33, 37, 41;
16+
--bs-tertiary-bg: #f8f9fa;
17+
--bs-tertiary-bg-rgb: 248, 249, 250;
18+
--bd-violet: #712cf9;
19+
--bd-violet-rgb: 112.520718,44.062154,249.437846;
1020
--docsearch-primary-color: var(--bd-violet);
1121
--docsearch-logo-color: var(--bd-violet);
12-
--bs-body-color: #212529;
13-
--bs-tertiary-bg: #f8f9fa;
1422
}
1523

1624
h1:focus-visible {
@@ -124,7 +132,8 @@ h1:focus-visible {
124132

125133
.bd-masthead h1 {
126134
font-size: calc(1.525rem + 3.3vw);
127-
line-height: 1
135+
line-height: 1;
136+
--bs-heading-color: var(--bs-emphasis-color);
128137
}
129138

130139
@media (min-width: 1200px) {
@@ -136,7 +145,7 @@ h1:focus-visible {
136145
.bd-masthead .lead {
137146
font-size: 1rem;
138147
font-weight: 400;
139-
color: #495057
148+
color: var(--bs-secondary-color);
140149
}
141150

142151
.bd-masthead .bd-code-snippet {
@@ -184,6 +193,14 @@ h1:focus-visible {
184193
}
185194
}
186195

196+
.masthead-followup h2, .masthead-followup h3, .masthead-followup h4 {
197+
--bs-heading-color: var(--bs-emphasis-color);
198+
}
199+
200+
.masthead-followup h4 {
201+
--bs-heading-color: var(--bs-link-color-rgb) !important;
202+
}
203+
187204
.masthead-followup .lead {
188205
font-size: 1rem
189206
}
@@ -225,7 +242,7 @@ h1:focus-visible {
225242
}
226243

227244
.bd-footer a {
228-
color: #495057;
245+
color: var(--bs-body-color);
229246
text-decoration: none
230247
}
231248

@@ -299,7 +316,8 @@ h1:focus-visible {
299316
.highlight {
300317
padding: 1rem;
301318
margin-bottom: 1rem;
302-
background-color: #f8f9fa;
319+
/*background-color: #f8f9fa;*/
320+
background-color: var(--bs-body-bg);
303321
border: solid #dee2e6;
304322
border-width: 0 1px 1px 1px;
305323
border-bottom-left-radius: .25rem;
@@ -324,7 +342,7 @@ h1:focus-visible {
324342

325343
.highlight pre code {
326344
font-size: inherit;
327-
color: #212529;
345+
/*color: #212529;*/
328346
word-wrap: normal
329347
}
330348

@@ -415,3 +433,24 @@ h1:focus-visible {
415433
margin-top: .75rem;
416434
color: var(--bs-body-color) !important
417435
}
436+
437+
.bg-body-tertiary {
438+
--bs-bg-opacity: 1;
439+
background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
440+
}
441+
442+
[data-bs-theme=dark] {
443+
color-scheme: dark;
444+
--bs-body-color: #dee2e6;
445+
--bs-body-color-rgb: 222, 226, 230;
446+
--bs-emphasis-color: #fff;
447+
--bs-link-color: #6ea8fe;
448+
--bs-link-hover-color: #8bb9fe;
449+
--bs-link-color-rgb: 110, 168, 254;
450+
--bs-link-hover-color-rgb: 139, 185, 254;
451+
--bs-secondary-color: rgba(222, 226, 230, 0.75);
452+
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
453+
--bs-tertiary-color-rgb: 222, 226, 230;
454+
--bs-tertiary-bg: #2b3035;
455+
--bs-tertiary-bg-rgb: 43, 48, 53;
456+
}

0 commit comments

Comments
 (0)