Question Switch from light mode to dark and back Blazor

P

Pablo

Well-known member
Joined
Aug 12, 2021
Messages
92
Programming Experience
10+
Hi,
I'm trying to be able to switch from light mode to dark mode and back to light mode in Blazor.
By now, the only I could do is setting dark mode with adding:

<html lang="en" data-bs-theme="dark">

Any help will be appreciated.
Regards
Pablo
 
Solution
P
Skydiver said:
Some interesting answers in StackOverflow:
stackoverflow.com

How to implement dark theme with blazor and bootstrap?

On https://docs.blazorbootstrap.com/ there is a light-dark theme switcher near Github and Twitter links: However there is no explanation how to do it. Bootstrap 5 has now support for dark theme if...
stackoverflow.com stackoverflow.com
Click to expand...
Thank you!

In which file should be placed this code? (I'm following what you gave me in your reply)

C#:
Expand Collapse Copy 
@using BootstrapColourModeDemo.Services
@inject IColorModeServices colorService
@inject NavigationManager navManager

@rendermode InteractiveServer

@page "/"

<PageTitle>Home - Color Mode</PageTitle>

<h1>Bootstrap Color Mode</h1>

<button class="btn btn-primary" @onclick="@(() => SetTheme("light"))"> <i class="bi bi-sun"></i> Light</button>
<button class="btn btn-primary" @onclick="@(() => SetTheme("dark"))"> <i class="bi bi-moon-stars"></i> Dark</button>


@code {

void SetTheme(string theme)
{
    if...
Sort by date Sort by votes
Some interesting answers in StackOverflow:
stackoverflow.com

How to implement dark theme with blazor and bootstrap?

On https://docs.blazorbootstrap.com/ there is a light-dark theme switcher near Github and Twitter links: However there is no explanation how to do it. Bootstrap 5 has now support for dark theme if...
stackoverflow.com stackoverflow.com
 
Upvote 0 Downvote
Skydiver said:
Some interesting answers in StackOverflow:
stackoverflow.com

How to implement dark theme with blazor and bootstrap?

On https://docs.blazorbootstrap.com/ there is a light-dark theme switcher near Github and Twitter links: However there is no explanation how to do it. Bootstrap 5 has now support for dark theme if...
stackoverflow.com stackoverflow.com
Click to expand...
Thank you!

In which file should be placed this code? (I'm following what you gave me in your reply)

C#:
Expand Collapse Copy 
@using BootstrapColourModeDemo.Services
@inject IColorModeServices colorService
@inject NavigationManager navManager

@rendermode InteractiveServer

@page "/"

<PageTitle>Home - Color Mode</PageTitle>

<h1>Bootstrap Color Mode</h1>

<button class="btn btn-primary" @onclick="@(() => SetTheme("light"))"> <i class="bi bi-sun"></i> Light</button>
<button class="btn btn-primary" @onclick="@(() => SetTheme("dark"))"> <i class="bi bi-moon-stars"></i> Dark</button>


@code {

void SetTheme(string theme)
{
    if (colorService.SetColourMode("User1", theme))
    {
        //To change immediately navidate to start of site
        navManager.NavigateTo("/");
    }
}
}

Thank you very much.
Pablo
 
Upvote 0 Downvote
Solution

Similar threads

P
  • Question Question
Question Modal not showing in Blazor
Replies
1
Views
2K
cjard
cjard
P
  • Question Question
How to set FK in OnModelCreating() method EF Core
Replies
3
Views
1K
Pablo
P
P
  • Solved
Question Blazor simple demo syntax errors
Replies
9
Views
3K
cjard
cjard
D
  • Question Question
Question How to stream live audio from sound card
Replies
0
Views
1K
DjGrego
D
JohnF
  • Question Question
Resolved What am I doing wrong with StateHasChanged
Replies
11
Views
2K
JohnF
JohnF

Share this page

Latest posts

Back
Top Bottom