Skip to content

Document IsDarkMode parameter in README setup instructions #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ScarletKuro merged 3 commits into from
Feb 12, 2026
Merged

Document IsDarkMode parameter in README setup instructions #38

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6539a73
Initial plan
Copilot Feb 11, 2026
02bd235
Add IsDarkMode parameter documentation to README
Copilot Feb 11, 2026
ee93955
Fix _themeManagerOpen to be private for consistency
Copilot Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,13 @@ Add the following to your HTML `head` section, it's either `index.html` or `_Lay
Add the components in your `MainLayout.razor` and inside `<MudLayout>`
```razor
<MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
<MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
<MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" IsDarkMode="@_isDarkMode" />
```
Add the following inside your @code for `MainLayout.razor`
```razor
private ThemeManagerTheme _themeManager = new ThemeManagerTheme();
public bool _themeManagerOpen = false;
private bool _themeManagerOpen = false;
private bool _isDarkMode;

void OpenThemeManager(bool value)
{
Expand All @@ -58,6 +59,14 @@ protected override void OnInitialized()
StateHasChanged();
}
```
## Dark Mode Support
If you need dark mode support, make sure to bind the `IsDarkMode` parameter to a variable that controls whether your application is in dark mode. This allows the Theme Manager to adjust and display the appropriate palette (light or dark) when you're customizing themes.

The `_isDarkMode` variable should be synchronized with your `MudThemeProvider`'s `IsDarkMode` to ensure consistent dark mode behavior across your application:
```razor
<MudThemeProvider Theme="_themeManager.Theme" @bind-IsDarkMode="@_isDarkMode" />
```

Connect the ThemeManagerTheme with `MudThemeProvider` to control all the theme colors. You can also connect `MudAppBar` and `MudDrawer` directly.
```html
<MudThemeProvider Theme="_themeManager.Theme" />
Expand Down
Loading