{"id":1668,"date":"2021-09-22T16:36:14","date_gmt":"2021-09-22T16:36:14","guid":{"rendered":"https:\/\/www.kadencewp.com\/kadence-theme\/?post_type=knowledgebase&#038;p=1668"},"modified":"2026-04-22T15:59:10","modified_gmt":"2026-04-22T15:59:10","password":"","slug":"color-palette-switch-dark-mode","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/color-palette-switch-dark-mode\/","title":{"rendered":"How to use the Color Palette Switch (Dark Mode)"},"content":{"rendered":"\n<p>As of Kadence Pro version 1.0.3, there are options to enable a color switch for your users to select a &#8220;dark mode&#8221; of your website. <a rel=\"noreferrer noopener\" href=\"https:\/\/demos.kadencewp.com\/darkmode\/\" data-type=\"URL\" data-id=\"https:\/\/demos.kadencewp.com\/darkmode\/\" target=\"_blank\">See an example site to try it out<\/a>. The approach we took with Kadence was to provide a <strong>lightweight option to have a dark mode<\/strong>. Because of that, this tool does not generate dark mode CSS and it may not work out of the box with many plugins or complex sites. There are robust dark mode plugin solutions that will work with Kadence if you are wanting to make a dark mode for a really complex site, however, these can come with a performance hit. The intention of this tool is to be light and work tightly with the Kadence Global colors.<\/p>\n\n\n\n<p>To get started you will need to enable the module under Appearance &gt; Kadence in the WordPress admin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/dark_mode_setup.png\" alt=\"\" class=\"wp-image-1673\" \/><\/figure>\n\n\n\n<p>Once you have the Color Palette Switch enabled you will find new settings under Appearance &gt; Customize &gt; General &gt; Color Switch (Dark Mode).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/fixed_color_switch-scaled.jpg\" alt=\"\" class=\"wp-image-1674\" \/><\/figure>\n\n\n\n<p>Once enabled you can choose to add a fixed switch to your site. Please note you can also add a switch in the header builder or footer builder if you don&#8217;t want it to be fixed on the screen. To use those switches just go to the header builder or footer builder and add the color switch element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/footer_darkmode-scaled.jpg\" alt=\"\" class=\"wp-image-1681\" \/><\/figure>\n\n\n\n<p>Now to make the switch work you need to set up your &#8220;dark&#8221; color palette under General &gt; Colors in the customizer. In the example site above, Palette 1 is the light color palette and Palette 2 is the dark color palette. <\/p>\n\n\n<style>.kb-row-layout-id1668_cf0687-9a > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1668_cf0687-9a > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1668_cf0687-9a > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:6px;grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id1668_cf0687-9a > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1668_cf0687-9a > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id1668_cf0687-9a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1668_cf0687-9a alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1668_4ad434-d2 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column1668_4ad434-d2 > .kt-inside-inner-col,.kadence-column1668_4ad434-d2 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1668_4ad434-d2 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1668_4ad434-d2 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1668_4ad434-d2 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1668_4ad434-d2 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1668_4ad434-d2{position:relative;}@media all and (max-width: 1024px){.kadence-column1668_4ad434-d2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1668_4ad434-d2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1668_4ad434-d2 inner-column-1\"><div class=\"kt-inside-inner-col\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/color_palette_02.jpg\" alt=\"\" class=\"wp-image-1675\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column1668_444aab-1c > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column1668_444aab-1c > .kt-inside-inner-col,.kadence-column1668_444aab-1c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1668_444aab-1c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1668_444aab-1c > .kt-inside-inner-col{flex-direction:column;}.kadence-column1668_444aab-1c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1668_444aab-1c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1668_444aab-1c{position:relative;}@media all and (max-width: 1024px){.kadence-column1668_444aab-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1668_444aab-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1668_444aab-1c inner-column-2\"><div class=\"kt-inside-inner-col\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/color_palette_01.jpg\" alt=\"\" class=\"wp-image-1676\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id1668_c9c47c-90 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1668_c9c47c-90 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1668_c9c47c-90 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:0px;padding-bottom:0px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id1668_c9c47c-90 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1668_c9c47c-90 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id1668_c9c47c-90 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1668_c9c47c-90 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1668_adbade-e6 > .kt-inside-inner-col{display:flex;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col{padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col{border-color:var(--global-palette1, #3182CE);border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:10px;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col,.kadence-column1668_adbade-e6 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1668_adbade-e6 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1668_adbade-e6 > .kt-inside-inner-col{background-color:var(--global-palette8, #F7FAFC);}.kadence-column1668_adbade-e6 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1668_adbade-e6{position:relative;}.wp-block-kadence-column.kadence-column1668_adbade-e6 > .kt-inside-inner-col{margin-top:0px;margin-bottom:30px;}@media all and (max-width: 1024px){.kadence-column1668_adbade-e6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1668_adbade-e6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1668_adbade-e6 kb-section-dir-vertical\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10, .wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10[data-kb-block=\"kb-adv-heading1668_fac024-10\"]{margin-top:0px;margin-bottom:0px;font-size:28px;font-weight:900;font-style:normal;text-transform:uppercase;letter-spacing:1px;}.wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10[data-kb-block=\"kb-adv-heading1668_fac024-10\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1668_fac024-10[data-kb-block=\"kb-adv-heading1668_fac024-10\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h5 class=\"kt-adv-heading1668_fac024-10 wp-block-kadence-advancedheading has-theme-palette-2-color has-text-color\" data-kb-block=\"kb-adv-heading1668_fac024-10\">Note:<\/h5>\n\n\n\n<p>It&#8217;s critical that you are using the Kadence Global Color Palette correctly and assigning these colors on your site. To learn more on that please read <a rel=\"noreferrer noopener\" href=\"https:\/\/www.kadencewp.com\/kadence-theme\/knowledge-base\/customize-settings\/how-to-use-the-kadence-theme-color-palette\/\" target=\"_blank\">How to use the Kadence Theme Color Palette<\/a>.<\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>If you want a quick way to experiment you can click the folder icon in the global palette settings to import a dark palette on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2021\/09\/import_colors-985x1024.jpg\" alt=\"\" class=\"wp-image-1680\" style=\"width:493px;height:512px\" \/><\/figure>\n\n\n\n<p>Once you have a light and dark palette setup you can experiment with the toggle on your site. Depending on which plugins you are using it&#8217;s possible you will have some things that are not attached to the theme global colors and therefore do not switch when toggled. In this situation, you may need to add custom CSS to the customizer &gt; custom CSS input to change those styles when in dark mode.<\/p>\n\n\n\n<p>The key is that in dark mode a class (color-switch-dark) is added to the body tag, this lets you target CSS only for dark mode. Here is an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.color-switch-dark .custom-class-that-needs-color-changed {\ncolor:var(--global-palette4);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color-switch-settings\">Color Switch Settings<\/h2>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Setting<\/th><th>Description<\/th><\/tr><\/thead><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Enable Color Palette Switch (Dark Mode)?<\/td><td>Turns on the toggle UI so visitors can switch light\/dark mode.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Default Color Palette<\/td><td>Select the default palette (Light or Dark) for visitors.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>OS Aware<\/td><td>When enabled, the visitor\u2019s operating system or browser preference for light\/dark mode is used to select the palette by default.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Dark Color Palette<\/td><td>Select which Global Palette is the &#8220;dark&#8221; color palette.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Different Logo for Dark Mode?<\/td><td>Option to show a different logo if dark mode is active\/selected. Additional options will show when turned on:<br>Option to show a different logo if dark mode is active\/selected. Additional options will show when turned on:<br><br>&#8211; <strong>Dark Mode Header Logo<\/strong> will give you the image picker to select the &#8220;dark mode&#8221; logo.<br>&#8211; <strong>Different Logo for Mobile?<\/strong> will give you the image picker to select the &#8220;dark mode&#8221; mobile logo.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure style=\"margin-bottom:0\" class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Fixed Switch<\/strong> &#8211; Show Fixed Switch?<\/td><td>Shows a floating (fixed) color palette switch on all pages.<br><br>Additional options will show after turning this on: <br>Option to show a different logo if dark mode is active\/selected. Additional options will show when turned on:<br><br>&#8211; <strong>Switch Type<\/strong> (Icons, Texts, or Icons and Texts)<br>&#8211; <strong>Switch Style<\/strong> (Switch or Button)<br>&#8211; <strong>Switch Align<\/strong> (Left or Right)<br>&#8211; <strong>Side Offset<\/strong> is the distance of the switch from the sides (left or right)<br>&#8211; <strong>Bottom Offset<\/strong> is the distance of the switch from the bottom of the screen.<br>&#8211; <strong>Light Mode Icon<\/strong> (if you select the Icons or Icons and Texts switch style, this sets the icon for the light color palette)<br>&#8211; <strong>Dark Mode Icon<\/strong> (if you select the Icons or Icons and Texts switch style, this sets the icon for the light dark palette)<br>&#8211; <strong>Switch Colors<\/strong> <br>&#8211; <strong>Text Label Font<\/strong> (if you select the Text or Icons and Texts switch style, this is your option to style them)<br>&#8211; <strong>Light Palette Title<\/strong> sets the text for the light palette in the switch<br>&#8211;  <strong>Dark Palette Title<\/strong> sets the text for the dark palette in the switch<br>&#8211; <strong>Visibility<\/strong> sets which device views the switch will be shown.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>As of Kadence Pro version 1.0.3, there are options to enable a color switch for your users to select a &#8220;dark mode&#8221; of your website. See an example site to try it out. The approach we took with Kadence was to provide a lightweight option to have a dark mode. Because of that, this tool&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[408],"doc_tag":[],"knowledge_base":[6],"class_list":["post-1668","docs","type-docs","status-publish","hentry","doc_category-theme-pro","knowledge_base-kadence-theme"],"year_month":"2026-05","word_count":784,"total_views":"9096","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Theme Kit Pro","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-pro\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":408,"label":"Theme Kit Pro"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=1668"}],"version-history":[{"count":4,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1668\/revisions"}],"predecessor-version":[{"id":15924,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1668\/revisions\/15924"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=1668"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=1668"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=1668"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=1668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}