如何在 Blazor 项目中设置深色主题

Question

如何在 Blazor 项目中将深色主题设置为默认主题。当您进入应用程序时，不要切换事物，已经有深色主题了。

我浏览了一些文件，例如 wwwroot 中的 app.css 和 bootstrap 文件夹中的 bootstrap.min.css ，并得到如下内容：“background-color: #1b6ec2;”。我不太明白这是什么意思。我尝试改变一些值，但没有任何改变(.

Answer 1

Bootstrap 5.3 添加了黑暗模式，因此首先将您的

bootstrap.min.css

和

bootstrap.min.css.map

更新到 5.3+（只需获取最新版本）

通过将

data-bs-theme="dark"

添加到

html

标签来使您的网站处于深色模式。

<html lang="en" data-bs-theme="dark">

然后您需要检查

app.css

和任何范围内的 CSS 文件（在默认项目中为

app.css

、

MainLayout.razor.css

和

NavMenu.razor.css

） - 删除所有硬编码颜色。

这应该可以帮助你开始。