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[] {"Bodoni Moda", "serif"}
                    },
                    H2 = new H2Typography()
                    {
                        FontFamily = new[] {"Cormorant", "serif"}
                    },
                    H3 = new H3Typography()
                    {
                        FontFamily = new[] {"Cormorant", "serif"}
                    },
                    H4 = new H4Typography()
                    {
                        FontFamily = new[] {"Cormorant", "serif"}
                    },
                    H5 = new H5Typography()
                    {
                        FontFamily = new[] {"Cormorant", "serif"}
                    },
                    H6 = new H6Typography()
                    {
                        FontFamily = new[] {"Cormorant", "serif"}
                    },
                    Button = new ButtonTypography()
                    {
                        FontFamily = new[] {"DM Sans", "sans-serif"}
                    }
                }
            }
        };

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

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

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

    // Charleston in the Day - Light Theme
    // Inspired by Charleston's historic architecture: wrought iron, bronze, Atlantic coast
    private readonly PaletteLight _lightPalette = new()
    {
        Primary = "#1A1A1A",           // Wrought iron black
        Secondary = "#B8623D",         // Burnished copper - warm orange bronze
        Tertiary = "#2A7B8C",          // Atlantic turquoise
        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 = "#1A1A1A",             // Wrought iron black
        White = "#FDFBF7",             // Cream white (stucco)
        Surface = "#FDFBF7",           // Cream stucco surface
        Background = "#F5F2EC",        // Warm linen background
        AppbarText = "#FDFBF7",        // Cream text on dark appbar
        AppbarBackground = "#1A1A1A",  // Solid wrought iron appbar
        DrawerBackground = "#F5F2EC",  // Linen drawer
        TextPrimary = "#1A1A1A",       // Wrought iron text
        TextSecondary = "#4A4A4A",     // Softer iron text
        GrayLight = "rgba(26,26,26,0.08)",         // Light iron tint
        GrayLighter = "rgba(26,26,26,0.04)",       // Very light iron tint
        GrayDefault = "rgba(26,26,26,0.15)",       // Medium iron tint
        GrayDark = "rgba(26,26,26,0.25)",          // Darker iron tint
        Divider = "rgba(26,26,26,0.12)",           // Subtle divider lines
        TableLines = "rgba(26,26,26,0.12)",        // Table borders
    };

    // 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();
    }
}