ThemeManager/src/MudBlazor.ThemeManager.TestApp/Shared/MainLayout.razor at da26ee191acaa1fa4f55a2d29d378a9392f6c43c · MudBlazor/ThemeManager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
@using MudBlazor.ThemeManager.TestApp.MudThemePresets
@inherits LayoutComponentBase

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode"
                  @ref="@_mudThemeProvider"
                  Theme="_themeManager.Theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="_themeManager.AppBarElevation" >
        <MudIconButton Color="Color.Inherit"
                       Edge="Edge.Start"
                       Icon="@Icons.Material.Filled.Menu"
                       OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Color="Color.Inherit"
                       Edge="Edge.End"
                       Icon="@Icons.Material.Filled.DarkMode"
                       OnClick="@((e) => DarkModeToggle())" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen"
               ClipMode="_themeManager.DrawerClipMode"
               Elevation="_themeManager.DrawerElevation" >
        <MudText Class="px-4 pt-2"
                 Typo="Typo.h6" >
            Theme Manager
        </MudText>
        <MudText Class="px-4 mud-text-secondary"
                 Typo="Typo.body2" >
            Test Application
        </MudText>
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        <MudContainer Class="mt-16 px-16"
                      MaxWidth="MaxWidth.False" >
            @Body
        </MudContainer>
    </MudMainContent>
    <MudThemeManagerButton OnClick="@((e) => OpenThemeManager(true))" />
    <MudThemeManager IsDarkMode="@_isDarkMode"
                     Open="_themeManagerOpen"
                     OpenChanged="OpenThemeManager"
                     Theme="_themeManager"
                     ThemeChanged="UpdateTheme"
                     ThemePresets="_themePresets" />
</MudLayout>

@code {
    private ThemeManagerTheme _themeManager = new();
    private MudThemeProvider _mudThemeProvider;
    private IEnumerable<IThemePreset>? _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)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }


    protected override void OnInitialized()
    {
        _themePresets = [new CustomThemePreset01(), new CustomThemePreset02()];
    }
}