deepdrft/DeepDrftWeb.Client/Layout/MainLayout.razor

@using DeepDrftWeb.Client.Controls
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
@using DeepDrftWeb.Client.Services
@using DeepDrftWeb.Client.Common
@using Microsoft.AspNetCore.Components
@inherits LayoutComponentBase
@implements IDisposable

<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div class="@ThemeWrapperClass">
    <MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
        <AudioPlayerProvider>
            <DeepDrftMenu Elevation="_themeManager.AppBarElevation" @bind-IsDarkMode="_isDarkMode" />
            <MudMainContent Class="flex-grow-1 pt-16 pb-8">
                <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
                    @Body
                </MudContainer>
                <AudioPlayerBar />
            </MudMainContent>
        </AudioPlayerProvider>
    </MudLayout>
</div>


<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private const string DarkModeKey = "darkMode";
    private bool _isDarkMode = true;
    private PersistingComponentStateSubscription _persistingSubscription;

    [Inject] public required PersistentComponentState PersistentState { get; set; }
    [Inject] public required DarkModeSettings DarkModeSettings { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        // Restore persisted dark mode state (from server prerender)
        if (PersistentState.TryTakeFromJson<bool>(DarkModeKey, out var restored))
        {
            _isDarkMode = restored;
            DarkModeSettings.IsDarkMode = restored;
        }
        else
        {
            _isDarkMode = DarkModeSettings.IsDarkMode;
        }

        // Register to persist state when prerendering completes
        _persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);

        _themeManager = new ThemeManagerTheme
        {
            Theme =
            {
                PaletteDark = _darkPalette,
                PaletteLight = _lightPalette,
                Typography = new Typography()
                {
                    Default = new DefaultTypography()
                    {
                        FontFamily = new[] {"DM Sans", "sans-serif"}
                    },
                    H1 = new H1Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    H2 = new H2Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    H3 = new H3Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    H4 = new H4Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    // Extended to H5/H6 beyond spec — keeps heading hierarchy consistent in Cormorant Garamond
                    H5 = new H5Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    H6 = new H6Typography()
                    {
                        FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
                    },
                    Subtitle1 = new Subtitle1Typography()
                    {
                        FontFamily = new[] {"Geist Mono", "monospace"}
                    },
                    Body1 = new Body1Typography()
                    {
                        FontFamily = new[] {"DM Sans", "sans-serif"}
                    },
                    Body2 = new Body2Typography()
                    {
                        FontFamily = new[] {"DM Sans", "sans-serif"}
                    },
                    Caption = new CaptionTypography()
                    {
                        FontFamily = new[] {"Geist Mono", "monospace"}
                    },
                    Button = new ButtonTypography()
                    {
                        FontFamily = new[] {"Geist Mono", "monospace"}
                    }
                }
            }
        };

        StateHasChanged();
    }
    
    private ThemeManagerTheme _themeManager;
    public bool _themeManagerOpen = false;

    void OpenThemeManager(bool value)
    {
        _themeManagerOpen = value;
    }

    void UpdateTheme(ThemeManagerTheme value)
    {
        _themeManager = value;
        StateHasChanged();
    }

    // Wireframe light palette - navy / green / warm off-white
    private readonly PaletteLight _lightPalette = new()
    {
        Primary = "#0D1B2A",                              // Navy - text, buttons
        PrimaryDarken = "#162437",                        // Navy-mid - hover, elevated surfaces
        Secondary = "#1A3C34",                            // Deep green - italic emphasis
        Tertiary = "#3D7A68",                             // Green-accent - interactive hovers/active/icons
        Background = "#FAFAF8",                           // Warm off-white
        BackgroundGray = "#F0F2F0",                       // Slight warm gray for contrast
        Surface = "#FAFAF8",
        AppbarBackground = "rgba(250,250,248,0.88)",
        AppbarText = "#0D1B2A",
        TextPrimary = "#0D1B2A",
        TextSecondary = "#8A9BB0",                        // Muted - secondary text, nav at rest
        TextDisabled = "rgba(13,27,42,0.38)",
        ActionDefault = "#8A9BB0",
        ActionDisabled = "rgba(13,27,42,0.26)",
        ActionDisabledBackground = "rgba(13,27,42,0.12)",
        Divider = "rgba(13,27,42,0.10)",
        DividerLight = "rgba(13,27,42,0.06)",
        TableLines = "rgba(13,27,42,0.10)",
        LinesDefault = "rgba(13,27,42,0.10)",
        LinesInputs = "rgba(13,27,42,0.30)",
        OverlayLight = "rgba(250,250,248,0.5)",
        OverlayDark = "rgba(13,27,42,0.5)",
        // Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
    };

    // Lowcountry Summer Nights - Dark Theme
    // Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
    private readonly PaletteDark _darkPalette = new()
    {
        Primary = "#D4654A",           // Deep sunset coral - richer, distinct
        Secondary = "#7B6D8D",         // Twilight purple - muted
        Tertiary = "#E9C46A",          // Firefly gold - lamplight
        Info = "#2196F3",              // MudBlazor default blue (semantic)
        Success = "#4CAF50",           // MudBlazor default green (semantic)
        Warning = "#FF9800",           // MudBlazor default amber (semantic)
        Error = "#F44336",             // MudBlazor default red (semantic)
        Black = "#0A0A0F",             // Deep night black
        White = "#F5F0E6",             // Warm moonlight white
        Surface = "rgba(123,109,141,0.12)",        // Twilight-tinted surface
        Background = "#0D0D12",        // Deep twilight background
        BackgroundGray = "#141420",    // Slightly lighter night
        AppbarText = "#F5F0E6",        // Warm moonlight text
        AppbarBackground = "rgba(13,13,18,0.95)",  // Translucent night
        DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint
        DrawerIcon = "#E0E0E0",        // Light icons
        DrawerText = "#E0E0E0",        // Light drawer text
        ActionDefault = "#BDBDBD",     // Default action color
        ActionDisabled = "#757575",    // Disabled state
        ActionDisabledBackground = "#1A1A2E",     // Disabled background
        TextPrimary = "#F5F0E6",       // Warm white primary text
        TextSecondary = "#B8B0C4",     // Lavender gray secondary text
        TextDisabled = "#757575",      // Disabled text
        GrayLight = "rgba(212,101,74,0.15)",       // Coral tint light
        GrayLighter = "rgba(212,101,74,0.08)",     // Coral tint lighter
        GrayDefault = "rgba(212,101,74,0.22)",     // Coral tint default
        GrayDark = "rgba(212,101,74,0.35)",        // Coral tint dark
        Divider = "rgba(212,101,74,0.18)",         // Coral divider
        LinesDefault = "rgba(212,101,74,0.18)",    // Coral lines
        TableLines = "rgba(212,101,74,0.18)",      // Coral table lines
        OverlayLight = "rgba(0,0,0,0.7)",          // Dark overlay
        OverlayDark = "rgba(255,255,255,0.08)",    // Light overlay
    };

    // Theme wrapper class for CSS targeting
    private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";

    private Task PersistDarkMode()
    {
        PersistentState.PersistAsJson(DarkModeKey, _isDarkMode);
        return Task.CompletedTask;
    }

    public void Dispose()
    {
        _persistingSubscription.Dispose();
    }
}