Skip to content

Commit ce5ceec

Browse files
committed
Add MudBlazor v7 support
1 parent 15a44de commit ce5ceec

9 files changed

Lines changed: 127 additions & 127 deletions

File tree

src/MudBlazor.ThemeManager.TestApp/Pages/Index.razor

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
<MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
8585
</MudBadge>
8686
<MudBadge Icon="@Icons.Material.Filled.Lock" Color="Color.Error" Overlap="true" Bordered="true" Class="mx-6 my-4">
87-
<MudButton Color="Color.Error" Variant="Variant.Filled" DisableElevation="true">Security Issues</MudButton>
87+
<MudButton Color="Color.Error" Variant="Variant.Filled" DropShadow="false">Security Issues</MudButton>
8888
</MudBadge>
8989
<MudBadge Dot="true" Color="Color.Info" Class="mx-6 my-4">
9090
<MudText>Bug Reports</MudText>
@@ -93,14 +93,14 @@
9393
</MudItem>
9494
<MudItem xs="12" sm="6" md="4">
9595
<MudPaper Class="pa-4 d-flex justify-space-around flex-wrap" MinHeight="100px" Height="100%">
96-
<MudChip Class="my-auto">Default</MudChip>
97-
<MudChip Color="Color.Primary" Class="my-auto">Primary</MudChip>
98-
<MudChip Color="Color.Secondary" Class="my-auto">Secondary</MudChip>
99-
<MudChip Color="Color.Info" Class="my-auto">Info</MudChip>
100-
<MudChip Color="Color.Success" Class="my-auto">Success</MudChip>
101-
<MudChip Color="Color.Warning" Class="my-auto">Warning</MudChip>
102-
<MudChip Color="Color.Error" Class="my-auto">Error</MudChip>
103-
<MudChip Color="Color.Dark" Class="my-auto">Dark</MudChip>
96+
<MudChip T="string" Class="my-auto">Default</MudChip>
97+
<MudChip T="string" Color="Color.Primary" Class="my-auto">Primary</MudChip>
98+
<MudChip T="string" Color="Color.Secondary" Class="my-auto">Secondary</MudChip>
99+
<MudChip T="string" Color="Color.Info" Class="my-auto">Info</MudChip>
100+
<MudChip T="string" Color="Color.Success" Class="my-auto">Success</MudChip>
101+
<MudChip T="string" Color="Color.Warning" Class="my-auto">Warning</MudChip>
102+
<MudChip T="string" Color="Color.Error" Class="my-auto">Error</MudChip>
103+
<MudChip T="string" Color="Color.Dark" Class="my-auto">Dark</MudChip>
104104
</MudPaper>
105105
</MudItem>
106106
<MudItem xs="12" sm="12" md="4">

src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@inherits LayoutComponentBase
22

33
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode" />
4+
<MudPopoverProvider />
45
<MudDialogProvider />
56
<MudSnackbarProvider />
67

@@ -25,12 +26,12 @@
2526
</MudLayout>
2627

2728
@code {
28-
private ThemeManagerTheme _themeManager = new ThemeManagerTheme();
29+
private ThemeManagerTheme _themeManager = new();
2930
private MudThemeProvider _mudThemeProvider;
3031

3132
private bool _isDarkMode;
32-
public bool _drawerOpen = true;
33-
public bool _themeManagerOpen = false;
33+
private bool _drawerOpen = true;
34+
private bool _themeManagerOpen;
3435

3536
private void DrawerToggle()
3637
{
@@ -63,5 +64,6 @@
6364
_isDarkMode = await _mudThemeProvider.GetSystemPreference();
6465
StateHasChanged();
6566
}
67+
await base.OnAfterRenderAsync(firstRender);
6668
}
6769
}
Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
@namespace MudBlazor.ThemeManager
2+
@inherits ComponentBaseWithState
23

