时间戳

首页 > 解决方案 > 我如何让它像暗模式和亮模式一样切换到黑色或白色？

html - 我如何让它像暗模式和亮模式一样切换到黑色或白色？

问题描述

你好，所以我现在正在制作一个网站，需要一些帮助。你看，我做了这个非常酷的开关链接来查看开关=（https://drive.google.com/file/d/1613Pz0WJbdzKdyQWRQ-JUE2Kj--yoDIK/view?usp=sharing）（可能需要下载它）我想知道如何让它改变网站的背景。所以当你翻转它时它会变成黑色再次翻转它会变成白色。谁能帮忙？

标签： htmlcss

解决方案

您可以使用 CSS 变量和一点 JavaScript 来切换主题。

在 中定义主题，.light然后.dark将主体的类设置为它。它将变量设置为主题颜色。

前任：

function toLight() {
  document.body.classList.remove('dark');
  document.body.classList.add('light');
}

function toDark() {
  document.body.classList.remove('light');
  document.body.classList.add('dark');
}
.light {
  --font-color: #111;
  --bg-color: #fff;
}

.dark {
  --font-color: #eee;
  --bg-color: #111;
}

p, h1 {
  color: var(--font-color);
}

body {
  background-color: var(--bg-color);
}
<body class="light">
  <h1>title</h1>
  <p>text blah blah</p>
  
  <button onclick="toDark()">switch to dark</button>
  <button onclick="toLight()">switch to light</button>
</body>

推荐阅读