FOUNDATION
Dark Mode
Dark mode uses darker, less-saturated colors to create a low-light user interface.
Note: Dark Mode will be available in GS UI Toolkit V16.
Dark mode is a style variation that can be applied to the GS Design System default palette. The dark mode palette adjusts colors for low light conditions. It helps many users with eye fatigue and can help with battery conservation on mobile devices. We have developed our dark mode based on principles from Google Material and Apple Human Interface Guidelines, which include these key elements:
- Darken with grays instead of black. This allows for more visual depth and surface separation.
- Large surface areas should use dark colors, mostly dark grays.
- Limit the use of bright, deeply saturated color accents.
Dark mode is enabled by our color tokens. These tokens are semantically named style labels that allow for more flexibility and scaling within the system in the future. A single color token is assigned to a fill, border or text color and each token is assigned two distinct values: one for the default style palette and one for the dark mode palette.
Below you can see the default UI surface palette used for the GS Design System and the corresponding dark mode UI palette. In a dark mode the UI becomes predominantly dark gray.
Often a user interface is sectioned using a combination of surface color and elevation. In default mode, elevation is shown through the use of shadows on an element and uses our elevation tokens. In dark mode, shadows are not as visible and visual elevation is created by adding lighter tranparent overlays onto surfaces that should be a higher elevation. Read more about the specific color tokens used.
Another example below shows cards at two different elevations — the top is a lower elevation (02) and the bottom is a higher elevation (04).
Our color system contains a ramp for every color with several values numbered 10 through 110, with 110 being the darkest and most saturated for that ramp. These ramps were referenced to define our bold, subtle and minimal defaults for each core color.
Bold emphasis is used for UI elements that are meant to stand out. In default mode, the bold color is typically in the middle of the color ramp where both brightness and saturation are high, i.e. Blue 60. In dark mode a slightly less saturated color is used as this will stand out when used on the dark surfaces, i.e. Blue 50.
Subtle emphasis is used for UI elements that elements that require less prominence than those in bold. In the default mode, subtle emphasis uses a with a lower numbers of the color ramp, as this is closest to hue of most surface colors used, i.e. Blue 20. In dark mode, this is inverted and the color uses a higher number in the color ramp, which is closer to surface colors in dark mode, i.e. Blue 80.
It is recommended that dark mode is presented to users as an opt-in preference or setting. The most common pattern is to offer it as a switch/toggle in user settings, either through a menu in the header or inside of a dedicated settings page.
Generally dark mode is applied to the entire UI, however it can be used in on partial elements in a default mode design to call attention to important areas. When mixed styles are used in default mode, ideally the user should be able to set the entire UI to dark mode with user preferences/settings.
- Google Material Dark Theme
- Apple Dark Mode
- Carbon Design System Dark Theme
- NN/g Nielson Norman Group, Dark Mode vs. Light Mode: Which is Better? (Feb 2020)
CONTENTS