Skip to content

feat: expose ColorPickerMode parameter on MudThemeManager #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nmiddelmann2106 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: expose ColorPickerMode parameter on MudThemeManager #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions src/MudBlazor.ThemeManager/Components/MudThemeManager.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,40 +30,40 @@
</div>
<div class="pt-6">
<MudText Typo="Typo.body2" GutterBottom="true" Class="mx-4 mb-4"><b>Theme Colors</b></MudText>
<MudThemeManagerColorItem Name="Primary" ThemeColor="@_currentPalette.Primary" ColorType="ThemePaletteColor.Primary" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Secondary" ThemeColor="@_currentPalette.Secondary" ColorType="ThemePaletteColor.Secondary" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Tertiary" ThemeColor="@_currentPalette.Tertiary" ColorType="ThemePaletteColor.Tertiary" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Info" ThemeColor="@_currentPalette.Info" ColorType="ThemePaletteColor.Info" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Success" ThemeColor="@_currentPalette.Success" ColorType="ThemePaletteColor.Success" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Warning" ThemeColor="@_currentPalette.Warning" ColorType="ThemePaletteColor.Warning" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Error" ThemeColor="@_currentPalette.Error" ColorType="ThemePaletteColor.Error" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Dark" ThemeColor="@_currentPalette.Dark" ColorType="ThemePaletteColor.Dark" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Primary" ThemeColor="@_currentPalette.Primary" ColorType="ThemePaletteColor.Primary" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Secondary" ThemeColor="@_currentPalette.Secondary" ColorType="ThemePaletteColor.Secondary" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Tertiary" ThemeColor="@_currentPalette.Tertiary" ColorType="ThemePaletteColor.Tertiary" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Info" ThemeColor="@_currentPalette.Info" ColorType="ThemePaletteColor.Info" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Success" ThemeColor="@_currentPalette.Success" ColorType="ThemePaletteColor.Success" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Warning" ThemeColor="@_currentPalette.Warning" ColorType="ThemePaletteColor.Warning" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Error" ThemeColor="@_currentPalette.Error" ColorType="ThemePaletteColor.Error" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Dark" ThemeColor="@_currentPalette.Dark" ColorType="ThemePaletteColor.Dark" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />

<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>Components</b></MudText>
<MudThemeManagerColorItem Name="Appbar Text" ThemeColor="@_currentPalette.AppbarText" ColorType="ThemePaletteColor.AppbarText" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Appbar BG" ThemeColor="@_currentPalette.AppbarBackground" ColorType="ThemePaletteColor.AppbarBackground" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Drawer Text" ThemeColor="@_currentPalette.DrawerText" ColorType="ThemePaletteColor.DrawerText" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Drawer Icons" ThemeColor="@_currentPalette.DrawerIcon" ColorType="ThemePaletteColor.DrawerIcon" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Drawer BG" ThemeColor="@_currentPalette.DrawerBackground" ColorType="ThemePaletteColor.DrawerBackground" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Appbar Text" ThemeColor="@_currentPalette.AppbarText" ColorType="ThemePaletteColor.AppbarText" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Appbar BG" ThemeColor="@_currentPalette.AppbarBackground" ColorType="ThemePaletteColor.AppbarBackground" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Drawer Text" ThemeColor="@_currentPalette.DrawerText" ColorType="ThemePaletteColor.DrawerText" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Drawer Icons" ThemeColor="@_currentPalette.DrawerIcon" ColorType="ThemePaletteColor.DrawerIcon" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Drawer BG" ThemeColor="@_currentPalette.DrawerBackground" ColorType="ThemePaletteColor.DrawerBackground" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />

