这或许是
一番大事业的开端!

使用 10 行 JavaScript 代码实现基于用户操作系统偏好的明暗主题切换

图片

引言

在当今的 Web 开发中,为用户提供个性化体验已成为一种标准做法。其中一个流行的趋势就是支持暗模式,因为它不仅有助于节省电池电量,还能减轻长时间使用屏幕带来的视觉疲劳。在这篇文章中,我们将介绍如何使用简单的 JavaScript 代码和 CSS 来根据用户的操作系统偏好自动切换网站的主题,并允许用户手动在明暗模式之间切换。

目标

我想要实现什么?我试图用这种方法实现两件事。

  1. 我需要允许网站以用户喜欢的方式加载(他们已经在操作系统中选择了主题的部分)
  2. 但我还想允许他们在加载后在暗模式和亮模式之间切换。

因此,我们将有一个网站,可以加载用户期望的主题,然后允许他们在需要时进行更改。

实现步骤

步骤 1: 创建切换按钮

首先,我们需要在 HTML 中添加一个按钮或图标作为切换主题的触发器。

<button class="mode" aria-label="Toggle Theme">
    <img src="./yueliang.png">
</button>

我使用的图片作为按钮,其中包含月亮的 svg 图片。您可以添加按钮或复选框,以便在两个选项之间切换。

步骤 2: 将颜色详细信息作为自定义属性放入 CSS 中

接下来,我们需要在 CSS 中定义主题相关的颜色,并使用 color-scheme 属性来指定配色方案。我们将使用 light-dark() 函数来根据用户的偏好自动选择颜色:

:root {
  color-scheme: light dark;
  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;
  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}

body {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

code {
  color: light-dark(var(--light-code), var(--dark-code));
}

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

好的,所以在 :root中你会看到名为的属性color-scheme,这将是我们的游戏规则改变者。如你所见,它接受值light或dark。我还创建了两个类,.light它们.dark将配色方案的值设置为深色或浅色。

步骤 3: 为代码的各个部分添加颜色

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}
...

现在,每当属性要求颜色时(例如background,color属性),您都可以使用名为的函数light-dark()【MDN官方文档

】 此函数采用两个值,第一个值在color-scheme设置为时使用,第二个值在设置为暗light时使用color-scheme

步骤 4: 使用 JavaScript 在明暗模式间切换

最后,我们需要编写 JavaScript 代码来监听按钮点击事件,并根据用户的系统偏好或当前状态切换主题:

const modeButton = document.querySelector('.mode');

modeButton.addEventListener('click', function () {
  const theme = document.documentElement.style.colorScheme;

  if (theme === null) {

    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {

      document.documentElement.style.colorScheme = 'light';
    } else {

      document.documentElement.style.colorScheme = 'dark';
    }
  } else {

    document.documentElement.style.colorScheme = (theme === 'light') ? 'dark' : 'light';
  }
});

这里,document.documentElement.style.colorScheme其实是指:rootCSS中的元素。正如我们在上一步中已经实现以用户首选模式打开网站一样,当单击切换按钮时,它会执行以下工作。

它检查配色方案是否有任何值,如果没有,则网站处于用户首选模式,我们需要确定它是暗还是亮来更改模式。它用于window.matchMedia(“(prefers-color-scheme:dark)”).matches查找它是否处于暗模式,如果处于暗模式,我们将配色方案更改为light,如果不是,我们将其更改为dark。下次他们点击按钮时,我们已经为配色方案设置了值,因此我们只需在深色或浅色之间切换。

实现效果

图片

结论

通过以上步骤,我们成功实现了根据用户操作系统偏好自动加载明暗主题,并提供了一个简单的按钮让用户可以自由切换主题。这种方法既简单又高效,只需要少量的代码即可实现。如果你正在寻找一种轻量级的方式来为你的网站添加主题切换功能,那么这种方法将是一个不错的选择。

赞(1) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《使用 10 行 JavaScript 代码实现基于用户操作系统偏好的明暗主题切换》
文章链接:https://www.wzdao.com/1111.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册