哪些UI庫(kù)支持暗模式？
如今，黑暗模式是Web，桌面和移動(dòng)應(yīng)用程序中經(jīng)常需要使用的功能。
通過(guò)增加可定制的界面來(lái)提高開(kāi)發(fā)者對(duì)UI庫(kù)的使用體驗(yàn)是非常重要的，可以帶動(dòng)很多開(kāi)發(fā)者使用特定的UI庫(kù)。
以下是一些支持暗模式的已知UI庫(kù)。
Material UI
React JS的Material Design UI框架在GitHub上擁有超過(guò)57,000個(gè)星標(biāo)，具有簡(jiǎn)單，面向開(kāi)發(fā)人員和可擴(kuò)展的主題功能。它基于著名的CSS-in-JS，使開(kāi)發(fā)人員可以在與同一基本概念相關(guān)的三種不同樣式API之間進(jìn)行選擇。
任何熟悉Material UI的開(kāi)發(fā)人員都可以證明其主題和調(diào)色板管理功能是生態(tài)系統(tǒng)中最好的。
根據(jù)主題化文檔，我們可以很容易地在基本material UI應(yīng)用程序上添加暗色主題。
此外，當(dāng)我們?cè)L問(wèn)文檔時(shí)，我們可以切換明/暗模式和切換調(diào)色板，以幫助可視化所有提供的素材組件與不同的主題。
Vuetify
Vuetify在GitHub上擁有25k顆星，是Vue中非常流行的UI框架。
它非常有名，因?yàn)樗浞掷昧薞ue API。在Vuetify上，主題系統(tǒng)構(gòu)建得非常好。給你的web應(yīng)用一個(gè)黑暗主題是非常容易的。
Vuetify支持Material Design規(guī)范的淺色和深色版本。
這種指定從根程序組件 v-app 開(kāi)始，并得到大多數(shù)組件的支持。默認(rèn)情況下，你的應(yīng)用程序?qū)⑹褂脺\色主題，但是可以通過(guò)在主題服務(wù)中添加深色選項(xiàng)來(lái)輕松覆蓋它。
當(dāng)您指定一個(gè)組件為light或dark時(shí)，除非另有指定，否則它的所有子組件都將繼承并應(yīng)用相同的組件。您可以通過(guò)將 this.$vuetify.themin.dark 改成 true 或 false 來(lái)手動(dòng)開(kāi)啟或關(guān)閉暗色。
定制也非常容易實(shí)現(xiàn)并且可用。
Nebular
基于Eva Design System的Nebular是Angular中最漂亮的UI庫(kù)之一。
Nebular非常重視其組件的美觀和用戶體驗(yàn)。 Nebular附帶了完全可自定義的默認(rèn)主題，宇宙主題，公司主題和深色主題。
Smelte
Smelte是遵循Material Design準(zhǔn)則在TailwindCSS之上構(gòu)建的SvelteJS UI框架。你是否知道向Smelte添加暗模式有多容易?這就像在Smelte options對(duì)象中添加 darkMode:true 一樣容易。
Blueprint
GitHub上有超過(guò)1.5萬(wàn)顆星，npm每周有超過(guò)10萬(wàn)顆下載，很明顯，Blueprint UI對(duì)2020年的UI庫(kù)產(chǎn)生了影響。
但是，之所以脫穎而出，是因?yàn)樗軌蜉p松切換至暗模式。這甚至在他們的文檔中得到了展示，您可以通過(guò)按 Shift + D 切換明暗主題。
Blueprint v3提供了兩個(gè)UI顏色主題。要應(yīng)用深色主題，我們只需將類(lèi) bp3-dark 應(yīng)用到容器元素上，就可以為所有嵌套的子元素設(shè)置主題。所有的組件都可以使用我們之前提到的toggle來(lái)查看這兩個(gè)主題。
Rebass
Rebass是如此專(zhuān)注于制作主題化的組件，以至于他們的口頭禪是“我們的組件都是在考慮到主題化的情況下構(gòu)建的。”這是千真萬(wàn)確的。它們提供了一個(gè)簡(jiǎn)單的主題API，Rebass因在風(fēng)格上不固執(zhí)己見(jiàn)而受到喜愛(ài)。
你可以按照文檔中的主題指南自定義應(yīng)用程序的主題。
你可以在其文檔的演示部分中使用Rebass的主題。
Chakra UI
Chakra UI是一個(gè)簡(jiǎn)單、模塊化和可訪問(wèn)的組件庫(kù)，它為你提供了構(gòu)建React應(yīng)用程序所需的所有構(gòu)建塊。
Chakra的主題界面可幫助開(kāi)發(fā)人員在整個(gè)應(yīng)用程序中快速引用自定義主題的值。
它提供了一個(gè)受Tailwind CSS啟發(fā)的明智的默認(rèn)主題，可以對(duì)其進(jìn)行自定義以適合你的設(shè)計(jì)。
它的大部分組件都兼容暗模式，它使用了一個(gè)自定義的React鉤子：useColorMode，其值存儲(chǔ)在 localStorage中，并在頁(yè)面加載時(shí)使用。
更多
1. Tailwind 與插件
Tailwind CSS是一種流行的CSS框架。它是高度可定制的，并為你提供構(gòu)建設(shè)計(jì)所需的所有必要構(gòu)建塊。
不幸的是，Tailwind并沒(méi)有自帶暗模式。但是，它的社區(qū)提供了一個(gè)暗模式插件，可以與庫(kù)結(jié)合起來(lái)，幫助開(kāi)發(fā)者引入暗模式支持。
此插件的變體與Tailwind的變體相同，并且可以完全自定義樣式。
2. Quasar 與插件
Quasar框架是基于Vue.js的框架，它使開(kāi)發(fā)人員可以快速創(chuàng)建多種樣式的網(wǎng)站，移動(dòng)和桌面應(yīng)用程序。
Quasar框架附帶了許多組件，指令，插件和擴(kuò)展，它們將幫助你構(gòu)建出色的應(yīng)用程序。
對(duì)我們來(lái)說(shuō)幸運(yùn)的是，Quasar有一個(gè)暗模式插件，該插件會(huì)自動(dòng)安裝且相對(duì)易于處理。
該插件可與基本的Vue應(yīng)用程序以及SSR構(gòu)建版本很好地配合使用。
移動(dòng)端
也有UI庫(kù)在跨平臺(tái)移動(dòng)框架上支持暗模式，這是使用各種框架的開(kāi)發(fā)人員經(jīng)常要求的功能。
1. Ionic
Ionic已經(jīng)存在了很長(zhǎng)時(shí)間，所以它的開(kāi)發(fā)者們都明白跨平臺(tái)的移動(dòng)端需要什么，在美學(xué)方面，它的開(kāi)發(fā)者們都很清楚。
Ionic現(xiàn)在可以非常輕松地更改應(yīng)用程序的主題，包括支持深色方案。
隨著對(duì)原生應(yīng)用程序中暗模式的支持日益增加，Ionic開(kāi)發(fā)人員現(xiàn)在正在尋求將其添加到其應(yīng)用程序中以支持用戶首選項(xiàng)。此外，Ionic不僅是移動(dòng)UI庫(kù)，而且在Web應(yīng)用程序上也能很好地工作。
在Ionic中，添加顏色方案首選項(xiàng)就像編寫(xiě)CSS媒體查詢一樣容易：
- @media (prefers-color-scheme: dark) {
- :root {
- /* 暗模式變量請(qǐng)看這里 */
- }
- }
2. React Native Paper
Paper是一個(gè)React Native的可定制和生產(chǎn)可用的組件集合，它遵循了Google的Material Design指南。它有一個(gè)設(shè)計(jì)非常好的組件集合，可以輕松地集成到React Native中。
由于支持Paper v3暗模式，這是一個(gè)很重要的方面，引起了人們對(duì)該庫(kù)的極大關(guān)注。
結(jié)束
暗模式是對(duì)應(yīng)用程序用戶體驗(yàn)的重大改進(jìn)。因此，開(kāi)箱即用地創(chuàng)建支持它的工具將使開(kāi)發(fā)人員的生活更加輕松。
