好吧..涉及到一点CSS?但它比我在互联网上找到的答案要容易得多。
我想要实现什么?
我试图用这个方法实现两件事。
所以我们将有一个网站,它将加载用户期望的主题,然后允许他们在需要时更改它。
第 1 步:创建用于切换的按钮
<img class="mode" src="./img/moon.svg">
我使用一个图像作为我的按钮,其中有一个月亮的 svg 图像。您可以添加您感觉可以在两个选项之间切换的按钮或复选框。
第 2 步:将颜色详细信息作为自定义属性放入 CSS 中
:root{ color-scheme: light dark; --light-bg: ghostwhite; --light-color: darkslategray; --light-code: tomato; --dark-bg: darkslategray; --dark-color: ghostwhite; --dark-code: gold; } .light{ color-scheme: light; } .dark{ color-scheme: dark; }
好吧..所以在根中你会看到名为 color-scheme 的属性,这将改变我们的游戏规则。
正如您所看到的,它需要浅色或深色的值。我还创建了两个类 .light 和 .dark,将颜色方案的值设置为深色或浅色。
第 3 步:为代码的各个部分添加颜色
body{ background-color: light-dark(var(--light-bg), var(--dark-bg)); }
现在,每当属性需要颜色(例如背景、颜色属性)时,您都可以使用名为 light-dark() 的函数。
该函数有两个值,第一个值在颜色方案设置为浅色时使用,第二个值在颜色方案设置为深色时使用。
是的...这是2024年5月发布的功能。它相当新,但很快就会适配。截至撰写本文时,它处于基线支持中。这是它的文档
如果您使用此功能,CSS 将自动从操作系统检测用户首选项并将其设置为他们想要的颜色。
我们实现了第一个目标,网站将加载用户操作系统中已经想要的颜色模式。
第 4 步:使用 Javascript 在深色模式和浅色模式之间切换
// mode is the toggle button mode.addEventListener("click", ()=>{ // we are getting the color scheme here let theme = document.documentElement.style.colorScheme; /* when a website is first loaded it will have null as its color-scheme value*/ if(theme == null){ // this window.matchMedia() checks if the user prefers the dark theme if(window.matchMedia("(prefers-color-scheme:dark)").matches){ /* if they prefer dark, clicking on our button should turn everything to light, the color-scheme will be given a value as light */ document.documentElement.style.colorScheme = "light"; } // Or else the color-scheme will be set to dark document.documentElement.style.colorScheme = "dark"; } /* Now since our toggle button set the color scheme, we can simply change light to dark and dark to light using below code */ else{ document.documentElement.style.colorScheme = (theme == "light")? "dark": "light"; } });
这里,document.documentElement.style.colorScheme 实际上指的是 CSS 中的 :root 元素。
由于我们已经在上一步中实现了以用户首选模式打开网站,因此当单击切换按钮时,它会执行以下操作。
*PS:*这是我的第一篇文章,我仍然是网络开发的初学者。但当我搜索这个方法时,并没有看到任何相关的帖子。如果您已经知道这一点,我很抱歉点击诱饵您?我认为这篇文章将帮助我在每次开发新项目时记住这个过程。
如果您正在努力让您的网站在旧浏览器上运行,那么此方法绝对不适合您。在关于这篇文章的评论中告诉我。感谢您的阅读。
以上是只需几行 JavaScript 即可更改浅色和深色主题的详细内容。更多信息请关注PHP中文网其他相关文章!