refactor: replace eval dark-mode body-class with TS theme interop helper
Extracts setBodyThemeClass into DeepDrftShared.Client/Interop/theme/theme.ts; MainLayout lazy-imports the compiled module and calls it, matching the established knob/parallax IJSObjectReference pattern. DisposeAsync added.
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@inherits LayoutComponentBase
|
||||
@implements IDisposable
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<MudThemeProvider Theme="@DeepDrftPalettes.Default" IsDarkMode="_isDarkMode" />
|
||||
<MudPopoverProvider />
|
||||
@@ -44,6 +45,7 @@
|
||||
private bool _isDarkMode = false;
|
||||
private bool? _lastAppliedDarkMode = null;
|
||||
private PersistingComponentStateSubscription _persistingSubscription;
|
||||
private IJSObjectReference? _themeModule;
|
||||
|
||||
[Inject] public required PersistentComponentState PersistentState { get; set; }
|
||||
[Inject] public required DarkModeSettings DarkModeSettings { get; set; }
|
||||
@@ -80,8 +82,9 @@
|
||||
if (firstRender || _isDarkMode != _lastAppliedDarkMode)
|
||||
{
|
||||
_lastAppliedDarkMode = _isDarkMode;
|
||||
await JS.InvokeVoidAsync("eval",
|
||||
$"document.body.classList.toggle('deepdrft-theme-dark', {_isDarkMode.ToString().ToLower()})");
|
||||
_themeModule ??= await JS.InvokeAsync<IJSObjectReference>(
|
||||
"import", "./_content/DeepDrftShared.Client/js/theme/theme.js");
|
||||
await _themeModule.InvokeVoidAsync("setBodyThemeClass", _isDarkMode);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,6 +102,15 @@
|
||||
_persistingSubscription.Dispose();
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
if (_themeModule != null)
|
||||
{
|
||||
try { await _themeModule.DisposeAsync(); }
|
||||
catch (JSDisconnectedException) { /* circuit torn down */ }
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleAudioPlayerMinimized(bool isMinimized)
|
||||
{
|
||||
_audioPlayerClass = isMinimized ? "minimized" : "expanded";
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* theme - body-class helpers for dark-mode theme toggling.
|
||||
*
|
||||
* Single Responsibility: apply or remove the deepdrft-theme-dark class on
|
||||
* document.body so that portaled MudBlazor elements (popovers, menus, selects)
|
||||
* inherit --deepdrft-popover-surface from body.deepdrft-theme-dark rather than
|
||||
* from :root only. Popovers portal outside the ThemeWrapperClass div, so only
|
||||
* a body-level class can reach them.
|
||||
*/
|
||||
|
||||
/** Toggle the deepdrft-theme-dark class on document.body.
|
||||
* @param isDark true to add the class, false to remove it. */
|
||||
export function setBodyThemeClass(isDark: boolean): void {
|
||||
document.body.classList.toggle('deepdrft-theme-dark', isDark);
|
||||
}
|
||||
Reference in New Issue
Block a user