哪些UI库支持暗模式?

2020年12月30日11:25:03 发表评论 49 次浏览

本文概述

如今, 暗模式是Web, 桌面和移动应用程序中经常需要使用的功能。

通过添加可自定义的界面来提高开发人员在UI库中的体验非常重要, 并且可以促使许多开发人员使用特定的UI库。

以下是一些支持暗模式的已知UI库。

材质用户界面

材质UI的屏幕截图。

React JS的材质设计UI框架在GitHub上拥有超过57, 000个星标, 具有简单, 面向开发人员且可扩展的主题功能。它基于著名的CSS-in-JS, 使开发人员可以在与同一基本概念相关的三种不同样式API之间进行选择。

任何熟悉Material UI的开发人员都可以证明其主题和调色板管理功能是生态系统中最好的。

继主题文档, 我们可以轻松地在基本的材质UI应用上添加深色主题。

此外, 当我们访问文档时, 我们能够切换亮/暗模式和切换调色板, 以帮助可视化具有不同主题的所有提供的材料组件。

威化

深色模式下的Vuetify用户界面。

Vuetify在GitHub上拥有25k颗星, 是Vue中非常流行的UI框架。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

哪些UI库支持暗模式?1

众所周知, 因为它充分利用了Vue API。在Vuetify上, 主题系统构建良好。给你的Web应用程序一个黑暗的主题非常容易。

Vuetify支持Material Design规范的浅色和深色版本。

此名称始于根应用程序组件, 应用程式, 并且受到大多数组件的支持。默认情况下, 你的应用程序将使用浅色主题, 但是可以通过在主题服务中添加深色选项来轻松覆盖它。

除非另外指定, 否则当你将组件指定为亮或暗时, 其所有子项都将继承并应用相同的组件。你可以通过更改手动打开和关闭暗$ .vuetify.theme.dark为真或假。

定制也非常容易实现并且可用。

星状

暗模式下的Nebular UI。

星云, 基于EVA设计系统, 是Angular中最漂亮的UI库之一。

Nebular非常重视其组件的美观和用户体验。 Nebular附带了完全可自定义的默认主题, 宇宙主题, 公司主题和深色主题。

奖金:UI小猫

UI-Kitten.png

UI Kitten是一个基于Eva Design系统(Nebular的移动版本)的React Native UI库。它具有25多种通用组件, 并且具有类似于Nebular的出色主题系统。他们有个入门应用通过40个以浅色和深色为主题的屏幕来展示其组件。

熔炼

Smelte-UI.png

冶炼是SvelteJS建立在尾风CSS遵循材料设计指南。你知道向Smelte添加暗模式有多容易吗?就像添加一样简单darkMode:真在你的"熔炼选项"对象中。

此外, 你可以按任意方式切换此设置, 还可以在打开黑暗模式时自定义外观。

蓝图

Blueprint-UI.png

拥有超过15k的星星的GitHub并且每周在npm上的下载量超过10万, 很明显, Blueprint UI对2020年的UI库产生了影响。

但是, 之所以脱颖而出, 是因为它能够轻松切换至暗模式。这甚至在他们的文档, 你可以在其中按切换明暗主题转移+d.

蓝图v3带有两个UI颜色主题。要应用深色主题, 我们只需应用该类bp3-暗容器元素以所有嵌套子元素为主题。使用前面提到的切换, 可以在两个主题中查看所有组件。

里巴斯

Rebass-react.png

Rebass如此专注于制作可主题化的组件, 以至于他们的口号是"我们的所有组件都是在考虑可主题性的基础上构建的"。这是非常正确的。它们提供了直接的主题API。 Rebass因风格上不受人爱而被人们所喜爱。

你可以根据自己的喜好自定义应用程序的主题文档中的主题指南.

你可以在以下位置播放Rebass的主题演示部分他们的文档

脉轮UI

Chakra-UI.png

Chakra UI是一个简单, 模块化且可访问的组件库, 它为你提供构建React应用程序所需的所有构建块。

Chakra的主题界面可帮助开发人员在整个应用程序中快速引用自定义主题的值。

它提供了一个明智的选择默认主题受到Tailwind CSS的启发, 可以根据你的设计进行自定义。

它的大多数组件都兼容暗模式, 并且使用自定义React Hook:useColorMode其值存储在本地存储并在页面加载时使用。

更多

尾风带插件

Tailwind CSS是一种流行的CSS框架。它是高度可定制的, 并为你提供构建设计所需的所有必要构建块。

不幸的是, Tailwind并未提供黑暗模式。但是, 其很棒的社区提出了一个暗模式插件可以与库一起使用, 以帮助开发人员提供暗模式支持。

这个插件有变体与Tailwind的工作原理相同, 并且可以完全自定义样式。

类星体带插件

类星体框架是基于Vue.js的框架, 它使开发人员可以快速创建多种样式的网站, 移动和桌面应用程序。

Quasar框架随附很多组件, 指令, 插件和扩展的集合, 这将帮助你构建出色的应用程序。

对我们来说幸运的是, Quasar有一个暗模式插件它是自动安装的, 相对易于处理。

该插件可与基本的Vue应用程序以及SSR构建版本很好地配合使用。

移动

还有一些UI库在跨平台移动框架上支持暗模式。这是使用各种框架的开发人员经常要求的功能。

Ionic

Ionic UI的屏幕截图。

Ionic已经存在了很长时间, 因此它的开发人员从美学的角度了解跨平台移动需要什么。

Ionic现在可以非常轻松地更改应用程序的主题, 包括支持深色方案。

随着对本机应用程序中暗模式的支持越来越多, Ionic开发人员现在正在寻求将其添加到其应用程序中以支持用户首选项。此外, Ionic不仅是移动UI库, 而且在Web应用程序上也能很好地工作

在Ionic中, 添加颜色方案首选项就像编写CSS媒体查询一样容易:

@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode variables go here */
  }
}

反应本机纸

反应本机黑暗模式的用户界面。

纸是根据Google的材料设计指南, 为React Native提供的可定制且可投入生产的组件的集合。它具有一组精心设计的组件, 可以轻松集成到React Native中。

从Paper v3开始支持暗模式, 这是非常重要的一点, 它引起了对该库的极大关注。

总结

暗模式是对应用程序用户体验的重大改进。因此, 开箱即用地创建支持它的工具将使开发人员的生活更轻松。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: