{"id":6944,"date":"2023-05-05T17:59:09","date_gmt":"2023-05-05T14:59:09","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=6944"},"modified":"2024-06-08T18:47:20","modified_gmt":"2024-06-08T15:47:20","slug":"colour-switch","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/colour-switch\/","title":{"rendered":"Color Switch"},"content":{"rendered":"\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The
Colour Switch<\/strong> element in action.<\/figcaption><\/figure>\n\n\n\n

The Color Switch <\/strong>header element lets your visitors dial down the brightness of your website and enter the world of dark mode<\/em>. Color Switch <\/strong>can be added to the header by activating the Color Switch extension<\/a> <\/strong>from the Blocksy dashboard.<\/p>\n\n\n\n

This element automatically activates the dark color scheme, which can be set up using the Colors<\/a><\/strong> pane of the Customizer.<\/p>\n\n\n\n

Granular Controls<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
Icon Controls<\/h5>\n\n\n\n

The first two sections of the Color Switch<\/strong> element’s pane are dedicated to controlling its appearance on the front end. You get a choice of three nicely animated icons, as well as the ability to modify the icon size.<\/p>\n\n\n\n

Label Visibility<\/h5>\n\n\n\n

This option lets you show the text label<\/strong> of the element on a per device basis.<\/p>\n\n\n\n

OS Aware<\/h5>\n\n\n\n

All operating systems have a dark color scheme available for users to choose nowadays. Wouldn’t it be nice if your website would sync its color scheme with the host operating system, instead of blasting you with pure white in a dark room at 3am?<\/p>\n\n\n\n

This option lets you do just that. It automatically switches your website to the visitor’s operating system settings, achieving synchronisation between the two. No more sore eyes!<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

The Color Switch header element lets your visitors dial down the brightness of your website and enter the world of dark mode. Color Switch can be added to the header by activating the Color Switch extension from the Blocksy dashboard. This element automatically activates the dark color scheme, which can be set up using the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6944","documentation","type-documentation","status-publish","hentry","doc_categories-header-elements"],"blocksy_meta":{"docs_item_badge":"PRO"},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6944","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=6944"}],"version-history":[{"count":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6944\/revisions"}],"predecessor-version":[{"id":10676,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6944\/revisions\/10676"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6944"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}