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

Add dark mode toggle with ThemeState service

Browse Source 
Implement dark mode support using a new ThemeState service that manages theme switching and integrates with DevExpress Blazor theming. Update App.razor to apply the theme globally, enhance MainLayout with a toggle button and dynamic CSS classes, and add dark mode styles to CSS files. Register ThemeState as a scoped service in Program.cs.
This commit is contained in:
OlgunR
2026-02-18 10:07:14 +01:00
parent 9a4f189e4e
commit e7aa41aa4d
6 changed files with 89 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css
View File

@@ -4,14 +4,27 @@
flex-direction: column;
}
.page.app-dark {
background-color: #1b1b1b;
color: #f1f1f1;
}
main {
flex: 1;
}
.page.app-dark main {
background-color: #1b1b1b;
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.page.app-dark .sidebar {
background-image: linear-gradient(180deg, #171717 0%, #0f2a46 70%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
@@ -21,6 +34,11 @@ main {
align-items: center;
}
.page.app-dark .top-row {
background-color: #222;
border-bottom-color: #3d3d3d;
}
.top-row ::deep a, .top-row ::deep .btn-link {
white-space: nowrap;
margin-left: 1.5rem;