我目前正在制作一个“更改主题”按钮，以便我可以在“深色模式”和“浅色模式”之间切换整个页面。但我找不到改变整个页面背景颜色的方法。
基本上，我需要改变风格<body>（这是我能想到的唯一方法）。我的想法是，当您单击“更改主题”按钮时，该<body>元素将添加一个“深色主题”类。然后我只是在 CSS 中简单地定义“深色主题”，如下所示：
body {
background-color: #FFFFFF;
color: #000000;
}
body.dark-theme {
background-color: #5A5A5A;
color: #F2F2F2;
}
我认为这很有道理，但正如您在下面看到的，我无法访问<body>元素，因此我无法添加类或更改它的 CSS。
MainLayout.razor
@inherits LayoutComponentBase
@using System.Web;
<div class="sidebar">
<NavMenu />
</div>
<div>
<LoginDisplay />
<button id="change-theme-btn" @onclick="ThemeChanged">Change Theme</button>
@Body
</div>
@code {
bool isDark = false;
private void ThemeChanged()
{
isDark = !isDark;
}
}
那么如何更改<body>元素的类或 CSS 呢？或者如果您有任何替代解决方案，请告诉我。谢谢你！