CSS 中的暗模式（切换） invert() hue-rotate() 基本元素 在上面的例子中应用 invert() 让我们在其中添加一些内容。 在上面的例子中应用 invert() 让我们给 h1 一些其他颜色 将 hue-rotate() 和 invert() 一起应用于上面的示例 让我们添加一个图像来代替 h1 将 invert() 应用于上面的示例 应用 invert() 以保持图像的颜色相同 让我们结合到目前为止学到的所有属性

2025-05-26

CSS 中的暗模式（切换）

倒置（）

色相旋转()

基本元素

在上面的例子中应用 invert()

让我们在其中添加一些内容。

在上面的例子中应用 invert()

让我们给 h1 加点其他颜色

将 hue-rotate() 与 invert() 结合使用到上述示例中

让我们添加一张图片来代替 h1

将 invert() 应用于上述示例

应用 invert() 来保持图像颜色相同

让我们结合目前为止学到的所有属性

大家好，本文是关于 CSS 中暗模式和亮模式切换开关的，我们将详细讨论如何在 CSS 中实现暗模式。没错，你只需几行代码，就能用 CSS 制作一个暗模式切换开关，无需 JavaScript。

这可以通过使用 2 个 CSS 属性来实现

倒置（）

invert()函数与filter属性一起使用，用于反转颜色样本。invert ()函数需要传入一个参数。该参数决定了所应用转换的比例。该参数可以是百分比值，也可以是数字。

色相旋转()

hue-rotate函数也可与filter属性一起使用，用于旋转元素及其内容的色调。hue-rotation 函数指定元素及其组件的色调围绕色环旋转的角度。该函数接受角度参数。
色轮

让我们通过例子来更好地理解

基本元素

<main>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
}
Enter fullscreen mode Exit fullscreen mode


哈哈，你可能没有在上面的笔里发现任何东西，实际上它是空白的只有白色背景。

在上面的例子中应用 invert()

<main>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
    filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode


现在您可以在此示例中看到，我们应用了invert()函数，因此这里的背景颜色变为了黑色，但是我们已将 background 属性设置为白色。因此，invert() 函数在这里发挥了作用，将白色反转为黑色。

让我们在其中添加一些内容。

<main>
    <h1></h1>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
}
h1 {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode


在上面的例子中，我们在主元素中 添加了一些内容，即h1。

在上面的例子中应用 invert()

<main>
    <h1></h1>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
    filter: invert(1);
}
h1 {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode


在上面的例子中，我们已经将invert()函数应用于 main，并将h1的颜色设置为黑色，但是当我们应用invert()函数时，它也与背景一起从白色变为黑色，但背景颜色变为黑色，因为它被指定为白色。

让我们给 h1 加点其他颜色

<main>
    <h1></h1>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
}
h1 {
   color: red;
}
Enter fullscreen mode Exit fullscreen mode


这里我们给h1涂上了红色。

将 hue-rotate() 与 invert() 结合使用到上述示例中

<main>
    <h1></h1>
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}
h1 {
   color: red;
}
Enter fullscreen mode Exit fullscreen mode


这里我们运用了hue-rotate()函数，并借助了color-wheel的帮助。现在你可以看到它的颜色从红色变成了粉色。

让我们添加一张图片来代替 h1

<main>
    <img src="" >
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #000;
}
Enter fullscreen mode Exit fullscreen mode


这里我们添加了一个白色图像，因此我们将主图像的背景改为黑色。

将 invert() 应用于上述示例

<main>
    <img src="" >
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #000;
    filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode


在这里您可以看到，当我们将反转应用于主元素时，背景颜色从黑色变为白色，但图像的颜色也从白色变为黑色。

应用 invert() 来保持图像颜色相同

<main>
    <img src="" >
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #000;
    filter: invert(1);
}
img {
    filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode


这里，我们将invert()函数与main 函数一起应用于我们的图像，因此您可以看到 *我们图像的颜色保持不变。

让我们结合目前为止学到的所有属性

在兄弟选择器的帮助下，以适当的方式将所有这些属性应用于切换开关，我们只需使用 CSS 即可实现暗黑模式切换。为了更好地理解，我建议您阅读下面的代码。如果您想了解更多关于兄弟选择器的信息，可以在这里阅读我关于兄弟选择器的博客。

<input type="checkbox" />
<main>
    <h1></h1>
    <img src="" >
</main>
Enter fullscreen mode Exit fullscreen mode 
main {
    background: #000;
}
h1 {
    color: #fca311;
}
img {
   //other properties here
}
input[type="checkbox"]:checked ~ main {
  filter: invert(1) hue-rotate(180deg);
}
input[type="checkbox"]:checked ~ main > img {
  filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode

这是我的一支笔，在这里我用上面解释的属性做了一些有趣的事情。

已编辑-----------------------------------------------------

对于那些喜欢使用自定义方法的人来说，这里是另一种无需 JavaScript 即可创建自定义暗模式的方法。CSS中的暗模式第 2 部分。

感谢您阅读本文，希望对您有所帮助。

请随意分享您的看法。

我希望你喜欢它并且发现它有用。

通过Twitter或LinkedIn与我联系

文章来源：https://dev.to/ritvikdubey27/dark-mode-in-css-toggle-4ph5
Devto 翻译
PREV
开始使用 Typescript 和 React Hooks
NEXT
使用古老的 JS（ES6）创建单页应用程序