A beginner’s guide to making a dark theme for a website Programming and development Jekyll 明暗模式实用指南

2月 26, 2023 admin 0 Comments

如今，为您的网站设置深色主题是一个常见的功能。有多种方法可以为您的网站添加深色主题，在本文中，我演示了一种对初学者友好的 Web 深色主题编程方法。随意探索、犯错，更重要的是，通过以自己的方式操作代码来学习。

图片来源：

（萨钦萨马尔，CC BY-SA 4.0）

编程和开发红帽开发人员博客编程速查表免费试用：红帽学习订阅电子书：Bash 编程简介 Bash shell 脚本速查表电子书：现代化企业 Java 构建应用程序的开源开发人员指南

图标

我喜欢为我的用户提供一种视觉方式来发现黑暗模式功能。您可以通过在 HTML 的元素中插入 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>

在您的标记内，创建一个 Font Awesome 月亮图标类，稍后您将使用 JavaScript 将其切换为 Font Awesome 太阳图标类。此图标允许用户从默认的浅色主题切换到深色主题，然后再切换回来。在这种情况下，您正在从浅色主题中的 fa-moon 更改为深色主题中的 fa-sun。换句话说，图标总是与当前模式相反。

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

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

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

在主题之间切换

要切换主题按钮的外观并应用 changeTheme 类，请在