Files
deepdrft/DeepDrftWeb.Client/Layout/MainLayout.razor
T
daniel-c-harvey 27522c1e1c Front End Track Gallery Controls
- Theming adjustments (still needs a lot of work)
2025-09-04 14:18:35 -04:00

127 lines
5.4 KiB
Plaintext

@inherits LayoutComponentBase
<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
<MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
<MudSpacer />
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
</MudAppBar>
<MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
<NavMenu />
</MudDrawer>
<MudMainContent Class="pt-16 pa-4">
@Body
</MudMainContent>
</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();
_theme = new()
{
PaletteLight = _lightPalette,
PaletteDark = _darkPalette,
LayoutProperties = new LayoutProperties()
};
}
private void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
private void DarkModeToggle()
{
_isDarkMode = !_isDarkMode;
}
private readonly PaletteLight _lightPalette = new()
{
Primary = "#9370DB", // MediumPurple - stronger but still pastel
Secondary = "#F4A460", // SandyBrown - warm pastel orange
Tertiary = "#FF1493", // DeepPink - vibrant accent (kept neon)
Info = "#8A2BE2", // BlueViolet - stronger purple info
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(211,180,221,0.90)", // Translucent plum - more presence
DrawerBackground = "#D3B4DD", // Plum drawer - stronger presence
TextPrimary = "#2F2F2F", // Dark primary text
TextSecondary = "#6B6B6B", // Medium gray secondary text
GrayLight = "#E6E6FA", // Lavender - light purple-tinted gray
GrayLighter = "#F8F8FF", // GhostWhite - very light purple-tinted
GrayDefault = "#BC8F8F", // RosyBrown - warm gray
GrayDark = "#8B4513", // SaddleBrown - warm dark gray
Divider = "#E6E6FA", // Lavender - soft purple divider lines
TableLines = "#E6E6FA", // Lavender - soft table lines
};
private readonly PaletteDark _darkPalette = new()
{
Primary = "#FF69B4", // HotPink - softer magenta for dark mode
Secondary = "#4B0082", // Indigo - deep purple from logo
Tertiary = "#8A2BE2", // BlueViolet - purple accent instead of blue
Info = "#9370DB", // MediumPurple - purple info instead of blue
Success = "#00FF7F", // SpringGreen - bright success
Warning = "#FFD700", // Gold - warning color
Error = "#FF6347", // Tomato - error color
Black = "#000000", // Pure black
White = "#FFFFFF", // Pure white
Surface = "#2D1B4E", // Dark purple - surface with purple tint
Background = "#0D0D0D", // Near black - very dark background
BackgroundGray = "#1A1A1A", // Very dark gray
AppbarText = "#FFFFFF", // White text on dark appbar
AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple
DrawerBackground = "#2D1B4E", // Dark purple drawer
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 = "#424242", // Light gray in dark mode
GrayLighter = "#2F2F2F", // Lighter gray in dark mode
GrayDefault = "#757575", // Default gray
GrayDark = "#BDBDBD", // Dark gray (inverted for dark mode)
Divider = "#424242", // Medium gray divider lines
LinesDefault = "#424242", // Default lines
TableLines = "#424242", // 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,
};
}