Dark mode (old)

Ask a question

Summary

This theme is going to be deprecated soon

We are in process of migration to Design Tokens mode. If you plan on integrating theme switching, we highly recommend for APIs to be finalised and then using to it instead.

This theme will be deprecated and removed in future versions.

The dark mode is a theme for AUI that uses a darker color palette. Its goal is to reduce the amount of light emitted by the screen.

A few of the benefits of this solution include reducing eye strain, battery usage, and easier viewing in dark environments.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-dark-mode
AMD Module key: N/A
General API: 9

Code

How to use it

You can turn on the dark mode by doing two things:

Include dark theme resources

For P2 usage include com.atlassian.auiplugin:aui-dark-mode web resource or make sure you include aui-prototyping-darkmode.css when using NPM package.

CSS class

To enable dark mode you need to add aui-theme-dark CSS class to body element.

Example