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# 框架
在ASP.NET Core中只需一行程式碼即可新增深色模式！
Tim Corey
8m 32s
如果您曾經想將黑暗模式新增到您的ASP.NET Core應用程式中，那麼Tim Corey最近的YouTube教程以最簡單的方式分解了它。 在這段影片中"只需一行程式碼即可將黑暗模式新增到ASP.NET Core中！"中，Tim展示了如何在使用Bootstrap 5.3+時僅用一行程式碼應用黑暗主題，無論您是在使用Blazor、MVC還是Razor Pages。
在本文中，我們將逐步了解如何在ASP.NET Core中實施黑暗模式。
介紹ASP.NET Core中的黑暗模式功能
Tim在教程中首先處理了現代網路應用程式中的一個常見需求——在ASP.NET Core中啟用黑暗模式。 無論您是在使用Blazor、MVC還是Razor Pages，Bootstrap 5.3都引入了一種非常簡單的方法來支持黑暗主題。
正如Tim所解釋的，這個黑暗模式功能可以用一行程式碼啟動——這對於那些希望增強其網站使用者介面的開發者來說是一個快速且有效的解決方案。 新的黑暗模式支持對於那些根據系統設置或個人偏好喜歡明亮主題或黑暗介面的使用者特別有用。
檢查Blazor Web App中的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>標籤並演示如何使用一個HTML屬性將黑暗主題應用到整個應用程式：
data-bs-theme="dark"Text
這個簡單的新增告訴Bootstrap在您的頁面和元素上應用黑暗色彩方案。 Tim在新增這行程式碼前和後運行應用程式以展示對比。在2:03，他打開了黑暗模式並確認主題立即更新。
調整黑暗模式中的自定義CSS
Tim指出，雖然這個單行程式碼改變了整體背景顏色和主題，但現有的CSS可能仍與黑暗主題衝突。 例如，您CSS文件中硬編碼的白色文字、字體大小或背景不會自動調整。
正如Tim在2:34指出的那樣，您編寫的自定義樣式越多，您需要編輯和測試的部分就越多。因此他建議在開發初期就開始使用黑暗模式，當時需要調整的元素較少。
在亮暗主題之間切換
在2:50，Tim強調您也可以在黑暗和明亮主題之間切換。 通過將屬性更改為 data-bs-theme="light"，您可以再次啟用明亮主題：
data-bs-theme="light"Text
Tim建議開發者可以允許使用者選擇他們的主題偏好——例如，通過使用JavaScript或伺服器端邏輯新增切換開關。
使用者對於能夠在黑暗和明亮主題之間切換的需求越來越高，尤其是在Windows應用程式或偏好顏色方案自動檢測的移動裝置上。
修復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"Text
到您的<html>標籤中，即可在整個ASP.NET網站中激活黑暗模式。您甚至可以將屬性應用到特定元素，例如表格、卡片或節，允許您在單個頁面上結合主題。
Tim Corey的最後提示
如果您對Bootstrap或ASP.NET Core中的主題興趣濃厚，Tim還有一個完整的Bootstrap課程，深入探討包括佈局系統、主題策略和最佳的可存取性做法等更深層次的概念。
通過跟隨Tim Corey的影片教程，您可以在ASP.NET Core應用程式中實現黑暗模式，只需一步之遙——並使用自定義CSS、主題檢測和切換功能進行微調。 無論您是在為Windows、網路還是其他平台構建應用程式，這種方法都為您提供靈活的主題切換，輕鬆保持使用者滿意。
Let's Stay in Touch!
Join our newsletter, you’ll get exclusive access on article updates. We value your privacy
