CSS `light-dark` 函数：简化主题切换的新工具

首页

12月

CSS `light-dark` 函数：简化主题切换的新工具

作者： 大彭Sir 分类： 日常生活 正在检查是否收录...

在现代网页设计中，深色模式（Dark Mode）和浅色模式（Light Mode）已经成为用户界面设计的标配。CSS 提供了一种强大的函数 light-dark()，帮助开发者轻松实现基于主题的样式切换。本文将介绍 light-dark() 函数的用法，并展示如何在项目中实际应用它。
CSS `light-dark` 函数：简化主题切换的新工具

什么是 `light-dark()` 函数？

light-dark() 是 CSS 新增的一个功能，允许开发者根据当前的主题模式（浅色或深色）动态指定样式值。
其语法如下：

light-dark(<light-value>, <dark-value>)

<light-value>：浅色模式下的值。
<dark-value>：深色模式下的值。

当用户的操作系统或浏览器处于浅色模式时，函数返回 <light-value>；反之，则返回 <dark-value>。

为什么选择 `light-dark()` 函数？

传统上，开发者使用媒体查询（@media (prefers-color-scheme)）来实现主题切换。例如：

:root {
  --background: #ffffff; /* 默认值 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
  }
}

虽然这种方法可行，但 light-dark() 更加简洁明了：

:root {
  --background: light-dark(#ffffff, #000000);
}

相比之下，light-dark() 函数可以减少代码冗余，提高可读性。

实际案例：使用 `light-dark()`

以下是一个使用 light-dark() 的完整示例：

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Light-Dark 函数示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>欢迎来到我的网站</h1>
  </header>
  <main>
    <p>切换系统主题，观察背景色和文字颜色的变化！</p>
  </main>
</body>
</html>

CSS 代码

/* styles.css */
:root {
  --background: light-dark(#ffffff, #222222);
  --text-color: light-dark(#000000, #ffffff);
}

body {
  background-color: var(--background);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  padding: 2rem;
}

main {
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
}