deepdrft/DeepDrftWeb.Client/Layout/MainLayout.razor

@using DeepDrftWeb.Client.Controls
@inherits LayoutComponentBase

<MudThemeProvider Theme="@_themeManager.Theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
    <AudioPlayerService>
        @* <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" /> *@
        <MudThemeManager Open="_themeManagerOpen" OpenChanged="OpenThemeManager" Theme="_themeManager" ThemeChanged="UpdateTheme" />
        <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"/>
            <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
        </MudAppBar>
        <MudMainContent Class="pt-16 pa-4" Style="min-height: 100vh">
            @Body
            <AudioPlayerBar />
        </MudMainContent>
    </AudioPlayerService>
</MudLayout>


<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;
    // private MudTheme? _theme = null;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _themeManager = new ThemeManagerTheme
        {
            Theme =
            {
                PaletteDark = _darkPalette,
                PaletteLight = _lightPalette,
                Typography = new Typography()
                {
                    Default = new DefaultTypography()
                    {
                        FontFamily = new[] {"Electrolize", "sans-serif"}
                    },
                    H1 = new H1Typography()
                    {
                        FontFamily = new[] {"Audiowide", "sans-serif"}
                    },
                    H2 = new H2Typography()
                    {
                        FontFamily = new[] {"Michroma", "sans-serif"}
                    },
                    H3 = new H3Typography()
                    {
                        FontFamily = new[] {"Michroma", "sans-serif"}
                    },
                    H4 = new H4Typography()
                    {
                        FontFamily = new[] {"Michroma", "sans-serif"}
                    },
                    H5 = new H5Typography()
                    {
                        FontFamily = new[] {"Michroma", "sans-serif"}
                    },
                    H6 = new H6Typography()
                    {
                        FontFamily = new[] {"Michroma", "sans-serif"}
                    },
                    Button = new ButtonTypography()
                    {
                        FontFamily = new[] {"Michroma", "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();
    }

    private readonly PaletteLight _lightPalette = new()
    {
        Primary = "#8A2BE2",           // BlueViolet - main DeepDrft purple
        Secondary = "#FF1493",         // DeepPink - main DeepDrft pink
        Tertiary = "#4B0082",          // Indigo - DeepDrft deep purple
        Info = "#9370DB",             // MediumPurple - DeepDrft accent purple
        Success = "#98FB98",          // PaleGreen - soft success
        Warning = "#FFEAA7",          // Light peach - soft warning
        Error = "#FFB6C1",            // LightPink - soft error
        Black = "#2F2F2F",            // Dark gray for text
        White = "#FFFFFF",            // Pure white
        Surface = "#FFFAF0",          // FloralWhite - creamy surface
        Background = "#FAF0E6",       // Linen - warm cream background
        AppbarText = "#2F2F2F",       // Dark text on light appbar
        AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary
        DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary
        TextPrimary = "#2F2F2F",      // Dark primary text
        TextSecondary = "#6B6B6B",    // Medium gray secondary text
        GrayLight = "rgba(138,43,226,0.1)",        // Light DeepDrft tint
        GrayLighter = "rgba(138,43,226,0.05)",     // Very light DeepDrft tint
        GrayDefault = "rgba(138,43,226,0.2)",      // Medium DeepDrft tint
        GrayDark = "rgba(138,43,226,0.4)",         // Darker DeepDrft tint
        Divider = "rgba(138,43,226,0.15)",         // Soft DeepDrft divider lines
        TableLines = "rgba(138,43,226,0.15)",      // Soft DeepDrft table lines
    };

    private readonly PaletteDark _darkPalette = new()
    {
        Primary = "#FF1493",          // DeepPink - main DeepDrft pink for dark mode
        Secondary = "#8A2BE2",        // BlueViolet - main DeepDrft purple
        Tertiary = "#9370DB",         // MediumPurple - DeepDrft accent
        Info = "#4B0082",            // Indigo - DeepDrft deep purple
        Success = "#00A86B",         // Jade - true jade green success color
        Warning = "#FF8C00",         // DarkOrange - orange warning color
        Error = "#FF6347",           // Tomato - error color
        Black = "#000000",           // Pure black
        White = "#FFFFFF",           // Pure white
        Surface = "rgba(75,0,130,0.2)",         // Dark DeepDrft indigo tint
        Background = "#0A0A0A",      // Very dark background
        BackgroundGray = "#1A1A1A",  // Very dark gray
        AppbarText = "#FFFFFF",      // White text on dark appbar
        AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo
        DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint
        DrawerIcon = "#E0E0E0",      // Light gray icons
        DrawerText = "#E0E0E0",      // Light gray drawer text
        ActionDefault = "#BDBDBD",   // Light gray for actions
        ActionDisabled = "#757575",  // Medium gray for disabled
        ActionDisabledBackground = "#2F2F2F", // Dark gray background
        TextPrimary = "#FFFFFF",     // White primary text
        TextSecondary = "#E0E0E0",   // Light gray secondary text
        TextDisabled = "#757575",    // Disabled text
        GrayLight = "rgba(255,20,147,0.15)",       // Light DeepDrft pink tint
        GrayLighter = "rgba(255,20,147,0.08)",     // Lighter DeepDrft pink tint
        GrayDefault = "rgba(255,20,147,0.25)",     // Default DeepDrft pink tint
        GrayDark = "rgba(255,20,147,0.4)",        // Darker DeepDrft pink tint
        Divider = "rgba(255,20,147,0.2)",         // DeepDrft pink divider lines
        LinesDefault = "rgba(255,20,147,0.2)",    // DeepDrft pink lines
        TableLines = "rgba(255,20,147,0.2)",      // DeepDrft pink table lines
        OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
        OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode
    };

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