Halfmoon用法教程（如何自定义明暗模式网站UI）

文章图片

如何自定义明暗模式网站UI

虽然大多数 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="https://www.lsbin.com/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="https://www.lsbin.com/css/halfmoon-variables.css" rel="stylesheet" /> < /head> < body> < script src="https://www.lsbin.com/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="https://www.lsbin.com/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="https://www.lsbin.com/Submit" /> < div class="text-right mt-10"> < a href="https://www.lsbin.com/#home">Need help?< /a> < /div> < /form> < /div> < script src="https://www.lsbin.com/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 可以使用我们自己定义的自定义样式来覆盖预定义的样式。我们专注于覆盖暗模式样式，但你也可以扩展从本教程中获得的知识以覆盖亮模式中的样式。
【Halfmoon用法教程（如何自定义明暗模式网站UI）】根据经验，为浅色模式定义的样式以--lm前缀开头，而为深色模式定义的样式以--dm前缀开头。可以为浅色和深色模式自定义许多样式，这为你的网页打开了一个可能的自定义世界。
你可以在GitHub上找到本教程中使用的完整代码。