diff --git a/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset01.cs b/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset01.cs new file mode 100644 index 0000000..5ea8189 --- /dev/null +++ b/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset01.cs @@ -0,0 +1,19 @@ +namespace MudBlazor.ThemeManager.TestApp.MudThemePresets; + + +public class CustomThemePreset01 : IThemePreset +{ + public string NamePreset { get; } = "Arco Service NET"; + + public MudTheme Theme { get; } = new() + { + PaletteLight = new PaletteLight() + { + Primary = Colors.Brown.Darken3, + Secondary = Colors.Green.Darken2, + AppbarBackground = Colors.Red.Default + }, + PaletteDark = new PaletteDark() { Primary = Colors.Blue.Lighten1 }, + LayoutProperties = new LayoutProperties() { DrawerWidthLeft = "260px", DrawerWidthRight = "300px" } + }; +} \ No newline at end of file diff --git a/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset02.cs b/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset02.cs new file mode 100644 index 0000000..59d70df --- /dev/null +++ b/src/MudBlazor.ThemeManager.TestApp/MudThemePresets/CustomThemePreset02.cs @@ -0,0 +1,19 @@ +namespace MudBlazor.ThemeManager.TestApp.MudThemePresets; + + +public class CustomThemePreset02 : IThemePreset +{ + public string NamePreset { get; } = "Test Theme"; + + public MudTheme Theme { get; } = new() + { + PaletteLight = new PaletteLight() + { + Primary = Colors.Teal.Default, + Secondary = Colors.Green.Accent4, + AppbarBackground = Colors.BlueGray.Default + }, + PaletteDark = new PaletteDark() { Primary = Colors.Blue.Lighten1 }, + LayoutProperties = new LayoutProperties() { DrawerWidthLeft = "260px", DrawerWidthRight = "300px" } + }; +} \ No newline at end of file diff --git a/src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor b/src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor index 7ae9f81..6c66b2a 100644 --- a/src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor +++ b/src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor @@ -1,60 +1,89 @@ -@inherits LayoutComponentBase +@using MudBlazor.ThemeManager.TestApp.MudThemePresets +@inherits LayoutComponentBase - + - - + + - + - - Theme Manager - Test Application + + + Theme Manager + + + Test Application + - + @Body - + @code { private ThemeManagerTheme _themeManager = new(); private MudThemeProvider _mudThemeProvider; + private IEnumerable? _themePresets; private bool _isDarkMode; private bool _drawerOpen = true; private bool _themeManagerOpen; + private void DrawerToggle() { _drawerOpen = !_drawerOpen; } + private void OpenThemeManager(bool value) { _themeManagerOpen = value; } + private void DarkModeToggle() { _isDarkMode = !_isDarkMode; StateHasChanged(); } + private void UpdateTheme(ThemeManagerTheme value) { _themeManager = value; StateHasChanged(); } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) @@ -62,6 +91,13 @@ _isDarkMode = await _mudThemeProvider.GetSystemPreference(); StateHasChanged(); } + await base.OnAfterRenderAsync(firstRender); } + + + protected override void OnInitialized() + { + _themePresets = [new CustomThemePreset01(), new CustomThemePreset02()]; + } } \ No newline at end of file diff --git a/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor b/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor index f7e1f35..d4dd8ee 100644 --- a/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor +++ b/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor @@ -1,70 +1,269 @@ @namespace MudBlazor.ThemeManager @inherits ComponentBaseWithState - - -
- Theme Presets - - - -
- -
- Custom Settings - - Never - Docked - Always - - - - - - - - Border Radius: @($"{@Theme.DefaultBorderRadius}px") - AppBar Elevation: @($"{@Theme.AppBarElevation}") - Drawer Elevation: @($"{@Theme.DrawerElevation}") - Default Elevation: @($"{@Theme.DefaultElevation}") -
-
- Theme Colors - - - - - - - - + + - Components - - - - - + +
+ Theme Presets + @if (ThemePresets is null || ThemePresets.Any() == false) + { + + + + } + else + { + + @foreach (var item in ThemePresets!) + { + + } + + + } +
+ +
+ + Custom Settings + + + + Never + + + Docked + + + Always + + + + + + + + + + + Border Radius: + @($"{@Theme.DefaultBorderRadius}px") + + + + + AppBar Elevation: + @($"{@Theme.AppBarElevation}") + + + + + Drawer Elevation: + @($"{@Theme.DrawerElevation}") + + + + + Default Elevation: + @($"{@Theme.DefaultElevation}") + + +
+
+ + Theme Colors + + + + + + + + + - General - - - - - - - + + Components + + + + + + + + General + + + + + + + + - Text & Actions - - - - - - - -
- - + + + Text & Actions + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor.cs b/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor.cs index 7eb832f..38a7ea2 100644 --- a/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor.cs +++ b/src/MudBlazor.ThemeManager/Components/MudThemeManager.razor.cs @@ -2,33 +2,22 @@ using MudBlazor.State; using MudBlazor.ThemeManager.Extensions; + namespace MudBlazor.ThemeManager; + public partial class MudThemeManager : ComponentBaseWithState { - private static readonly PaletteLight DefaultPaletteLight = new(); + #region Static Fields + private static readonly PaletteDark DefaultPaletteDark = new(); - private readonly ParameterState _openState; - private readonly ParameterState _isDarkModeState; + private static readonly PaletteLight DefaultPaletteLight = new(); - private PaletteLight? _currentPaletteLight; - private PaletteDark? _currentPaletteDark; - private Palette _currentPalette; - private MudTheme? _customTheme; + #endregion - public MudThemeManager() - { - using var registerScope = CreateRegisterScope(); - _openState = registerScope.RegisterParameter(nameof(Open)) - .WithParameter(() => Open) - .WithEventCallback(() => OpenChanged); - _isDarkModeState = registerScope.RegisterParameter(nameof(IsDarkMode)) - .WithParameter(() => IsDarkMode) - .WithChangeHandler(OnIsDarkModeChanged); - _currentPalette = GetPalette(); - } - public string ThemePresets { get; set; } = "Not Implemented"; + [Parameter] + public bool IsDarkMode { get; set; } [Parameter] public bool Open { get; set; } @@ -37,177 +26,94 @@ public MudThemeManager() public EventCallback OpenChanged { get; set; } [Parameter] - public ThemeManagerTheme? Theme { get; set; } + public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum; [Parameter] - public bool IsDarkMode { get; set; } + public EventCallback ThemeChanged { get; set; } [Parameter] - public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum; + public IEnumerable? ThemePresets { get; set; } [Parameter] - public EventCallback ThemeChanged { get; set; } + public ThemeManagerTheme? Theme { get; set; } - protected override void OnInitialized() + + private readonly ParameterState _isDarkModeState; + private readonly ParameterState _openState; + private bool _forceColorRender; + private IThemePreset? _selectedPreset; + private MudTheme? _customTheme; + private Palette _currentPalette; + private PaletteDark? _currentPaletteDark; + private PaletteLight? _currentPaletteLight; + private string _noPresets = "No Presets"; + + + public MudThemeManager() { - base.OnInitialized(); + using var registerScope = CreateRegisterScope(); - _currentPalette = GetPalette(); + _openState = registerScope.RegisterParameter(nameof(Open)) + .WithParameter(() => Open) + .WithEventCallback(() => OpenChanged); - if (Theme is null) - { - return; - } + _isDarkModeState = registerScope.RegisterParameter(nameof(IsDarkMode)) + .WithParameter(() => IsDarkMode) + .WithChangeHandler(OnIsDarkModeChanged); - _customTheme = Theme.Theme.DeepClone(); - _currentPaletteLight = Theme.Theme.PaletteLight.DeepClone(); - _currentPaletteDark = Theme.Theme.PaletteDark.DeepClone(); + _currentPalette = GetPalette(); } - public Task UpdatePalette(ThemeUpdatedValue value) + + protected override void OnAfterRender(bool firstRender) { - UpdateCustomTheme(); + base.OnAfterRender(firstRender); - if (Theme is null || _customTheme is null) + if (_forceColorRender) { - return Task.CompletedTask; + _forceColorRender = false; } + } - Palette newPalette = _isDarkModeState.Value ? _customTheme.PaletteDark : _customTheme.PaletteLight; - switch (value.ThemePaletteColor) - { - case ThemePaletteColor.Primary: - newPalette.Primary = value.ColorStringValue; - break; - case ThemePaletteColor.Secondary: - newPalette.Secondary = value.ColorStringValue; - break; - case ThemePaletteColor.Tertiary: - newPalette.Tertiary = value.ColorStringValue; - break; - case ThemePaletteColor.Info: - newPalette.Info = value.ColorStringValue; - break; - case ThemePaletteColor.Success: - newPalette.Success = value.ColorStringValue; - break; - case ThemePaletteColor.Warning: - newPalette.Warning = value.ColorStringValue; - break; - case ThemePaletteColor.Error: - newPalette.Error = value.ColorStringValue; - break; - case ThemePaletteColor.Dark: - newPalette.Dark = value.ColorStringValue; - break; - case ThemePaletteColor.Surface: - newPalette.Surface = value.ColorStringValue; - break; - case ThemePaletteColor.Background: - newPalette.Background = value.ColorStringValue; - break; - case ThemePaletteColor.BackgroundGray: - newPalette.BackgroundGray = value.ColorStringValue; - break; - case ThemePaletteColor.DrawerText: - newPalette.DrawerText = value.ColorStringValue; - break; - case ThemePaletteColor.DrawerIcon: - newPalette.DrawerIcon = value.ColorStringValue; - break; - case ThemePaletteColor.DrawerBackground: - newPalette.DrawerBackground = value.ColorStringValue; - break; - case ThemePaletteColor.AppbarText: - newPalette.AppbarText = value.ColorStringValue; - break; - case ThemePaletteColor.AppbarBackground: - newPalette.AppbarBackground = value.ColorStringValue; - break; - case ThemePaletteColor.LinesDefault: - newPalette.LinesDefault = value.ColorStringValue; - break; - case ThemePaletteColor.LinesInputs: - newPalette.LinesInputs = value.ColorStringValue; - break; - case ThemePaletteColor.Divider: - newPalette.Divider = value.ColorStringValue; - break; - case ThemePaletteColor.DividerLight: - newPalette.DividerLight = value.ColorStringValue; - break; - case ThemePaletteColor.TextPrimary: - newPalette.TextPrimary = value.ColorStringValue; - break; - case ThemePaletteColor.TextSecondary: - newPalette.TextSecondary = value.ColorStringValue; - break; - case ThemePaletteColor.TextDisabled: - newPalette.TextDisabled = value.ColorStringValue; - break; - case ThemePaletteColor.ActionDefault: - newPalette.ActionDefault = value.ColorStringValue; - break; - case ThemePaletteColor.ActionDisabled: - newPalette.ActionDisabled = value.ColorStringValue; - break; - case ThemePaletteColor.ActionDisabledBackground: - newPalette.ActionDisabledBackground = value.ColorStringValue; - break; + protected override void OnInitialized() + { + base.OnInitialized(); - } + _currentPalette = GetPalette(); - if (_isDarkModeState.Value) - { - _customTheme.PaletteDark = (PaletteDark)newPalette; - } - else - { - _customTheme.PaletteLight = (PaletteLight)newPalette; - } - if (_isDarkModeState.Value) - { - _currentPaletteDark = _customTheme.PaletteDark; - Theme.Theme.PaletteDark = _customTheme.PaletteDark; - } - else + if (Theme is null) { - _currentPaletteLight = _customTheme.PaletteLight; - Theme.Theme.PaletteLight = _customTheme.PaletteLight; + return; } - return UpdateThemeChangedAsync(); + _customTheme = Theme.Theme.DeepClone(); + _currentPaletteLight = Theme.Theme.PaletteLight.DeepClone(); + _currentPaletteDark = Theme.Theme.PaletteDark.DeepClone(); } - private Task UpdateOpenValueAsync() => _openState.SetValueAsync(false); - private async Task UpdateThemeChangedAsync() + private Palette GetPalette() { - await ThemeChanged.InvokeAsync(Theme); - StateHasChanged(); + return _isDarkModeState.Value + ? _currentPaletteDark ?? DefaultPaletteDark + : _currentPaletteLight ?? DefaultPaletteLight; } - private void OnIsDarkModeChanged(ParameterChangedEventArgs arg) - { - if (_customTheme is not null) - { - UpdateCustomTheme(); - } - } - private Task OnDrawerClipModeAsync(DrawerClipMode value) + private Task OnAppBarElevationAsync(int value) { if (Theme is null) { return Task.CompletedTask; } - Theme.DrawerClipMode = value; + Theme.AppBarElevation = value; return UpdateThemeChangedAsync(); } + private Task OnDefaultBorderRadiusAsync(int value) { if (Theme is null) @@ -231,6 +137,7 @@ private Task OnDefaultBorderRadiusAsync(int value) return UpdateThemeChangedAsync(); } + private Task OnDefaultElevationAsync(int value) { if (Theme is null || _customTheme is null) @@ -241,7 +148,7 @@ private Task OnDefaultElevationAsync(int value) Theme.DefaultElevation = value; var newDefaultElevation = _customTheme.Shadows; - string newElevation = newDefaultElevation.Elevation[value]; + var newElevation = newDefaultElevation.Elevation[value]; newDefaultElevation.Elevation[1] = newElevation; _customTheme.Shadows.Elevation[1] = newElevation; @@ -250,18 +157,20 @@ private Task OnDefaultElevationAsync(int value) return UpdateThemeChangedAsync(); } - private Task OnAppBarElevationAsync(int value) + + private Task OnDrawerClipModeAsync(DrawerClipMode value) { if (Theme is null) { return Task.CompletedTask; } - Theme.AppBarElevation = value; + Theme.DrawerClipMode = value; return UpdateThemeChangedAsync(); } + private Task OnDrawerElevationAsync(int value) { if (Theme is null) @@ -274,6 +183,7 @@ private Task OnDrawerElevationAsync(int value) return UpdateThemeChangedAsync(); } + private Task OnFontFamilyAsync(string value) { if (Theme is null || _customTheme is null) @@ -305,6 +215,38 @@ private Task OnFontFamilyAsync(string value) return UpdateThemeChangedAsync(); } + + private void OnIsDarkModeChanged(ParameterChangedEventArgs arg) + { + if (_customTheme is not null) + { + _forceColorRender = true; + UpdateCustomTheme(); + StateHasChanged(); + } + } + + + private Task OnThemePresetChangedAsync(IThemePreset? obj) + { + if (obj is null) return Task.CompletedTask; + + _selectedPreset = obj; + + Theme ??= new ThemeManagerTheme(); + Theme.Theme = _selectedPreset.Theme; + + _customTheme = _selectedPreset.Theme.DeepClone(); + _currentPaletteLight = _selectedPreset.Theme.PaletteLight.DeepClone(); + _currentPaletteDark = _selectedPreset.Theme.PaletteDark.DeepClone(); + + _currentPalette = GetPalette(); + _forceColorRender = true; + + return UpdateThemeChangedAsync(); + } + + private void UpdateCustomTheme() { if (_customTheme is null) @@ -325,7 +267,184 @@ private void UpdateCustomTheme() _currentPalette = GetPalette(); } - private Palette GetPalette() => _isDarkModeState.Value - ? _currentPaletteDark ?? DefaultPaletteDark - : _currentPaletteLight ?? DefaultPaletteLight; + + private Task UpdateOpenValueAsync() + { + return _openState.SetValueAsync(false); + } + + + private async Task UpdateThemeChangedAsync() + { + await ThemeChanged.InvokeAsync(Theme); + StateHasChanged(); + } + + + public Task UpdatePalette(ThemeUpdatedValue value) + { + UpdateCustomTheme(); + + if (Theme is null || _customTheme is null) + { + return Task.CompletedTask; + } + + Palette newPalette = _isDarkModeState.Value ? _customTheme.PaletteDark : _customTheme.PaletteLight; + + switch (value.ThemePaletteColor) + { + case ThemePaletteColor.Primary: + newPalette.Primary = value.ColorStringValue; + + break; + + case ThemePaletteColor.Secondary: + newPalette.Secondary = value.ColorStringValue; + + break; + + case ThemePaletteColor.Tertiary: + newPalette.Tertiary = value.ColorStringValue; + + break; + + case ThemePaletteColor.Info: + newPalette.Info = value.ColorStringValue; + + break; + + case ThemePaletteColor.Success: + newPalette.Success = value.ColorStringValue; + + break; + + case ThemePaletteColor.Warning: + newPalette.Warning = value.ColorStringValue; + + break; + + case ThemePaletteColor.Error: + newPalette.Error = value.ColorStringValue; + + break; + + case ThemePaletteColor.Dark: + newPalette.Dark = value.ColorStringValue; + + break; + + case ThemePaletteColor.Surface: + newPalette.Surface = value.ColorStringValue; + + break; + + case ThemePaletteColor.Background: + newPalette.Background = value.ColorStringValue; + + break; + + case ThemePaletteColor.BackgroundGray: + newPalette.BackgroundGray = value.ColorStringValue; + + break; + + case ThemePaletteColor.DrawerText: + newPalette.DrawerText = value.ColorStringValue; + + break; + + case ThemePaletteColor.DrawerIcon: + newPalette.DrawerIcon = value.ColorStringValue; + + break; + + case ThemePaletteColor.DrawerBackground: + newPalette.DrawerBackground = value.ColorStringValue; + + break; + + case ThemePaletteColor.AppbarText: + newPalette.AppbarText = value.ColorStringValue; + + break; + + case ThemePaletteColor.AppbarBackground: + newPalette.AppbarBackground = value.ColorStringValue; + + break; + + case ThemePaletteColor.LinesDefault: + newPalette.LinesDefault = value.ColorStringValue; + + break; + + case ThemePaletteColor.LinesInputs: + newPalette.LinesInputs = value.ColorStringValue; + + break; + + case ThemePaletteColor.Divider: + newPalette.Divider = value.ColorStringValue; + + break; + + case ThemePaletteColor.DividerLight: + newPalette.DividerLight = value.ColorStringValue; + + break; + + case ThemePaletteColor.TextPrimary: + newPalette.TextPrimary = value.ColorStringValue; + + break; + + case ThemePaletteColor.TextSecondary: + newPalette.TextSecondary = value.ColorStringValue; + + break; + + case ThemePaletteColor.TextDisabled: + newPalette.TextDisabled = value.ColorStringValue; + + break; + + case ThemePaletteColor.ActionDefault: + newPalette.ActionDefault = value.ColorStringValue; + + break; + + case ThemePaletteColor.ActionDisabled: + newPalette.ActionDisabled = value.ColorStringValue; + + break; + + case ThemePaletteColor.ActionDisabledBackground: + newPalette.ActionDisabledBackground = value.ColorStringValue; + + break; + } + + if (_isDarkModeState.Value) + { + _customTheme.PaletteDark = (PaletteDark)newPalette; + } + else + { + _customTheme.PaletteLight = (PaletteLight)newPalette; + } + + if (_isDarkModeState.Value) + { + _currentPaletteDark = _customTheme.PaletteDark; + Theme.Theme.PaletteDark = _customTheme.PaletteDark; + } + else + { + _currentPaletteLight = _customTheme.PaletteLight; + Theme.Theme.PaletteLight = _customTheme.PaletteLight; + } + + return UpdateThemeChangedAsync(); + } } \ No newline at end of file diff --git a/src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor.cs b/src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor.cs index 6862dba..f2a0506 100644 --- a/src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor.cs +++ b/src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor.cs @@ -1,27 +1,39 @@ using Microsoft.AspNetCore.Components; using MudBlazor.Utilities; + namespace MudBlazor.ThemeManager; + public partial class MudThemeManagerColorItem : ComponentBase { - private bool _isOpen; - private bool _shouldRender; - - [CascadingParameter] - protected MudThemeManager ThemeManager { get; set; } = null!; - [Parameter] public string? Name { get; set; } + [Parameter] + public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum; + [Parameter] public MudColor? ThemeColor { get; set; } [Parameter] public ThemePaletteColor ColorType { get; set; } - [Parameter] - public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum; + [CascadingParameter] + protected bool ForceRender { get; set; } + + [CascadingParameter] + protected MudThemeManager ThemeManager { get; set; } = null!; + + private bool _isOpen; + private bool _shouldRender; + + + protected override bool ShouldRender() + { + return ForceRender || _shouldRender; + } + public void ToggleOpen() { @@ -37,16 +49,11 @@ public void ToggleOpen() } } - protected override bool ShouldRender() => _shouldRender; public Task UpdateColor(MudColor value) { ThemeColor = value; - var newPaletteColor = new ThemeUpdatedValue - { - ColorStringValue = value.ToString(), - ThemePaletteColor = ColorType - }; + var newPaletteColor = new ThemeUpdatedValue { ColorStringValue = value.ToString(), ThemePaletteColor = ColorType }; return ThemeManager.UpdatePalette(newPaletteColor); } diff --git a/src/MudBlazor.ThemeManager/Models/IThemePreset.cs b/src/MudBlazor.ThemeManager/Models/IThemePreset.cs new file mode 100644 index 0000000..321bbbd --- /dev/null +++ b/src/MudBlazor.ThemeManager/Models/IThemePreset.cs @@ -0,0 +1,9 @@ +namespace MudBlazor.ThemeManager; + + +public interface IThemePreset +{ + string NamePreset { get; } + + MudTheme Theme { get; } +} \ No newline at end of file