次はレイアウトとテーマ設定について見ていきましょう。
Webアプリを作るとき、ページごとにヘッダーやサイドメニューを毎回ゼロから作るのは大変です。MudBlazorでは、これらを簡単に構築するための「枠組み（レイアウト）」専用のコンポーネントが用意されています。
大きく分けて、以下の4つのパーツを組み合わせて作ります。
-
MudLayout: アプリ全体のいちばん外側の枠組みです。 -
MudAppBar: 画面上部に固定されるヘッダー（ナビゲーションバー）です。 -
MudDrawer: 画面の横から出てくるサイドメニュー（引き出し）です。 -
MudMainContent: 実際にユーザーが見る各ページの中身（メインコンテンツ）が展開される場所です。
これらを組み合わせると、大枠のコードはこのようになります。
<MudLayout>
<MudAppBar Color="Color.Primary">
アプリのタイトル
</MudAppBar>
<MudDrawer Open="true">
メニュー項目1
メニュー項目2
</MudDrawer>
<MudMainContent>
ここに各ページの内容が表示されます
</MudMainContent>
</MudLayout>
さらに、MudBlazorには MudThemeProvider という強力な機能があります。 これを追加することで、アプリ全体の「テーマ（基調となる色やフォント）」を一括で管理できます。例えば「プライマリカラー（メインの色）を青から紫に変更する」と設定するだけで、アプリ内にあるすべての MudButton や MudAppBar の色が自動的に切り替わります
それでは、このレイアウトの仕組みについて、実際にアプリを作っている場面を想像して考えてみましょう。
もし、あなたが「ログアウト」ボタンを作るとします。このボタンは、ユーザーがどのページを開いていても、常に画面の右上に表示させておきたいと考えています。
その場合、先ほどの4つのコンポーネント（MudLayout, MudAppBar, MudDrawer, MudMainContent）のうち、どこに「ログアウト」ボタンのコードを配置するのが一番適切だと思いますか？
正解は MudAppBar（上部のヘッダー） の中でした！ MudAppBar に配置しておけば、ユーザーが MudMainContent の中でどのページに移動しても、常に画面上部に残り続けるからです。
アプリの「テーマ（色合い）」をカスタマイズする
レイアウトの枠組みができたら、次はアプリ全体の色やデザイン（テーマ）を設定します。 MudBlazorでは、青色（Primary）やピンク色（Secondary）など、あらかじめデフォルトの色が設定されていますが、これを自分のアプリのブランドカラーに一括で変更することができます。
これを行うのが MudThemeProvider と MudTheme です。
例えば、「うちのアプリのメインカラーは『緑』で、ヘッダーの背景は『ダークグレー』にしたい！」という場合は、C#側で自分専用のテーマ（パレット）を作成します。
<MudThemeProvider Theme="@MyCustomTheme" />
<MudLayout>
<MudAppBar>アプリのタイトル</MudAppBar>
<MudMainContent>コンテンツ</MudMainContent>
</MudLayout>
@code {
// 自分専用のテーマを作成
private MudTheme MyCustomTheme = new MudTheme()
{
PaletteLight = new PaletteLight()
{
Primary = Colors.Green.Default, // メインカラーを緑に
AppbarBackground = Colors.Grey.Darken3 // ヘッダー背景をダークグレーに
}
};
}
このように MudTheme を1つ定義して MudThemeProvider に渡すだけで、アプリ内にあるすべての MudButton(Color="Color.Primary") が一斉に緑色に変わります。一つ一つのボタンの色をCSSで書き直す必要がないので、デザインの管理が劇的に楽になります
さらに、MudBlazorは現代のWebアプリに欠かせない 「ダークモード（黒背景）」 にも標準で対応しています。PaletteLight（明るいテーマ）とは別に、PaletteDark（暗いテーマ）を設定することも可能です。
さて、ここまでの「レイアウトとテーマ」の全体像はいかがでしたか？
コメント