The Rise of Dark Mode: How Top UI Libraries Are Leading the Way

Material UI: A Developer’s Dream

With over 57,000 stars on GitHub, Material UI is a React JS framework that boasts a simple, developer-oriented, and extensible theming facility. Its theming and color palette management capabilities are among the best in the ecosystem.

By following the theming docs, you can easily add a dark theme to a basic Material UI app and toggle between light and dark modes.

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

export default theme;

Vuetify: A Popular Choice for Vue Developers

Vuetify, a Vue-based UI framework, has gained immense popularity with over 25,000 stars on GitHub. Its theme system is well-built, making it easy to give your web app a dark theme.

Vuetify supports both light and dark variants of the Material Design spec, allowing you to customize your application with ease.

import Vuetify from 'vuetify';

const vuetify = new Vuetify({
  theme: {
    dark: true,
  },
});

export default vuetify;

Nebular: Beauty and UX in Angular

Nebular, based on Eva Design System, is a stunning UI library in Angular that pays great attention to beauty and UX.

It ships with a fully customizable default theme, cosmic theme, corporate theme, and dark theme.

import { NbThemeModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbThemeModule.forRoot({
      name: 'dark',
    }),
  ],
})
export class AppModule {}

Bonus: UI Kitten

UI Kitten, a React Native UI library based on Eva Design system, offers 25+ general-purpose components and a great theming system similar to Nebular.

Its starter app showcases components in light and dark themes, making it easy to get started.

import { ThemeProvider } from 'react-native-ui-kitten';

const App = () => (
  
    // Your app content
  
);

export default App;

Smelte: Easy Dark Mode Integration

Smelte, a SvelteJS UI framework built on top of TailwindCSS, makes it incredibly easy to add a dark mode to your application.

Simply add `darkMode:true` in your Smelte options object, and you’re good to go!

import { smelte } from 'smelte';

smelte({
  darkMode: true,
});

Blueprint: A Popular Choice for UI Libraries

With over 15,000 stars on GitHub, Blueprint UI is a popular choice among developers.

Its ability to switch easily to dark mode makes it stand out from the crowd.

.bp3-dark {
  // Your dark mode styles
}

Rebass: Themeable Components Made Easy

Rebass is focused on making themeable components, providing a straightforward theming API.

Its components are stylistically un-opinionated, allowing you to customize your application’s theme to your liking.

import { Provider } from 'rebass';

const App = () => (
  
    // Your app content
  
);

export default App;

Chakra UI: A Simple and Modular Component Library

Chakra UI is a simple, modular, and accessible component library that provides a themeable interface.

Its default theme, inspired by Tailwind CSS, can be customized to fit your design.

import { ChakraProvider } from '@chakra-ui/react';

const App = () => (
  
    // Your app content
  
);

export default App;

More Tailwind with Plugin

Tailwind CSS, a popular CSS framework, doesn’t come with dark mode out of the box.

However, its awesome community has created a dark mode plugin that can be coupled with the library to bring in dark mode support.

@tailwind base;
@tailwind components;
@tailwind utilities;

// Add dark mode plugin
@layer utilities {
  .dark-mode {
    // Your dark mode styles
  }
}

Quasar with Plugin

Quasar framework, a Vue.js-based framework, ships with a lot of components, directives, plugins, and extensions.

Its dark mode plugin is automatically installed and relatively easy to handle, making it a great choice for developers.

import { Quasar } from 'quasar';

Quasar.plugins.darkMode = true;

Mobile UI Libraries

There are also UI libraries that support dark mode on cross-platform mobile frameworks.

Ionic, for instance, makes it extremely easy to change the themes of your app, including supporting dark color schemes.

import { IonicModule } from '@ionic/angular';

IonicModule.forRoot({
  theme: 'dark',
});

React Native Paper, a collection of customizable and production-ready components, also supports dark mode since v3.

import { Provider } from 'react-native-paper';

const App = () => (
  
    // Your app content
  
);

export default App;

The Future of Dark Mode

Dark mode has become an essential feature in modern apps, and creating tools that support it out of the box will make developers’ lives easier.

By providing a customizable interface, UI libraries can attract a large following of developers who crave a seamless user experience.