<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>General</b></MudText>
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Background" ThemeColor="@_currentPalette.Background" ColorType="ThemePaletteColor.Background" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Background Gray" ThemeColor="@_currentPalette.BackgroundGray" ColorType="ThemePaletteColor.BackgroundGray" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Lines Default" ThemeColor="@_currentPalette.LinesDefault" ColorType="ThemePaletteColor.LinesDefault" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Lines Inputs" ThemeColor="@_currentPalette.LinesInputs" ColorType="ThemePaletteColor.LinesInputs" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Divider" ThemeColor="@_currentPalette.Divider" ColorType="ThemePaletteColor.Divider" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Divider Light" ThemeColor="@_currentPalette.DividerLight" ColorType="ThemePaletteColor.DividerLight" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Background" ThemeColor="@_currentPalette.Background" ColorType="ThemePaletteColor.Background" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Background Gray" ThemeColor="@_currentPalette.BackgroundGray" ColorType="ThemePaletteColor.BackgroundGray" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Lines Default" ThemeColor="@_currentPalette.LinesDefault" ColorType="ThemePaletteColor.LinesDefault" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Lines Inputs" ThemeColor="@_currentPalette.LinesInputs" ColorType="ThemePaletteColor.LinesInputs" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Divider" ThemeColor="@_currentPalette.Divider" ColorType="ThemePaletteColor.Divider" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Divider Light" ThemeColor="@_currentPalette.DividerLight" ColorType="ThemePaletteColor.DividerLight" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />


<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>Text & Actions</b></MudText>
<MudThemeManagerColorItem Name="Text Primary" ThemeColor="@_currentPalette.TextPrimary" ColorType="ThemePaletteColor.TextPrimary" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Text Secondary" ThemeColor="@_currentPalette.TextSecondary" ColorType="ThemePaletteColor.TextSecondary" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Text Disabled" ThemeColor="@_currentPalette.TextDisabled" ColorType="ThemePaletteColor.TextDisabled" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Action Default" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.ActionDefault" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Action Disabled" ThemeColor="@_currentPalette.ActionDisabled" ColorType="ThemePaletteColor.ActionDisabled" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Disabled BG" ThemeColor="@_currentPalette.ActionDisabledBackground" ColorType="ThemePaletteColor.ActionDisabledBackground" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
<MudThemeManagerColorItem Name="Text Primary" ThemeColor="@_currentPalette.TextPrimary" ColorType="ThemePaletteColor.TextPrimary" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Text Secondary" ThemeColor="@_currentPalette.TextSecondary" ColorType="ThemePaletteColor.TextSecondary" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Text Disabled" ThemeColor="@_currentPalette.TextDisabled" ColorType="ThemePaletteColor.TextDisabled" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Action Default" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.ActionDefault" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Action Disabled" ThemeColor="@_currentPalette.ActionDisabled" ColorType="ThemePaletteColor.ActionDisabled" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Disabled BG" ThemeColor="@_currentPalette.ActionDisabledBackground" ColorType="ThemePaletteColor.ActionDisabledBackground" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
</div>
</MudDrawer>
<MudOverlay @bind-Visible:get="_openState.Value" @bind-Visible:set="_openState.SetValueAsync" OnClick="@UpdateOpenValueAsync" DarkBackground="false" />
Expand Down
3 changes: 3 additions & 0 deletions src/MudBlazor.ThemeManager/Components/MudThemeManager.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ public MudThemeManager()
[Parameter]
public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum;

[Parameter]
public ColorPickerMode ColorPickerMode { get; set; } = ColorPickerMode.RGB;

[Parameter]
public EventCallback<ThemeManagerTheme> ThemeChanged { get; set; }

Expand Down
2 changes: 1 addition & 1 deletion src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
<div style="background:@ThemeColor.ToString();" class="px-8 py-3 mud-float-right rounded mud-elevation-25"></div>
</div>
<MudPopover Open="@_isOpen" Elevation="25" Square="true" TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter">
<MudColorPicker Class="mud-thememanager-color-picker" PickerVariant="PickerVariant.Static" Elevation="0" ValueChanged="UpdateColor" ColorPickerView="ColorPickerView" />
<MudColorPicker Class="mud-thememanager-color-picker" PickerVariant="PickerVariant.Static" Elevation="0" ValueChanged="UpdateColor" ColorPickerView="ColorPickerView" ColorPickerMode="ColorPickerMode" />
</MudPopover>
</div>
3 changes: 3 additions & 0 deletions src/MudBlazor.ThemeManager/Components/MudThemeManagerColorItem.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ public partial class MudThemeManagerColorItem : ComponentBase
[Parameter]
public ColorPickerView ColorPickerView { get; set; } = ColorPickerView.Spectrum;

[Parameter]
public ColorPickerMode ColorPickerMode { get; set; } = ColorPickerMode.RGB;

public void ToggleOpen()
{
_isOpen = !_isOpen;
Expand Down