有什么UI庫(kù)支持暗模式

這篇文章主要為大家展示了“有什么UI庫(kù)支持暗模式”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“有什么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非常重視其組件的美觀(guān)和用戶(hù)體驗(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)單、模塊化和可訪(fǎng)問(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)用程序中以支持用戶(hù)首選項(xiàng)。此外，Ionic不僅是移動(dòng)UI庫(kù)，而且在Web應(yīng)用程序上也能很好地工作。

在Ionic中，添加顏色方案首選項(xiàng)就像編寫(xiě)CSS媒體查詢(xún)一樣容易：

@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)注。

以上是“有什么UI庫(kù)支持暗模式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！