Dark / Light mode

Mint UI supports dark and light modes like CSS does.

  • The preference of the user is respected until they change it directly.
  • The current mode is saved in LocalStorage.
  • The mode can be changed for the whole application only.
Getting the current mode

You can get the current mode by connecting your component to the Ui store and exposing the darkMode variable.

connect Ui exposing { darkMode }
Setting the mode

The mode can be set using the Ui.setDarkMode function.

<Ui.Button
onClick={(event : Html.Event) { Ui.setDarkMode(!Ui.darkMode) }}
label="Toggle"
/>
Ui.DarkModeToggle

There is a component for toggling dark / light modes: Ui.DarkModeToggle

<Ui.DarkModeToggle/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.