CSS主题设置

现在暗黑模式已成为许多操作系统的首要功能，设计网站的暗黑版本以配合默认设计变得越来越普遍。

暗黑模式

现在暗黑模式已成为许多操作系统的首要功能，设计网站的暗黑版本以配合默认设计变得越来越普遍。

prefers-color-scheme 媒体查询驱动

js
// 在页面加载时或更改主题时，最好在 `head` 中内联添加，以避免出现闪屏现象document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);

// 每当用户明确选择浅色模式时
localStorage.theme = "light";

// 当用户明确选择暗模式时
localStorage.theme = "dark";

// 当用户明确选择遵循操作系统设定的偏好时
localStorage.removeItem("theme");

System Colors (系统色)

这是为了应对 Windows 的 “高对比度模式 (High Contrast Mode)”。

场景： 有些视力障碍用户会开启操作系统的“高对比度模式”（背景全黑，文字全绿）。

  • 痛点： 这种模式下，你写的 background-color: blue 会被系统强制覆盖成黑色，导致你的按钮看不清边界。

现代解法： 使用语义化的系统色关键字。

css
button {
  /* 平时显示蓝色 */
  background-color: blue; 
  color: white;
  border: 2px solid transparent;
}

/* 当用户开启高对比度模式时 */
@media (forced-colors: active) {
  button {
    /* 核心：ButtonText 和 ButtonFace 是系统关键字 */
    /* 系统会自动把它们变成用户设置的高对比颜色（比如绿字黑底） */
    border-color: ButtonText; 
  }
}

底蕴价值： 这是无障碍 (A11y) 的最高境界。你不再是强迫用户看你的颜色，而是尊重用户的系统设置，让你的网页在任何极端环境下都能清晰可读。

color-scheme (配色方案)

你可能写了 body { background: black; color: white }，但你发现了一个尴尬的细节： 滚动条、下拉选择框、单选框 依然是白底亮色的！这在深色网页里显得极其刺眼。

仅仅改 CSS 颜色，改不了浏览器原生控件（Form Controls）和系统界面（Scrollbar）的颜色。

现代解法： 告诉浏览器内核：“我的网页支持深色模式，请把你的原生组件也变黑。”

css
:root {
  /* 核心：
     light dark: 告诉浏览器，我同时支持浅色和深色。
     浏览器会自动根据系统设置，把滚动条、输入框背景、
     按钮默认样式全部切换成深色版。
  */
  color-scheme: light dark;
}

/* 也可以强制指定 */
.dark-section {
  color-scheme: dark; /* 这一块区域强制使用深色原生控件 */
}

底蕴价值： 这是 系统级集成 (OS Integration)。你不再是在浏览器里画网页，而是在让网页成为操作系统原生体验的一部分。

accent-color (自适应主题色)

这个属性用于“单选框 (Radio)”、“复选框 (Checkbox)”、“进度条 (Range)”等原生控件。

  • 痛点： 以前原生 checkbox 默认是蓝色的，想改成品牌色（比如红色）非常难，往往需要把原生控件隐藏 (display: none)，然后用 div 或伪元素手画一个。
  • 现代做法： 直接告诉浏览器你的“强调色”是什么。

CSS

input[type="checkbox"], 
input[type="radio"], 
input[type="range"] {
  /* 所有原生控件的选中状态都会变成这个颜色 */
  accent-color: #ff5722; 
}

light-dark()

以前做深色模式（Dark Mode），我们需要写大量的媒体查询覆盖变量。现在 CSS 提供了一个函数直接在声明时搞定。

css
:root { --bg: white; }
@media (prefers-color-scheme: dark) {
    :root { --bg: black; }
}

现代：

css
:root {
  /* 浏览器根据系统设置自动选第一个还是第二个 */
  color-scheme: light dark; /* 必须先声明支持两种模式 */
}
body {
  /* light-dark(浅色值, 深色值) */
  background-color: light-dark(#ffffff, #000000); 
  color: light-dark(#333333, #ffffff);
}

评论

评论加载中……