嗨,有没有可能用 meta<meta name="color-scheme" content="light dark">做一个按钮来改变亮暗模式,但是你也可以用一个按钮来改变模式?
<meta name="color-scheme" content="light dark">
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标签并不是所有浏览器都支持的,所以在使用它之前,您可能需要检查浏览器的兼容性。
1条答案
按热度按时间vq8itlhq1#
你可以用一点JS代码来完成,类似于:
这将改变
<meta name="color-scheme" content="light dark">
标签的content属性值,它将通知浏览器在亮模式和暗模式之间切换。您可以使用基于prefers-color-scheme媒体功能的CSS媒体查询相应地设置您的网站样式。请注意,这个meta标签并不是所有浏览器都支持的,所以在使用它之前,您可能需要检查浏览器的兼容性。