入门

配色方案

Pico CSS 内置浅色与深色两套配色方案，会根据用户偏好自动启用。

默认配色方案为浅色。如果用户开启了深色模式（prefers-color-scheme: dark;），则会自动启用深色配色方案。

用法

配色方案可以通过 <html data-theme="light"> 应用到整个文档，也可以单独应用到某个 HTML 元素上，例如 <article data-theme="dark">。

在标签层面设置配色方案，适用于 a、button、table、input、textarea、select、article、dialog、progress 等元素。

与配色方案对应的 CSS 变量会被赋给每一个 HTML 标签。但我们没有在所有 HTML 标签上强制设定具体的背景与颜色，以保持背景透明，并让颜色从父级标签继承。

对于其他一些 HTML 标签，你可能需要显式设置 background-color 和 color。

section {
  background-color: var(--pico-background-color);
  color: var(--pico-color);
}