CSS和JS双剑合璧，实现系统主题样式动态切换

2023-10-20 07:27:57

系统主题切换是近年来的热门话题，它不仅可以让用户根据自己的喜好来调整界面的整体风格，还可以节约能源。

在CSS和JS的帮助下，我们能够轻松实现系统主题的动态设置，让网页能够根据用户的系统主题而自动切换样式。

CSS实现系统主题动态设置

在CSS中，我们可以通过媒体查询来实现系统主题的动态设置。媒体查询是一种CSS技术，它允许我们根据不同的条件来设置样式。

例如，我们可以使用以下代码来设置系统主题为浅色模式时的样式：

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

我们可以使用以下代码来设置系统主题为深色模式时的样式：

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

JS实现系统主题动态设置

在JS中，我们可以通过监听window.matchMedia()事件来实现系统主题的动态设置。window.matchMedia()事件会在系统主题发生变化时触发。

例如，我们可以使用以下代码来监听系统主题的变化：

window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function(e) {
  if (e.matches) {
    // 浅色模式
    document.body.classList.add('light-theme');
    document.body.classList.remove('dark-theme');
  } else {
    // 深色模式
    document.body.classList.add('dark-theme');
    document.body.classList.remove('light-theme');
  }
});

结合CSS和JS实现系统主题动态设置

我们可以将CSS和JS结合起来，实现更加灵活的系统主题动态设置。

例如，我们可以使用以下代码来结合CSS和JS实现系统主题的动态设置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

/* 浅色模式样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* 深色模式样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

/* 动态添加的样式 */
.light-theme {
  background-color: white;
  color: black;
}

.dark-theme {
  background-color: black;
  color: white;
}

window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function(e) {
  if (e.matches) {
    // 浅色模式
    document.body.classList.add('light-theme');
    document.body.classList.remove('dark-theme');
  } else {
    // 深色模式
    document.body.classList.add('dark-theme');
    document.body.classList.remove('light-theme');
  }
});