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

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)

文章图片
黑暗模式:
Halfmoon用法教程(如何自定义明暗模式网站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用法教程(如何自定义明暗模式网站UI)

文章图片
Halfmoon用法教程结论如何使用Halfmoon?在本教程中,我们探索了 Halfmoon 框架,演示了一些用例,并演练了在你的网页开发中快速下载和包含 Halfmoon 的步骤。
我们还进行了更深入的研究,并展示了 hpw 可以使用我们自己定义的自定义样式来覆盖预定义的样式。我们专注于覆盖暗模式样式,但你也可以扩展从本教程中获得的知识以覆盖亮模式中的样式。
【Halfmoon用法教程(如何自定义明暗模式网站UI)】根据经验,为浅色模式定义的样式以--lm前缀开头,而为深色模式定义的样式以--dm前缀开头。可以为浅色和深色模式自定义许多样式,这为你的网页打开了一个可能的自定义世界。
你可以在GitHub上找到本教程中使用的完整代码。

    推荐阅读