如今，黑暗模式是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暗模式，这是一个很重要的方面，引起了人们对该库的极大关注。

结束

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

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