{"id":8136,"date":"2024-02-27T11:26:27","date_gmt":"2024-02-27T09:26:27","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?p=8136"},"modified":"2024-12-02T23:53:10","modified_gmt":"2024-12-02T21:53:10","slug":"dark-mode-in-wordpress","status":"publish","type":"post","link":"https:\/\/creativethemes.com\/blocksy\/blog\/dark-mode-in-wordpress\/","title":{"rendered":"How to Add Dark Mode in WordPress for a Better User Experience"},"content":{"rendered":"\n<p>Using a theme rather than a plugin to add dark mode in WordPress comes with two main advantages: it\u2019s better for performance and it\u2019s better for the user experience.<\/p>\n\n\n\n<p>As for performance, if you add dark mode using your theme, you don\u2019t have to install another plugin, and as the dark mode color palette is part of your theme, you won\u2019t slow down your site with extra code additions, workarounds, or hacks.<\/p>\n\n\n\n<p>As for the user experience, with a theme, you can add the color switch to the header menu instead of showing a floating button, which is the modus operandi of most dark mode plugins.<\/p>\n\n\n\n<p>In this tutorial, we\u2019ll look into how to add dark mode in WordPress using the <strong>Color Mode Switch<\/strong> module of our Blocksy theme, which complements our advanced color system discussed in depth <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/color-palette-in-wordpress\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/creativethemes.com\/blocksy\/blog\/color-palette-in-wordpress\/\" rel=\"noreferrer noopener\">in our previous tutorial<\/a>.<\/p>\n\n\n\n<p>To see how dark mode in WordPress works when it\u2019s added by the theme, you can check out the <a href=\"https:\/\/demo.creativethemes.com\/blocksy\/daily-news\/\" target=\"_blank\" rel=\"noreferrer noopener\">live version<\/a> of our astounding <strong>Daily News<\/strong> starter site:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d606d5fd&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d606d5fd\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" 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\/2024\/02\/01-dark-mode-daily-news.png\" alt=\"A live example of dark mode in WordPress on the Daily News starter site\" class=\"wp-image-9538\"\/><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<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#why-add-dark-mode-to-your-word-press-site\">Why Add Dark Mode to Your WordPress Site?<\/a><\/li><li><a href=\"#preparing-for-switching-to-the-dark-side\">Getting Started: What You\u2019ll Need<\/a><\/li><li><a href=\"#the-four-cornerstones-of-adding-dark-mode-in-word-press-the-theory\">The Four Cornerstones of Adding Dark Mode in WordPress: The Theory<\/a><ul><li><a href=\"#i-you-start-with-an-ok-looking-default-dark-mode-color-palette\">Step 1: Enable the Color Mode Switch Module<\/a><\/li><li><a href=\"#ii-each-color-variable-registers-a-light-and-a-dark-mode-color\">Step 2: Add the Color Switch to Your Header<\/a><\/li><li><a href=\"#iii-but-the-light-and-dark-mode-palettes-are-still-independent-of-each-other\">Step 3: Customize Your Dark Mode Color Palette<\/a><\/li><li><a href=\"#iv-you-can-assign-two-or-more-dark-mode-colors-to-one-light-mode-color\">Step 4: Adjust Colors for Page Elements and Blocks<\/a><\/li><\/ul><\/li><li><a href=\"#how-to-add-dark-mode-in-word-press-the-practice\">How to Add Dark Mode in WordPress: The Practice<\/a><ul><li><a href=\"#1-toggle-the-color-mode-switch-extension-on\">1. Toggle the Color Mode Switch Extension On<\/a><\/li><li><a href=\"#2-add-the-color-switch-to-your-desktop-header\">2. Add the Color Switch to Your Desktop Header<\/a><\/li><li><a href=\"#3-add-the-color-switch-to-your-tablet-mobile-header\">3. Add the Color Switch to Your Tablet \/ Mobile Header<\/a><\/li><li><a href=\"#4-configure-the-settings-of-your-color-switch\">4. Configure the Settings of Your Color Switch<\/a><ul><li><a href=\"#i-customize-the-general-settings\">i. Customize the General Settings<\/a><\/li><li><a href=\"#ii-access-the-element-visibility-option-for-tablet-and-mobile\">ii. Access the Element Visibility Option for Tablet and Mobile<\/a><\/li><li><a href=\"#iii-configure-the-font-color-and-alignment-options-of-your-color-switch\">iii. Configure the Font, Color, and Alignment Options of Your Color Switch<\/a><\/li><\/ul><\/li><li><a href=\"#5-customize-your-dark-mode-color-palette\">5. Customize Your Dark Mode Color Palette<\/a><ul><li><a href=\"#i-override-change-the-default-dark-mode-colors\">i. Override (Change) the Default Dark Mode Colors<\/a><\/li><li><a href=\"#ii-add-new-colors-to-your-dark-mode-palette\">ii. Add New Colors to Your Dark Mode Palette<\/a><\/li><\/ul><\/li><li><a href=\"#6-configure-the-dark-mode-colors-of-your-page-elements-and-blocks\">6. Configure the Dark Mode Colors of Your Page Elements and Blocks<\/a><ul><li><a href=\"#i-change-your-global-colors\">i. Change Your Global Colors<\/a><\/li><li><a href=\"#ii-use-your-dark-mode-color-palette-in-the-block-editor\">ii. Use Your Dark Mode Color Palette in the Block Editor<\/a><\/li><\/ul><\/li><li><a href=\"#7-add-your-dark-mode-logo\">7. Add Your Dark Mode Logo<\/a><\/li><\/ul><\/li><li><a href=\"#free-bonus-switch-the-customizer-to-dark-mode\">Free Bonus: Switch the Customizer to Dark Mode<\/a><\/li><li><a href=\"#common-challenges-when-adding-dark-mode-to-word-press-and-how-to-solve-them\">Common Challenges When Adding Dark Mode to WordPress (and How to Solve Them)<\/a><ul><li><a href=\"#1-logos-and-images-not-visible-in-dark-mode\">1. Logos and Images Not Visible in Dark Mode<\/a><\/li><li><a href=\"#2-text-or-buttons-blending-into-backgrounds\">2. Text or Buttons Blending into Backgrounds<\/a><\/li><li><a href=\"#3-poor-color-harmony-in-dark-mode\">3. Poor Color Harmony in Dark Mode<\/a><\/li><li><a href=\"#4-performance-issues-with-third-party-plugins\">4. Performance Issues with Third-Party Plugins<\/a><\/li><li><a href=\"#5-inconsistent-dark-mode-behavior-across-devices\">5. Inconsistent Dark Mode Behavior Across Devices<\/a><\/li><li><a href=\"#6-users-missing-the-dark-mode-switch\">6. Users Missing the Dark Mode Switch<\/a><\/li><li><a href=\"#7-overuse-of-pure-black-backgrounds\">7. Overuse of Pure Black Backgrounds<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-add-dark-mode-to-your-word-press-site\">Why Add Dark Mode to Your WordPress Site?<\/h2>\n\n\n\n<p>Dark mode is more than just a design trend\u2014it\u2019s a feature that enhances usability, accessibility, and overall user satisfaction. Here\u2019s why adding dark mode to your WordPress site is worth the effort:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dark mode reduces eye strain, especially in low-light conditions, making it easier for users to engage with your content for longer periods.<\/li>\n\n\n\n<li>For users with light sensitivity or visual impairments, dark mode provides an alternative that improves readability and comfort.<\/li>\n\n\n\n<li>Dark mode has become a preferred feature for many users across apps, websites, and devices. Offering it shows that you\u2019re in tune with user preferences.<\/li>\n\n\n\n<li>On devices with OLED or AMOLED screens, dark mode uses less power, extending battery life for users.<\/li>\n\n\n\n<li>A sleek dark mode design adds a layer of professionalism and modernity to your website, enhancing its overall aesthetic.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preparing-for-switching-to-the-dark-side\">Getting Started: What You\u2019ll Need<\/h2>\n\n\n\n<p>To follow through this tutorial, we recommend that you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Read the <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/color-palette-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">previous tutorial<\/a> which shows how to create a color palette using Blocksy\u2019s advanced color system (available in the <a href=\"https:\/\/wordpress.org\/themes\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">free version of the theme<\/a>). This will be your light mode color palette that we\u2019ll enhance with the dark mode color palette in this tutorial.&nbsp;<\/li>\n\n\n\n<li>Install and activate <a href=\"https:\/\/creativethemes.com\/blocksy\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a>, as the <strong>Color Mode Switch<\/strong> module is a premium extension.<\/li>\n\n\n\n<li>Import the <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-site\/renovation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Renovation starter site<\/a>, which we also used in the previous tutorial, so you can follow up easily.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-four-cornerstones-of-adding-dark-mode-in-word-press-the-theory\">The Four Cornerstones of Adding Dark Mode in WordPress: The Theory<\/h2>\n\n\n\n<p>Before looking into the practical details of how to add dark mode in WordPress, let\u2019s quickly see the four cornerstones of Blocksy&#8217;s dark mode implementation, which will help you make the most out of its <strong>Color Mode Switch<\/strong> module:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-you-start-with-an-ok-looking-default-dark-mode-color-palette\">Step 1: Enable the Color Mode Switch Module<\/h3>\n\n\n\n<p>Blocksy adds a default dark mode palette to your WordPress site; this is where you can start from. The default dark mode colors (forest green, gray, yellow, black) work fine for most websites, but most likely, you\u2019ll want to tweak them a bit or more.<\/p>\n\n\n\n<p>Any time you get stuck with creating your custom dark mode palette, you can return to the default colors by clicking the \u2018Undo\u2019 icon (i.e. the blue dot icon left to the palette).<\/p>\n\n\n\n<p>Each of the 12 pre-defined color palettes comes with the same default dark mode color palette so that first you can focus on creating your light mode color palette (referred to as <strong>Global Color Palette<\/strong> in the Customizer), which is the basis of your website design (<a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/color-palette-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">see the previous tutorial<\/a>), then you can adapt your dark mode color palette to it:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-87527e6a wp-block-columns-is-layout-flex\" style=\"padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d606e410&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d606e410\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"384\" 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\/2024\/02\/02-default-dark-default-palette.png\" alt=\"Default colors both for the light and dark mode color palettes in the WordPress Customizer\" class=\"wp-image-9545\"\/><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<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d606f33f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d606f33f\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"384\" 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\/2024\/02\/03-default-dark-custom-palette.png\" alt=\"Custom colors for the light mode color palette, default colors for the dark mode color palette in the Colors panel of the WordPress Customizer\" class=\"wp-image-9546\"\/><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<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ii-each-color-variable-registers-a-light-and-a-dark-mode-color\">Step 2: Add the Color Switch to Your Header<\/h3>\n\n\n\n<p>Blocksy\u2019s color system is based on color variables that enable you to change both the light and dark mode colors of any element on your website with the click of a button.<\/p>\n\n\n\n<p>You can assign a light and dark mode color to each color variable. The light and dark colors belonging to the same color variable form color pairs:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d606f9b0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d606f9b0\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/04-global-vs-dark-mode-colors.png\" alt=\"Color pairs shown in the Customizer\" class=\"wp-image-9549\"\/><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>The light and dark mode colors of a color pair are assigned to the same color variable:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-87527e6a wp-block-columns-is-layout-flex\" style=\"padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d606fee4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d606fee4\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"790\" 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\/2024\/02\/05-var-theme-palette-color-01-light.png\" alt=\"Color variable for the light mode color, shown in the Customizer\" class=\"wp-image-9559\" style=\"object-fit:cover\"\/><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<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6070320&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6070320\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"790\" 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\/2024\/02\/06-var-theme-palette-color-01-dark.png\" alt=\"The same color variable for the dark mode color, shown in the  Customizer\" class=\"wp-image-9560\"\/><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<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iii-but-the-light-and-dark-mode-palettes-are-still-independent-of-each-other\">Step 3: Customize Your Dark Mode Color Palette<\/h3>\n\n\n\n<p>Despite the usage of color pairs, the light and dark mode palettes are still not tied to each other.<\/p>\n\n\n\n<p>For example, in the screenshot below, we updated the light mode colors, but the dark mode colors are still the same:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6070a23&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6070a23\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/07-dark-mode-with-default-global-palette.png\" alt=\"Default dark mode color palette with a different light mode color palette\" class=\"wp-image-9564\"\/><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>When we updated the light color palette, the light color values of the color variables were updated automatically, and new color pairs were formed:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-87527e6a wp-block-columns-is-layout-flex\" style=\"padding-right:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6070fab&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6070fab\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"790\" 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\/2024\/02\/var-theme-palette-color-1-updated.png\" alt=\"Light mode color updated, shown in the Customizer\" class=\"wp-image-9634\" style=\"object-fit:cover\"\/><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<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6071336&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6071336\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"790\" 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\/2024\/02\/06-var-theme-palette-color-01-dark.png\" alt=\"Dark mode color stays the same, shown in the  Customizer\" class=\"wp-image-9560\"\/><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<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"iv-you-can-assign-two-or-more-dark-mode-colors-to-one-light-mode-color\">Step 4: Adjust Colors for Page Elements and Blocks<\/h3>\n\n\n\n<p>Due to the usage of color pairs, you can create two or more dark mode equivalents for a light mode color.<\/p>\n\n\n\n<p>For example, in the screenshot below, you can see the pre-configured light and dark mode color palettes on one of our <a href=\"https:\/\/creativethemes.com\/blocksy\/starter-sites\/news-templates\/\">News starter sites<\/a>. It has four black-and-white color pairs: (1) black\/white, (2) white\/black, (3) black\/black, and (4) white\/white.<\/p>\n\n\n\n<p>This is because sometimes we want to keep the original colors in dark mode. For example, in this design, the footer has a black background and white text in light mode and we want to keep it as is in dark mode as well (i.e. we don\u2019t want to show a footer with a white background in dark mode):<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6071aa4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6071aa4\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/08-light-colors-with-two-dark-versions.png\" alt=\"Pre-configured color palettes of the Daily News starter site, annotated screenshot\" class=\"wp-image-9565\"\/><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<h2 class=\"wp-block-heading\" id=\"how-to-add-dark-mode-in-word-press-the-practice\">How to Add Dark Mode in WordPress: The Practice<\/h2>\n\n\n\n<p>Now let\u2019s see how to add dark mode in WordPress using Blocksy\u2019s <strong>Color Mode Switch<\/strong> extension.<\/p>\n\n\n\n<p>First, we\u2019ll add the color switch to the header menu, then, we\u2019ll customize the dark mode color palette, and finally, we\u2019ll apply it to various website elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-toggle-the-color-mode-switch-extension-on\">1. Toggle the Color Mode Switch Extension On<\/h3>\n\n\n\n<p>In your WordPress admin area, go to <strong>Blocksy &gt; Extensions &gt; Pro Extensions &gt; Color Mode Switch<\/strong>, toggle the extension on, then click the <strong>Customize<\/strong> button, which will open Blocksy\u2019s Header Builder in the WordPress Customizer:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60720d9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60720d9\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" 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\/2024\/02\/09-blocksy-color-mode-switch.png\" alt=\"Location of the Color Mode Switch extension in the WordPress admin area, annotated screenshot\" class=\"wp-image-9567\"\/><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<h3 class=\"wp-block-heading\" id=\"2-add-the-color-switch-to-your-desktop-header\">2. Add the Color Switch to Your Desktop Header<\/h3>\n\n\n\n<p>Once in the Header Builder, find the <strong>Color Switch<\/strong> element in the <strong>Elements<\/strong> panel\u2026:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6072670&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6072670\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/10-color-switch-element-desktop-header.png\" alt=\"Location of the Color Switch element in the Global Header panel in the Customizer\" class=\"wp-image-9569\"\/><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>\u2026and drag-and-drop it to the location where you want to display it.<\/p>\n\n\n\n<p>For example, we dropped it right to the <strong>Search <\/strong>icon:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6072af5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6072af5\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/11-color-switch-dropped-into-desktop-header.png\" alt=\"Color Switch placed into the Desktop Header visual interface\" class=\"wp-image-9570\"\/><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>Wait a few seconds until the Customizer updates, and you\u2019ll see the color switch appearing in the header menu at the location where you\u2019ve dropped it:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6072eba&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6072eba\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/12-color-switch-in-desktop-menu-sun.png\" alt=\"Dark mode switch shown in the header menu in light mode\" class=\"wp-image-9571\"\/><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>You can also test the color switch right from the Customizer \u2014 just click the little sun icon, and the page will switch&nbsp;to dark mode immediately:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d607322a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d607322a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/13-color-switch-in-desktop-menu-moon.png\" alt=\"Dark mode switch shown in the header menu in dark mode\" class=\"wp-image-9572\"\/><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>As you can see above, the dark mode colors are not perfect yet (e.g. the highlighted text in the headline is too dark, the logo is invisible, etc.) \u2014 we\u2019ll fix the dark mode colors of individual elements in <a href=\"#ii-use-your-dark-mode-color-palette-in-the-block-editor\" data-type=\"internal\" data-id=\"#6-configure-the-dark-mode-colors-of-your-page-elements-and-blocks\">Step 6<\/a> (blocks) and <a href=\"#7-add-your-dark-mode-logo\" data-type=\"internal\" data-id=\"#7-add-your-dark-mode-logo\">Step 7<\/a> (logo).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-add-the-color-switch-to-your-tablet-mobile-header\">3. Add the Color Switch to Your Tablet \/ Mobile Header<\/h3>\n\n\n\n<p>If you also want to show the color switch on mobile and tablet devices, you\u2019ll need to add it separately.<\/p>\n\n\n\n<p>To do so, click the <strong>Tablet \/ Mobile Header<\/strong> tab in the <strong>Elements<\/strong> panel and drag the <strong>Color Switch<\/strong> element to the location where you want to show it on small-screen devices:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60736b8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60736b8\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/14-color-switch-dragged-into-mobile-header.png\" alt=\"Color Switch element shown inside the Mobile\/Tablet Header Builder\" class=\"wp-image-9574\"\/><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>Once you\u2019ve added the color switch to the Tablet \/ Mobile Header, you\u2019ll see the color switch appearing at the location where you\u2019ve dropped it (in our example, left to the hamburger menu):<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6073ada&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6073ada\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/15-color-switch-mobile-menu-moon.png\" alt=\"Color switch shown in mobile view in dark mode\" class=\"wp-image-9576\"\/><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><em>(It\u2019s also possible to show the color switch only on mobile and tablet, but not on desktop devices \u2014 to do so, only add the element to the Tablet \/ Mobile Header.)<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-configure-the-settings-of-your-color-switch\">4. Configure the Settings of Your Color Switch<\/h3>\n\n\n\n<p>Now click right into the <strong>Color Switch<\/strong> element in the <strong>Desktop Header<\/strong> tab, which will open its detailed settings:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-customize-the-general-settings\">i. Customize the General Settings<\/h4>\n\n\n\n<p>Use the <strong>General<\/strong> tab to customize the general settings of your color switch, including the:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>icon (you can choose from three icon styles and reverse the icon state, i.e. you can show the sun icon in dark mode and the moon icon in light mode)<\/li>\n\n\n\n<li>label visibility, position, and text<\/li>\n\n\n\n<li>default color mode (to support <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/website-accessibility-primer\/\" target=\"_blank\" rel=\"noreferrer noopener\">website accessibility<\/a>, choose the <strong>OS Aware<\/strong> option, which respects the user\u2019s operating system settings):<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60740c8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60740c8\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/16-color-switch-general-settings-desktop.png\" alt=\"General settings of the Color Switch element\" class=\"wp-image-9575\"\/><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<h4 class=\"wp-block-heading\" id=\"ii-access-the-element-visibility-option-for-tablet-and-mobile\">ii. Access the Element Visibility Option for Tablet and Mobile<\/h4>\n\n\n\n<p>If you\u2019ve added the color switch for tablet and mobile devices, click the <strong>Tablet \/ Mobile Header<\/strong> tab, which adds an extra <strong>Element Visibility<\/strong> setting at the bottom of the <strong>General <\/strong>tab.<\/p>\n\n\n\n<p>Here, you can configure whether you want to show the color switch only on tablet, only on mobile, or on both small-screen device types:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6074542&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6074542\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/17-color-switch-element-visibility-mobile.png\" alt=\"Element Visibility option shown in the General Settings panel of the Tablet \/ Mobile Header\" class=\"wp-image-9578\"\/><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<h4 class=\"wp-block-heading\" id=\"iii-configure-the-font-color-and-alignment-options-of-your-color-switch\">iii. Configure the Font, Color, and Alignment Options of Your Color Switch<\/h4>\n\n\n\n<p>Now open the <strong>Design<\/strong> tab and configure the:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>label font (this is only relevant if you show a label next to the color switch), including the font family, font size, line height, letter spacing, and capitalization<\/li>\n\n\n\n<li>colors of the label font and the color switch icon (by default, it pulls the colors from <strong>Global Colors<\/strong>; we\u2019ll look into how to use these options in <a href=\"#i-change-your-global-colors\" data-type=\"internal\" data-id=\"#6-configure-the-dark-mode-colors-of-your-page-elements-and-blocks\">Step 6<\/a>)<\/li>\n\n\n\n<li>margin around the color switch (you can set different margins for desktop, tablet, and mobile devices):<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6074aa3&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6074aa3\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/18-color-switch-design-settings-desktop.png\" alt=\"Design Settings of the Color Switch element in the Customizer\" class=\"wp-image-9579\"\/><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<h3 class=\"wp-block-heading\" id=\"5-customize-your-dark-mode-color-palette\">5. Customize Your Dark Mode Color Palette<\/h3>\n\n\n\n<p>To customize your dark mode color palette, open the <strong>General Options &gt; Colors <\/strong>panel in the Customizer where you can see the <strong>Dark Mode Color Palette<\/strong> setting populated with the default dark mode colors:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6074f09&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6074f09\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/19-colors-panel-with-dark-mode-palette.png\" alt=\"Default dark mode color palette in the Colors panel of the WordPress Customizer\" class=\"wp-image-9580\"\/><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>If you switch the site to dark mode, you\u2019ll see that the default dark mode colors don&#8217;t look good everywhere.<\/p>\n\n\n\n<p>For example, here&#8217;s what the <strong>Services<\/strong> page of the Renovation demo looks like in dark mode with the default colors:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d607545d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d607545d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/20-dark-mode-defaut-palette-customizer.png\" alt=\"Default dark mode color palette switched to dark mode in the live Customizer\" class=\"wp-image-9582\"\/><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>With Blocksy, you can customize the default dark mode color palette in two ways:<\/p>\n\n\n\n<ol style=\"list-style-type:lower-roman\" class=\"wp-block-list\">\n<li>by overriding the default colors<\/li>\n\n\n\n<li>by adding new colors to the palette<\/li>\n<\/ol>\n\n\n\n<p>Let\u2019s see how to do both.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-override-change-the-default-dark-mode-colors\">i. Override (Change) the Default Dark Mode Colors<\/h4>\n\n\n\n<p>To override the default dark mode colors, click into the color swatch you want to change and add the new color using the color picker.<\/p>\n\n\n\n<p>For example, you can keep the main brand color in dark mode. <\/p>\n\n\n\n<p>You can do so by copying the <a href=\"https:\/\/www.techopedia.com\/definition\/29788\/color-hex-code\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">hex code<\/a> (<code>#EC6A2B<\/code> in the example below) of the first swatch in the <strong>Global Color Palette<\/strong> and pasting it into the hex code field of the first swatch in the <strong>Dark Mode Color Palette<\/strong>.<\/p>\n\n\n\n<p>As you can see, the background color of the hero section has changed immediately \u2014 this is because we overrode the dark mode value of <strong>Color 1<\/strong>:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6075a8d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6075a8d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/21-dark-mode-colors-overriden.png\" alt=\"Default dark mode colors overriden in the Customizer\" class=\"wp-image-9583\"\/><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<h4 class=\"wp-block-heading\" id=\"ii-add-new-colors-to-your-dark-mode-palette\">ii. Add New Colors to Your Dark Mode Palette<\/h4>\n\n\n\n<p>To enhance your dark mode color palette with new colors, click the three dots icon in the top-right corner of the <strong>Colors<\/strong> panel and select the <strong>Add New Color<\/strong> option:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6075eee&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6075eee\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/22-add-new-color-dark-mode.png\" alt=\"Location of the Add New Color option in the Colors panel\" class=\"wp-image-9584\"\/><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>When the new color swatches for the new color pair appear on the screen, you can add the extra colors (each color pair will register a new color variable).<\/p>\n\n\n\n<p>For example, in the screenshot below, we enhanced the palettes with four new color pairs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the white\/white and black\/black color pairs will enable us to keep the original black and white colors in dark mode (e.g. we\u2019ll use it to fix the <strong>Contact Us<\/strong> button on the <strong>Services<\/strong> page)<\/li>\n\n\n\n<li>the two orange\/teal color pairs will allow us to use <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/complementary-colors\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">complementary colors<\/a> in dark mode (e.g. we\u2019ll use it for the text selection):<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6076413&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6076413\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/23-enhanced-dark-mode-palette.png\" alt=\"Dark Mode Color Palette enhanced with four custom color pairs\" class=\"wp-image-9585\"\/><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<h3 class=\"wp-block-heading\" id=\"6-configure-the-dark-mode-colors-of-your-page-elements-and-blocks\">6. Configure the Dark Mode Colors of Your Page Elements and Blocks<\/h3>\n\n\n\n<p>Once your dark mode color palette is set up, Blocksy immediately applies the first eight color pairs (i.e. the default color variables) to your site.<\/p>\n\n\n\n<p>However, you can assign a new color pair to any of your page elements or blocks. Let&#8217;s see how to do so.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-change-your-global-colors\">i. Change Your Global Colors<\/h4>\n\n\n\n<p>The <strong>Global Colors<\/strong> options in the <strong>Colors<\/strong> panel let you assign color variables to different page elements globally, including the base text, links, borders, headings, the page background, and others.<\/p>\n\n\n\n<p>You can assign a new color variable to your global elements by clicking into the color swatch and choosing a new color.<\/p>\n\n\n\n<p>For example, <strong>Color 1<\/strong> is assigned to the background color of the <strong>Text Selection<\/strong> option by default. This is the orange\/orange color pair, which means that the text selection has an orange background in both light and dark modes:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60769de&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60769de\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/24-text-selection-dark-mode-option-1.png\" alt=\"Text Selection option with the default color variable\" class=\"wp-image-9586\"\/><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>However, if you choose <strong>Color 11<\/strong>, which is the orange\/teal color pair we created in <a href=\"#ii-add-new-colors-to-your-dark-mode-palette\">Step 5<\/a>, you can keep the orange background in light mode while showing a teal background in dark mode:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6076db1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6076db1\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/25-text-selection-dark-mode-option-2.png\" alt=\"Text Selection option with the custom dark color variable\" class=\"wp-image-9587\"\/><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>You can use the same method to configure the dark mode color of any of your elements in the Customizer, block editor, and <a href=\"https:\/\/creativethemes.com\/blocksy\/recommendations\/\" target=\"_blank\" rel=\"noreferrer noopener\">supported page builder plugins<\/a> (i.e. Elementor, Beaver Builder, Brizy, and Zion Builder).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ii-use-your-dark-mode-color-palette-in-the-block-editor\">ii. Use Your Dark Mode Color Palette in the Block Editor<\/h4>\n\n\n\n<p>For example, let\u2019s see how to fix the <strong>Contact Us<\/strong> button on the <strong>Services<\/strong> page, which currently uses white text on a white background in dark mode.<\/p>\n\n\n\n<p>First, open the <strong>Services<\/strong> page in the block editor by going to <strong>Pages &gt; All Pages &gt; Services &gt; Edit<\/strong> in your WordPress admin area.<\/p>\n\n\n\n<p>As you won\u2019t see the page in dark mode in the block editor, you\u2019ll need to either imagine it or open the frontend preview in another browser tab.<\/p>\n\n\n\n<p>Click the <strong>Contact Us<\/strong> button to open its settings (note that this demo is built with the <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Stackable<\/a> plugin, so you\u2019ll see the options of the Stackable block, but Blocksy\u2019s color system works the same way with ordinary Gutenberg blocks too).<\/p>\n\n\n\n<p>The dark mode color options won\u2019t show up inside the block\u2019s settings, so you\u2019ll need to use the light mode color swatches.<\/p>\n\n\n\n<p>Right now, the block uses <strong>Color 4<\/strong>, which is the black\/white color pair \u2014 this is why the background of the button is white in dark mode:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60773e5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60773e5\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/26-hero-button-color-dark-mode-option-1.png\" alt=\"Contact Us button with the preset color variable in the WordPress block editor\" class=\"wp-image-9588\"\/><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 show a black background in dark mode as well, select <strong>Color 10<\/strong>, which is the black\/black color pair:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d607778b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d607778b\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/27-hero-button-color-dark-mode-option-2.png\" alt=\"Contact Us button with the updated color variable in the WordPress block editor\" class=\"wp-image-9589\"\/><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>Update the page, then open it on the frontend of your site.<\/p>\n\n\n\n<p>As you can see below, now the <strong>Contact Us<\/strong> button has a black background and white text in dark mode too:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6077b87&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6077b87\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" 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\/2024\/02\/28-hero-button-color-dark-mode-frontend.png\" alt=\"Contact Us button with fixed dark mode colors, frontend view\" class=\"wp-image-9590\"\/><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<h3 class=\"wp-block-heading\" id=\"7-add-your-dark-mode-logo\">7. Add Your Dark Mode Logo<\/h3>\n\n\n\n<p>Finally, let\u2019s see how to add a dark mode logo to your WordPress site.<\/p>\n\n\n\n<p>Open the Header Builder by going to <strong>General Options &gt; Header<\/strong> in the Customizer and click into the <strong>Logo<\/strong> element to open its settings:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60780f9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60780f9\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/29-logo-element-settings-header-builder.png\" alt=\"Location of the Logo element in the Header Builder\" class=\"wp-image-9591\"\/><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>When the settings appear in the left panel, click into the <strong>Dark Mode Logo<\/strong> field and add the dark mode version of your logo:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60784fc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60784fc\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/30-dark-mode-logo-select-field.png\" alt=\"Dark Mode Logo field in the General panel of the Logo element\" class=\"wp-image-9592\"\/><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>Click the <strong>Publish<\/strong> button, close the Customizer, and reload the page to see what your dark mode logo looks like on the frontend of your WordPress site:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d60788d0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d60788d0\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" 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\/2024\/02\/31-dark-mode-logo-frontend.png\" alt=\"\" class=\"wp-image-9593\"\/><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<h2 class=\"wp-block-heading\" id=\"free-bonus-switch-the-customizer-to-dark-mode\">Free Bonus: Switch the Customizer to Dark Mode<\/h2>\n\n\n\n<p>In this tutorial, we looked into how to add dark mode in WordPress using Blocksy\u2019s premium <strong>Color Mode Switch<\/strong> extension.<\/p>\n\n\n\n<p>You can combine the dark mode palette with Blocksy\u2019s other free and Pro features and modules as well, including the <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/create-transparent-header-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">transparent header<\/a>, <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/create-custom-popup-newsletter-subscribe\" target=\"_blank\" rel=\"noreferrer noopener\">newsletter subscribe popup<\/a>, <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/create-sticky-header-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">sticky header<\/a>, and <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/extensions-general\/\" target=\"_blank\" rel=\"noreferrer noopener\">many more<\/a>.<\/p>\n\n\n\n<p>While we highly recommend that you <a href=\"https:\/\/creativethemes.com\/blocksy\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">upgrade your free plan<\/a> to add premium features to your site \u2014 if you\u2019re not ready yet, we also have a free dark mode feature, available to every Blocksy user.<\/p>\n\n\n\n<p>To access it, open the Customizer and click the little moon icon in the bottom-left corner to switch the entire Customizer UI, including the header and footer builders, into dark mode:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d23d6078d45&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d23d6078d45\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" 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\/2024\/02\/32-switch-customizer-dark-mode.png\" alt=\"Customizer in dark mode\" class=\"wp-image-9594\"\/><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<h2 class=\"wp-block-heading\" id=\"common-challenges-when-adding-dark-mode-to-word-press-and-how-to-solve-them\">Common Challenges When Adding Dark Mode to WordPress (and How to Solve Them)<\/h2>\n\n\n\n<p>While dark mode enhances your site\u2019s usability and appeal, you might encounter some issues during implementation. Here\u2019s a guide to common challenges and their solutions to ensure a smooth experience:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-logos-and-images-not-visible-in-dark-mode\">1. Logos and Images Not Visible in Dark Mode<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: Light-colored logos and images may blend into dark backgrounds, making them invisible or hard to see.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Upload a dark mode version of your logo with contrasting colors.<\/li>\n\n\n\n<li>Use Blocksy\u2019s Header Builder to assign a specific logo for dark mode by navigating to\u00a0<strong>Customizer > Header > Logo Settings > Dark Mode Logo<\/strong>.<\/li>\n\n\n\n<li>For images, add a subtle border or adjust brightness and contrast in your image editor.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-text-or-buttons-blending-into-backgrounds\">2. Text or Buttons Blending into Backgrounds<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: Inconsistent color palettes may cause text or buttons to become unreadable or invisible against the background.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Use Blocksy\u2019s Global Colors to adjust text and button colors specifically for dark mode.<\/li>\n\n\n\n<li>Test contrast levels for accessibility using tools like WebAIM\u2019s Contrast Checker.<\/li>\n\n\n\n<li>Apply high-contrast colors for key elements like CTAs to ensure visibility.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-poor-color-harmony-in-dark-mode\">3. Poor Color Harmony in Dark Mode<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: A mismatched dark mode palette may look inconsistent or unprofessional, harming user experience.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Customize Blocksy\u2019s default dark mode palette to align with your brand colors.<\/li>\n\n\n\n<li>Use complementary colors and subtle gradients to add depth and harmony.<\/li>\n\n\n\n<li>Stick to a limited number of colors to maintain a clean and cohesive design.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-performance-issues-with-third-party-plugins\">4. Performance Issues with Third-Party Plugins<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: Some dark mode plugins may conflict with your theme or slow down your site.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Use Blocksy\u2019s built-in Color Mode Switch module instead of third-party plugins to avoid compatibility and performance issues.<\/li>\n\n\n\n<li>Regularly update your theme and plugins to minimize conflicts.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-inconsistent-dark-mode-behavior-across-devices\">5. Inconsistent Dark Mode Behavior Across Devices<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: Your dark mode design may not look consistent on mobile, tablets, and desktops.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Preview your site in dark mode on different devices to identify inconsistencies.<\/li>\n\n\n\n<li>Use Blocksy\u2019s responsive design settings in the Customizer to adjust margins, fonts, and element placements for mobile and tablet views.<\/li>\n\n\n\n<li>Test on multiple browsers to ensure compatibility.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-users-missing-the-dark-mode-switch\">6. Users Missing the Dark Mode Switch<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: If the dark mode toggle is not prominently displayed, users may not notice it.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Place the toggle in a highly visible location, such as the header or navigation bar.<\/li>\n\n\n\n<li>Use a clear icon (e.g., a sun\/moon) or text label to make the toggle easy to understand.<\/li>\n\n\n\n<li>Highlight the dark mode feature in your site\u2019s introduction or promotional materials.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-overuse-of-pure-black-backgrounds\">7. Overuse of Pure Black Backgrounds<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem<\/strong>: While pure black may seem intuitive for dark mode, it can cause eye strain and make text appear harsh.<\/li>\n\n\n\n<li><strong>The Solution<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Use dark grays (e.g., #121212 or #1E1E1E) instead of pure black for a softer look.<\/li>\n\n\n\n<li>Balance darker backgrounds with lighter text colors to improve readability and reduce eye strain.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Using a theme rather than a plugin to add dark mode in WordPress comes with two main advantages: it\u2019s better for performance and it\u2019s better for the user experience. As for performance, if you add dark mode using your theme, you don\u2019t have to install another plugin, and as the dark mode color palette is [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":9756,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-8136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/8136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=8136"}],"version-history":[{"count":135,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/8136\/revisions"}],"predecessor-version":[{"id":12091,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/8136\/revisions\/12091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/9756"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=8136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/categories?post=8136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/tags?post=8136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}