Dark mode

With dark mode, QuickBooks helps our screens stay readable and useful in whatever lighting conditions our customers are working in.

Overall appearance and behaviors

When using dark mode, users expect the application to “turn out the lights.” That means that dark mode isn’t a simple inversion of grays. In many cases, things that are dark in QuickBooks’ default appearance (we’ll call it “light mode” from here on out) stay dark in dark mode.

Because dark mode is defined as a set of rules, you shouldn’t normally need to design for it. As long as your design follows the common visual design for light mode, it should also fit in when dark mode is applied.

Dark mode is available by navigating to the gear icon > QuickBooks Labs, then turning on “QuickBooks Themes.” After that, open the gear icon once more, then choose “Themes” to turn on dark mode. It will stay active until turned off, even if the user signs out and signs back in.

Once this feature has undergone testing and refinement, we intend to move it to a more permanent home and respect the user’s system setting for dark mode.

You may find it helpful to use your computer or phone in dark mode for a little while. This will help you adjust to some of the conventions we follow.

Figma plugin

Check out our Figma plugin which automates many of the changes necessary for dark mode. It analyzes your Figma file, converts colors for you, and can go back and forth between dark mode and light mode.

Avoid making color changes to designs while viewing them in dark mode. Color changes are only synced while in light mode. Any changes made while in dark mode will not be reflected properly.

The Figma plugin also makes contextual adjustments to colors based on how they’re used in the design. However, while this plugin is extremely helpful for conversion, it can’t handle every scenario. Please double-check your designs against this documentation after converting your document.

If you have questions or feedback about the plugin, reach out in #qb-designer-toolkit.

Lights out!

When designing for dark mode, always remember the “Lights out!” rule.

If you have a white container on a light gray background, it changes to a medium-dark container on a dark-gray background. The reverse is also true: Darker containers on lighter backgrounds remain darker than their background in dark mode. Text fields and cards are lighter than their containers in dark mode.

Shadows behind objects remain dark. Strokes on the edges of cards, menus, and popups also remain dark.

This example looks like a lot of changes, but only 8 colors are updated to support dark mode.

Lightbox backgrounds behind modals and drawers remain dark.

Separators lighten, as do tabular borders.

Anything that involves a preview of a document (invoices, estimates, email previews) should preserve the document’s appearance. Don’t adapt documents for dark mode if they won’t adapt when viewed by a third party.

Gray palette

In light mode, QuickBooks uses a gray palette which is optimized for dark text on light backgrounds. This necessitates a new gray palette for dark mode.

Light Mode	Dark Mode
#000000	#ffffff
#393a3d	#f1f4f7
#6b6c72	#d4d5d9
#8d9096	#b4b5b8
#babec5	#77797c
#d4d7dc	#4d4f52
#e3e5e8	#343638
#eceef1	#222325
#f4f5f8	#131315
#ffffff	#000000

As with everything else in dark mode, this gray palette is derived in a rule-based fashion. If our light mode grays ever change, so too will the dark mode grays.

Color changes

Text, glyphs, and icons should obviously invert when displayed on a dark background. This is the main exception to the “Lights out” rule. Link colors are raised from Blue-02 to Blue-03 for adequate color contrast.

When a customer hovers or activates a control, that control usually darkens in light mode. In dark mode, that control brightens instead.

Graphics, icons, and illustrations

When creating a graphic or illustration, it should be designed with both light and dark mode in mind. Many graphics shouldn’t need a bespoke dark mode version.

However, there are some cases where you will want to adjust a graphic for dark mode, particularly when adapting backgrounds to our gray palette.

For icons, we might want to create dark mode icons for them to read better on a dark background.

We use an outline style for our icons in light mode, which implies a stroke with a white fill color. We might remove the outer stroke but keep the inner fill for dark mode, to retain the appearance of a white-filled icon.

Dark mode can be an opportunity for fun expression. If your illustration depicts a sun and clouds in light mode, consider using a moon in a starry sky for dark mode.

Accessibility

Like high-contrast mode, dark mode is an accessibility feature. These modes should not be treated as mutually exclusive.

Customers who get migraines with prolonged computer use or who have conditions like photophobia may wish to use QuickBooks in dark mode. Those same users may have low vision and need high-contrast mode too.

It’s important to consider these combinations of modes and define rules for how they mix.