哪些UI库支持暗模式？

现在，黑暗模式是Web，桌面和移动应用程序中常常须要使用的功能。

经过增长可定制的界面来提升开发者对UI库的使用体验是很是重要的，能够带动不少开发者使用特定的UI库。

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

Material UI

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

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

根据主题化文档，咱们能够很容易地在基本material UI应用程序上添加暗色主题。

此外，当咱们访问文档时，咱们能够切换明/暗模式和切换调色板，以帮助可视化全部提供的素材组件与不一样的主题。

Vuetify

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

它很是有名，由于它充分利用了Vue API。在Vuetify上，主题系统构建得很是好。给你的web应用一个黑暗主题是很是容易的。

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

这种指定从根程序组件 v-app 开始，并获得大多数组件的支持。默认状况下，你的应用程序将使用浅色主题，可是能够经过在主题服务中添加深色选项来轻松覆盖它。

当您指定一个组件为light或dark时，除非另有指定，不然它的全部子组件都将继承并应用相同的组件。您能够经过将 this.$vuetify.themin.dark 改为 true 或 false 来手动开启或关闭暗色。

定制也很是容易实现而且可用。

Nebular

基于Eva Design System的Nebular是Angular中最漂亮的UI库之一。

Nebular很是重视其组件的美观和用户体验。 Nebular附带了彻底可自定义的默认主题，宇宙主题，公司主题和深色主题。

Smelte

Smelte是遵循Material Design准则在TailwindCSS之上构建的SvelteJS UI框架。你是否知道向Smelte添加暗模式有多容易？这就像在Smelte options对象中添加 darkMode:true 同样容易。

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

Blueprint

GitHub上有超过1.5万颗星，npm每周有超过10万颗下载，很明显，Blueprint UI对2020年的UI库产生了影响。

可是，之因此脱颖而出，是由于它可以轻松切换至暗模式。这甚至在他们的文档中获得了展现，您能够经过按 Shift + D 切换明暗主题。

Blueprint v3提供了两个UI颜色主题。要应用深色主题，咱们只需将类 bp3-dark 应用到容器元素上，就能够为全部嵌套的子元素设置主题。全部的组件均可以使用咱们以前提到的toggle来查看这两个主题。

Rebass

Rebass是如此专一于制做主题化的组件，以致于他们的口头禅是“咱们的组件都是在考虑到主题化的状况下构建的。”这是千真万确的。它们提供了一个简单的主题API，Rebass因在风格上不执拗己见而受到喜好。

你能够按照文档中的主题指南自定义应用程序的主题。

你能够在其文档的演示部分中使用Rebass的主题。

Chakra UI

Chakra UI是一个简单、模块化和可访问的组件库，它为你提供了构建React应用程序所需的全部构建块。

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

它提供了一个受Tailwind CSS启发的明智的默认主题，能够对其进行自定义以适合你的设计。

它的大部分组件都兼容暗模式，它使用了一个自定义的React钩子：useColorMode，其值存储在 localStorage中，并在页面加载时使用。

更多

Tailwind 与插件

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

不幸的是，Tailwind并无自带暗模式。可是，它的社区提供了一个暗模式插件，能够与库结合起来，帮助开发者引入暗模式支持。

此插件的变体与Tailwind的变体相同，而且能够彻底自定义样式。

Quasar 与插件

Quasar框架是基于Vue.js的框架，它使开发人员能够快速建立多种样式的网站，移动和桌面应用程序。

Quasar框架附带了许多组件，指令，插件和扩展，它们将帮助你构建出色的应用程序。

对咱们来讲幸运的是，Quasar有一个暗模式插件，该插件会自动安装且相对易于处理。

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

移动端

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

Ionic

Ionic已经存在了很长时间，因此它的开发者们都明白跨平台的移动端须要什么，在美学方面，它的开发者们都很清楚。

Ionic如今能够很是轻松地更改应用程序的主题，包括支持深色方案。

随着对原生应用程序中暗模式的支持日益增长，Ionic开发人员如今正在寻求将其添加到其应用程序中以支持用户首选项。此外，Ionic不只是移动UI库，并且在Web应用程序上也能很好地工做。

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

@media (prefers-color-scheme: dark) {
  :root {
    /* 暗模式变量请看这里 */
  }
}
复制代码

React Native Paper

Paper是一个React Native的可定制和生产可用的组件集合，它遵循了Google的Material Design指南。它有一个设计很是好的组件集合，能够轻松地集成到React Native中。

因为支持Paper v3暗模式，这是一个很重要的方面，引发了人们对该库的极大关注。

结束

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

---

本文首发于公众号《前端外文精选》，关注后私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！