chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mod theme handling

This commit is contained in:
beo3000 2026-01-09 19:37:02 +01:00
parent 3b6c7a2234
commit da88371454
4 changed files with 327 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Koogle.Web/Components/Layout/EmptyLayout.razor
View File

@ -1,10 +1,16 @@
@using Koogle.Web.Services
@inherits LayoutComponentBase @inherits LayoutComponentBase
<MudThemeProvider /> <MudThemeProvider Theme="_theme" />
<MudPopoverProvider /> <MudPopoverProvider />
<MudDialogProvider /> <MudDialogProvider />
<MudSnackbarProvider /> <MudSnackbarProvider />
@code {
// Default theme - configurable for future theme selection
private MudTheme _theme = CustomThemes.DefaultTheme;
}
<main> <main>
@Body @Body
</main> </main>

42
src/Koogle.Web/Components/Layout/MainLayout.razor
View File

@ -1,4 +1,5 @@
@using Koogle.Web.Store.ClubState @using Koogle.Web.Services
@using Koogle.Web.Store.ClubState
@inherits FluxorLayout @inherits FluxorLayout
@inject IState<AuthState> AuthState @inject IState<AuthState> AuthState
@ -98,43 +99,8 @@
await JS.InvokeVoidAsync("eval", "document.getElementById('logout-form').submit()"); await JS.InvokeVoidAsync("eval", "document.getElementById('logout-form').submit()");
} }
private readonly MudTheme _theme = new() // Default theme - can be changed per user in future
{ private MudTheme _theme = CustomThemes.DefaultTheme;
PaletteLight = new PaletteLight
{
Primary = "#1976D2",
Secondary = "#424242",
AppbarBackground = "#1976D2",
Background = "#f5f5f5",
DrawerBackground = "#ffffff",
DrawerText = "#424242",
Success = "#4CAF50",
Warning = "#FF9800",
Error = "#F44336",
Info = "#2196F3"
},
PaletteDark = new PaletteDark
{
Primary = "#90CAF9",
Secondary = "#CE93D8",
AppbarBackground = "#1e1e1e",
Background = "#121212",
DrawerBackground = "#1e1e1e",
DrawerText = "#ffffff",
Surface = "#1e1e1e",
Success = "#81C784",
Warning = "#FFB74D",
Error = "#E57373",
Info = "#64B5F6"
},
// Typography = new Typography
// {
// Default = new Default
// {
// FontFamily = new[] { "Roboto", "Helvetica", "Arial", "sans-serif" }
// }
// }
};
private void ClearAuthError() private void ClearAuthError()
{ {

10
src/Koogle.Web/Components/Layout/PublicLayout.razor
View File

@ -1,10 +1,16 @@
@inherits LayoutComponentBase @using Koogle.Web.Services
@inherits LayoutComponentBase
<MudThemeProvider /> <MudThemeProvider Theme="_theme" />
<MudPopoverProvider /> <MudPopoverProvider />
<MudDialogProvider /> <MudDialogProvider />
<MudSnackbarProvider /> <MudSnackbarProvider />
@code {
// Default theme for public pages - configurable for future theme selection
private MudTheme _theme = CustomThemes.DefaultTheme;
}
<MudLayout> <MudLayout>
<MudMainContent> <MudMainContent>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-4"> <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-4">

308
src/Koogle.Web/Services/CustomThemes.cs Normal file
View File

@ -0,0 +1,308 @@
using MudBlazor;
namespace Koogle.Web.Services
{
public static class CustomThemes
{
public static readonly MudTheme DefaultTheme = new()
{
PaletteLight = new PaletteLight
{
Primary = "#1976D2",
Secondary = "#424242",
AppbarBackground = "#1976D2",
Background = "#f5f5f5",
DrawerBackground = "#ffffff",
DrawerText = "#424242",
Success = "#4CAF50",
Warning = "#FF9800",
Error = "#F44336",
Info = "#2196F3"
},
PaletteDark = new PaletteDark
{
Primary = "#90CAF9",
Secondary = "#CE93D8",
AppbarBackground = "#1e1e1e",
Background = "#121212",
DrawerBackground = "#1e1e1e",
DrawerText = "#ffffff",
Surface = "#1e1e1e",
Success = "#81C784",
Warning = "#FFB74D",
Error = "#E57373",
Info = "#64B5F6"
},
// Typography = new Typography
// {
// Default = new Default
// {
// FontFamily = new[] { "Roboto", "Helvetica", "Arial", "sans-serif" }
// }
// }
};
public static readonly MudTheme SandstoneTheme = new()
{
PaletteLight = new PaletteLight()
{
TableHover = "rgba(0,0,0,0.0392156862745098)",
OverlayLight = "rgba(255,255,255,0.4980392156862745)",
OverlayDark = "rgba(33,33,33,0.4980392156862745)",
GrayDarker = "#616161",
GrayDark = "#757575",
GrayLighter = "#E0E0E0",
GrayLight = "#BDBDBD",
GrayDefault = "#9E9E9E",
RippleOpacitySecondary = 0.2,
RippleOpacity = 0.1,
HoverOpacity = 0.06,
Surface = "#fdeec8ff",
Background = "rgba(255,255,255,1)",
BackgroundGray = "rgba(245,245,245,1)",
ErrorContrastText = "rgba(255,255,255,1)",
LinesInputs = "rgba(189,189,189,1)",
ActionDisabled = "rgba(0,0,0,0.25882352941176473)",
TextDisabled = "rgba(0,0,0,0.3764705882352941)",
TableStriped = "rgba(0,0,0,0.0196078431372549)",
LinesDefault = "rgba(0,0,0,0.11764705882352941)",
ActionDisabledBackground = "rgba(0,0,0,0.11764705882352941)",
TableLines = "rgba(224,224,224,1)",
Divider = "rgba(224,224,224,1)",
DividerLight = "rgba(0,0,0,0.8)",
Error = "rgba(244,67,54,1)",
ActionDefault = "rgba(0,0,0,0.5372549019607843)",
DarkLighten = "rgb(87,87,87)",
ErrorLighten = "rgb(246,96,85)",
ErrorDarken = "rgb(242,28,13)",
DarkDarken = "rgb(46,46,46)",
White = "#fff",
WarningDarken = "#623218",
TertiaryLighten = "#f3daa4ff",
Warning = "#f47c3c",
PrimaryContrastText = "#d6dfe7",
SecondaryContrastText = "#e8e8e6",
TertiaryContrastText = "#f8f9fa",
Tertiary = "#c9ae74ff",
SuccessDarken = "#3b4f1e",
SecondaryDarken = "#393835",
TextSecondary = "#393835",
Success = "#93c54b",
Secondary = "#8e8c84",
DrawerText = "#8e8c84",
DrawerIcon = "#8e8c84",
TertiaryDarken = "#705825ff",
TextPrimary = "#142536",
PrimaryDarken = "#142536",
InfoDarken = "#10445a",
Dark = "#3e3f3a",
Primary = "#325d88",
AppbarText = "#325d88",
WarningContrastText = "#fde5d8",
WarningLighten = "#fde5d8",
Info = "#29abe0",
DarkContrastText = "#ced4da",
SuccessContrastText = "#e9f3db",
SuccessLighten = "#e9f3db",
SecondaryLighten = "#e8e8e6",
DrawerBackground = "#c9ae74ff",
PrimaryLighten = "#d6dfe7",
AppbarBackground = "#d6dfe7",
InfoContrastText = "#d4eef9",
InfoLighten = "#d4eef9",
Black = "#000",
},
PaletteDark = new PaletteDark()
{
Surface = "rgba(55,55,64,1)",
Background = "rgba(50,51,61,1)",
BackgroundGray = "rgba(39,39,47,1)",
ErrorContrastText = "rgba(255,255,255,1)",
LinesInputs = "rgba(255,255,255,0.2980392156862745)",
ActionDisabled = "rgba(255,255,255,0.25882352941176473)",
TextDisabled = "rgba(255,255,255,0.2)",
TableStriped = "rgba(255,255,255,0.2)",
LinesDefault = "rgba(255,255,255,0.11764705882352941)",
ActionDisabledBackground = "rgba(255,255,255,0.11764705882352941)",
TableLines = "rgba(255,255,255,0.11764705882352941)",
Divider = "rgba(255,255,255,0.11764705882352941)",
DividerLight = "rgba(255,255,255,0.058823529411764705)",
Error = "rgba(244,67,54,1)",
ActionDefault = "rgba(173,173,177,1)",
DarkLighten = "rgb(56,56,67)",
ErrorLighten = "rgb(246,96,85)",
ErrorDarken = "rgb(242,28,13)",
DarkDarken = "rgb(23,23,28)",
White = "#fff",
WarningDarken = "#f8b08a",
TertiaryLighten = "#f7e3b2ff",
Warning = "#f47c3c",
PrimaryContrastText = "#e2e4e7ff",
SecondaryContrastText = "#e2e4e7ff",
TertiaryContrastText = "#e2e4e7ff",
Tertiary = "#c9ae74ff",
SuccessDarken = "#bedc93",
SecondaryDarken = "#bbbab5",
TextSecondary = "#bbbab5",
Success = "#93c54b",
Secondary = "#8e8c84",
DrawerText = "#8e8c84",
DrawerIcon = "#8e8c84",
TertiaryDarken = "#886c30ff",
TextPrimary = "#849eb8",
PrimaryDarken = "#849eb8",
InfoDarken = "#7fcdec",
Dark = "#3e3f3a",
Primary = "#325d88",
AppbarText = "#325d88",
WarningContrastText = "#31190c",
WarningLighten = "#31190c",
Info = "#29abe0",
DarkContrastText = "#1f201d",
SuccessContrastText = "#1d270f",
SuccessLighten = "#1d270f",
SecondaryLighten = "#1c1c1a",
DrawerBackground = "#1c1c1a",
PrimaryLighten = "#0a131b",
AppbarBackground = "#0a131b",
InfoContrastText = "#08222d",
InfoLighten = "#08222d",
Black = "#000",
},
LayoutProperties = new LayoutProperties()
{
AppbarHeight = "64px",
DefaultBorderRadius = "4px",
DrawerMiniWidthLeft = "56px",
DrawerMiniWidthRight = "56px",
DrawerWidthLeft = "240px",
DrawerWidthRight = "240px",
},
Typography = new Typography()
{
Default = new DefaultTypography
{
FontFamily = ["Roboto", "Helvetica", "Arial", "sans-serif"],
FontWeight = "400",
FontSize = ".875rem",
LineHeight = "1.43",
LetterSpacing = ".01071em",
TextTransform = "none",
},
H1 = new H1Typography
{
FontWeight = "300",
FontSize = "6rem",
LineHeight = "1.167",
LetterSpacing = "-.01562em",
TextTransform = "none",
},
H2 = new H2Typography
{
FontWeight = "300",
FontSize = "3.75rem",
LineHeight = "1.2",
LetterSpacing = "-.00833em",
TextTransform = "none",
},
H3 = new H3Typography
{
FontWeight = "400",
FontSize = "3rem",
LineHeight = "1.167",
LetterSpacing = "0",
TextTransform = "none",
},
H4 = new H4Typography
{
FontWeight = "400",
FontSize = "2.125rem",
LineHeight = "1.235",
LetterSpacing = ".00735em",
TextTransform = "none",
},
H5 = new H5Typography
{
FontWeight = "400",
FontSize = "1.5rem",
LineHeight = "1.334",
LetterSpacing = "0",
TextTransform = "none",
},
H6 = new H6Typography
{
FontWeight = "500",
FontSize = "1.25rem",
LineHeight = "1.6",
LetterSpacing = ".0075em",
TextTransform = "none",
},
Subtitle1 = new Subtitle1Typography
{
FontWeight = "400",
FontSize = "1rem",
LineHeight = "1.75",
LetterSpacing = ".00938em",
TextTransform = "none",
},
Subtitle2 = new Subtitle2Typography
{
FontWeight = "500",
FontSize = ".875rem",
LineHeight = "1.57",
LetterSpacing = ".00714em",
TextTransform = "none",
},
Body1 = new Body1Typography
{
FontWeight = "400",
FontSize = "1rem",
LineHeight = "1.5",
LetterSpacing = ".00938em",
TextTransform = "none",
},
Body2 = new Body2Typography
{
FontWeight = "400",
FontSize = ".875rem",
LineHeight = "1.43",
LetterSpacing = ".01071em",
TextTransform = "none",
},
Button = new ButtonTypography
{
FontWeight = "500",
FontSize = ".875rem",
LineHeight = "1.75",
LetterSpacing = ".02857em",
TextTransform = "uppercase",
},
Caption = new CaptionTypography
{
FontWeight = "400",
FontSize = ".75rem",
LineHeight = "1.66",
LetterSpacing = ".03333em",
TextTransform = "none",
},
Overline = new OverlineTypography
{
FontWeight = "400",
FontSize = ".75rem",
LineHeight = "2.66",
LetterSpacing = ".08333em",
TextTransform = "none",
},
},
ZIndex = new ZIndex()
{
AppBar = 1300,
Dialog = 1400,
Drawer = 1100,
Popover = 1200,
Snackbar = 1500,
Tooltip = 1600,
},
};
}
}