关于css:14-行-CSS-代码实现明暗模式

最近我打算对我的集体网站增加明暗模式的自动检测。这个解决方案不应用 JavaScript。相同，它通过 CSS 媒体查问来检测用户的零碎设置，并应用 两个自定义 CSS 属性 来确定一个根本的配色计划。

定义 2 个自定义的 CSS 属性

CSS 自定义属性也被称为 CSS 变量或级联变量。你能够在 CSS 文件的任何中央定义 CSS 自定义属性，它们遵循与其余 CSS 规定雷同的级联和特定模式。例如，您能够在 document root 中定义 CSS 变量，并在更具体的 CSS 类 中笼罩它们。您还能够检查和调试浏览器开发工具中申明的 CSS 变量，这些变量显示在样式表规定上面。

CSS 自定义属性由 前缀为两个破折号 (——) 的单词申明组成 ，并应用var() 函数拜访。

:root {--my-color-variable: #000000;}

.element {color: var(--my-color-variable);
}

您还能够向 var() 函数传递 第二个参数，当您尝试应用自定义属性时，如果自定义属性不存在，它将充当回退值。

.element {color: var(--my-new-color, #ff0000);
}

对于这种明 / 暗模式解决方案，在文档根 document.root 定义两个色彩变量—一个用于前景色，一个用于背景色。我偏向于默认抉择暗模式，所以我将背景色设置为彩色(--color-bg)，前景色设置为红色(--color-fg)。

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

媒体查问：prefers-color-scheme

接下来，咱们将应用 preferences-color-scheme CSS 媒体查问连贯到零碎设置。当检测到 light 主题设置时，上面的代码将 --color-bg 设置为红色，--color-fg设置为彩色。

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}

增加 body 款式

最初，应用 CSS 自定义属性，设置 HTML 主体元素的背景色彩 (页面色彩) 和文本色彩，如果没有笼罩，所有的子元素都将继承它们。

body {background-color: var(--color-bg);
  color: var(--color-fg);
}

当初，你曾经实现了明暗模式的反对。快本人写一个例子试试吧~

残缺代码

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}
body {background-color: var(--color-bg);
  color: var(--color-fg);
}