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.
44 lines
1.8 KiB
Plaintext
44 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<base href="/" />
|
|
@DxResourceManager.RegisterTheme(Themes.Fluent)
|
|
@DxResourceManager.RegisterScripts()
|
|
|
|
<link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
|
|
<link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
|
|
|
<link rel="stylesheet" href="app.css" />
|
|
<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>
|
|
|
|
<body>
|
|
<Routes />
|
|
<script src="_framework/blazor.web.js"></script>
|
|
</body>
|
|
|
|
</html>
|