[ASP.NET Blazor Server][MudBlazor]　MudBlazorの使い方3

「 ダークモードとライトモードをボタン一つで切り替える機能の作り方」 を見てみましょう。

今のWebアプリでは、ダークモードの切り替え機能は必須と言っても過言ではありません。

MudBlazorなら、複雑なCSSを一切書かずに、C#の「True（真）」か「False（偽）」を切り替えるだけで、アプリ全体をダークモードに変化させることができます。

先ほど登場した MudThemeProvider には、IsDarkMode という専用のスイッチ（プロパティ）が用意されています。これとボタンを連動させる手順を見ていきましょう。

ダークモード切り替えの実装ステップ

1. 状態を記憶する変数を準備する まずは C# 側（@code）に、現在ダークモードかどうかを記憶する bool 型（True/False）の変数を用意します。

2. MudThemeProvider に変数を教える 用意した変数を MudThemeProvider の IsDarkMode に紐づけます。

3. ボタンを押したときに変数を反転させる ボタンが押されるたびに、True なら False に、False なら True に切り替える処理を書きます。

実際のコードにすると、このようになります。

<MudThemeProvider IsDarkMode="@_isDarkMode" />

<MudLayout>
    <MudAppBar Color="Color.Primary">
        MudBlazorアプリ
        <MudSpacer /> <MudIconButton Icon="@Icons.Material.Filled.Brightness4" 
                       Color="Color.Inherit" 
                       OnClick="ToggleDarkMode" />
    </MudAppBar>

    <MudMainContent>
        <MudContainer>
            <MudText Typo="Typo.h3">こんにちは！</MudText>
            <MudText>右上のアイコンを押すと画面の色が変わります。</MudText>
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    // ダークモードの状態を管理する変数（初期値はFalse＝ライトモード）
    private bool _isDarkMode = false;

    // ボタンが押されたときに動くメソッド
    private void ToggleDarkMode()
    {
        // !記号を使うと、TrueとFalseが反転します
        _isDarkMode = !_isDarkMode; 
    }
}

ここでの注目ポイント

• MudIconButton とアイコンの利用: ここでは MudButton（文字のボタン）ではなく、アイコンだけの MudIconButton を使っています。MudBlazorにはマテリアルデザインのアイコンが標準で内蔵されており、@Icons.Material.Filled.Brightness4（半月のようなアイコン）と書くだけで、すぐにプロ並みの見た目になります。
• 一斉切り替えの魔法: _isDarkMode が True に切り替わった瞬間、MudThemeProvider がそれを検知し、アプリ内の背景色、文字色、ボタンの色などをすべて自動的に暗い色調（ダークパレット）に再計算してくれます。

もし「ダークモードの時の背景色をもっと真っ黒にしたい」という場合は、先ほどのテーマ設定で PaletteDark の色を細かく指定すれば、自分好みのダークモードを作ることも可能です。