deepdrft/DeepDrftWeb.Client/Layout/MainLayout.razor

@using DeepDrftWeb.Client.Controls
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
@inherits LayoutComponentBase

<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div class="@ThemeWrapperClass">
    <MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
        <AudioPlayerProvider>
            <MudAppBar Elevation="_themeManager.AppBarElevation">
                <MudAvatar Class="mr-2">
                    <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
                </MudAvatar>
                <NavMenu />
                <MudSpacer/>
                <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
            </MudAppBar>
            <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 bool _drawerOpen = true;
    private bool _isDarkMode = true;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _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[] {"EB Garamond", "serif"}
                    },
                    H3 = new H3Typography()
                    {
                        FontFamily = new[] {"EB Garamond", "serif"}
                    },
                    H4 = new H4Typography()
                    {
                        FontFamily = new[] {"EB Garamond", "serif"}
                    },
                    H5 = new H5Typography()
                    {
                        FontFamily = new[] {"EB Garamond", "serif"}
                    },
                    H6 = new H6Typography()
                    {
                        FontFamily = new[] {"EB Garamond", "serif"}
                    },
                    Button = new ButtonTypography()
                    {
                        FontFamily = new[] {"DM Sans", "sans-serif"}
                    }
                }
            }
        };

        StateHasChanged();
    }

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }

    private void DarkModeToggle()
    {
        _isDarkMode = !_isDarkMode;
    }
    
    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: white stucco, black wrought iron gates, elegant accents
    private readonly PaletteLight _lightPalette = new()
    {
        Primary = "#1C1C1C",           // Wrought iron black - strong, elegant
        Secondary = "#B8848C",         // Dusty rose - elegant accent
        Tertiary = "#C9A962",          // Antique gold - replaces brown
        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 = "#1C1C1C",             // 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 (FIX)
        AppbarBackground = "#1C1C1C",  // Solid wrought iron appbar
        DrawerBackground = "#F5F2EC",  // Linen drawer
        TextPrimary = "#1C1C1C",       // Wrought iron text
        TextSecondary = "#4A4A4A",     // Softer iron text
        GrayLight = "rgba(28,28,28,0.08)",         // Light iron tint
        GrayLighter = "rgba(28,28,28,0.04)",       // Very light iron tint
        GrayDefault = "rgba(28,28,28,0.15)",       // Medium iron tint
        GrayDark = "rgba(28,28,28,0.25)",          // Darker iron tint
        Divider = "rgba(28,28,28,0.12)",           // Subtle divider lines
        TableLines = "rgba(28,28,28,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
    };

    public string DarkLightModeButtonIcon => _isDarkMode switch
    {
        true => Icons.Material.Rounded.AutoMode,
        false => Icons.Material.Outlined.DarkMode,
    };

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