{"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":"2025-05-22T15:36:46","modified_gmt":"2025-05-22T12:36:46","slug":"dark-mode","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/dark-mode\/","title":{"rendered":"Colour Mode Switch"},"content":{"rendered":"\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 Colour Mode Switch extension.<\/figcaption><\/figure>\n\n\n\n<p>The\u00a0<strong>Colour Mode Switch<\/strong>\u00a0extension allows you to enable an alternate colour scheme for your website \u2014 most commonly used to create a\u00a0<strong>light\/dark mode toggle<\/strong>\u00a0for your visitors.<\/p>\n\n\n\n<p>Setting it up is straightforward and integrates seamlessly with the\u00a0<strong>WordPress and Blocksy colour palette<\/strong>\u00a0systems, letting you define two distinct looks for your site with minimal effort.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activating the Extension<\/h2>\n\n\n\n<p>To activate the\u00a0<strong>Colour Mode Switch<\/strong>\u00a0extension:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your\u00a0<strong>WordPress dashboard<\/strong>.<\/li>\n\n\n\n<li>Click on\u00a0<strong>Blocksy<\/strong>\u00a0in the sidebar.<\/li>\n\n\n\n<li>Navigate to the\u00a0<strong>Extensions<\/strong>\u00a0tab.<\/li>\n\n\n\n<li>Find\u00a0<strong>Colour Mode Switch<\/strong>\u00a0in the list and toggle it\u00a0<strong>on<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e8f476af451&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e8f476af451\" class=\"wp-block-image size-full 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screenshot-2025-05-22-at-14.57.53.png\" alt=\"\" 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\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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><\/figure>\n\n\n\n<p>To configure the\u00a0<strong>Colour Mode Switch<\/strong>\u00a0extension, head over to the\u00a0<strong>Customiser \u2192 Colours<\/strong>\u00a0panel. In addition to the standard\u00a0<strong>Global Colour Palette<\/strong>\u00a0options, you\u2019ll now see a\u00a0<strong>Dark Mode Colour Palette<\/strong>\u00a0section.<\/p>\n\n\n\n<p>This is where you can define alternative colours that will be used when the dark mode is active. These colours typically act as visual opposites of your main palette\u2014for example, a light background might switch to a dark one.<\/p>\n\n\n\n<p>Keep in mind, though, that direct opposites don\u2019t always offer the best contrast or readability. If you run into visibility issues, it\u2019s a good idea to create extra colours in your palette and use them selectively for better balance in dark mode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Finishing the Setup<\/h2>\n\n\n\n<p>Once your colour palettes are set up, you\u2019ll need a way for visitors to switch between them. That\u2019s where the\u00a0<strong>Colour Switch<\/strong>\u00a0header element comes in. You can easily add it to your site by going to the\u00a0<strong>Customizer \u2192 Header<\/strong>\u00a0panel and dragging the\u00a0<strong>Colour Switch<\/strong>\u00a0element into one of your header rows\u2014both desktop and mobile layouts are supported. For a detailed guide, feel free to check out our\u00a0<a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/colour-switch\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colour Switch documentation article<\/a>.<\/p>\n\n\n\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-4-3 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","protected":false},"excerpt":{"rendered":"<p>The\u00a0Colour Mode Switch\u00a0extension allows you to enable an alternate colour scheme for your website \u2014 most commonly used to create a\u00a0light\/dark mode toggle\u00a0for your visitors. Setting it up is straightforward and integrates seamlessly with the\u00a0WordPress and Blocksy colour palette\u00a0systems, letting you define two distinct looks for your site with minimal effort. Activating the Extension To [&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"},"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":13,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6930\/revisions"}],"predecessor-version":[{"id":13312,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6930\/revisions\/13312"}],"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}]}}