服务器之家
您的位置： 首页 编程语言 css

两分钟教你实现CSS一键切换黑暗模式

679人浏览   2023-10-23 14:23:45

什么是黑暗模式？

深色模式，也称为浅色暗配色方案，是一种在深色背景上使用浅色文本，图标和图形用户界面元素的配色方案，通常在计算机用户界面设计和Web设计方面进行讨论。

黑暗模式背后的想法是，它可以减少设备屏幕发出的光，同时保持可读性所需的最小颜色对比度。

黑暗模式的优点是什么？

  • 可以减少使用设备上的能量
  • 在弱光条件下可以潜在地减轻眼睛疲劳和干眼
  • 减少blue light手机发出的声音–如果你在晚上使用设备，可以让您保持清醒

如何在你的网站中使用黑暗模式？

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="btn" id="toggleBtn">
        Toggle Dark Mode
    </button>
    <script src="script.js"></script>
</body>
</html>

现在让我们解决主要问题。首先，我们将为颜色添加css变量（将它们称为primary和background），并在黑暗模式下覆盖所需的颜色

:root{
    --primary: #4240b4;
    --background: #dddddd;
}

.dark{
    --background: #222222;
}

html,
body{
    background-color: var(--background);
}

.btn{
    background-color: var(--primary);
}

因此，从javascript中，我们只需要切换html文档正文的类列表

const body = document.querySelector("body")
const toggleBtn = document.querySelector("#toggleBtn")

toggleBtn.addEventListener("click", (e) => {
    body.classList.toggle("dark")
})


相关推荐