仅使用 HTML、CSS 和 Javascript 的暗/亮主题切换器

2025-05-26

仅使用 HTML、CSS 和 Javascript 的暗/亮主题切换器

网站上有多种实现暗模式的方法，从最简单到最复杂，而我在本简短教程中展示的方法我认为是最简单、最轻松的，为此我们将仅使用 HTML、CSS 和 Javascript 来实现。

实现暗模式将使用两个关键概念：用于颜色的CSS 变量和用于存储用户当前主题的localStorage 。

CSS 变量

CSS 变量的工作方式与任何其他语言中的变量一样，我们为其分配值，然后可以对其进行修改，为了实现暗模式，我们将颜色的值分配给CSS 变量，然后我们可以根据上下文稍后对其进行修改。

/*creating a css variable */
--bg-grey-light: #f5f5f5;

/*using the css variable */
background-color: var(--bg-grey-light);
Enter fullscreen mode Exit fullscreen mode

CSS 变量的一个特殊特性使其成为实现暗模式的一个很好的替代方案，即在父元素内声明的所有元素都将
继承它们，因此我们将直接在其中定义变量，body以便其中的所有元素都可以继承它们。

本地存储 API

为了获得更好的用户体验，我们将使用 localStorage 来存储用户当前的主题，这样当用户返回网站时，他们最喜欢的主题将自动应用。

// storing the theme on the user's machine
localStorage.setItem('theme', 'dark');

//accessed the user's machine theme
localStorage.getItem('theme');
// dark
Enter fullscreen mode Exit fullscreen mode

文档结构

作为一个非常小的项目，我们的文档将包含两个按钮和两个文本块，按钮将具有更改主题和更新页面的功能。

索引.html

  <body>
     <div class="container">
       <h1 class="heading">
         How to make dark mode with HTML, CSS and Javascript only
       </h1>
       <div class="buttons">
         //button to switch dark/light states
         <button id="toggle" class="button">toggle</button>
         //button to refresh the page
         <button id="refresh" class="button">refresh</button>
       </div>
       <div class="text-wrapper">
         <p class="paragraph">
           The United States shall be President of the....
         </p>
       </div>
       <div class="text-wrapper">
         <p class="paragraph">
           Why, there's hardly enough of me left...
         </p>
       </div>
     </div>
     <script src="script.js"></script>
   </body>
Enter fullscreen mode Exit fullscreen mode

定义颜色

由于我们处理两种不同的上下文，因此浅色主题中的每种颜色都必须有深色主题的变体，并且必须根据您的职责来定义颜色，因此需要有文本颜色、背景颜色……

变量的定义

/* Definition of colors */
body {
   /* text colors */
   --text-white: #ffffff;
   --text-dark: #142136;

   /* background colors */
   --bg-grey-light: #f5f5f5;
   --bg-white: #ffffff;
   --bg-blue-dark: #142136;
   --bg-indigo: #6366f1;

   /*
...
*/
}
Enter fullscreen mode Exit fullscreen mode

定义变量后，我们将创建一个名为的类.dark，它将包含相同变量的定义，但颜色值更改为深色主题，因此当我们想要将上下文更改为深色主题时，我们只需.dark通过将类添加到主体中，javascript先前定义的变量将被类中定义的变量覆盖.dark。

深色主题的变量

.dark {
   --text-white: #e6e6e6;
   --text-dark: #ffffff;

   --bg-grey-light: #142136;
   --bg-white: #22395d;
   --bg-blue-dark: #142136;
   --bg-indigo: #7577e1;
}
}
Enter fullscreen mode Exit fullscreen mode

请注意，在黑暗主题的上下文中，--text-dark具有其值的变量#142136被更改为：，#ffffff记住这一点，您只需对代码的所有其他颜色重复相同的过程。

最终.css文件是什么样的：

样式.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Definition of colors */
body {
  /* text colors */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* background colors */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  font-family: "Inter", sans-serif;
  line-height: 1.7;
  background-color: var(--bg-grey-light);
}
.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;
  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  display: flex;
  padding: 20px;
  flex-direction: column;
}
.text-wrapper {
  width: 100%;
  padding: 20px;
  background-color: var(--bg-white);
  margin-bottom: 40px;
  border-radius: 10px;
}
.paragraph {
  font-size: 16px;
  color: var(--text-dark);
}
.heading {
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 40px;
  color: var(--text-dark);
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.button {
  width: 200px;
  padding: 5px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  background-color: var(--bg-indigo);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode

正如您在代码中看到的，没有直接使用颜色，而是使用了之前定义的变量。

更改主题

要切换主题，我们将使用 JavaScript。脚本会首先在 localStorage 中检查之前存储的主题是否为深色，并body在加载后立即应用。
我们eventListener为切换按钮添加了一个，这样当用户点击该按钮时，它会移除或添加.dark相应的类，并根据上下文更改 localStorage 中存储的主题。

脚本.js

const toggle = document.getElementById("toggle");
const refresh = document.getElementById("refresh");
const theme = window.localStorage.getItem("theme");

/* checks if the theme stored in localStorage is dark
if yes apply the dark theme to the body */
if (theme === "dark") document.body.classList.add("dark");

// event listener stops when the change theme button is clicked
toggle.addEventListener("click", () => {
   document.body.classList.toggle("dark");
   if (theme === "dark") {
     window.localStorage.setItem("theme", "light");
   } else window.localStorage.setItem("theme", "dark");
});

refresh.addEventListener("click", () => {
   window.location.reload();
});
Enter fullscreen mode Exit fullscreen mode

演示：dark-mode.kelven.dev
源代码：Github Repo

非常感谢你读到这里，希望我的文字能对你有所帮助。
这是我的第二篇文章/博客文章，欢迎提出你的意见，这有助于我不断改进。
欢迎查看我的作品集，里面有一些有趣的项目。

文章来源：https://dev.to/rubalaine/dark-mode-with-html-css-javascript-only-4nb9
Devto 翻译
PREV
不要再这样写 JavaScript 了 给我买杯咖啡
NEXT
开源 Elm SPA 之旅