.NET MAUI Blazor的浅色/深色主题，通过headcontent加载特定样式表。

huangapple
go评论104阅读模式
英文:

.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:

  1. <HeadContent>
  2.     @if (isDark)
  3.     {
  4.         <link href="css/darkMode.css" rel="stylesheet"/>
  5.     }
  6.     else
  7.     {
  8.         <link href="css/lightMode.css" rel="stylesheet"/>
  9.     }   
  10. </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:

  2. &lt;HeadContent&gt;
  3.     @if (isDark)
  4.     {
  5.         &lt;link href=&quot;css/darkMode.css&quot; rel=&quot;stylesheet&quot;/&gt;
  6.     }
  7.     else
  8.     {
  9.         &lt;link href=&quot;css/lightMode.css&quot; rel=&quot;stylesheet&quot;/&gt;
  10.     }   
  11. &lt;/HeadContent&gt;
  13. // 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类中，我添加了这一简单的行，负责处理它：

  1. <ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>

其中_isDark由一个简单的切换按钮提供。

这个类在ElementManipulator.razor中定义：

  1. @inject IJSRuntime JSRuntime
  3. @code {
  5.     protected override async Task OnParametersSetAsync()
  6.     {
  7.         if (IsDarkTheme is not null)
  8.             await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
  9.     }
  11.     [Parameter]
  12.     public bool? IsDarkTheme { get; set; }
  13. }

它在javascript文件ElementManipulator.js中调用toggleThemeStyleSheet函数：

  1. var getHeadElement = function () {
  2.     return document.getElementsByTagName("head")[0];
  3. };
  5. var toggleThemeStyleSheet = function (isDarkTheme) {
  6.     let themeLink = getHeadElement().getElementsByClassName("theme")[0];
  7.     let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
  8.     themeLink.href = "_content/MyProject.UI/css/" + theme;
  9. };

然后将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 &lt;head&gt; element, then the stylesheet &lt;link&gt; 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:

  1. &lt;ElementManipulator IsDarkTheme=&quot;_isDark&quot;&gt;&lt;/ElementManipulator&gt;

Where _isDark is supplied by a simple toggle button.

This class is defined in ElementManipulator.razor:

  1. @inject IJSRuntime JSRuntime
  3. @code {
  5.     protected override async Task OnParametersSetAsync()
  6.     {
  7.         if (IsDarkTheme is not null)
  8.             await JSRuntime.InvokeVoidAsync(&quot;toggleThemeStyleSheet&quot;, IsDarkTheme);
  9.     }
  11.     [Parameter]
  12.     public bool? IsDarkTheme { get; set; }
  13. }

Which invokes the toggleThemeStyleSheet function in the javascript file ElementManipulator.js:

  1. var getHeadElement = function () {
  2.     return document.getElementsByTagName(&quot;head&quot;)[0];
  3. };
  5. var toggleThemeStyleSheet = function (isDarkTheme) {
  6.     let themeLink = getHeadElement().getElementsByClassName(&quot;theme&quot;)[0];
  7.     let theme = isDarkTheme ? &quot;darkTheme.css&quot; : &quot;lightTheme.css&quot;;
  8.     themeLink.href = &quot;_content/MyProject.UI/css/&quot; + theme;
  9. };

Which then swaps out the lightTheme.css with darkTheme.css and vice versa.

huangapple
  • 本文由 发表于 2023年5月14日 17:42:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246800.html
  • .net-core
  • blazor
  • css
  • maui
  • maui-blazor
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定