虽然大多数 UI 库和框架都带有一些预定义的样式和组件，但在定制方面却缺少一些。这通常是因为它们将样式、设计决策和模式强加给了开发人员。如果你希望能够快速重新定义默认提供的样式、设计决策和模式，那么动态定制很重要。
在本Halfmoon用法教程中，我们将向你介绍 Halfmoon 并演示如何使用这个多功能框架构建可定制的动态用户界面。
如何使用Halfmoon？为了展示 Halfmoon 的实际效果，我们将构建一个简单的表单，其中包含 Halfmoon 预定义的用于明暗模式的默认样式。然后，我们将自定义 UI 以包含我们的自定义样式和设计决策。
我们的示例项目将是一个没有任何前端框架的静态网页，除了 Halfmoon 框架。
什么是Halfmoon？
Halfmoon 是用于构建网站用户界面的前端框架。其突出的功能之一是内置的暗模式，可让你轻松创建可切换的主题。该框架在暗模式下为每个元素提供了一组不同的样式。
Halfmoon 带有许多预先设计好的、响应式的、移动优先的组件，这些组件拥有像 Bootstrap 这样的明确 UI 套件。尽管如此，它仍然可以轻松定制，因为该框架完全使用CSS 变量（也称为 CSS 自定义属性）构建。Halfmoon 中有近 1,500 个 CSS 变量提供自定义功能。这意味着几乎所有内容都可以通过覆盖 CSS 文件中的属性进行自定义，从而非常容易为你的网站或产品重新设置Halfmoon主题。
当父元素的class属性包含.dark-mode类名时，暗模式特性将应用于每个子元素。Halfmoon实现并提供了在Halfmoon对象上的toggleDarkMode接口来触发从亮模式到暗模式的转换。这个内置函数halfmoon.toggleDarkMode()为将.dark-mode类添加到父元素提供了一个简洁、简单的工作流。
Halfmoon 可用于创建几乎任何类型的网站。除了暗模式功能外，Halfmoon 还提供高度标准化的组件，这些组件在不同的管理面板、仪表板、导航栏和下拉菜单中快速且可重用。最重要的是，这些组件是可定制的。
使用 Halfmoon 构建用户界面
如何自定义明暗模式网站UI？让我们首先在文件夹中创建文件，为我们的演示项目设置开发环境。该index.html文件将作为我们静态网页的入口点。
mkdir halfmoon-project
touch index.html创建上述文件夹和 HTML 文件后，让我们使用以下样板代码更新index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="path/to/fav.png">
<title>Static Webpage | Halfmoon</title>
</head>
<body>
</body>
</html>现在我们有了入门 HTML 代码，让我们下载 Halfmoon 框架并构建网页的其余部分。
导航到Halfmoon 官方网站上的下载页面。对于本教程，我们将下载现成的编译代码。
这是一个压缩文件夹，因此你需要解压缩它。解压缩后，仅将我们将在项目中使用的文件复制并粘贴到项目文件夹中：./css/halfmoon-variables.css和./js/halfmoon.js. 在项目文件夹中创建CSS和JS文件夹，并将./css/halfmoon-variables.css和./js/halfmoon.js文件分别粘贴到其中。
如何使用Halfmoon？现在让我们通过链接Halfmoon提供的样式和逻辑文件来更新index.html：
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>Static Webpage | Halfmoon</title>
<link href="css/halfmoon-variables.css" rel="stylesheet" />
</head>
<body>
<script src="js/halfmoon.js"></script>
</body>
</html>JS文件应该放在<body>标签的末尾；如果没有，有些事情可能不会按预期工作。
例如，使用onclick="…"事件调用js/halfmoon.js文件中的Halfmoon 内置方法之一将不起作用，除非将JS 文件放在<body>标签的末尾。 至于CSS文件，可以放在<head>标签里面，这是大多数项目的惯例。
现在让我们用卡片和表单组件更新index.html文件，并为元素添加我们想要的各种样式的类名。这些类名易于理解。
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>Static Webpage | Halfmoon</title>
<link href="css/halfmoon-variables.css" rel="stylesheet" />
</head>
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true" data-set-preferred-theme-onload="true">
<div id="home" class="card w-400 mw-full m-0 position-relative">
<div class="position-absolute top-0 right-0 z-10 p-10">
<button
class="btn btn-square"
type="button"
onclick={halfmoon.toggleDarkMode()}
>
<i class="fa fa-moon-o" aria-hidden="true">🌙</i>
<span class="sr-only">Toggle dark mode</span>
</button>
</div>
<h2 class="card-title">Please fill up this form</h2>
<form action="..." method="...">
<div class="form-group">
<label for="full-name" class="required">
Name
</label>
<input
type="text"
id="full-name"
class="form-control"
placeholder="Your full name"
required="required"
/>
</div>
<div class="form-group">
<label for="profession" class="required">
Profession
</label>
<input
type="text"
id="profession"
class="form-control"
placeholder="Your profession"
required="required"
/>
</div>
<input class="btn btn-primary btn-block" type="submit" value="Submit" />
<div class="text-right mt-10">
<a href="#home">Need help?</a>
</div>
</form>
</div>
<script src="js/halfmoon.js"></script>
</body>
</html>上面的标记代码在卡片中包含一个表单。此表单包含三个输入。其中两个具有text类型，而最后一个是具有submit类型的输入。
然后，在卡片组件内部，我们定义了一个带有onclick事件处理程序的按钮元素。此事件处理程序调用该halfmoon.toggleDarkmode()方法。亮模式和暗模式的 UI 结果如下：
灯光模式：
黑暗模式：
Halfmoon用法教程：自定义用户界面
如何自定义明暗模式网站UI？为了定制上面的暗模式UI，我们将改变Submit按钮的背景颜色和网页主体的背景图像。我们还将更改Submit按钮的边框颜色和card组件的背景颜色。
这些示例将指导你对 Halfmoon 中的预定义样式进行进一步自定义。
如何使用Halfmoon？让我们在./css/halfmoon-variables.css文件中的 CSS 样式:root范围内定义下面的自定义样式。
...
:root {
--cm-btn-bg-color: rgb(128, 0, 128);
--cm-btn-bg-color-hover: rgb(201, 12, 201);
--body-bg-gif: url("https://media.giphy.com/media/aRZ4vTsHnyW6A/giphy.gif");
...
}
...现在搜索以下 CSS 变量的第一次出现，并将其替换为自定义样式，如下所示：
...
: root {
...
--dm-button-primary-bg-color: var(--cm-btn-bg-color);
--dm-button-primary-border-color: var(--cm-btn-bg-color);
--dm-button-primary-bg-color-hover: var(--cm-btn-bg-color-hover);
...
}
...接下来，body当我们处于黑暗模式时，让我们为元素定义一个新背景。当处于暗模式时，该body元素具有类名.dark-mode。
让我们在 CSS 文件中查找这个类名并使用我们的自定义background-image更新它：
...
.dark-mode {
...
background-image: var(--body-bg-gif);
...
}
...上面的样式为body元素添加了一张 GIF 图片作为背景图片。
我们将进行的最后一次定制将在卡片组件上进行。我们将直接更新background-color而不定义自定义样式变量。在暗模式下，卡片组件的类名是 .dark-mode .card。
让我们更新类，如下所示：
...
:root {
...
--dm-card-bg-color: rgb(43, 36, 43);
}
...
.dark-mode .card {
...
background-color: var(--dm-card-bg-color);
...
}一旦我们使用这些自定义样式成功更新了我们的 CSS 文件，灯光模式的 UI 将保持不变。也就是说，我们已经自定义了我们的黑暗模式，它看起来肯定会有所不同，如下所示：
黑暗模式：
Halfmoon用法教程结论
如何使用Halfmoon？在本教程中，我们探索了 Halfmoon 框架，演示了一些用例，并演练了在你的网页开发中快速下载和包含 Halfmoon 的步骤。
我们还进行了更深入的研究，并展示了 hpw 可以使用我们自己定义的自定义样式来覆盖预定义的样式。我们专注于覆盖暗模式样式，但你也可以扩展从本教程中获得的知识以覆盖亮模式中的样式。
根据经验，为浅色模式定义的样式以--lm前缀开头，而为深色模式定义的样式以--dm前缀开头。可以为浅色和深色模式自定义许多样式，这为你的网页打开了一个可能的自定义世界。
你可以在GitHub上找到本教程中使用的完整代码。
