css 如何为亮暗模式的 meta标签制作一个按钮:

kzmpq1sx  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(167)

嗨,有没有可能用 meta<meta name="color-scheme" content="light dark">做一个按钮来改变亮暗模式,但是你也可以用一个按钮来改变模式?

vq8itlhq

vq8itlhq1#

你可以用一点JS代码来完成,类似于:

const toggleModeButton = document.querySelector("#toggle-mode-button");

toggleModeButton.addEventListener("click", function() {
  const metaTag = document.querySelector("meta[name=color-scheme]");
  const currentValue = metaTag.getAttribute("content");

  if (currentValue === "light") {
    metaTag.setAttribute("content", "dark");
  } else {
    metaTag.setAttribute("content", "light");
  }
});
<meta name="color-scheme" content="light">
<button id="toggle-mode-button">Toggle Mode</button>

这将改变<meta name="color-scheme" content="light dark">标签的content属性值,它将通知浏览器在亮模式和暗模式之间切换。您可以使用基于prefers-color-scheme媒体功能的CSS媒体查询相应地设置您的网站样式。
请注意,这个meta标签并不是所有浏览器都支持的,所以在使用它之前,您可能需要检查浏览器的兼容性。

相关问题