diff --git a/src/Koogle.Web/Components/Layout/EmptyLayout.razor b/src/Koogle.Web/Components/Layout/EmptyLayout.razor index bd1016f..41f039b 100644 --- a/src/Koogle.Web/Components/Layout/EmptyLayout.razor +++ b/src/Koogle.Web/Components/Layout/EmptyLayout.razor @@ -1,10 +1,16 @@ +@using Koogle.Web.Services @inherits LayoutComponentBase - + +@code { + // Default theme - configurable for future theme selection + private MudTheme _theme = CustomThemes.DefaultTheme; +} +
@Body
diff --git a/src/Koogle.Web/Components/Layout/MainLayout.razor b/src/Koogle.Web/Components/Layout/MainLayout.razor index 287b0e0..0ac562e 100644 --- a/src/Koogle.Web/Components/Layout/MainLayout.razor +++ b/src/Koogle.Web/Components/Layout/MainLayout.razor @@ -1,4 +1,5 @@ -@using Koogle.Web.Store.ClubState +@using Koogle.Web.Services +@using Koogle.Web.Store.ClubState @inherits FluxorLayout @inject IState AuthState @@ -98,43 +99,8 @@ await JS.InvokeVoidAsync("eval", "document.getElementById('logout-form').submit()"); } - private readonly MudTheme _theme = 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" } - // } - // } - }; + // Default theme - can be changed per user in future + private MudTheme _theme = CustomThemes.DefaultTheme; private void ClearAuthError() { diff --git a/src/Koogle.Web/Components/Layout/PublicLayout.razor b/src/Koogle.Web/Components/Layout/PublicLayout.razor index 4f93010..bb139bf 100644 --- a/src/Koogle.Web/Components/Layout/PublicLayout.razor +++ b/src/Koogle.Web/Components/Layout/PublicLayout.razor @@ -1,10 +1,16 @@ -@inherits LayoutComponentBase +@using Koogle.Web.Services +@inherits LayoutComponentBase - + +@code { + // Default theme for public pages - configurable for future theme selection + private MudTheme _theme = CustomThemes.DefaultTheme; +} + diff --git a/src/Koogle.Web/Services/CustomThemes.cs b/src/Koogle.Web/Services/CustomThemes.cs new file mode 100644 index 0000000..1aad512 --- /dev/null +++ b/src/Koogle.Web/Services/CustomThemes.cs @@ -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, + }, + }; + } +}