有什么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中，并在页面加载时使用。

更多

1. Tailwind 与插件

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

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

此插件的变体与Tailwind的变体相同，并且可以完全自定义样式。

2. Quasar 与插件

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

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

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

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

移动端

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

1. Ionic

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

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

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

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

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

2. React Native Paper

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

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

以上是“有什么UI库支持暗模式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！