If you want to know how to enable Modes in Figma and Code.
Check our Figma and Code Dark Mode docs!
Setting a default Mode
By default, the mode enabled(Light/Dark) should be dictated by the user's OS/Browser settings.
If we introduce Dark Mode on a screen for the first time, we should also let the user know with a Popover.
A Popover lets the user know we enable Dark Mode by default given their settings.
What component should I use for switching between Light and Dark?
Pre Global Nav menu- Ghost Button
As mentioned in the discovery process, the Design System team strongly recommends using an icon-only Ghost Button to allow the user to switch between Light and Dark Mode.
2 ghost icon-only buttons one with a Sun icon and the other with a Moon
Â
The button should be placed on the Global Nav of the product to the right and separated by a divider to separate them from the Agent or user actions.
Â
The new Global Navigation with the Dark Mode Button
The old Global Navigation with the Dark Mode Button
The Buttons should contain a tooltip that will show on hover detailing its functionality.
A tooltip displaying “Enable Dark Mode“
Post Global Nav menu- Inside the settings menu
Once the Global Navigation menu is finished, we will ditch the Ghost Button pattern for a Toggle within the User’s menu like so:
Â
A Dark Mode toggle within the User’s Global Nav menu
Â