如何在 HTML、CSS 和 JS 中制作明暗模式按钮

我们都见过它们，它们保护我们的眼睛免受所有光线的伤害。 这些是暗模式按钮，这里是如何在 HTML、CSS 和 JS 中创建自己的按钮！

我们要做的第一件事是创建 HTML 文件。 我正在使用引导程序使按钮看起来不错。 我要做的第一件事是将引导程序链接到我的 HTML 文件，这样我就可以访问所有按钮。

这是样板 HTML 代码。 现在我将添加按钮并链接 css 样式表。 如果您正在跟进，请在与您的 HTML 文件相同的目录中创建一个 style.css 文件。

Dark Mode

我使用了引导 btn-dark 类，它只是一个简单的深色按钮。

现在为 css。 我将创建一个 .dark 类，但我知道我们还没有分配它。 那将适用于黑暗模式。

.dark {background-color: black;}

现在，我们将添加一些 javascript。 我们不会制作新文件，因为它不会那么多。 我将首先给按钮一个“按钮”类，然后从那里开始工作。我将添加一个事件侦听器，然后在单击时，我将切换 HTML 主体类 dark 。然后我将向主体添加一个 ID，以便我们可以 使用 JavaScript 选择它。然后我将更改文本和按钮颜色，以便我们可以来回切换。

Dark Mode

仅此而已！ 谢谢阅读。 如果你喜欢，请关注！