34
<CascadingValue Value="this">
4-
<MudDrawer @bind-Open="@Open" Anchor="Anchor.End" Elevation="25" Variant="@DrawerVariant.Temporary" DisableOverlay="true" Width="312px">
5+
<MudDrawer @bind-Open:get="_openState.Value" @bind-Open:set="_openState.SetValueAsync" Anchor="Anchor.End" Elevation="25" Variant="@DrawerVariant.Temporary" Overlay="false" Width="312px">
56
<div class="pt-4 px-4">
67
<MudText Typo="Typo.h6">Theme Presets</MudText>
7-
<MudSelect T="string" @bind-Value="@ThemePresets" Disabled="true" DisableUnderLine="true">
8+
<MudSelect T="string" @bind-Value="@ThemePresets" Disabled="true" Underline="false">
89
<MudSelectItem Value="@("Not Implemented")" />
910
</MudSelect>
1011
</div>
1112
<MudDivider Class="my-2" />
1213
<div class="pt-2 px-4">
1314
<MudText Typo="Typo.h6" Class="mb-4">Custom Settings</MudText>
14-
<MudSelect Label="Drawer ClipMode" T="DrawerClipMode" Value="@Theme.DrawerClipMode" ValueChanged="OnDrawerClipModeAsync" Dense="true" DisableUnderLine="true" Class="my-2">
15+
<MudSelect Label="Drawer ClipMode" T="DrawerClipMode" Value="@Theme.DrawerClipMode" ValueChanged="OnDrawerClipModeAsync" Dense="true" Underline="false" Class="my-2">
1516
<MudSelectItem T="DrawerClipMode" Value="DrawerClipMode.Never">Never</MudSelectItem>
1617
<MudSelectItem T="DrawerClipMode" Value="DrawerClipMode.Docked">Docked</MudSelectItem>
1718
<MudSelectItem T="DrawerClipMode" Value="DrawerClipMode.Always">Always</MudSelectItem>
1819
</MudSelect>
19-
<MudSelect Label="Font Family" T="string" Value="@Theme.FontFamily" ValueChanged="OnFontFamilyAsync" Dense="true" DisableUnderLine="true" Class="my-2">
20+
<MudSelect Label="Font Family" T="string" Value="@Theme.FontFamily" ValueChanged="OnFontFamilyAsync" Dense="true" Underline="false" Class="my-2">
2021
<MudSelectItem T="string" Value="@("Roboto")" />
2122
<MudSelectItem T="string" Value="@("Montserrat")" />
2223
<MudSelectItem T="string" Value="@("Segoe UI")" />
@@ -29,41 +30,41 @@
2930
</div>
3031
<div class="pt-6">
3132
<MudText Typo="Typo.body2" GutterBottom="true" Class="mx-4 mb-4"><b>Theme Colors</b></MudText>
32-
<MudThemeManagerColorItem Name="Primary" ThemeColor="@_customTheme.Palette.Primary" ColorType="ThemePaletteColor.Primary" ColorPickerView="ColorPickerView" />
33-
<MudThemeManagerColorItem Name="Secondary" ThemeColor="@_customTheme.Palette.Secondary" ColorType="ThemePaletteColor.Secondary" ColorPickerView="ColorPickerView" />
34-
<MudThemeManagerColorItem Name="Tertiary" ThemeColor="@_customTheme.Palette.Tertiary" ColorType="ThemePaletteColor.Tertiary" ColorPickerView="ColorPickerView" />
35-
<MudThemeManagerColorItem Name="Info" ThemeColor="@_customTheme.Palette.Info" ColorType="ThemePaletteColor.Info" ColorPickerView="ColorPickerView" />
36-
<MudThemeManagerColorItem Name="Success" ThemeColor="@_customTheme.Palette.Success" ColorType="ThemePaletteColor.Success" ColorPickerView="ColorPickerView" />
37-
<MudThemeManagerColorItem Name="Warning" ThemeColor="@_customTheme.Palette.Warning" ColorType="ThemePaletteColor.Warning" ColorPickerView="ColorPickerView" />
38-
<MudThemeManagerColorItem Name="Error" ThemeColor="@_customTheme.Palette.Error" ColorType="ThemePaletteColor.Error" ColorPickerView="ColorPickerView" />
39-
<MudThemeManagerColorItem Name="Dark" ThemeColor="@_customTheme.Palette.Dark" ColorType="ThemePaletteColor.Dark" ColorPickerView="ColorPickerView" />
33+
<MudThemeManagerColorItem Name="Primary" ThemeColor="@_currentPalette.Primary" ColorType="ThemePaletteColor.Primary" ColorPickerView="ColorPickerView" />
34+
<MudThemeManagerColorItem Name="Secondary" ThemeColor="@_currentPalette.Secondary" ColorType="ThemePaletteColor.Secondary" ColorPickerView="ColorPickerView" />
35+
<MudThemeManagerColorItem Name="Tertiary" ThemeColor="@_currentPalette.Tertiary" ColorType="ThemePaletteColor.Tertiary" ColorPickerView="ColorPickerView" />
36+
<MudThemeManagerColorItem Name="Info" ThemeColor="@_currentPalette.Info" ColorType="ThemePaletteColor.Info" ColorPickerView="ColorPickerView" />
37+
<MudThemeManagerColorItem Name="Success" ThemeColor="@_currentPalette.Success" ColorType="ThemePaletteColor.Success" ColorPickerView="ColorPickerView" />
38+
<MudThemeManagerColorItem Name="Warning" ThemeColor="@_currentPalette.Warning" ColorType="ThemePaletteColor.Warning" ColorPickerView="ColorPickerView" />
39+
<MudThemeManagerColorItem Name="Error" ThemeColor="@_currentPalette.Error" ColorType="ThemePaletteColor.Error" ColorPickerView="ColorPickerView" />
40+
<MudThemeManagerColorItem Name="Dark" ThemeColor="@_currentPalette.Dark" ColorType="ThemePaletteColor.Dark" ColorPickerView="ColorPickerView" />
4041

