深色模式是当今网络、桌面和移动应用程序中经常请求的功能。通过添加可定制的界面来改善开发者使用UI库的体验非常重要，这可以驱动许多开发者使用特定的UI库。下面是一些已知的支持深色模式的UI库。MaterialUIReactJS的MaterialDesignUI框架在GitHub上拥有超过57,000颗星，具有简单、面向开发人员和可扩展的主题功能。它基于著名的CSS-in-JS，允许开发人员在与同一基本概念相关的三种不同样式API之间进行选择。任何熟悉MaterialUI的开发人员都可以证明其主题和调色板管理功能是生态系统中最好的。根据主题文档，我们可以轻松地在基本材质UI应用程序之上添加深色主题。此外，当我们访问文档时，我们可以切换亮/暗模式和切换调色板，以帮助可视化所有提供的具有不同主题的材料组件。VuetifyVuetify在GitHub上有25k星，是Vue中非常流行的UI框架。它非常有名，因为它充分利用了VueAPI。在Vuetify上，主题系统构建得非常好。为您的Web应用程序设置深色主题非常容易。Vuetify支持MaterialDesign规范的浅色和深色版本。该规范以根程序组件v-app开头，并被大多数组件支持。默认情况下，您的应用程序将使用浅色主题，但这可以通过向主题服务添加深色选项轻松覆盖。当您将一个组件指定为浅色或深色时，除非另有说明，否则其所有子组件都将继承并应用相同的组件。您可以通过将this.$vuetify.themin.dark更改为true或false来手动打开或关闭暗色。定制也很容易实现和可用。Nebular基于Eva设计系统，Nebular是Angular中最漂亮的UI库之一。Nebular非常重视其组件的美学和用户体验。Nebular带有完全可定制的默认主题、宇宙主题、企业主题和深色主题。SmelteSmelte是一个基于TailwindCSS的SvelteJSUI框架，遵循MaterialDesign指南。你知道给Smelte添加深色模式有多容易吗？就像将darkMode:true添加到Smelte选项对象一样简单。GitHub上的星数超过15,000颗，npm上的每周下载量超过100,000次，很明显，BlueprintUI正在对2020年的UI库产生影响。然而，最引人注目的是能够轻松切换到深色模式。这甚至显示在他们的文档中，您可以通过按Shift+D来切换浅色和深色主题。Blueprintv3提供了两种UI颜色主题。要应用深色主题，我们只需将类bp3-dark应用到容器元素，这将为所有嵌套的子元素设置主题。可以使用我们之前提到的两个主题的切换来查看所有组件。RebassRebass非常专注于制作主题组件，以至于他们的口头禅是“我们的组件在构建时就考虑到了主题”。这是千真万确的。他们提供了一个简单的主题API，并且Rebass因不拘泥于风格而受到喜爱。您可以按照文档中的主题指南自定义应用程序的主题。您可以在其文档的演示部分使用Rebass的主题。ChakraUIChakraUI是一个简单、模块化且可访问的组件库，它为您提供构建React应用程序所需的所有构建块。Chakra的主题界面帮助开发者在整个应用中快速引用自定义主题值。它提供了一个受TailwindCSS启发的合理默认主题，可以根据您的设计进行定制。它的大部分组件都兼容深色模式，并且使用自定义React挂钩：useColorMode，其值存储在localStorage中并在页面加载时使用。更多1.Tailwind和插件TailwindCSS是一个流行的CSS框架。它是高度可定制的，并为您提供构建设计所需的所有必要构建块。不幸的是，Tailwind没有黑暗模式。不过，其社区提供了一个可以与库结合使用的暗模式插件，帮助开发者引入暗模式支持。这个插件的变体与Tailwind的变体相同，并且样式是完全可定制的。2.Quasar和插件Quasar框架是一个基于Vue.js的框架，使开发者能够快速创建多种风格的网站、移动和桌面应用程序。Quasar框架带有许多组件、指令、插件和扩展，可帮助您构建出色的应用程序。对我们来说幸运的是，Quasar有一个暗模式插件，可以自动安装并且相对容易处理。该插件适用于基本的Vue应用程序以及SSR构建。Mobile还具有支持跨平台移动框架上的暗模式的UI库，这是使用各种框架的开发人员经常要求的功能。1.IonicIonic已经存在很长时间了，所以它的开发者很清楚跨平台移动需要什么，而且在美学方面，它的开发者非常清楚。Ionic现在可以非常轻松地更改应用程序的主题，包括对深色配色方案的支持。随着本机应用程序对深色模式的支持越来越多，Ionic开发人员现在希望将其添加到他们的应用程序中以支持用户偏好。此外，Ionic不仅是一个移动UI库，而且在Web应用程序上也表现出色。在Ionic中，添加配色方案首选项就像编写CSS媒体查询一样简单：@media(prefers-color-scheme:dark){:root{/*Darkmodevariableseehere*/}}2.ReactNativePaperPaper是一组可定制和生产就绪的ReactNative组件，遵循Google的MaterialDesign指南。它有一个设计精良的组件集合，可以很容易地集成到ReactNative中。这是一个重要方面，由于支持Paperv3深色模式，该库引起了很多关注。结束黑暗模式是对应用程序用户体验的重大改进。因此，创建开箱即用的支持它的工具将使开发人员的生活更轻松。
