如何更改CSS或"body"类开拓者元素 [英] How To Change CSS or Class of "body" Element in Blazor
问题描述
我目前正在使用更改主题"按钮，以便可以在暗模式"和亮模式"之间切换整个页面.但是我找不到改变整个页面背景颜色的方法.
I'm currently making a "Change Theme" button so that I can switch the whole page between "Dark Mode" and "Light Mode". But I can't find a way to change the background colour of the whole page.
基本上，我需要更改< body> 的样式(这是我能想到的唯一方法).我的想法是，当您单击更改主题"按钮时，< body> 元素将被添加一个类黑暗主题".然后，我只需要像这样在CSS中定义深色主题"即可:
Basically, I need to change the style of <body> (It's the only way I can come up with).
My thought is, when you click "Change Theme" button, the <body> element will be added a class "dark-theme".
And then I just simply define "dark-theme" in CSS like this:
body {
background-color: #FFFFFF;
color: #000000;
}
body.dark-theme {
background-color: #5A5A5A;
color: #F2F2F2;
}
我认为这很有意义，但是正如您在下面看到的那样，我无法访问< body> 元素，因此我无法添加类或更改其CSS.
I think this quite makes sense but as you can see below, I cannot access <body> element so there is no way for me to add class or change CSS of it.
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?或者，如果您有其他替代解决方案，请告诉我.谢谢！
So how do I change class or CSS of <body> element? Or if you have any alternative solution, please tell me. Thank you!
推荐答案
或者，如果您想要纯净的C#代码而又没有光彩:
Or if you want pure C# code without blazor:
public string BackgroundImage { get; set; }
<style>
body
{
background-image: url(@BackgroundImage);
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-color: darkgray;
overflow: hidden;
}
</style>
或者，我使用Nuget包BlazorStyled:
Or, I use Nuget package BlazorStyled:
https://github.com/chanan/BlazorStyled
这是一个示例:
<Styled @bind-Classname="CanvasStyle">
position: fixed;
top: 18vh;
left: 5%;
width: 60%;
height: 64vh;
</Styled>
<div class=@CanvasStyle></div>
这是我为BlazorStyled制作的视频，如果您想观看的话:
And here is a video I made for BlazorStyled if you care to watch:
这篇关于如何更改CSS或"body"类开拓者元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
