The Dark Mode Toggle block lets each visitor choose the color mode they read your site in. It shows a sun icon in light mode and a moon icon in dark mode. A click opens a small menu with Light, Dark and System, where System follows the setting of the visitor's device. You find it in the Controls group of the block picker. It goes in a Section or a Dialog, or inside a Group or a Collection, and most often in your header.
The visitor's choice is kept in their browser, so the site opens in the same mode on their next visit. Visitors who never choose see the mode you set in Styles › Colors. Before you add a toggle, check that your color scheme looks right in dark mode, as Choose light, dark or automatic color mode describes. When you select the block on the canvas, its menu opens, so you can see how it looks. To see your pages in dark mode while you edit, click the half-filled circle in the canvas toolbar, as Preview your theme describes.
General
Setting
What it does
Menu opens
Opens the menu Below the icon (the default) or Above it. Choose Above when the toggle sits at the bottom of the page, such as in a footer.
Shared settings
The Dark Mode Toggle also has Width from the Layout settings, Margin from the Spacing group, the Display settings and the Advanced settings. The icon and the menu have no settings for their colors or size, and the menu always offers all three choices.
The Dark Mode Toggle block lets each visitor choose the color mode they read your site in. It shows a sun icon in light mode and a moon icon in dark mode. A click opens a small menu with Light, Dark and System, where System follows the setting of the visitor's device. You find it in the Controls group of the block picker. It goes in a Section or a Dialog, or inside a Group or a Collection, and most often in your header.
The visitor's choice is kept in their browser, so the site opens in the same mode on their next visit. Visitors who never choose see the mode you set in Styles › Colors. Before you add a toggle, check that your color scheme looks right in dark mode, as Choose light, dark or automatic color mode describes. When you select the block on the canvas, its menu opens, so you can see how it looks. To see your pages in dark mode while you edit, click the half-filled circle in the canvas toolbar, as Preview your theme describes.
General
Shared settings
The Dark Mode Toggle also has Width from the Layout settings, Margin from the Spacing group, the Display settings and the Advanced settings. The icon and the menu have no settings for their colors or size, and the menu always offers all three choices.