当前位置：首页 > 行业动态 > 正文

如何使用CSS实现网站夜间模式或变暗效果？

CSS 实现网站变暗可利用 @media (prefers-color-scheme: dark) 媒体查询，根据系统设置自动切换明暗模式，无需 JavaScript。

在现代网页设计中，实现网站的暗黑模式不仅能提供更好的视觉体验，还能减少眼睛疲劳，以下是使用CSS实现网站变暗的详细步骤和相关技巧：

如何使用CSS实现网站夜间模式或变暗效果？ 第1张

一、定义颜色变量

需要定义一组颜色变量来设置主题的颜色，建议使用CSS变量（也称为自定义属性），这样可以轻松地在整个样式表中复用这些颜色，并在需要时进行修改。

:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg: #ffffff;
}

这些变量可以在样式表中通过var()函数引用，

p {
  color: var(--main);
}

二、添加暗黑模式变量

定义一组将在暗黑模式下使用的新的颜色变量：

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

三、应用媒体查询

使用@media查询根据用户的主题偏好应用相应的颜色变量，当用户选择暗黑模式时，浏览器会自动应用这些颜色。

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

四、具体实现方法

使用`opacity`属性

最简单的方法是使用CSS的opacity属性来控制元素的不透明度，范围从0到1，0表示完全透明，1表示完全不透明，通过将元素的opacity设置为一个介于0和1之间的值，可以使元素的背景色变暗。

.darken-element {
  background-color: #007bff; /* 原始背景色 */
  opacity: 0.8; /* 设置透明度为0.8，背景色变暗 */
}

使用`rgba()`函数

另一种常用的方法是使用rgba()函数来指定背景色的值。rgba()函数允许我们指定背景色的红、绿、蓝和透明度值，其中红、绿、蓝的范围是从0到255，透明度范围是从0到1。

.darken-element {
  background-color: rgba(0, 123, 255, 0.8); /* 设置透明度为0.8，背景色变暗 */
}

调整颜色值

可以通过调整颜色值的饱和度或亮度来进一步定制背景色的暗度，使用HSL颜色模式来指定背景色的值，并通过调整饱和度和亮度来达到自定义的暗度效果。

.darken-element {
  background-color: hsl(210, 70%, 40%); /* 使用 HSL 颜色模式调整背景色 */
}

使用CSS滤镜

在CSS3中，还可以使用CSS滤镜来改变元素的背景色。brightness()滤镜可以帮助我们改变元素的亮度，从而调整背景色的暗度。

.darken-element {
  background-color: #007bff; /* 原始背景色 */
  filter: brightness(80%); /* 调整亮度为 80%，背景色变暗 */
}

五、示例代码

以下是一个使用上述方法实现网站暗黑模式的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Example</title>
  <style>
    :root {
      --accent: #226997;
      --main: #333;
      --light: #666;
      --lighter: #f3f3f3;
      --border: #e6e6e6;
      --bg: #ffffff;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --accent: #3493d1;
        --main: #f3f3f3;
        --light: #ececec;
        --lighter: #666;
        --border: #e6e6e6;
        --bg: #333333;
      }
    }
    body {
      background-color: var(--bg);
      color: var(--main);
    }
    .darken-element {
      background-color: rgba(0, 123, 255, 0.8); /* 使用 rgba() 函数变暗 */
    }
  </style>
</head>
<body>
  <h1>Hello, Dark Mode!</h1>
  <div >This element is darkened.</div>
</body>
</html>

六、FAQs

Q1: 如果我只想让某些元素变暗，而不是整个网站，该怎么做？

A1: 你可以使用类选择器或ID选择器来选择特定的元素，并仅对这些元素应用变暗效果。

.darken-specific-element {
  background-color: rgba(0, 123, 255, 0.8); /* 只对这个元素变暗 */
}

然后在HTML中给特定元素添加这个类：

<div >This specific element will be darkened.</div>

Q2: 如何确保暗黑模式在不同浏览器中都能正常工作？

A2: 大多数现代浏览器都支持CSS的媒体查询和变量功能，因此暗黑模式应该能在大多数浏览器中正常工作，为了确保兼容性，你可能需要在不同的浏览器中进行测试，并根据需要进行调整，避免使用过于复杂或实验性的CSS特性也是一个好主意。

CSS变量变暗效果夜间模式媒体查询
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/401399.html
0

相关文章