添加暗模式到ASP.NET Core只需一行代碼！

在ASP.NET Core中引入暗黑模式功能

Tim在教程中開始時解決了現代網頁應用程式中的一個常見需求 — 在ASP.NET Core中啟用暗黑模式。 無論您使用的是Blazor、MVC或Razor Pages，Bootstrap 5.3以非常簡單的方式引入對暗黑主題的支持。

正如Tim解釋的那樣，僅一行程式碼即可啟用此暗黑模式功能，這是一個快速且有效的解決方案，可供希望增強網站使用者介面的開發人員使用。 新的暗黑模式支持對於依賴系統設置或個人偏好的使用者來說特別有用。

在Blazor Web應用中檢查Bootstrap版本

Tim使用Visual Studio逐步分析了一個Blazor Web應用專案。 他導航到wwwroot文件夾並打開bootstrap.min.css文件以確認應用使用的是Bootstrap版本5.3.3。 在1:01處，他說明版本5.3或更高版本需要支持暗黑模式。

如果您的專案已經使用此版本或更新版本，則無需更新Bootstrap或包含其他工具。 這是一個關鍵步驟，因為舊版本的Bootstrap不支持使用data-bs-theme屬性的主題切換。

用一行程式碼啟用暗黑主題

此時，Tim打開了App.razor文件。他強調了標籤並演示了如何通過一個HTML屬性將暗黑主題應用於整個應用：

data-bs-theme="dark"

這個簡單的附加告訴Bootstrap在您的頁面和元素上應用暗黑配色方案。 Tim在添加該行程式碼之前和之後運行了該應用以展示對比。在2:03處，他開啟了暗黑模式並確認主題會立即更新。

調整暗黑模式中的自定義CSS

Tim指出，雖然這一條可以改變整體背景顏色和主題，但現有的CSS可能仍會與暗黑主題衝突。 例如，硬編碼在CSS文件中的白色文本、字體大小或背景不會自動調整。

正如Tim在2:34指出的那樣，您編寫的自定義樣式越多，您需要編輯和測試的就越多。這就是為什麼他建議在開發初期就開始使用暗黑模式，以便於調整較少的元素。

在亮暗主題之間切換

在2:50處，Tim強調您還可以在暗黑和亮色主題之間切換。 通過將屬性更改為data-bs-theme="light"，您可以重新激活亮色主題：

data-bs-theme="light"

Tim建議開發人員可以允許使用者選擇他們的主題偏好 — 例如，使用JavaScript或伺服器端邏輯添加一個切換開關。

這種在亮色和暗黑主題之間切換的能力越來越受到使用者的期待，尤其是在Windows應用程序或移動設備上，自動檢測prefers-color-scheme屬性時。

修復ASP.NET Core中的佈局衝突

Tim解釋說，其中一個常見挑戰是不一致的樣式 — 如頂級導航欄上的某些元素。 在3:12，他展示了一個特定於佈局的CSS文件(MainLayout.razor.css)覆蓋了Bootstrap的默認屬性。

他發現一個.top-row選擇器直接設置了顏色，這與主題設置無法相應變化。 他的解決方案：移除顏色屬性，以便Bootstrap可以根據當前主題管理樣式(3:47)。

移除覆蓋後，暗黑主題看起來更清晰。 當他切換回亮色主題時，一切仍然正常運作 — 顯示Bootstrap會根據選擇的主題動態應用顏色值。

使用主題特定的CSS規則

在4:17，Tim提供了另一個有用的提示: 開發人員可以在CSS中使用主題檢測來應用不同的樣式，根據當前模式進行調整。 這讓您可以對data-bs-theme值作出反應，並相應地設計您的應用。

例如，您可以根據使用者選擇暗黑或亮色模式調整字體大小、文字顏色，甚至圖片。 這增加了靈活性，適合那些希望不建立兩套不同樣式表就能獲得新的主題體驗的人。

在MVC專案中應用暗黑模式

接下來，Tim轉到一個較舊的ASP.NET MVC專案，以展示如何在尚未使用Bootstrap 5.3的應用程式中啟用暗黑模式。當他打開Bootstrap CSS文件時，發現其版本為5.1.0，不支持暗黑模式(5:07)。

在MVC中使用CDN升級Bootstrap

Tim建議用GetBootstrap網站的CDN版本替換本地Bootstrap文件。 在5:51處，他將CDN鏈接粘貼到_Layout.cshtml視圖中，更新了CSS和JavaScript的包含。

通過這樣做，MVC應用程序現在支持主題切換，得益於Bootstrap的新版本。他還指出，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="dark"

到您的標籤中即可激活整個ASP.NET網站的暗黑模式。您甚至可以將屬性應用於一個特定元素，例如表格、卡片或部分，讓您能夠在單一頁面上組合不同的主題。

Tim Corey的最終提示

如果您真心想了解Bootstrap或ASP.NET Core中的主題設計，Tim還有一門完整的Bootstrap課程，深入探討布局系統、主題策略和無障礙的最佳實踐。

透過遵循Tim Corey的影片教程，不到一步即可在您的ASP.NET Core應用中實現暗黑模式 — 並使用自訂CSS、主題檢測和切換功能進行微調。 無論您是為Windows、網頁或其他平台構建應用，此方法都可讓您輕鬆切換主題並讓您的使用者滿意。