4142
<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>Components</b></MudText>
42-
<MudThemeManagerColorItem Name="Appbar Text" ThemeColor="@_customTheme.Palette.AppbarText" ColorType="ThemePaletteColor.AppbarText" ColorPickerView="ColorPickerView" />
43-
<MudThemeManagerColorItem Name="Appbar BG" ThemeColor="@_customTheme.Palette.AppbarBackground" ColorType="ThemePaletteColor.AppbarBackground" ColorPickerView="ColorPickerView" />
44-
<MudThemeManagerColorItem Name="Drawer Text" ThemeColor="@_customTheme.Palette.DrawerText" ColorType="ThemePaletteColor.DrawerText" ColorPickerView="ColorPickerView" />
45-
<MudThemeManagerColorItem Name="Drawer Icons" ThemeColor="@_customTheme.Palette.DrawerIcon" ColorType="ThemePaletteColor.DrawerIcon" ColorPickerView="ColorPickerView" />
46-
<MudThemeManagerColorItem Name="Drawer BG" ThemeColor="@_customTheme.Palette.DrawerBackground" ColorType="ThemePaletteColor.DrawerBackground" ColorPickerView="ColorPickerView" />
43+
<MudThemeManagerColorItem Name="Appbar Text" ThemeColor="@_currentPalette.AppbarText" ColorType="ThemePaletteColor.AppbarText" ColorPickerView="ColorPickerView" />
44+
<MudThemeManagerColorItem Name="Appbar BG" ThemeColor="@_currentPalette.AppbarBackground" ColorType="ThemePaletteColor.AppbarBackground" ColorPickerView="ColorPickerView" />
45+
<MudThemeManagerColorItem Name="Drawer Text" ThemeColor="@_currentPalette.DrawerText" ColorType="ThemePaletteColor.DrawerText" ColorPickerView="ColorPickerView" />
46+
<MudThemeManagerColorItem Name="Drawer Icons" ThemeColor="@_currentPalette.DrawerIcon" ColorType="ThemePaletteColor.DrawerIcon" ColorPickerView="ColorPickerView" />
47+
<MudThemeManagerColorItem Name="Drawer BG" ThemeColor="@_currentPalette.DrawerBackground" ColorType="ThemePaletteColor.DrawerBackground" ColorPickerView="ColorPickerView" />
4748

4849
<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>General</b></MudText>
49-
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_customTheme.Palette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
50-
<MudThemeManagerColorItem Name="Background" ThemeColor="@_customTheme.Palette.Background" ColorType="ThemePaletteColor.Background" ColorPickerView="ColorPickerView" />
51-
<MudThemeManagerColorItem Name="Background Grey" ThemeColor="@_customTheme.Palette.BackgroundGrey" ColorType="ThemePaletteColor.BackgroundGrey" ColorPickerView="ColorPickerView" />
52-
<MudThemeManagerColorItem Name="Lines Default" ThemeColor="@_customTheme.Palette.LinesDefault" ColorType="ThemePaletteColor.LinesDefault" ColorPickerView="ColorPickerView" />
53-
<MudThemeManagerColorItem Name="Lines Inputs" ThemeColor="@_customTheme.Palette.LinesInputs" ColorType="ThemePaletteColor.LinesInputs" ColorPickerView="ColorPickerView" />
54-
<MudThemeManagerColorItem Name="Divider" ThemeColor="@_customTheme.Palette.Divider" ColorType="ThemePaletteColor.Divider" ColorPickerView="ColorPickerView" />
55-
<MudThemeManagerColorItem Name="Divider Light" ThemeColor="@_customTheme.Palette.DividerLight" ColorType="ThemePaletteColor.DividerLight" ColorPickerView="ColorPickerView" />
50+
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
51+
<MudThemeManagerColorItem Name="Background" ThemeColor="@_currentPalette.Background" ColorType="ThemePaletteColor.Background" ColorPickerView="ColorPickerView" />
52+
<MudThemeManagerColorItem Name="Background Gray" ThemeColor="@_currentPalette.BackgroundGray" ColorType="ThemePaletteColor.BackgroundGray" ColorPickerView="ColorPickerView" />
53+
<MudThemeManagerColorItem Name="Lines Default" ThemeColor="@_currentPalette.LinesDefault" ColorType="ThemePaletteColor.LinesDefault" ColorPickerView="ColorPickerView" />
54+
<MudThemeManagerColorItem Name="Lines Inputs" ThemeColor="@_currentPalette.LinesInputs" ColorType="ThemePaletteColor.LinesInputs" ColorPickerView="ColorPickerView" />
55+
<MudThemeManagerColorItem Name="Divider" ThemeColor="@_currentPalette.Divider" ColorType="ThemePaletteColor.Divider" ColorPickerView="ColorPickerView" />
56+
<MudThemeManagerColorItem Name="Divider Light" ThemeColor="@_currentPalette.DividerLight" ColorType="ThemePaletteColor.DividerLight" ColorPickerView="ColorPickerView" />
5657

