Modes

Modes enable the color palette to change from light to dark, providing the flexibility to choose an option that best fits a preference or need. Choosing a suitable mode can improve accessibility, reduce eye strain in low-light conditions and increase reading speed.

The following example demonstrates the two available modes. Each mode shares the same components and design tokens, with just colors changing depending on the chosen mode.

Light mode works well when users are likely to visit your application content semi-regularly. It appears more open, familiar and friendly, but may cause eyestrain when viewed for lengthy periods.

Consider applying a dark mode if you're designing an interface that will be used continuously for long periods. It may be easier on the eyes in certain environments, but it could increase eye strain when reading long text passages.

We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.