Canvas Docs

Color Scheme Toggle

The visitor dark-mode switch. Shows on the site while the Dark Mode Switch is on in Theme Options > Color Scheme > Dark Mode with a placement that includes the header. It is shown in the block inserter as Canvas Color Scheme Toggle and registered as canvas-core/color-scheme-toggle.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Color Scheme Toggle settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • StyleDefaultHeader icon

    Header icon sits with the other header icons and takes their size and colour. Button is a Bootstrap button that changes colour with the scheme.

    ChoicesHeader iconButton

Icons

  • Icon in Light SchemeDefaultbi-moon-stars

    Shown while the light scheme is active.

  • Icon in Dark SchemeDefaultbi-brightness-high

    Shown while the dark scheme is active.

Accessibility

  • Accessible LabelDefaultEmpty

    Name announced by screen readers, which also announce whether dark mode is on. Leave empty for "Dark mode".

Style

  • SizeDefaultEmpty

    ChoicesDefault (empty)SmallLargeShown when Style is "Button"

  • Button ColourDefaultDark

    Used while the light scheme is active.

    ChoicesPrimarySecondarySuccessDangerWarningInfoLightDarkShown when Style is "Button"

  • Button Colour in Dark SchemeDefaultWarning

    ChoicesPrimarySecondarySuccessDangerWarningInfoLightDarkShown when Style is "Button"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Info.

Was this page helpful?