5758

5859
<MudText Typo="Typo.body2" GutterBottom="true" Class="pt-4 mx-4"><b>Text & Actions</b></MudText>
59-
<MudThemeManagerColorItem Name="Text Primary" ThemeColor="@_customTheme.Palette.TextPrimary" ColorType="ThemePaletteColor.TextPrimary" ColorPickerView="ColorPickerView" />
60-
<MudThemeManagerColorItem Name="Text Secondary" ThemeColor="@_customTheme.Palette.TextSecondary" ColorType="ThemePaletteColor.TextSecondary" ColorPickerView="ColorPickerView" />
61-
<MudThemeManagerColorItem Name="Text Disabled" ThemeColor="@_customTheme.Palette.TextDisabled" ColorType="ThemePaletteColor.TextDisabled" ColorPickerView="ColorPickerView" />
62-
<MudThemeManagerColorItem Name="Action Default" ThemeColor="@_customTheme.Palette.Surface" ColorType="ThemePaletteColor.ActionDefault" ColorPickerView="ColorPickerView" />
63-
<MudThemeManagerColorItem Name="Action Disabled" ThemeColor="@_customTheme.Palette.ActionDisabled" ColorType="ThemePaletteColor.ActionDisabled" ColorPickerView="ColorPickerView" />
64-
<MudThemeManagerColorItem Name="Disabled BG" ThemeColor="@_customTheme.Palette.ActionDisabledBackground" ColorType="ThemePaletteColor.ActionDisabledBackground" ColorPickerView="ColorPickerView" />
65-
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_customTheme.Palette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
60+
<MudThemeManagerColorItem Name="Text Primary" ThemeColor="@_currentPalette.TextPrimary" ColorType="ThemePaletteColor.TextPrimary" ColorPickerView="ColorPickerView" />
61+
<MudThemeManagerColorItem Name="Text Secondary" ThemeColor="@_currentPalette.TextSecondary" ColorType="ThemePaletteColor.TextSecondary" ColorPickerView="ColorPickerView" />
62+
<MudThemeManagerColorItem Name="Text Disabled" ThemeColor="@_currentPalette.TextDisabled" ColorType="ThemePaletteColor.TextDisabled" ColorPickerView="ColorPickerView" />
63+
<MudThemeManagerColorItem Name="Action Default" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.ActionDefault" ColorPickerView="ColorPickerView" />
64+
<MudThemeManagerColorItem Name="Action Disabled" ThemeColor="@_currentPalette.ActionDisabled" ColorType="ThemePaletteColor.ActionDisabled" ColorPickerView="ColorPickerView" />
65+
<MudThemeManagerColorItem Name="Disabled BG" ThemeColor="@_currentPalette.ActionDisabledBackground" ColorType="ThemePaletteColor.ActionDisabledBackground" ColorPickerView="ColorPickerView" />
66+
<MudThemeManagerColorItem Name="Surface" ThemeColor="@_currentPalette.Surface" ColorType="ThemePaletteColor.Surface" ColorPickerView="ColorPickerView" />
6667
</div>
6768
</MudDrawer>
68-
<MudOverlay @bind-Visible="Open" OnClick="@UpdateOpenValueAsync" DarkBackground="false" />
69+
<MudOverlay @bind-Visible:get="_openState.Value" @bind-Visible:set="_openState.SetValueAsync" OnClick="@UpdateOpenValueAsync" DarkBackground="false" />
6970
</CascadingValue>

0 commit comments

Comments
 (0)