哪些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暗模式，這是一個很重要的方面，引發了人們對該庫的極大關注。

結束

暗模式是對應用程序用戶體驗的重大改進。所以，開箱即用地建立支持它的工具將使開發人員的生活更加輕鬆。

---

本文首發於公衆號《前端外文精選》，關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！