当页面的类别/主题切换时更新`theme-color`。

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

Update `theme-color` when class/theme of page is toggled

问题

我有一个JavaScript开关，它在html元素上添加/移除类来改变我的页面的颜色/主题。第1个（没有类）= 白色，第2个（.dark-mode）主题是黑色，第3个（.retro）是米色。

JavaScript开关还有一些额外的主题设置，我已经去掉了它，只为了简化下面的示例：

  1. const html = document.querySelector("html");
  2. const button = document.querySelector(".contrast__link");
  4. button.addEventListener("click", (e) => {
  5.     e.preventDefault();
  6.     if (html.classList.contains("dark-mode")) {
  7.         html.classList.remove("dark-mode");
  8.         html.classList.add("retro");
  9.     } else if (html.classList.contains("retro")) {
  10.         html.classList.remove("retro");
  11.     } else {
  12.         html.classList.add("dark-mode");
  13.     }
  14. });

当类/主题更新时，我想更新文档head中的theme-color以匹配页面的其余部分。我的原始标记如下：

  1. <meta name="theme-color" content="#ffffff">

我尝试使用CSS变量，以为它会引入相关的颜色...

CSS

  1. :root 		{ --color-secondary : rgb(255,255,255); }
  2. .dark-mode 	{ --color-secondary : rgb(0,0,0); }
  3. .retro 		{ --color-secondary : rgb(243, 238, 226); }

标记

  1. <meta name="theme-color" content="var(--color-primary)">

但是看起来这不受支持。是否有一种方法可以继承这个theme-color，还是它需要是一个固定/设置的值？

英文:

I have a Javascript toggle that adds/removes classes on the html element to change the colour/theme of my page. 1st (no class) = white, the 2nd (.dark-mode) theme is black, the 3rd (.retro) is beige.

The Javascript toggle does have some extra theme setting stuff in it which I've tripped out just to streamline the example below:

  1. const html = document.querySelector(&quot;html&quot;);
  2. const button = document.querySelector(&quot;.contrast__link&quot;);
  4. button.addEventListener(&quot;click&quot;, (e) =&gt; {
  5. 	e.preventDefault();
  6. 	if (html.classList.contains(&quot;dark-mode&quot;)) {
  7. 		html.classList.remove(&quot;dark-mode&quot;);
  8. 		html.classList.add(&quot;retro&quot;);
  9. 	} else if (html.classList.contains(&quot;retro&quot;)) {
  10. 		html.classList.remove(&quot;retro&quot;);
  11. 	} else {
  12. 		html.classList.add(&quot;dark-mode&quot;);
  13. 	}
  14. });

When the class/theme updates. I'd like to update the theme-color in the document head to match the rest of the page. My original tag looked like this:

  1. &lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot;&gt;

I tried using a CSS variable thinking it would pull in the relevant colour...

CSS

  1. :root 		{ --color-secondary : rgb(255,255,255); }
  2. .dark-mode 	{ --color-secondary : rgb(0,0,0); }
  3. .retro 		{ --color-secondary : rgb(243, 238, 226); }

Tag

  1. &lt;meta name=&quot;theme-color&quot; content=&quot;var(--color-primary&quot;&gt;

But it looks like this is not supported. Is there a way for this theme-color to be inherited or does it need to be a fixed/set value?

答案1

得分: 1

你说得对，<meta name="theme-color"> 内容属性不支持CSS变量。

要根据你的主题更新这个值，你需要使用JavaScript。

  1. const html = document.querySelector(&quot;html&quot;);
  2. const button = document.querySelector(&quot;.contrast__link&quot;);
  4. // 让我们首先定义你的颜色
  5. const colors = {
  6.   default: &#39;#ffffff&#39;, // 默认主题的颜色
  7.   darkMode: &#39;#000000&#39;, // 暗模式主题的颜色
  8.   retro: &#39;#f3eee2&#39; // 复古主题的颜色
  9. }
  11. // 访问meta标签
  12. const metaThemeColor = document.querySelector(&quot;meta[name=theme-color]&quot;);
  14. button.addEventListener(&quot;click&quot;, (e) =&gt; {
  15.   e.preventDefault();
  16.   if (html.classList.contains(&quot;dark-mode&quot;)) {
  17.     html.classList.remove(&quot;dark-mode&quot;);
  18.     html.classList.add(&quot;retro&quot;);
  19.     // 更新theme-color的meta标签
  20.     metaThemeColor.setAttribute(&#39;content&#39;, colors.retro);
  21.   } else if (html.classList.contains(&quot;retro&quot;)) {
  22.     html.classList.remove(&quot;retro&quot;);
  23.     // 更新theme-color的meta标签
  24.     metaThemeColor.setAttribute(&#39;content&#39;, colors.default);
  25.   } else {
  26.     html.classList.add(&quot;dark-mode&quot;);
  27.     // 更新theme-color的meta标签
  28.     metaThemeColor.setAttribute(&#39;content&#39;, colors.darkMode);
  29.   }
  30. });
英文:

You're correct that the <meta name="theme-color"> content attribute doesn't support CSS variables.

To update this value based on your theme, you will have to use JavaScript.

  1. const html = document.querySelector(&quot;html&quot;);
  2. const button = document.querySelector(&quot;.contrast__link&quot;);
  3. // Let&#39;s start with defining your colors
  4. const colors = {
  5. default: &#39;#ffffff&#39;, // color for the default theme
  6. darkMode: &#39;#000000&#39;, // color for the dark-mode theme
  7. retro: &#39;#f3eee2&#39; // color for the retro theme
  8. }
  9. // Access the meta tag
  10. const metaThemeColor = document.querySelector(&quot;meta[name=theme-color]&quot;);
  11. button.addEventListener(&quot;click&quot;, (e) =&gt; {
  12. e.preventDefault();
  13. if (html.classList.contains(&quot;dark-mode&quot;)) {
  14. html.classList.remove(&quot;dark-mode&quot;);
  15. html.classList.add(&quot;retro&quot;);
  16. // update the theme-color meta tag
  17. metaThemeColor.setAttribute(&#39;content&#39;, colors.retro);
  18. } else if (html.classList.contains(&quot;retro&quot;)) {
  19. html.classList.remove(&quot;retro&quot;);
  20. // update the theme-color meta tag
  21. metaThemeColor.setAttribute(&#39;content&#39;, colors.default);
  22. } else {
  23. html.classList.add(&quot;dark-mode&quot;);
  24. // update the theme-color meta tag
  25. metaThemeColor.setAttribute(&#39;content&#39;, colors.darkMode);
  26. }
  27. });

huangapple
  • 本文由 发表于 2023年6月26日 15:16:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76554339.html
  • css
  • html
  • javascript
  • meta-tags
匿名

发表评论

匿名网友

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

确定