Today, dark mode is a frequently used feature in Web, desktop, and mobile applications.

It is important to improve the developer experience with a UI library by adding customizable interfaces to drive many developers to use a particular UI library.

Here are some known UI libraries that support dark modes.

Material UI

React JS ‘Material Design UI framework has over 57,000 stars on GitHub with simple, developer-oriented and extensible theme functionality. It is based on the well-known CSS-in-JS, allowing developers to choose between three different style apis related to the same basic concept.

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

Based on the themed document, we can easily add dark themes to the basic Material UI application.

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

Vuetify

With 25K stars on GitHub, Vuetify is a very popular UI framework for Vue.

It is well known because it makes full use of the Vue API. On Vuetify, the theme system is very well built. It’s very easy to give your Web application a dark theme.

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 darker option to the theme service.

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

Customization is also very easy to implement and available.

Nebular

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

Nebular takes the beauty and user experience of its components very seriously. Nebular comes with a fully customizable default theme, a universe theme, a corporate theme and a dark color theme.

Smelte

Smelte is a SvelteJS UI framework built on top of TailwindCSS in accordance with Material Design criteria. Do you know how easy it is to add dark mode to Smelte? This is as easy as adding darkMode: True to the Smelte Options object.

In addition, you can toggle this setting any way you like, and you can customize the look when dark mode is turned on.

Blueprint

With over 15,000 stars on GitHub and over 100,000 downloads per week on NPM, it’s clear that Blueprint UI is having an impact on the UI library for 2020.

But what makes it stand out is the ease with which it can switch to dark mode. This is even shown in their documentation, where you can switch between light and dark themes by pressing Shift + D.

Blueprint V3 provides two UI color themes. To apply the dark theme, we simply apply the class BP3-dark to the container element to set the theme for all nested child elements. All components can view these two topics using the toggle we mentioned earlier.

Rebass

Rebass is so focused on making thematically oriented components that their catchphrase is “Our components are built with thematically oriented in mind.” This is absolutely true. They provide a simple theme API, and Rebass are loved for their non-opinionated style.

You can customize the theme of your application by following the topic guide in the documentation.

You can use the Rebass theme in the presentation section of its documentation.

Chakra UI

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

Chakra’s themes interface helps developers quickly refer to the values of custom themes throughout the application.

It provides a sensible default theme inspired by Tailwind CSS that you can customize 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 loads.

More and more

Tailwind and plug-in

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

Unfortunately, Tailwind doesn’t come with a dark mode. However, its community does provide a dark mode plug-in that can be combined with the library to help developers introduce dark mode support.

The variant of this plug-in is the same as the Tailwind variant and is fully customizable.

Quasar and plug-in

The Quasar framework is a vue.js based framework that enables developers to quickly create a variety of styles of web, mobile and desktop applications.

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

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

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

The mobile terminal

There are also UI libraries that support dark modes on cross-platform mobile frameworks, a feature often requested by developers working with various frameworks.

Ionic

Ionic has been around for a long time, so its developers understand what is required for a cross-platform mobile, and in terms of aesthetics, its developers are well aware.

Ionic now makes it very easy to change the theme of an application, including support for dark colors.

With increasing support for dark patterns in native applications, Ionic developers are now looking to add them 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 variable see here */}}Copy the code

React Native Paper

Paper is a collection of customizable and production-available components for React Native that follow Google’s Material Design Guidelines. It has a very well designed set of components that can be easily integrated into React Native.

This is an important aspect of the library that has attracted a lot of attention due to its support for Paper V3 dark modes.

The end of the

Dark modes are a major improvement to the user experience of an application. So, out of the box, creating tools that support it will make life easier for developers.

This article is first published in the public number “front-end Foreign language selection”, after attention to the private message reply: gift package, send a network high-quality video course online disk data, can save you a lot of money!