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
8分32秒
如果您曾想在 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 应用程序中检查 Bootstrap 版本
Tim 使用 Visual Studio 演示 Blazor 网络应用程序项目。 他导航到 wwwroot 文件夹，打开 bootstrap.min.css 文件，确认应用程序使用的是 Bootstrap 5.3.3 版本。在 1:01 处，他指出需要 5.3 或更高版本才能支持暗模式。
如果您的项目已经使用此版本或更高版本，则无需更新 Bootstrap 或添加额外的工具。 这是至关重要的一步，因为旧版本的 Bootstrap 不支持使用 data-bs-theme 属性进行主题切换。
一行代码启用深色主题
此时，蒂姆打开 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 应用程序或移动设备上，因为在这些应用程序或移动设备上会自动检测到 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）。
使用 CDN 在 MVC 中升级 Bootstrap.
Tim 建议将本地 Bootstrap 文件替换为 GetBootstrap 网站上的 CDN 版本。 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、Web 还是其他平台开发应用程序，这种方法都能让您灵活地切换主题，让用户满意。
Let's Stay in Touch!
Join our newsletter, you’ll get exclusive access on article updates. We value your privacy
