仅使用 CSS 向网站添加深色/浅色主题

大家好👋，希望你们一切都好。

所以，今天您将学习如何仅使用 CSS 😎向您的网站添加深色/浅色主题。

HTML

让我们首先设置我们的 HTML。

<input id="toggle-theme" class="toggle-theme" type="checkbox" checked/>

<main >
  <label for="toggle-theme" class="toggle-theme-label">
    <span>💡</span>
</label>
  <article>
  <header>Dark / Light Mode Using Only CSS</header>
  <p>...</p>
</article>
</main>

CSS

现在让我们使用 CSS 变量设置 HTML 的background-colour文本。colour


:root {
   --bg-color: #edf2f4;
   --text-color: #011627;
}

main {
  padding: 24px;
  background-color: var(--bg-color);
  color: var(--text-color);
}

现在，让我们设置复选框被选中时的功能。

/* all the magic happing here ✨*/
input[type="checkbox"]:checked ~ main {
  --bg-color: #011627;
  --text-color: #edf2f4;
}

就是这样😎。

例子

📚 进一步阅读：

感谢阅读！我叫 Bipin Rajbhar；我喜欢帮助人们学习新技能😊。如果您想收到新文章和资源的通知，可以在Twitter上关注我。

文章来源：https://dev.to/bipinrajbhar/adding-dark-light-theme-to-the-website-using-only-css-f1o