{"id":6930,"date":"2023-05-05T17:51:39","date_gmt":"2023-05-05T14:51:39","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6930"},"modified":"2026-10-08T11:41:39","modified_gmt":"2026-10-08T08:41:39","slug":"dark-mode","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/dark-mode\/","title":{"rendered":"Colour Mode Switch"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screen-Recording-2025-05-22-at-14.47.45-1.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Activating the Color Mode Switch extension.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Color Mode Switch<\/strong> extension adds an alternate Color scheme to your website. It is most commonly used to create a light and dark mode experience, but the secondary palette can be configured with any Colors that suit your design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The extension works directly with Blocksy&#8217;s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/colors\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Global Color Palette<\/strong><\/a>, giving each palette entry an alternate value that becomes active when the website switches Color modes.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Blocksy Pro required<\/strong><br>The Color Mode Switch extension requires Blocksy Companion Pro to be installed and active.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To activate the Color Mode Switch extension:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>WordPress Dashboard \u2192 Blocksy \u2192 Extensions<\/strong>.<\/li>\n\n\n\n<li>Locate the <strong>Color Mode Switch<\/strong> extension.<\/li>\n\n\n\n<li>Enable the extension.<\/li>\n\n\n\n<li>Open the <strong>Customiser \u2192 General Options \u2192 Colors<\/strong> to configure the alternate palette.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Configuring the Alternate Color Palette<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acf65e52df1e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acf65e52df1e\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screenshot-2025-05-22-at-14.57.53.png\" alt=\"Dark Mode Color Palette controls inside the Blocksy Customiser\" class=\"wp-image-13307\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Configuring the alternate Color palette.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once the extension is active, the <strong>Colors<\/strong> panel includes a dedicated <strong>Dark Mode Color Palette<\/strong> alongside the regular Global Color Palette.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each entry in the alternate palette corresponds to the same position in your regular palette. When visitors switch Color modes, elements that reference those Global Colors automatically use their corresponding alternate values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a light background Color in your regular palette can become a dark background in the alternate palette, while dark text can switch to a lighter value to maintain sufficient contrast.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Design each mode independently<\/strong><br>The alternate Colors do not need to be direct inverses of the regular palette. Choose values that maintain appropriate contrast and readability in each mode. You can also add additional Global Colors when certain elements require more specialised values.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Adding the Color Switch<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After configuring both Color palettes, visitors need a way to switch between them. Blocksy provides dedicated <strong>Color Switch<\/strong> elements for this purpose.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add the switch to your header, open the <strong>Customiser \u2192 Header<\/strong> and drag the <strong>Color Switch<\/strong> element into the desired desktop or mobile header row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The element provides additional controls for its icon, label and default behaviour, including an <strong>OS Aware<\/strong> mode that can automatically follow the visitor&#8217;s operating-system Color preference.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the complete set of options, see the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/colour-switch\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Color Switch documentation<\/strong><\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Video Resources<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Colour Mode Switcher (or Dark Mode) | Tutorial | Blocksy 2\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/_f2dnbU1pjU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Color Mode Switch extension adds an alternate Color scheme to your website. It is most commonly used to create a light and dark mode experience, but the secondary palette can be configured with any Colors that suit your design. The extension works directly with Blocksy&#8217;s Global Color Palette, giving each palette entry an alternate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[116],"class_list":["post-6930","documentation","type-documentation","status-publish","hentry","doc_categories-extensions"],"blocksy_meta":{"docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6930"}],"version-history":[{"count":15,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6930\/revisions"}],"predecessor-version":[{"id":15293,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6930\/revisions\/15293"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6930"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}