AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode override for non-native DevExpress themes

Browse Source 
Implements a dark mode override system for DevExpress Blazor themes lacking native dark support. Adds a JS function to toggle a dx-dark class on <html>, updates ThemeState to detect native dark themes, and applies targeted CSS variable overrides for consistent dark styling. Disables prerendering to ensure JS interop, and improves theme switching logic and documentation.
This commit is contained in:
OlgunR
2026-05-05 16:41:15 +02:00
parent 2010673eba
commit 8933deec96
7 changed files with 168 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
DbFirst.BlazorWebApp/Components/App.razor
View File

@@ -24,6 +24,14 @@
<link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script src="js/size-manager.js"></script>
<script>
window.setDxDarkOverride = function (enabled) {
if (enabled)
document.documentElement.classList.add('dx-dark');
else
document.documentElement.classList.remove('dx-dark');
};
</script>
<HeadOutlet />
</head>

41
DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
View File

@@ -1,8 +1,9 @@
@inherits LayoutComponentBase
@implements IDisposable
@inject ThemeState ThemeState
@inject IJSRuntime JS
<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light")">
<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light") @(ThemeState.IsNativeDarkTheme ? "native-dark" : "")">
<div class="sidebar">
<NavMenu />
</div>
@@ -33,9 +34,43 @@
</div>
@code {
private bool _isInteractive;
protected override void OnInitialized()
{
ThemeState.OnChange += StateHasChanged;
ThemeState.OnChange += OnThemeChanged;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_isInteractive = true;
}
await ApplyDxDarkOverrideAsync();
}
private async void OnThemeChanged()
{
StateHasChanged();
if (_isInteractive)
{
await ApplyDxDarkOverrideAsync();
}
}
private async Task ApplyDxDarkOverrideAsync()
{
if (!_isInteractive) return;
try
{
bool needsOverride = ThemeState.IsDarkMode && !ThemeState.IsNativeDarkTheme;
await JS.InvokeVoidAsync("setDxDarkOverride", needsOverride);
}
catch (JSException)
{
// JS-Funktion noch nicht verfügbar – kein Circuit-Crash
}
}
private void ToggleTheme()
@@ -45,6 +80,6 @@
public void Dispose()
{
ThemeState.OnChange -= StateHasChanged;
ThemeState.OnChange -= OnThemeChanged;
}
}

3
DbFirst.BlazorWebApp/Components/Routes.razor
View File

@@ -1,4 +1,5 @@
@rendermode InteractiveServer
@rendermode @(new InteractiveServerRenderMode(prerender: false))
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">