Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what UI library supports dark mode", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what UI library supports dark mode" this article.

Material UI

React JS's Material Design UI framework has more than 57000 stars on GitHub and has simple, developer-oriented and extensible theme features. It is based on the famous CSS-in-JS and allows developers to choose between three different styles of API related to the same basic concept.

Any developer familiar with Material UI can prove that its theme and palette management capabilities are among the best in the ecosystem.

According to the themed document, we can easily add dark themes to basic material UI applications.

In addition, when we access the document, we can switch between light / dark mode and color palettes to help visualize all provided material components and different themes.

Vuetify

Vuetify has 25k stars on GitHub and is a very popular UI framework in Vue.

It is very famous because it makes full use of Vue API. On Vuetify, the theme system is well built. It's very easy to apply a dark theme to your web.

Vuetify supports light and dark versions of the Material Design specification.

This specification starts with the root program component v-app and is supported by most components. By default, your application will use a light theme, but you can easily override it by adding a dark option to the theme service.

When you specify a component as light or dark, all of its child components inherit and apply the same component unless otherwise specified. You can manually turn dark colors on or off by changing this.$vuetify.themin.dark to true or false.

Customization is also very easy to implement and available.

Nebular

Eva Design System-based Nebular is one of the most beautiful UI libraries in Angular.

Nebular attaches great importance to the beauty and user experience of its components. Nebular comes with fully customizable default themes, Universe themes, Company themes and Dark themes.

Smelte

Smelte is a SvelteJS UI framework built on top of TailwindCSS following Material Design guidelines. Do you know how easy it is to add dark modes to Smelte? This is as easy as adding a darkMode:true to a Smelte options object.

Blueprint

With more than 15000 stars on GitHub and more than 100000 downloads per week on npm, it is clear that Blueprint UI has had an impact on the UI library in 2020.

However, it stands out because it can easily switch to dark mode. This is even shown in their documentation, where you can switch between shaded themes by pressing Shift + D.

Blueprint v3 provides two UI color themes. To apply a dark theme, we can set the theme for all nested child elements simply by applying the class bp3-dark to the container element. All components can use the toggle we mentioned earlier to view these two topics.

Rebass

Rebass is so focused on making themed components that their mantra is "our components are built with theming in mind." This is absolutely true. They provide a simple theme API,Rebass is loved for not being opinionated in style.

You can customize the theme of your application according to the topic guide in the document.

You can use Rebass themes in the presentation section of its document.

Chakra UI

Chakra UI is a simple, modular, and accessible component library that provides you with all the building blocks you need to build React applications.

Chakra's theme interface helps developers quickly reference the values of custom themes throughout the application.

It provides a sensible default theme inspired by Tailwind CSS that can be customized to suit your design.

Most of its components are compatible with dark mode, and it uses a custom React hook: useColorMode, whose value is stored in localStorage and used when the page is loaded.

More

1. Tailwind and plug-ins

Tailwind CSS is a popular CSS framework. It is highly customizable and provides you with all the necessary building blocks you need to build your design.

Unfortunately, Tailwind doesn't have its own dark mode. However, its community provides a dark mode plug-in that can be combined with libraries to help developers introduce dark mode support.

The variant of this plug-in is the same as the variant of Tailwind, and the style can be completely customized.

2. Quasar and plug-ins

The Quasar framework is a Vue.js-based framework that allows developers to quickly create multiple styles of websites, mobile and desktop applications.

The Quasar framework comes with many components, instructions, plug-ins and extensions that will help you build great applications.

Fortunately for us, Quasar has a dark mode plug-in that installs automatically and is relatively easy to handle.

The plug-in works well with basic Vue applications as well as with SSR builds.

Mobile terminal

There are also UI libraries that support dark mode on cross-platform mobile frameworks, a feature often required by developers using various frameworks.

1. Ionic

Ionic has been around for a long time, so its developers know what cross-platform mobile needs, and aesthetically, its developers know very well.

Ionic can now easily change the theme of your application, including support for dark schemes.

With increasing support for dark mode in native applications, Ionic developers are now looking to add it to their applications to support user preferences. In addition, Ionic is not only a mobile UI library, but also works well on Web applications.

In Ionic, adding color scheme preferences is as easy as writing a CSS media query:

@ media (prefers-color-scheme: dark) {: root {/ * Dark mode variables see here * /}}

2. React Native Paper

Paper is a collection of customizable and production-ready components of React Native that follows Google's Material Design guidelines. It has a very well-designed collection of components that can be easily integrated into React Native.

Because of its support for Paper v3 dark mode, this is an important aspect that has attracted a great deal of attention to the library.

The above is all the content of the article "what UI libraries support dark mode". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.