如何构建高级轻/黑暗主题网站！
#html #css #网络开发人员 #darkmode

介绍：

成年人平均每天直接接触15分钟的阳光以产生足够的维生素D，但由于缺乏自然光的暴露，并且仅暴露于人造蓝光，许多人仍然患有维生素D缺乏症。

因此，我们作为Web开发人员的工作是确保即使人造光也无法到达它们。通过在其网站上添加暗模式。

出于时尚的外观或可访问性，在任何网站上添加暗模式都非常流行，并体会到程序员和内容创建者的眼中，他们今天在计算机屏幕上度过了一整天的时间学习如何构建高级轻/黑暗主题网站

您可以在codepen或github

上找到本文中使用的所有代码

dark mode meme

简单的方法：

您现在可以关闭文章，因为我收集了一套库，这些库将为您提供易于添加的黑暗模式，但是如果您是A 真实的程序员，我会等待详细的解释当您可以使用图书馆并在一半的时间内完成该图书馆时，如何自己做！

  • Darkmode.Js 图书馆使用CSSkoude0â，以将深色模式带到您的任何网站。
  • Nightly.js 一个零依赖性的JavaScript库，用于在您的UI中启用黑暗/夜间模式。
  • darkmodejs 自动之间的系统偏好与您的网站之间的链接，是的，名称中不再有创造力

，不要忘记，大多数新组件库都会像bootstrap一样支持深色模式。

real programmer meme

真正的程序员方式：

让我们从您可以做的最简单的事情开始，以使您的网站支持黑暗模式，并遵循设备首选项，即使用koude1的CSS属性

所有新浏览器都内置了默认样式，例如，当您使用表单时，它具有特定的形状和颜色

此外，大多数浏览器都具有所有元素的暗模式版本，并且使用和使用color-scheme属性将页面更改为“暗模式”的浏览器版本。

body {
    color-scheme: dark;
}

您不应过分依赖此功能，因为您可以使用它的修改水平很低，而且您的网站也可能因浏览器而异。

chorom vs firefox dark mode style

实际上，这个简单的事情中有很多细节，但是如果我们想构建一个高级的轻/深色主题网站，我们就不能仅仅依靠它，如果您想要更多详细信息，我建议使用此视频：Light & Dark mode WITHOUT CSS < /p>

dark mode colors
当然，在开始编写代码之前，您必须在两种模式下选择颜色，而且由于我不是设计师，这里是一些不错的资源：

选择适合项目的颜色后，处理这些颜色的最简单方法是在CSS variables的系统中收集它们：

:root{
    --clr-dark-gray: hsl(0, 0%, 13%);
    --clr-white: hsl(200, 16%, 89%);
}
  • 创建一个代表暗模式和光模式的变量[-bg-clr-light，--bg-clr-dark，...] 
:root{
    /* light mode */
    --bg-clr-light: var(--clr-white);
    --txt-clr-light: var(--clr-dark-gray);
    /* dark mode */
    --bg-clr-dark: var(--clr-dark-gray);
    --txt-clr-dark: var(--clr-white);
}

  • 创建整个站点中使用的主要变量[--bg-clr，--txt-clr，...]

  • 并且在没有'Dark'类的情况下，主要变量的值等于光模式变量：--bg-clr: var(--bg-clr-light);和Vice and Vice 

body {
    --bg-clr: var(--bg-clr-light);
    --txt-clr: var(--txt-clr-light);
    color-scheme: light;
}
body.dark{
    --bg-clr: var(--bg-clr-dark);
    --txt-clr: var(--txt-clr-dark);
    color-scheme: dark;
}
  • 在您的项目中使用这些变量，因为它们的价值将会改变您，但是“黑暗”类别 
.App {
    background-color: var(--bg-clr);
}

CSS代码 

:root{
    --clr-dark-gray: hsl(0, 0%, 13%);
    --clr-white: hsl(200, 16%, 89%);

    --bg-clr-light: var(--clr-white);
    --txt-clr-light: var(--clr-dark-gray);

    --bg-clr-dark: var(--clr-dark-gray);
    --txt-clr-dark: var(--clr-white);
}
body {
    --bg-clr: var(--bg-clr-light);
    --txt-clr: var(--txt-clr-light);
    color-scheme: light;
}
body.dark{
    --bg-clr: var(--bg-clr-dark);
    --txt-clr: var(--txt-clr-dark);
    color-scheme: dark;
}
.App {
    background-color: var(--bg-clr);
}

剩下的就是每个人最喜欢的部分 js

js meme

不用担心您要做的就是在单击按钮时切换身体上的“黑暗”类。

let toggleButton = document.querySelector(".Button");
let body = document.querySelector("body");

toggleButton.addEventListener("click", () => {
    body.classList.toggle("dark");
});
  • 使用koude8针对按钮和身体
  • 添加 eventlistener <使用koude9点击时收听按钮
  • 将功能传递给 eventlistener 使用koude10添加或删除类

现在，当您按按钮时，将添加“ DARK”类，并且将交换主CSS变量值。

当然，您可以通过添加动画，保持网站的状态和其他想法来使项目更加优雅，但是我为您的创造力留下了机会，可以继续我的创造力。

，但是我不会没有很多资源从他们那里汲取灵感并继续学习更多信息：

：

结论：

这是如何构建高级轻/深色主题网站的方法，不要忘记将Dark Mode作为网站上的默认模式。

最后，我想听听您对文章的看法。

  • 缺少什么？
  • 我应该添加更多或更少的细节吗？

我希望您喜欢这篇文章，不要忘记关注我：

作者