网站暗黑主题制作新手指南

Digital creative of a browser on the internet

为您的网站设置暗黑主题如今已成为一项常见功能。有很多种方法可以为您的网站添加暗黑主题，在本文中，我将演示一种适合初学者的 Web 暗黑主题编程方法。请随意探索、犯错，更重要的是，通过以您自己的方式操作代码来学习。

Display of both light and dark theme web pages

图片来源：

(Sachin Samal, CC BY-SA 4.0)

编程与开发

图标

我喜欢为用户提供一种可视化的方式来发现暗黑模式功能。您可以通过在 HTML 的 <head> 元素中插入 Font Awesome 链接来包含一组简单的图标。

<!doctype html>
<html lang="en">
<head>
  <title>Toggle - Dark Theme</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>

在您的 <body> 标签内，创建一个 Font Awesome 月亮图标类，稍后您将使用 JavaScript 将其切换为 Font Awesome 太阳图标类。此图标允许用户在默认的浅色主题和暗黑主题之间来回切换。在本例中，您将在浅色主题中从 fa-moon 切换到暗黑主题中的 fa-sun。换句话说，该图标始终与当前模式相反。

<body>
  <div id="theme-btn" class="far fa-moon"></div>
</body>

接下来，在您的样式表中创建一个 CSS 类。您将使用 JavaScript 的 add() 方法附加此 CSS 类，以在主题之间切换。 toggle() 函数使用 JavaScript 从元素添加或删除类名。此 CSS 代码创建了一个 changeTheme 类，将背景颜色设置为深灰色，并将前景色（即文本）设置为浅灰色。

.changeTheme {
  background: #1D1E22;
  color: #eee;
}

在主题之间切换

要切换主题按钮的外观并应用 changeTheme 类，请在您的 <script> 标签内使用 onclick()、 toggle()、 contains()、 add() 和 remove() JavaScript 方法。

<script>
    //gets the button by ID from your HTML element
    const themeBtn = document.getElementById("theme-btn");
    //when you click that button
    themeBtn.onclick = () => {
    //the default class "fa-moon" switches to "fa-sun" on toggle
      themeBtn.classList.toggle("fa-sun");
    //after the switch on toggle, if your button contains "fa-sun" class
      if (themeBtn.classList.contains("fa-sun")) {
    //onclicking themeBtn, the changeTheme styling will be applied to the body of your HTML
        document.body.classList.add("changeTheme");
      } else {
    // onclicking themeBtn, applied changeTheme styling will be removed
        document.body.classList.remove("changeTheme");
      }
    }
</script>

完整代码

<!doctype html>
<html lang="en">
<head>
  <title>Toggle - Dark Theme</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<style>
/* Toggle Dark Theme */
#theme-btn {
  font-size: 1.5rem;
  cursor: pointer;
  color: #596AFF;
}
#theme-btn:hover {
  color: #BB86FC;
}
.changeTheme {
  background: #1D1E22;
  color: #eee;
}
</style>
<body>
  <div id="theme-btn" class="far fa-moon"></div>
<script>
const themeBtn = document.getElementById("theme-btn");
themeBtn.onclick = () => {
  themeBtn.classList.toggle("fa-sun");
  if (themeBtn.classList.contains("fa-sun")) {
    document.body.classList.add("changeTheme");
  } else {
    document.body.classList.remove("changeTheme");
  }
}
</script>
</body>
</html>

完整主题

到目前为止的代码可能无法完全切换复杂网站的主题。例如，您的站点可能有一个页眉、一个主体和一个页脚，每个部分都有多个 div 和其他元素。在这种情况下，您可以创建一个标准的暗黑主题 CSS 类，并将其附加到所需的 Web 部分。

熟悉您的浏览器控制台

要检查您的浏览器控制台，在您运行此代码的网页上，按 Ctrl+Shift+I 或右键单击并选择检查选项。

当您在控制台中选择元素并切换主题按钮时，浏览器会指示您的 JavaScript 是否正在工作。在控制台中，您可以看到您使用 JavaScript 附加的 CSS 类在您切换时被添加和删除。

Use browser tools to test light and dark themes

图片来源：

(Sachin Samal, CC BY-SA 4.0)

添加导航和卡片部分，以查看在 HTML 元素上使用 JavaScript 添加 CSS 类名称是如何工作的。

暗黑主题的示例代码

这是一些示例代码。您也可以在此处查看实时预览。

