英文:
.NET MAUI Blazor light/dark theme, load specific stylesheets via headcontent
问题
I am creating a .net MAUI Blazor Hybrid app. In this, I want to create a dark and light theme using css stylesheets (no MudBlazor).
What I am trying now, is using a lightMode.css and darkMode.css that contain the correct colors for that theme. When dark mode is on, the MainLayout, and thus all pages, should use the darkMode.css
Example in MainLayout.razor:
<HeadContent>
@if (isDark)
{
<link href="css/darkMode.css" rel="stylesheet"/>
}
else
{
<link href="css/lightMode.css" rel="stylesheet"/>
}
</HeadContent>
However, this is not working. Looking at the page, none of this headcontent is in the <head> tag of the page, and adding them directly to the index.html page only results in the last of the files being applied.
I have looked at other solutions here, but they never mention how they achieved this with css, like in this post: https://stackoverflow.com/questions/70265565/light-and-dark-theme-for-my-maui-blazor-app
Any suggestions as to how I can achieve a dark/light theme implementation with css? Other ideas are welcome too, but this looks like the most simple one to me.
Thanks in advance.
英文:
I am creating a .net MAUI Blazor Hybrid app. In this, I want to create a dark and light theme using css stylesheets (no MudBlazor).
What I am trying now, is using a lightMode.css and darkMode.css that contain the correct colors for that theme. When dark mode is on, the MainLayout, and thus all pages, should use the darkMode.css
Example in MainLayout.razor:
<HeadContent>
@if (isDark)
{
<link href="css/darkMode.css" rel="stylesheet"/>
}
else
{
<link href="css/lightMode.css" rel="stylesheet"/>
}
</HeadContent>
// HTML and c# here
However, this is not working. Looking at the page, none of this headcontent is in the <head> tag of the page, and adding them directly to the index.html page only results in the last of the files being applied.
I have looked at other solutions here, but they never mention how they achieved this with css, like in this post: https://stackoverflow.com/questions/70265565/light-and-dark-theme-for-my-maui-blazor-app
Any suggestions as to how I can achieve a dark/light theme implementation with css? Other ideas are welcome too, but this looks like the most simple one to me.
Thanks in advance.
答案1
得分: 0
以下是您提供的文本的中文翻译部分：
我最终以稍微不同的方式完成了它，因为我无法使HeadContent正常工作（可能因为我删除了Bootstrap部分，因为我想完全自己进行样式设计）。
我最终采用了这个答案的修改版本：https://stackoverflow.com/a/63563797/17389553 由@benjamin提供。我没有添加或删除HTML元素的类。
但是，通过使用直接的HTML/JS元素操作器，我简单地获取了<head>元素，然后获取了包含主题CSS文件的<link>样式表，并根据切换将其替换为浅色或深色。
我将在这里稍微详细描述一下。
我的代码：
在我的MainLayour.razor类中，我添加了这一简单的行，负责处理它：
<ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>
其中_isDark由一个简单的切换按钮提供。
这个类在ElementManipulator.razor中定义：
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnParametersSetAsync()
{
if (IsDarkTheme is not null)
await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
}
[Parameter]
public bool? IsDarkTheme { get; set; }
}
它在javascript文件ElementManipulator.js中调用toggleThemeStyleSheet函数：
var getHeadElement = function () {
return document.getElementsByTagName("head")[0];
};
var toggleThemeStyleSheet = function (isDarkTheme) {
let themeLink = getHeadElement().getElementsByClassName("theme")[0];
let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
themeLink.href = "_content/MyProject.UI/css/" + theme;
};
然后将lightTheme.css与darkTheme.css进行切换。
英文:
I wound up doing doing it slightly differently, as I couldn't get HeadContent to work (probably since I removed the bootstrap parts as I wanted to do my own styling fully).
I ended up following a modified version of this answer: https://stackoverflow.com/a/63563797/17389553 by @benjamin. I do not add or remove classes to the HTML elements.
However, by using the such direct html/js element manipulators I simply get the <head> element, then the stylesheet <link> that contains the theme css file, and switch it out with light/dark depending on the toggle.
I will describe it a bit more in depth here.
My code:
In my MainLayour.razor class, I added this simple line which takes care of it:
<ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>
Where _isDark is supplied by a simple toggle button.
This class is defined in ElementManipulator.razor:
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnParametersSetAsync()
{
if (IsDarkTheme is not null)
await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
}
[Parameter]
public bool? IsDarkTheme { get; set; }
}
Which invokes the toggleThemeStyleSheet function in the javascript file ElementManipulator.js:
var getHeadElement = function () {
return document.getElementsByTagName("head")[0];
};
var toggleThemeStyleSheet = function (isDarkTheme) {
let themeLink = getHeadElement().getElementsByClassName("theme")[0];
let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
themeLink.href = "_content/MyProject.UI/css/" + theme;
};
Which then swaps out the lightTheme.css with darkTheme.css and vice versa.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论