CSS light-dark() - 一个属性解决暗黑模式！

引言

暗黑模式是一种显示选项，可将网站或应用程序的颜色主题从浅色背景（带深色文本）切换为深色背景（带浅色文本）。此模式因其优点而广受欢迎，例如在弱光环境下减少眼睛疲劳、节省 OLED 屏幕设备的电量，以及提供视觉上吸引人的传统浅色主题替代方案。

MDN 官方解释

light-dark() 函数介绍

基本语法

.element {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#121212, #ffffff);
}

就是这么简单！light-dark()函数接受两个参数：

• 第一个参数是亮色主题下使用的值
• 第二个参数是暗色主题下使用的值

浏览器会根据系统的颜色方案自动选择合适的值。

实战应用

1. 基础页面布局

body {
  /* 背景颜色 */
  background-color: light-dark(#ffffff, #121212);
  /* 文本颜色 */
  color: light-dark(#121212, #ffffff);
}

/* 卡片样式 */
.card {
  background-color: light-dark(#f8f9fa, #1e1e1e);
  border: 1px solid light-dark(#dee2e6, #2d2d2d);
}

/* 按钮样式 */
.button {
  background-color: light-dark(#007bff, #0056b3);
  color: light-dark(#ffffff, #e0e0e0);
}

2. 复杂UI组件

/* 导航栏 */
.navbar {
  background-color: light-dark(#ffffff, #1a1a1a);
  border-bottom: 1px solid light-dark(#e5e5e5, #333333);
}

/* 下拉菜单 */
.dropdown {
  background-color: light-dark(#ffffff, #242424);
  box-shadow: 0 2px 4px light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

/* 表单元素 */
.input {
  background-color: light-dark(#ffffff, #2d2d2d);
  border: 1px solid light-dark(#ced4da, #404040);
  color: light-dark(#212529, #e0e0e0);
}

3. 渐变和阴影效果

/* 渐变背景 */
.gradient-bg {
  background: light-dark(
    linear-gradient(to right, #f8f9fa, #e9ecef),
    linear-gradient(to right, #1a1a1a, #2d2d2d)
  );
}

/* 卡片阴影 */
.card-shadow {
  box-shadow: 0 2px 4px light-dark(
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.4)
  );
}

与其他CSS特性结合

1. 结合CSS变量

:root {
  --primary-light: #007bff;
  --primary-dark: #0056b3;
  --primary: light-dark(var(--primary-light), var(--primary-dark));
}

.button {
  background-color: var(--primary);
}

2. 配合透明度

.overlay {
  background-color: light-dark(
    rgba(255,255,255,0.8),
    rgba(0,0,0,0.8)
  );
}

优势特点

1. 简洁明了：不需要编写媒体查询
2. 自动响应：随系统主题自动切换
3. 维护方便：所有相关样式都在同一处定义
4. 性能优化：浏览器原生支持，无需JavaScript
5. 代码量减少：显著减少了CSS代码量

浏览器兼容性

• Chrome 116+
• Firefox 119+
• Safari 17+
• Edge 116+

最佳实践

1. 颜色对比度

   /* 确保两种模式下都有足够的对比度 */
   .text {
     color: light-dark(#333333, #e0e0e0);
     background: light-dark(#ffffff, #121212);
   }
   

2. 渐进增强

   /* 为不支持light-dark的浏览器提供回退方案 */
   .element {
     background-color: #ffffff;  /* 默认亮色 */
     background-color: light-dark(#ffffff, #121212);
   }
   

总结

light-dark()函数代表了CSS暗黑模式实现的一个重大进步。它不仅简化了我们的代码，还提供了更好的性能和用户体验。随着浏览器支持的普及，它必将成为实现暗黑模式的首选方案。