From 0bc1941aee415a3c593603ef5c272fbf4302683d Mon Sep 17 00:00:00 2001 From: nolt Date: Fri, 29 May 2026 11:09:17 +0000 Subject: [PATCH 1/5] add dark mode toggle to admin panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cookie-persisted dark/light theme toggle in the panel header, mirroring the CultureSelector pattern. ThemeController writes an OpenMU.Theme cookie; App.razor reads it on SSR to set ; theme.css and CSS-isolation files drive the colors via CSS variables. ThemeSelector hydrates from the live DOM via a small JS module after the interactive Blazor circuit takes over (cascading HttpContext is null in interactive renders). theme.css is shipped as a plain static asset rather than going through the SCSS pipeline because the Docker build skips Sass with ci=true. --- src/Web/AdminPanel/Components/App.razor | 11 +- .../Layout/ConfigurationSearch.razor.css | 4 +- .../Components/Layout/CreationPanel.razor.css | 13 +- .../Components/Layout/MainLayout.razor | 18 +- .../Components/Layout/MainLayout.razor.css | 7 +- src/Web/AdminPanel/_Imports.razor | 1 + .../Shared/Components/Form/AutoForm.razor.css | 11 +- src/Web/Shared/Components/ThemeSelector.razor | 20 ++ .../Shared/Components/ThemeSelector.razor.cs | 110 +++++++ .../Shared/Components/ThemeSelector.razor.css | 22 ++ src/Web/Shared/Exports.cs | 1 + .../Shared/Properties/Resources.Designer.cs | 18 ++ src/Web/Shared/Properties/Resources.resx | 9 + src/Web/Shared/Services/ThemeController.cs | 56 ++++ src/Web/Shared/wwwroot/css/theme.css | 273 ++++++++++++++++++ src/Web/Shared/wwwroot/themeSelector.js | 17 ++ 16 files changed, 571 insertions(+), 20 deletions(-) create mode 100644 src/Web/Shared/Components/ThemeSelector.razor create mode 100644 src/Web/Shared/Components/ThemeSelector.razor.cs create mode 100644 src/Web/Shared/Components/ThemeSelector.razor.css create mode 100644 src/Web/Shared/Services/ThemeController.cs create mode 100644 src/Web/Shared/wwwroot/css/theme.css create mode 100644 src/Web/Shared/wwwroot/themeSelector.js diff --git a/src/Web/AdminPanel/Components/App.razor b/src/Web/AdminPanel/Components/App.razor index 55f285156..885e14167 100644 --- a/src/Web/AdminPanel/Components/App.razor +++ b/src/Web/AdminPanel/Components/App.razor @@ -1,7 +1,16 @@ @using MUnique.OpenMU.Web.AdminPanel.Components.Layout +@using MUnique.OpenMU.Web.Shared.Services + +@code { + [CascadingParameter] + public HttpContext? HttpContext { get; set; } + + private string CurrentTheme => + ThemeController.NormalizeTheme(this.HttpContext?.Request.Cookies[ThemeController.CookieName]); +} - + diff --git a/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css b/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css index 4330a2f3e..0f9834f6f 100644 --- a/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css +++ b/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css @@ -36,7 +36,7 @@ .configuration-search__result-path { font-size: 0.78rem; - color: #5f6368; + color: var(--omu-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -45,7 +45,7 @@ .configuration-search__result:hover .configuration-search__result-path, .configuration-search__result:focus .configuration-search__result-path { - color: rgba(0, 0, 0, 0.7); + color: var(--omu-text); } @media (max-width: 640.98px) { diff --git a/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css b/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css index 65f4099ac..f1505d24c 100644 --- a/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css +++ b/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css @@ -6,8 +6,9 @@ flex-shrink: 0; display: flex; flex-direction: row; - background-color: #fff; - border-left: 1px solid #d6d5d5; + background-color: var(--omu-surface-2); + color: var(--omu-text); + border-left: 1px solid var(--omu-border); box-shadow: -2px 0 5px rgba(0, 0, 0, 0.08); overflow: hidden; z-index: 2; @@ -22,14 +23,14 @@ width: 1.75rem; padding: 0; border: none; - border-right: 1px solid #d6d5d5; - background-color: #f7f7f7; + border-right: 1px solid var(--omu-border); + background-color: var(--omu-surface-muted); cursor: pointer; - color: #333; + color: var(--omu-text); } .collapse-toggle:hover { - background-color: #e9e9e9; + background-color: var(--omu-surface-hover); } .creation-panel-body { diff --git a/src/Web/AdminPanel/Components/Layout/MainLayout.razor b/src/Web/AdminPanel/Components/Layout/MainLayout.razor index 0d915160d..6001649ef 100644 --- a/src/Web/AdminPanel/Components/Layout/MainLayout.razor +++ b/src/Web/AdminPanel/Components/Layout/MainLayout.razor @@ -1,7 +1,18 @@ @using MUnique.OpenMU.Web.AdminPanel.Properties +@using MUnique.OpenMU.Web.Shared.Services @inherits LayoutComponentBase +@code { + [CascadingParameter] + public HttpContext? HttpContext { get; set; } + + private bool IsDarkTheme => string.Equals( + this.HttpContext?.Request.Cookies[ThemeController.CookieName], + "dark", + StringComparison.OrdinalIgnoreCase); +} +
@@ -14,14 +25,15 @@
-
- @Resources.About +
+ + @Resources.About
-
+
diff --git a/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css b/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css index 600a6b702..cc170d025 100644 --- a/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css +++ b/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css @@ -9,7 +9,7 @@ main { } .sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + background-image: var(--omu-sidebar-gradient); } .header-search { @@ -24,6 +24,7 @@ main { .breadcrumb-bar { min-height: 2.5rem; + background-color: var(--omu-surface-2); } .breadcrumb-bar ::deep .breadcrumb-nav { @@ -58,8 +59,8 @@ main { } #blazor-error-ui { - color-scheme: light only; - background: lightyellow; + background: var(--omu-error-bg); + color: var(--omu-error-text); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; diff --git a/src/Web/AdminPanel/_Imports.razor b/src/Web/AdminPanel/_Imports.razor index cb068c1e4..372482e58 100644 --- a/src/Web/AdminPanel/_Imports.razor +++ b/src/Web/AdminPanel/_Imports.razor @@ -5,6 +5,7 @@ @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Http @using static Microsoft.AspNetCore.Components.Web.RenderMode @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop diff --git a/src/Web/Shared/Components/Form/AutoForm.razor.css b/src/Web/Shared/Components/Form/AutoForm.razor.css index 73af722ac..59c4d3c40 100644 --- a/src/Web/Shared/Components/Form/AutoForm.razor.css +++ b/src/Web/Shared/Components/Form/AutoForm.razor.css @@ -1,6 +1,7 @@ .auto-form { - background: #fff; - border: 1px solid #dee2e6; + background: var(--omu-surface-2); + color: var(--omu-text); + border: 1px solid var(--omu-border); border-radius: 0.375rem; padding: 1.5rem; margin-bottom: 1rem; @@ -9,9 +10,9 @@ .form-actions { position: sticky; bottom: 0; - background-color: #fff; + background-color: var(--omu-surface-2); margin: 1rem 0 0 0; - border-top: 1px solid #dee2e6; + border-top: 1px solid var(--omu-border); display: flex; gap: 0.5rem; justify-content: flex-start; @@ -38,6 +39,6 @@ left: 0.75rem; top: 50%; transform: translateY(-50%); - color: #6c757d; + color: var(--omu-text-muted); pointer-events: none; } diff --git a/src/Web/Shared/Components/ThemeSelector.razor b/src/Web/Shared/Components/ThemeSelector.razor new file mode 100644 index 000000000..69e16ab54 --- /dev/null +++ b/src/Web/Shared/Components/ThemeSelector.razor @@ -0,0 +1,20 @@ +@* + A simple toggle that switches the UI between the "light" and "dark" themes. + Persists the selection by calling the ThemeController (cookie-based, same pattern as CultureSelector). +*@ +@using MUnique.OpenMU.Web.Shared.Properties + + diff --git a/src/Web/Shared/Components/ThemeSelector.razor.cs b/src/Web/Shared/Components/ThemeSelector.razor.cs new file mode 100644 index 000000000..240da2e4c --- /dev/null +++ b/src/Web/Shared/Components/ThemeSelector.razor.cs @@ -0,0 +1,110 @@ +// +// Licensed under the MIT License. See LICENSE file in the project root for full license information. +// + +namespace MUnique.OpenMU.Web.Shared.Components; + +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +/// +/// A toggle component which switches between the light and dark UI themes. +/// Persists the selection by calling the +/// (cookie-based, mirrors the approach). +/// +public partial class ThemeSelector : IAsyncDisposable +{ + private static readonly string JsModulePath = + $"./_content/{typeof(ThemeSelector).Assembly.GetName().Name}/themeSelector.js"; + + private readonly NavigationManager _navigationManager; + + private IJSObjectReference? _jsModule; + + private bool _isDarkInternal; + + private bool _hydrated; + + /// + /// Initializes a new instance of the class. + /// + /// The navigation manager used for the post-toggle redirect. + public ThemeSelector(NavigationManager navigationManager) + { + this._navigationManager = navigationManager; + } + + /// + /// Gets or sets the current dark-mode state as seen by the server-side renderer. + /// + /// + /// Only used until the first interactive render hydrates the value from the live DOM + /// (the cascading HttpContext is null during interactive updates so this parameter + /// would otherwise flip back to false even when the cookie is "dark"). + /// + [Parameter] + public bool IsDark { get; set; } + + /// + /// Gets or sets the JS runtime used to load the theme reader module. + /// + [Inject] + private IJSRuntime JS { get; set; } = null!; + + private bool EffectiveIsDark => this._hydrated ? this._isDarkInternal : this.IsDark; + + /// + public async ValueTask DisposeAsync() + { + if (this._jsModule is not null) + { + try + { + await this._jsModule.DisposeAsync().ConfigureAwait(false); + } + catch (JSDisconnectedException) + { + // Ignore: circuit already gone. + } + } + } + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender).ConfigureAwait(true); + if (!firstRender) + { + return; + } + + try + { + this._jsModule = await this.JS + .InvokeAsync("import", JsModulePath) + .ConfigureAwait(true); + var theme = await this._jsModule + .InvokeAsync("current") + .ConfigureAwait(true); + this._isDarkInternal = string.Equals(theme, "dark", StringComparison.OrdinalIgnoreCase); + this._hydrated = true; + this.StateHasChanged(); + } + catch + { + // Fall back to the SSR parameter if JS is unavailable. + } + } + + private void Toggle() + { + var next = this.EffectiveIsDark ? "light" : "dark"; + var uri = new Uri(this._navigationManager.Uri) + .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped); + var themeEscaped = Uri.EscapeDataString(next); + var uriEscaped = Uri.EscapeDataString(uri); + + var fullUri = $"Theme/Set?theme={themeEscaped}&redirectUri={uriEscaped}"; + this._navigationManager.NavigateTo(fullUri, forceLoad: true); + } +} diff --git a/src/Web/Shared/Components/ThemeSelector.razor.css b/src/Web/Shared/Components/ThemeSelector.razor.css new file mode 100644 index 000000000..436671bde --- /dev/null +++ b/src/Web/Shared/Components/ThemeSelector.razor.css @@ -0,0 +1,22 @@ +.theme-selector { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + line-height: 1; + color: inherit; + text-decoration: none; + border-radius: 999px; +} + +.theme-selector:hover, +.theme-selector:focus { + background-color: rgba(0, 0, 0, 0.06); + text-decoration: none; + color: inherit; +} + +.theme-selector__icon { + font-size: 1.1rem; +} diff --git a/src/Web/Shared/Exports.cs b/src/Web/Shared/Exports.cs index 8d3d04ff5..8d544a776 100644 --- a/src/Web/Shared/Exports.cs +++ b/src/Web/Shared/Exports.cs @@ -48,6 +48,7 @@ private static IEnumerable SharedStylesheets get { yield return $"{Prefix}/css/shared.css"; + yield return $"{Prefix}/css/theme.css"; } } } \ No newline at end of file diff --git a/src/Web/Shared/Properties/Resources.Designer.cs b/src/Web/Shared/Properties/Resources.Designer.cs index 1a6333ded..4b45b9c49 100644 --- a/src/Web/Shared/Properties/Resources.Designer.cs +++ b/src/Web/Shared/Properties/Resources.Designer.cs @@ -356,5 +356,23 @@ public static string Refresh { return ResourceManager.GetString("Refresh", resourceCulture); } } + + public static string ToggleTheme { + get { + return ResourceManager.GetString("ToggleTheme", resourceCulture); + } + } + + public static string SwitchToDarkMode { + get { + return ResourceManager.GetString("SwitchToDarkMode", resourceCulture); + } + } + + public static string SwitchToLightMode { + get { + return ResourceManager.GetString("SwitchToLightMode", resourceCulture); + } + } } } diff --git a/src/Web/Shared/Properties/Resources.resx b/src/Web/Shared/Properties/Resources.resx index 552913f24..e174d6f5c 100644 --- a/src/Web/Shared/Properties/Resources.resx +++ b/src/Web/Shared/Properties/Resources.resx @@ -273,4 +273,13 @@ Refresh + + Toggle theme + + + Switch to dark mode + + + Switch to light mode + \ No newline at end of file diff --git a/src/Web/Shared/Services/ThemeController.cs b/src/Web/Shared/Services/ThemeController.cs new file mode 100644 index 000000000..da45755e2 --- /dev/null +++ b/src/Web/Shared/Services/ThemeController.cs @@ -0,0 +1,56 @@ +// +// Licensed under the MIT License. See LICENSE file in the project root for full license information. +// + +namespace MUnique.OpenMU.Web.Shared.Services; + +using Microsoft.AspNetCore.Mvc; + +/// +/// A controller which writes the UI theme preference to a cookie and redirects to the specified uri. +/// +[Route("[controller]/[action]")] +public class ThemeController : Controller +{ + /// + /// The name of the cookie that stores the selected theme. + /// + public const string CookieName = "OpenMU.Theme"; + + /// + /// The default theme used when no cookie is present. + /// + public const string DefaultTheme = "light"; + + /// + /// Sets the UI theme by writing the theme cookie and redirects to the specified URI. + /// + /// The theme to set, e.g. "light" or "dark". + /// The URI to redirect to after the cookie has been set. + /// A local redirect to . + public IActionResult Set(string? theme, string redirectUri) + { + var normalized = NormalizeTheme(theme); + this.HttpContext.Response.Cookies.Append( + CookieName, + normalized, + new Microsoft.AspNetCore.Http.CookieOptions + { + Expires = DateTimeOffset.UtcNow.AddYears(1), + IsEssential = true, + SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Lax, + }); + + return this.LocalRedirect(redirectUri); + } + + /// + /// Normalizes the supplied theme value to a known token. + /// + /// The raw value from the request. + /// Either "dark" or "light". + public static string NormalizeTheme(string? theme) + { + return string.Equals(theme, "dark", StringComparison.OrdinalIgnoreCase) ? "dark" : "light"; + } +} diff --git a/src/Web/Shared/wwwroot/css/theme.css b/src/Web/Shared/wwwroot/css/theme.css new file mode 100644 index 000000000..5143c3cc5 --- /dev/null +++ b/src/Web/Shared/wwwroot/css/theme.css @@ -0,0 +1,273 @@ +/* + * Theme tokens for the admin panel (light + dark). + * + * Loaded as a separate stylesheet via Exports.Stylesheets so it does NOT depend + * on Dart Sass being available at build time (the SCSS -> shared.css pipeline + * is skipped in Docker / CI builds where ci=true). + * + * Active theme is selected by the [data-theme] attribute on , set in + * App.razor from the OpenMU.Theme cookie (written by ThemeController). + */ + +:root, +[data-theme="light"] { + --omu-bg: #ffffff; + --omu-surface: #f8f9fa; + --omu-surface-2: #ffffff; + --omu-surface-muted: #f7f7f7; + --omu-surface-hover: #e9e9e9; + --omu-text: #212529; + --omu-text-muted: #5f6368; + --omu-text-secondary: #6c757d; + --omu-border: #d6d5d5; + --omu-link: #0366d6; + --omu-link-primary: #1b6ec2; + --omu-link-primary-border: #1861ac; + --omu-mark-bg: #ffff00; + --omu-error-bg: lightyellow; + --omu-error-text: #212529; + --omu-sidebar-gradient: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + --omu-nav-link: #d7d7d7; + --omu-spinner-dot: rgb(5, 39, 103); +} + +[data-theme="dark"] { + --omu-bg: #121417; + --omu-surface: #1c1f24; + --omu-surface-2: #1a1d22; + --omu-surface-muted: #23272d; + --omu-surface-hover: #2a2f36; + --omu-text: #e6e6e6; + --omu-text-muted: #a0a4ab; + --omu-text-secondary: #b0b4bb; + --omu-border: #2a2f36; + --omu-link: #66b2ff; + --omu-link-primary: #2e86d6; + --omu-link-primary-border: #1f6fb8; + --omu-mark-bg: #6b5e00; + --omu-error-bg: #3a2f00; + --omu-error-text: #f5e9b3; + --omu-sidebar-gradient: linear-gradient(180deg, #0a1330 0%, #1a0322 70%); + --omu-nav-link: #d7d7d7; + --omu-spinner-dot: #66b2ff; +} + +html, +body { + background-color: var(--omu-bg); + color: var(--omu-text); +} + +/* ===== Dark-mode overrides for Bootstrap 4 surfaces ===== */ +[data-theme="dark"] .bg-light, +[data-theme="dark"] .navbar-light, +[data-theme="dark"] .breadcrumb, +[data-theme="dark"] .breadcrumb-bar, +[data-theme="dark"] .bg-white { + background-color: var(--omu-surface) !important; + color: var(--omu-text); +} + +[data-theme="dark"] .border-bottom, +[data-theme="dark"] .border-top, +[data-theme="dark"] .border-left, +[data-theme="dark"] .border-right, +[data-theme="dark"] .border { + border-color: var(--omu-border) !important; +} + +[data-theme="dark"] .text-secondary, +[data-theme="dark"] small.text-secondary { + color: var(--omu-text-secondary) !important; +} + +[data-theme="dark"] .navbar-light .navbar-text, +[data-theme="dark"] .navbar-light .navbar-brand, +[data-theme="dark"] .navbar-light .navbar-nav .nav-link { + color: var(--omu-text); +} + +/* Tables (used everywhere via @extend .table .table-striped .table-hover in Tables.scss) */ +[data-theme="dark"] .table, +[data-theme="dark"] table { + color: var(--omu-text); + background-color: transparent; +} + +[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd), +[data-theme="dark"] table tbody tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, 0.04); + color: var(--omu-text); +} + +[data-theme="dark"] .table-hover tbody tr:hover, +[data-theme="dark"] table tbody tr:hover { + background-color: rgba(255, 255, 255, 0.08); + color: var(--omu-text); +} + +[data-theme="dark"] .table th, +[data-theme="dark"] .table td, +[data-theme="dark"] table th, +[data-theme="dark"] table td { + border-color: var(--omu-border); +} + +/* Form controls */ +[data-theme="dark"] .form-control, +[data-theme="dark"] .custom-select, +[data-theme="dark"] .custom-select-sm, +[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), +[data-theme="dark"] select, +[data-theme="dark"] textarea { + background-color: var(--omu-surface-muted); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .form-control:focus, +[data-theme="dark"] .custom-select:focus, +[data-theme="dark"] input:focus, +[data-theme="dark"] select:focus, +[data-theme="dark"] textarea:focus { + background-color: var(--omu-surface-muted); + color: var(--omu-text); + border-color: var(--omu-link); + box-shadow: 0 0 0 0.2rem rgba(102, 178, 255, 0.25); +} + +[data-theme="dark"] .input-group-text { + background-color: var(--omu-surface-hover); + color: var(--omu-text); + border-color: var(--omu-border); +} + +/* Dropdowns / popovers */ +[data-theme="dark"] .dropdown-menu { + background-color: var(--omu-surface); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .dropdown-item { + color: var(--omu-text); +} + +[data-theme="dark"] .dropdown-item:hover, +[data-theme="dark"] .dropdown-item:focus { + background-color: var(--omu-surface-hover); + color: var(--omu-text); +} + +/* Modals */ +[data-theme="dark"] .modal-content { + background-color: var(--omu-surface); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .modal-header, +[data-theme="dark"] .modal-footer { + border-color: var(--omu-border); +} + +[data-theme="dark"] .close { + color: var(--omu-text); + text-shadow: none; +} + +/* Alerts / cards / list groups */ +[data-theme="dark"] .alert-secondary { + background-color: var(--omu-surface-hover); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .card, +[data-theme="dark"] .list-group-item { + background-color: var(--omu-surface); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .btn-secondary { + background-color: #3a3f47; + border-color: #3a3f47; + color: var(--omu-text); +} + +[data-theme="dark"] .btn-light { + background-color: var(--omu-surface-hover); + border-color: var(--omu-border); + color: var(--omu-text); +} + +/* + * Link color in dark mode — narrow the `a` selector to skip anchors styled as + * buttons (Bootstrap pattern ``, used by + * EditConfigGrid.razor and ItemTable.razor for Edit links). Without :not(.btn) + * our --omu-link (#66b2ff) would beat .btn-info's white text and tank contrast. + * .btn-link is intentionally still recolored — its semantics is a link. + */ +[data-theme="dark"] a:not(.btn), +[data-theme="dark"] .btn-link { + color: var(--omu-link); +} + +[data-theme="dark"] .btn-primary { + background-color: var(--omu-link-primary); + border-color: var(--omu-link-primary-border); + color: #fff; +} + +/* Open-Iconic glyphs sometimes inherit black; force visible color in dark mode */ +[data-theme="dark"] .oi { + color: inherit; +} + +/* Sidebar gradient — overrides hard-coded gradient in shared.css when dark */ +[data-theme="dark"] .sidebar > nav { + background-image: var(--omu-sidebar-gradient); +} + +/* + * Sidebar dropdown (Game Configuration submenu). + * Navigation.scss uses `@extend .dropdown-menu` so the actual element does NOT carry + * the `.dropdown-menu` class — it shares styles via the compound selector. So we have + * to target the SCSS selector directly to recolor it. + */ +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div { + background-color: var(--omu-surface); + color: var(--omu-text); + border-color: var(--omu-border); +} + +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div > a { + color: var(--omu-text); +} + +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div > a:hover, +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div > a:focus { + background-color: var(--omu-surface-hover); + color: var(--omu-text); +} + +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div > a.active { + background-color: var(--omu-surface-hover); + color: var(--omu-text); +} + +[data-theme="dark"] .sidebar > nav > div > ul > li.dropdown > div hr { + border-color: var(--omu-border); +} + +/* Breadcrumb bar (used in MainLayout) */ +[data-theme="dark"] .breadcrumb-bar { + background-color: var(--omu-surface) !important; +} + +/* Blazor error banner */ +[data-theme="dark"] #blazor-error-ui { + background: var(--omu-error-bg); + color: var(--omu-error-text); +} diff --git a/src/Web/Shared/wwwroot/themeSelector.js b/src/Web/Shared/wwwroot/themeSelector.js new file mode 100644 index 000000000..ea7a2b40b --- /dev/null +++ b/src/Web/Shared/wwwroot/themeSelector.js @@ -0,0 +1,17 @@ +// +// Licensed under the MIT License. See LICENSE file in the project root for full license information. +// + +/** + * Returns the active UI theme from the element's data-theme attribute + * (set by App.razor from the OpenMU.Theme cookie). Used by ThemeSelector to + * hydrate its toggle state after the interactive Blazor circuit takes over, + * because the cascading HttpContext is null in interactive renders. + * + * Lives in wwwroot/ (not colocated as ThemeSelector.razor.js) because + * the *.razor.js colocation static-web-asset publishing is broken in this + * project's build pipeline; wwwroot/ is the reliable path for static assets. + */ +export function current() { + return document.documentElement.getAttribute("data-theme"); +} From 7769df32ef444e56e832637cb78ac58879e78936 Mon Sep 17 00:00:00 2001 From: nolt Date: Sat, 30 May 2026 13:52:04 +0200 Subject: [PATCH 2/5] fixes after AdminPanel updates drop the "Pre-existing regression" section (Eduardo's #788 now owns that fix) Review feedback (3 items): - ThemeSelector: drop the constructor, inject NavigationManager as a property to match the [Inject] pattern used by the rest of the project (MapEditor, ConfigurationSearch, NavMenu, ...). - ThemeSelector: prepend a leading slash to the redirect target ("/Theme/Set?...") so it always resolves against the application root, independently of the current route depth. - ThemeController: accept a nullable redirectUri and fall back to LocalRedirect("/") when it is missing or not a local URL, so a malformed request can no longer crash LocalRedirect into a 500. Dark-mode coverage gaps: - theme.css: set `color-scheme: dark` under [data-theme="dark"] so native form controls (unchecked checkboxes/radios, scrollbars, date pickers) render in their dark variant instead of bright white. - Typeahead.razor.css: replace hardcoded #fff/#ced4da/#6c757d/... with the --omu-* variables. Covers every LookupField / MultiLookupField / Typeahead in the panel (auto-form lookups on ItemDefinition, Skill, MonsterDefinition, ..., plus the Connect Server config, item-slot pickers, modal selectors). - theme.css: shift --omu-sidebar-gradient stops from % to vh and add an override for `.sidebar > nav` in dark mode (Navigation.scss hardcodes the light gradient there, would otherwise leak into dark mode). - theme.css: add an override for `.sidebar > nav` in dark mode (Navigation.scss hardcodes the light gradient there, would otherwise leak into dark mode); add an override for `.creation-panel-body .form-actions` introduced by #788 so the new sticky footer doesn't stay bright white in dark mode. --- .../Components/Form/Typeahead.razor.css | 20 ++++++++-------- .../Shared/Components/ThemeSelector.razor.cs | 23 ++++++++----------- src/Web/Shared/Services/ThemeController.cs | 13 ++++++++--- src/Web/Shared/wwwroot/css/theme.css | 20 ++++++++++++++++ 4 files changed, 50 insertions(+), 26 deletions(-) diff --git a/src/Web/Shared/Components/Form/Typeahead.razor.css b/src/Web/Shared/Components/Form/Typeahead.razor.css index 861f20ebe..61db19d3d 100644 --- a/src/Web/Shared/Components/Form/Typeahead.razor.css +++ b/src/Web/Shared/Components/Form/Typeahead.razor.css @@ -13,16 +13,17 @@ padding: 0.375rem 2.2rem; min-height: calc(1.5em + 0.75rem + 2px); cursor: text; - border: 1px solid #ced4da; + border: 1px solid var(--omu-border); border-radius: 0.25rem; - background-color: #fff; + background-color: var(--omu-surface-2); + color: var(--omu-text); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .typeahead-controls:focus-within { - color: #495057; - background-color: #fff; - border-color: #80bdff; + color: var(--omu-text); + background-color: var(--omu-surface-2); + border-color: var(--omu-link); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } @@ -39,8 +40,9 @@ .typeahead-multi-value { display: inline-flex; align-items: center; - background-color: #e9ecef; - border: 1px solid #ced4da; + background-color: var(--omu-surface-hover); + color: var(--omu-text); + border: 1px solid var(--omu-border); border-radius: 0.2rem; padding: 0.1rem 0.4rem; font-size: 0.875rem; @@ -51,7 +53,7 @@ .typeahead-multi-value-remove { background: none; border: none; - color: #6c757d; + color: var(--omu-text-muted); cursor: pointer; font-size: 1rem; font-weight: bold; @@ -93,7 +95,7 @@ left: 0.75rem; top: 50%; transform: translateY(-50%); - color: #6c757d; + color: var(--omu-text-muted); pointer-events: none; font-size: 0.9rem; } diff --git a/src/Web/Shared/Components/ThemeSelector.razor.cs b/src/Web/Shared/Components/ThemeSelector.razor.cs index 240da2e4c..068d8ce31 100644 --- a/src/Web/Shared/Components/ThemeSelector.razor.cs +++ b/src/Web/Shared/Components/ThemeSelector.razor.cs @@ -17,23 +17,12 @@ public partial class ThemeSelector : IAsyncDisposable private static readonly string JsModulePath = $"./_content/{typeof(ThemeSelector).Assembly.GetName().Name}/themeSelector.js"; - private readonly NavigationManager _navigationManager; - private IJSObjectReference? _jsModule; private bool _isDarkInternal; private bool _hydrated; - /// - /// Initializes a new instance of the class. - /// - /// The navigation manager used for the post-toggle redirect. - public ThemeSelector(NavigationManager navigationManager) - { - this._navigationManager = navigationManager; - } - /// /// Gets or sets the current dark-mode state as seen by the server-side renderer. /// @@ -45,6 +34,12 @@ public ThemeSelector(NavigationManager navigationManager) [Parameter] public bool IsDark { get; set; } + /// + /// Gets or sets the navigation manager used for the post-toggle redirect. + /// + [Inject] + private NavigationManager NavigationManager { get; set; } = null!; + /// /// Gets or sets the JS runtime used to load the theme reader module. /// @@ -99,12 +94,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender) private void Toggle() { var next = this.EffectiveIsDark ? "light" : "dark"; - var uri = new Uri(this._navigationManager.Uri) + var uri = new Uri(this.NavigationManager.Uri) .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped); var themeEscaped = Uri.EscapeDataString(next); var uriEscaped = Uri.EscapeDataString(uri); - var fullUri = $"Theme/Set?theme={themeEscaped}&redirectUri={uriEscaped}"; - this._navigationManager.NavigateTo(fullUri, forceLoad: true); + var fullUri = $"/Theme/Set?theme={themeEscaped}&redirectUri={uriEscaped}"; + this.NavigationManager.NavigateTo(fullUri, forceLoad: true); } } diff --git a/src/Web/Shared/Services/ThemeController.cs b/src/Web/Shared/Services/ThemeController.cs index da45755e2..0079bbaf8 100644 --- a/src/Web/Shared/Services/ThemeController.cs +++ b/src/Web/Shared/Services/ThemeController.cs @@ -26,9 +26,9 @@ public class ThemeController : Controller /// Sets the UI theme by writing the theme cookie and redirects to the specified URI. /// /// The theme to set, e.g. "light" or "dark". - /// The URI to redirect to after the cookie has been set. - /// A local redirect to . - public IActionResult Set(string? theme, string redirectUri) + /// The URI to redirect to after the cookie has been set. Must be a local URL; otherwise the user is sent to the application root. + /// A local redirect to , or to "/" if the URI is missing or non-local. + public IActionResult Set(string? theme, string? redirectUri) { var normalized = NormalizeTheme(theme); this.HttpContext.Response.Cookies.Append( @@ -41,6 +41,13 @@ public IActionResult Set(string? theme, string redirectUri) SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Lax, }); + // LocalRedirect throws InvalidOperationException (-> 500) on empty / non-local URIs. + // Fall back to the app root so a malformed request never crashes the response. + if (string.IsNullOrEmpty(redirectUri) || !this.Url.IsLocalUrl(redirectUri)) + { + return this.LocalRedirect("/"); + } + return this.LocalRedirect(redirectUri); } diff --git a/src/Web/Shared/wwwroot/css/theme.css b/src/Web/Shared/wwwroot/css/theme.css index 5143c3cc5..5cc583408 100644 --- a/src/Web/Shared/wwwroot/css/theme.css +++ b/src/Web/Shared/wwwroot/css/theme.css @@ -32,6 +32,12 @@ } [data-theme="dark"] { + /* + * Tell the browser to render native form controls (checkbox, radio, + * scrollbars, date pickers, native select arrows) in their dark variant + * so unchecked checkboxes/radios don't render as bright white tiles. + */ + color-scheme: dark; --omu-bg: #121417; --omu-surface: #1c1f24; --omu-surface-2: #1a1d22; @@ -58,6 +64,14 @@ body { color: var(--omu-text); } +/* + * shared.css has the light gradient hardcoded on .sidebar > nav (Navigation.scss). + * Recolor it in dark mode so nav matches body/sidebar gradient. + */ +[data-theme="dark"] .sidebar > nav { + background-image: var(--omu-sidebar-gradient); +} + /* ===== Dark-mode overrides for Bootstrap 4 surfaces ===== */ [data-theme="dark"] .bg-light, [data-theme="dark"] .navbar-light, @@ -271,3 +285,9 @@ body { background: var(--omu-error-bg); color: var(--omu-error-text); } + +/* CreationPanel sticky form-actions footer (hardcoded #fff / #dee2e6 in CreationPanel.razor.css) */ +[data-theme="dark"] .creation-panel-body .form-actions { + background-color: var(--omu-surface) !important; + border-top: 1px solid var(--omu-border) !important; +} From 5b40f6efa1732c41cc4db61b0ec33dbb614edaac Mon Sep 17 00:00:00 2001 From: nolt Date: Sun, 31 May 2026 18:42:40 +0200 Subject: [PATCH 3/5] dark-mode polish MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit QuickGrid header/sort/paginator, alert variants, sticky bars QuickGrid: - button.col-title + .col-title-text: shared.css globally sets `button { color: #212529 }` which leaks to the bare