Earn More by Sharing What You Love
Do you create content for developers working with .NET, C#, Java, Python, or Node.js? Turn your expertise into extra income!
C#フレームワーク
わずか1行のコードでASP.NET Coreにダークモードを追加します！
Tim Corey
8 分 32 秒
.NET Coreアプリケーションにダークモードを追加したいと思ったことがあるなら、Tim Coreyの最近のYouTubeチュートリアルが最も簡単な方法で説明しています。 このビデオ"Add Dark Mode to ASP.NET Core in Just ONE Line of Code!"で Tim は、Blazor、MVC、Razor Pages を使用しているかどうかに関係なく、Bootstrap 5.3+ と共にダークテーマをたった一行のコードで適用できる方法を示しています。
この記事では、ASP.NET Coreにダークモードを実装する方法を順を追って説明します。
ASP.NET Coreのダークモード機能の紹介
Timはチュートリアルの冒頭で、最近のWebアプリで一般的な要件である、ASP.NET Coreでダークモードを有効にすることを取り上げます。 Blazor、MVC、Razor Pagesのいずれを使用している場合でも、Bootstrap 5.3では、非常にシンプルな方法でダークテーマのサポートが導入されています。
ティムが説明するように、このダークモード機能は1行のコードで有効化できるため、ウェブサイトのユーザーインターフェイスを強化したい開発者にとって、迅速かつ効果的なソリューションとなります。 新しいダークモードのサポートは、システム設定や個人的な好みに基づいて明るいテーマや暗いインターフェイスを好むユーザーにとって特に便利です。
BlazorウェブアプリでBootstrapバージョンをチェックする
TimはVisual Studioを使って、Blazorウェブアプリのプロジェクトを説明します。 彼はwwwrootフォルダに移動し、bootstrap.min.cssファイルを開いて、アプリがBootstrapバージョン5.3.3を使用していることを確認します。1:01では、ダークモードをサポートするにはバージョン5.3以上が必要であることを指摘しています。
あなたのプロジェクトがすでにこのバージョンまたはそれ以降を使用している場合、Bootstrapを更新したり、追加のツールを含める必要はありません。 Bootstrapの古いバージョンでは、data-bs-theme属性を使用したテーマの切り替えがサポートされていないため、これは非常に重要なステップです。
1行のコードでダークテーマを有効にする
この時点で、ティムはApp.razorファイルを開きます。彼は<html>タグをハイライトし、1つのHTML属性を使用してアプリ全体にダークテーマを適用する方法を示します：
data-bs-theme="ダーク"Text
このシンプルな追加機能は、Bootstrapに、ページや要素全体にダークカラースキームを適用するように指示します。 ティムは、行を追加する前と後でアプリを実行し、コントラストを示します。2:03でダークモードをオンにし、テーマが即座に更新されることを確認しています。
ダーク モードでのカスタム CSS の調整
Timは、このワンライナーが全体の背景色とテーマを変更する一方で、既存のCSSがダークテーマと衝突する可能性があることを指摘しています。 例えば、CSSファイルにハードコードされている白文字、フォントサイズ、背景は自動調整されません。
2:34でTimが指摘しているように、カスタムスタイルをたくさん書けば書くほど、編集やテストが必要になる。そのため彼は、調整の必要な要素が少ない開発の初期段階でダークモードから始めることを勧めている。
ライトテーマとダークテーマの切り替え
2:50で、Timはダークとライトのテーマを切り替えることもできることを強調しています。 属性をdata-bs-theme="light "に変更することで、ライトテーマを再び有効にします：
データ-bs-テーマ="light"Text
例えば、JavaScriptやサーバーサイドのロジックを使ってトグルスイッチを追加するなどです。
暗いテーマと明るいテーマを切り替えるこの機能は、特にWindowsアプリやprefers-color-schemeが自動的に検出されるモバイルデバイスで、ユーザーからますます期待されています。
ASP.NET Core のレイアウトの競合を修正する
よくある課題の1つは、トップナビゲーションバーなど、特定の要素でスタイルが一貫していないことだとティムは説明します。 3:12では、レイアウト固有のCSSファイル（MainLayout.razor.css）がデフォルトのBootstrapプロパティをオーバーライドする方法を紹介しています。
彼は、.top-rowセレクタが直接色を設定しているのを発見しました。 Bootstrapが現在のテーマに基づいてスタイルを管理できるように、colorプロパティを削除します（3:47）。
オーバーライドを削除した後、ダークテーマはよりきれいに見えます。 Bootstrapが選択したテーマに基づいて動的に色の値を適用することを示しています。
テーマ固有の CSS ルールの使用
4:17で、ティムはもうひとつ役立つヒントを提供している。開発者はCSSの中でテーマ検出を使用し、アクティブなモードに応じて異なるスタイルを適用することができる。 これにより、data-bs-themeの値に対応し、それに応じてアプリをスタイリングすることができます。
例えば、ユーザーがダークモードとライトモードのどちらを選択したかに基づいて、フォントサイズ、テキストの色、あるいは画像を調整することができます。 これは、2つの別々のスタイルシートを構築することなく、新しいテーマ体験を求める人々のための柔軟性を追加します。
MVCプロジェクトでダークモードを適用する
次に、Bootstrap 5.3を使用していないアプリでダークモードを有効にする方法を紹介するため、古いASP.NET MVCプロジェクトに移動します。Bootstrap CSSファイルを開くと、バージョン5.1.0であり、ダークモードをサポートしていないことに気づきます（5:07）。
CDNでMVCのBootstrapをアップグレードする
Timは、ローカルのBootstrapファイルをGetBootstrap websiteのCDNバージョンに置き換えることを推奨しています。 5:51で、彼はCDNリンクを˶_Layout.cshtmlビューに貼り付け、CSSとJavaScriptのインクルードを更新します。
そうすることで、新しいバージョンのBootstrapのおかげで、MVCアプリがテーマの切り替えをサポートするようになりました。また、CDNは、特に初めての訪問者のために、ウェブサイトを高速化するのに役立つ可能性があることを指摘している。
ダーク モード用のナビゲーション スタイリングの調整
ダークテーマを有効にした後、Timはいくつかのナビバースタイルがそれと衝突することに気づきました。 6:40では、暗い外観を乱す明るい色を強制するnavbar-lightとbg-whiteクラスを削除している。
一度削除すると、ナビゲーションバーはダークモードに適切に適応します。 しかしTimは、色が上書きされる他のテキスト要素やコンポーネントには、まだ手作業で対応する必要があるかもしれないと注意を促している（6:57）。 そこで、テーマを意識したCSSを記述したり、CSS変数を使用して管理を簡単にしたりするとよいでしょう。
概要: Bootstrap 5.3 テーマのサポート
最後にTimは、Bootstrap 5.3はダークテーマとライトテーマの両方を完全にサポートしているが、カスタムCSSはサポートされていない可能性があることを繰り返し説明して、締めくくりました。 スタイルを適切に構成し、クラスを使用し、ハードコードされた色を避ければ、テーマの切り替えがスムーズになります。
8:00では、単に"：
data-bs-theme="ダーク"Text
を<html>タグに追加すると、ASP.NETウェブサイト全体でダークモードが有効になります。テーブル、カード、セクションなどの特定の要素に属性を適用することもでき、1つのページでテーマを組み合わせることができます。
ティム・コーリーからの最後のヒント
BootstrapやASP.NET Coreでのテーマ設定に真剣に取り組んでいる方には、レイアウトシステム、テーマ設定戦略、アクセシビリティのベストプラクティスなど、より深い概念に踏み込んだBootstrapの完全なコースもあります。
Tim Corey 氏の video チュートリアルに従えば、わずか 1 ステップで .NET Core アプリにダークモードを実装し、カスタム CSS、テーマ検出、トグル機能を使って微調整することができます。 Windows、Web、またはその他のプラットフォーム向けにアプリを構築している場合でも、この方法を使用することで、テーマを簡単に切り替える柔軟性が得られ、ユーザーを満足させることができます。
Let's Stay in Touch!
Join our newsletter, you’ll get exclusive access on article updates. We value your privacy