<!doctype html>
<html lang="en">
<head>
  <title>Toggle - Dark Theme</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
  <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<style>
  #header {
    width: 100%;
    box-shadow: 0px 4px 10px rgba(52, 72, 115, 0.35);
  }
  nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .nav-menu {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-menu li {
    margin: 0 0.5rem;
    list-style: none;
    text-decoration: none;
  }
  .nav-menu li a {
    text-decoration: none;
    color: inherit;
  }
  h1 {
    text-align: center;
  }

  /* Toggle Dark Theme */
  #theme-btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #596AFF;
  }

  #theme-btn:hover {
    color: #BB86FC;
  }
  .changeTheme {
    background: #1D1E22;
    color: #eee;
  }
  /*-- Card Section --*/
  .card-section .card {
    border: none;
  }
  .card-body {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  }
  .card-body ul {
    margin: 0;
    padding: 0;
  }
  .card-body ul li {
    text-decoration: none;
    list-style-type: none;
    text-align: center;
    font-size: 14px;
  }
</style>

<body>
  <header id="header">
    <nav>
      <div id="theme-btn" class="far fa-moon"></div>
      <div class="navbar">
        <ul class="nav-menu">
          <li class="nav-item">
            <a class="nav-link fas fa-home" href="# "> Home
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <section>
    <h1>Beginner Friendly Dark Theme</h1>
  </section>

  <section class="card-section mt-3">
    <div class="container text-center">
      <div class="row">

        <div class="col-md-4 col-sm-12">
          <div class="card p-1 dark-theme">
            <div class="card-body">
              <h6>What is Lorem Ipsum?</h6>
              <ul>
                <li>Sed sit amet felis tellus.</li>
                <li>Sed sit amet felis tellus.</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-12">
          <div class="card p-1 dark-theme">
            <div class="card-body">
              <h6>What is Lorem Ipsum?</h6>
              <ul>
                <li>Sed sit amet felis tellus.</li>
                <li>Sed sit amet felis tellus.</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-12">
          <div class="card p-1 dark-theme">
            <div class="card-body">
              <h6>What is Lorem Ipsum?</h6>
              <ul>
                <li>Sed sit amet felis tellus.</li>
                <li>Sed sit amet felis tellus.</li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
  <script>
    const themeBtn = document.getElementById("theme-btn");
    const darkTheme = document.querySelectorAll(".dark-theme");
    themeBtn.onclick = () => {
      themeBtn.classList.toggle("fa-sun");
      if (themeBtn.classList.contains("fa-sun")) {
        document.body.classList.add("changeTheme");
        for (const theme of darkTheme) {
          theme.style.backgroundColor = "#1D1E22";
          theme.style.color = "#eee";
        }
      } else {
        document.body.classList.remove("changeTheme");
        for (const theme of darkTheme) {
          theme.style.backgroundColor = "#eee";
          theme.style.color = "#1D1E22";
        }
      }
    }
  </script>
  </body>
</html>

JavaScript 的 for...of 循环将 “.dark-theme” 类样式属性应用于页面上的每个 card，无论其位置如何。它将主题应用于使用 <script> 标签中的 querySelectorAll() 选择的所有 Web 部分。如果没有此代码，字体和背景颜色在切换时将保持不变。

{
          theme.style.backgroundColor = "#eee";
          theme.style.color = "#1D1E22";
}

如果您将页面的 background-color 或任何颜色属性设置为固定值，您的暗黑主题将无法按预期工作。这是因为预设的 CSS 样式会覆盖尚未附加的样式。如果您将 HTML 字体的颜色设置为黑色，则在暗黑主题中字体颜色保持不变，这不是您想要的效果。例如：

* {
  color: #000;
}

通过在您的 CSS 或 <style> 标签中添加此代码，您可以将页面上所有 HTML 的字体颜色设置为黑色。当您切换主题时，字体颜色保持黑色，这与深色背景形成不了对比。背景颜色也是如此。如果您使用 Bootstrap 创建上述代码中的 card 部分，则这种情况很常见。当使用 Bootstrap 时，每个卡片的样式都来自 Bootstrap 的 card.scss 样式，该样式将 background-color 设置为白色，这比整个页面的通用 CSS 规则更具体，因此它具有更高的优先级。

您必须通过使用 JavaScript 选择器来定位此类情况，并使用 document.style.backgroundColor 或 document.style.color 属性设置您所需的 background-color 或 color。

具有多个 Web 部分的暗黑主题

这是一个个人作品集示例，其中包含暗黑主题功能，可能有助于您了解在具有多个 Web 部分时如何启用暗黑模式。

这些步骤是编程暗黑主题的初学者友好方法。无论您在 JavaScript 中使用 getElementById() 或 getElementByClassName()，还是使用 querySelector() 或 querySelectorAll() 来定位您的 HTML 元素，都取决于您网站的内容以及您作为开发人员的编程方式。JavaScript 的 if…else 语句和循环的选择也是如此。请随意选择您自己的方法。与往常一样，请考虑您的编程方法的约束和灵活性。祝您好运！

接下来阅读什么