xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend theme mode scaffolding

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 13:10:42 +01:00
parent d3b7819df3
commit 0b7cc846e7
5 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/RolemasterDb.App/Frontend/AppState/ThemeMode.cs Normal file
View File

@@ -0,0 +1,8 @@
namespace RolemasterDb.App.Frontend.AppState;
public enum ThemeMode
{
System,
Light,
Dark
}

19
src/RolemasterDb.App/Frontend/AppState/ThemeState.cs Normal file
View File

@@ -0,0 +1,19 @@
namespace RolemasterDb.App.Frontend.AppState;
public sealed class ThemeState
{
public ThemeMode CurrentMode { get; private set; } = ThemeMode.System;
public event Action? Changed;
public void SetMode(ThemeMode mode)
{
if (CurrentMode == mode)
{
return;
}
CurrentMode = mode;
Changed?.Invoke();
}
}

2
src/RolemasterDb.App/Program.cs
View File

@@ -1,6 +1,7 @@
using Microsoft.EntityFrameworkCore;
using RolemasterDb.App.Components;
using RolemasterDb.App.Data;
using RolemasterDb.App.Frontend.AppState;
using RolemasterDb.App.Features;
var builder = WebApplication.CreateBuilder(args);
@@ -11,6 +12,7 @@ builder.Services.AddRazorComponents()
builder.Services.AddDbContextFactory<RolemasterDbContext>(options => options.UseSqlite(connectionString));
builder.Services.AddSingleton<CriticalImportArtifactLocator>();
builder.Services.AddScoped<LookupService>();
builder.Services.AddScoped<ThemeState>();
var app = builder.Build();
await RolemasterDbInitializer.InitializeAsync(app.Services);

88
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -52,6 +52,94 @@
--shadow: var(--shadow-1);
}
:root,
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg-canvas: #161412;
--bg-canvas-strong: #0f0d0c;
--bg-elevated: #201c19;
--bg-overlay: rgba(5, 5, 6, 0.68);
--surface-1: rgba(33, 28, 25, 0.88);
--surface-2: rgba(40, 34, 30, 0.9);
--surface-3: rgba(49, 41, 36, 0.92);
--surface-tooling: rgba(27, 31, 37, 0.92);
--text-primary: #f3eadf;
--text-secondary: #cab8a7;
--text-tertiary: #a28d7d;
--text-on-accent: #fff6ec;
--border-subtle: rgba(209, 188, 163, 0.12);
--border-default: rgba(209, 188, 163, 0.2);
--border-strong: rgba(209, 188, 163, 0.32);
--focus-ring: rgba(237, 181, 109, 0.38);
--focus-border: rgba(237, 181, 109, 0.52);
--shadow-1: 0 18px 40px rgba(0, 0, 0, 0.3);
--shadow-2: 0 28px 60px rgba(0, 0, 0, 0.42);
--accent-1: #36271d;
--accent-2: #6e4b2f;
--accent-3: #a06c39;
--accent-4: #c98c4b;
--accent-5: #edb56d;
--success-1: #1d2a22;
--success-2: #476653;
--success-3: #88b58b;
--warning-1: #36281b;
--warning-2: #8a6436;
--warning-3: #e3b063;
--danger-1: #351d1a;
--danger-2: #92524d;
--danger-3: #e29b90;
--info-1: #18252f;
--info-2: #45677d;
--info-3: #9ec0d5;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]),
:root[data-theme="system"] {
color-scheme: dark;
--bg-canvas: #161412;
--bg-canvas-strong: #0f0d0c;
--bg-elevated: #201c19;
--bg-overlay: rgba(5, 5, 6, 0.68);
--surface-1: rgba(33, 28, 25, 0.88);
--surface-2: rgba(40, 34, 30, 0.9);
--surface-3: rgba(49, 41, 36, 0.92);
--surface-tooling: rgba(27, 31, 37, 0.92);
--text-primary: #f3eadf;
--text-secondary: #cab8a7;
--text-tertiary: #a28d7d;
--text-on-accent: #fff6ec;
--border-subtle: rgba(209, 188, 163, 0.12);
--border-default: rgba(209, 188, 163, 0.2);
--border-strong: rgba(209, 188, 163, 0.32);
--focus-ring: rgba(237, 181, 109, 0.38);
--focus-border: rgba(237, 181, 109, 0.52);
--shadow-1: 0 18px 40px rgba(0, 0, 0, 0.3);
--shadow-2: 0 28px 60px rgba(0, 0, 0, 0.42);
--accent-1: #36271d;
--accent-2: #6e4b2f;
--accent-3: #a06c39;
--accent-4: #c98c4b;
--accent-5: #edb56d;
--success-1: #1d2a22;
--success-2: #476653;
--success-3: #88b58b;
--warning-1: #36281b;
--warning-2: #8a6436;
--warning-3: #e3b063;
--danger-1: #351d1a;
--danger-2: #92524d;
--danger-3: #e29b90;
--info-1: #18252f;
--info-2: #45677d;
--info-3: #9ec0d5;
}
}
html, body {
min-height: 100%;
background: