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

最近我打算对我的集体网站增加明暗模式的自动检测。这个解决方案不应用 JavaScript。相同，它通过 CSS 媒体查问来检测用户的零碎设置，并应用 两个自定义 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;
}

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

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

最初，应用 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);
}

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

定义 2 个自定义的 CSS 属性

媒体查问：prefers-color-scheme

增加 body 款式

残缺代码