Skip to Main Content

Create an Elementor Dark Mode without plugin

Play Video
In this tutorial You will learn how to create an Elementor dark mode without plugin by utilizing Elementor Global colors that allow you to manage colors for both light and dark modes efficiently
Need help improving your Elementor site speed performance?
Table of Contents

Requirements:

  1. Elementor Advanced Plan or Legacy Pro plan (Essential plan does not include custom code and CSS functionalities)
  2. Basic knowledge of the PHP (for enqueuing or injecting script and CSS)
  3. Chrome Dev tools basic Knowledge (for inspect-elements and debugging)

In this in-depth tutorial, I will show you how to create an Elementor Dark mode without plugin switch by utilizing Elementor Global colors (CSS custom properties).

Update your Header template Structure

If you don’t know how to create a template, you can follow my article on creating an Elementor sticky header without extra plugins.

This is before and after the update:

Old Header Template
Before
New Header Template
after

Create an Elementor Dark Mode without plugin

Using any vector software, you can use any codepen demos or create your own light/night toggle switch. 

I used one of Kevin Powell’s demos on my website and modified it a bit for my requirements.

This is my final design 

New Header Template

You can get all the explanations from his YouTube video

  • Drag and drop the HTML widget

    Elementor's HTML widget

  • Copy and paste the HTML code inside the HTML widget

    Page structure of header template

    You can copy and paste the HTML code inside the HTML widget or create your design.

    if you’re changing the Button ID (theme-toggle to something else), you must update it in JavaScript too otherwise the toggle will not work.
  • This is what it looks like
    SVG wrap inside the Button tag

Elementor's Site Settings Customize
Site Settings Custom CSS area

        
        
/* Define custom properties for the toggle button */
.toggleMode {
  --_fill-color: var(--foreground); /* Fill color for SVG */
  --_width: 50px; /* Width of the SVG */
  --_height: 50px; /* Height of the SVG */
  --_transition: 1200ms cubic-bezier(0.11, 0.14, 0.29, 1.32); /* Transition timing function */
}

/* Style for the theme toggle button */
#theme-toggle {
  cursor: pointer; /* Change cursor to pointer on hover */
  background: transparent; /* Transparent background */
  border: 0; /* No border */
  opacity: 0.8; /* Slightly transparent */
  border-radius: 50%; /* Circular button */
  padding: 5px 5px 2px; /* Padding around the button */
  position: relative; /* Position relative to allow for pseudo-element positioning */
  isolation: isolate; /* Isolate stacking context */
}

/* Style for the SVG inside the theme toggle button */
#theme-toggle svg {
  fill: var(--_fill-color); /* Use custom fill color */
  width: var(--_width); /* Use custom width */
  height: var(--_height); /* Use custom height */
  aspect-ratio: 1/1; /* Maintain aspect ratio */
}

/* Style for the pseudo-element before the theme toggle button */
#theme-toggle::before {
  content: ""; /* Empty content */
  position: absolute; /* Absolute positioning */
  inset: 0; /* Stretch to cover the button */
  background: hsl(0 0% 50% / 0.2); /* Semi-transparent background */
  border-radius: inherit; /* Inherit border radius from parent */
  transform: scale(0); /* Initial scale */
  opacity: 0; /* Initial opacity */
  z-index: -1; /* Place behind the button */
}

/* Animation for the pseudo-element when the light theme is active */
.light-theme #theme-toggle::before {
  animation: pulseToLight var(--_transition);
}

/* Animation for the pseudo-element when the dark theme is active */
.dark-theme #theme-toggle::before {
  animation: pulseToDark var(--_transition);
}

/* Style for the theme toggle button on hover and focus */
#theme-toggle:hover,
#theme-toggle:focus {
  outline: none; /* Remove outline */
  opacity: 1; /* Fully opaque */
  background: hsl(0 0% 50% / 0.15); /* Slightly darker background */
}

/* Transition for the circle inside the toggle button */
.toggle-circle {
  transition: transform var(--_transition);
}

/* Position adjustment for the circle in light theme */
.light-theme .toggle-circle {
  transform: translateX(-15%);
}

/* Transition for the sun icon inside the toggle button */
.toggle-sun {
  transform-origin: center center; /* Set transform origin to center */
  transition: transform var(--_transition);
}

/* Rotation for the sun icon in light theme */
.light-theme .toggle-sun {
  transform: rotate(50deg); /* Rotate by 50 degrees */
  transform: rotate(0.5turn); /* Rotate by half a turn */
}

/* Keyframes for the light theme pulse animation */
@keyframes pulseToLight {
  0% {
    transform: scale(0); /* Initial scale */
    opacity: 0.5; /* Initial opacity */
  }
  10% {
    transform: scale(1); /* Full scale */
  }
  75% {
    opacity: 1; /* Full opacity */
  }
  100% {
    opacity: 0; /* Fade out */
    transform: scale(1); /* Maintain full scale */
  }
}

/* Keyframes for the dark theme pulse animation */
@keyframes pulseToDark {
  0% {
    transform: scale(0); /* Initial scale */
    opacity: 0.5; /* Initial opacity */
  }
  10% {
    transform: scale(1); /* Full scale */
  }
  75% {
    opacity: 1; /* Full opacity */
  }
  100% {
    opacity: 0; /* Fade out */
    transform: scale(1); /* Maintain full scale */
  }
}

        
    
  • Add the JavaScript

    1. You can Elementor Custom Code and wrap the JS in script tag
    2. Use the Code Snippets plugin or any 3rd parties plugins and inject your JS sidewide.
    3. You can load the script tag on the header template’s recently used HTML widget.
        
        
//Minify your JS

/**
 * Enable dark mode by updating the body's class and setting the aria-label
 */
function enableDarkMode() {
    // Remove the 'light-theme' class from the body
    document.body.classList.remove("light-theme");
    // Add the 'dark-theme' class to the body
    document.body.classList.add("dark-theme");
    // Update the aria-label on the theme toggle button
    themeToggle.setAttribute("aria-label", "Switch to light theme");
}

/**
 * Enable light mode by updating the body's class and setting the aria-label
 */
function enableLightMode() {
    // Remove the 'dark-theme' class from the body
    document.body.classList.remove("dark-theme");
    // Add the 'light-theme' class to the body
    document.body.classList.add("light-theme");
    // Update the aria-label on the theme toggle button
    themeToggle.setAttribute("aria-label", "Switch to dark theme");
}

/**
 * Set the theme based on the user's preference
 */
function setThemePreference() {
    // Check if the user prefers dark mode
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        enableDarkMode(); // Enable dark mode
    } else {
        enableLightMode(); // Enable light mode
    }
}

// Select the theme toggle button
const themeToggle = document.querySelector("#theme-toggle");

// Add an event listener to the theme toggle button
themeToggle.addEventListener("click", () => {
    // Toggle the theme based on the current class
    if (document.body.classList.contains("light-theme")) {
        enableDarkMode();
    } else {
        enableLightMode();
    }
});

// Set the theme preference on page load
document.onload = setThemePreference();

        
    

To create a functional theme toggle, we need to define or utilize existing Elementor Global Colors. By doing this, the colors will automatically change when the user interacts with the button, providing a seamless experience.

Set up your Elementor Global Colors

To access or create the global colors, head over to

Elementor > Home > Jumpstart your web-creation > Global Colors > Customize

If you already set up a Global Colors on your website, you can safely ignore this setup.

Picture shows how to customize Elementor Global colors

After you click the Global Color’s customize links, it will open the site settings’s Global colors.

Screenshot showing the Elementor global colors with style guide preview

Identify your Elementor Global Colors

This is the most crucial step in this tutorial and it is quite easy to identify it with Chrome Dev tools > Inspect Elements.

Watch the video to learn more.

Global Custom variables start with .elementor-kit-*
* referring to random numbers generated by Elementor.
        
        
/* 
 * Global Colors and Custom Colors (for demonstration purposes only)
 * The actual class names and variable names in your CSS might be different.
 * Update the variable names to match your specific colors.
 * This section defines color variables for various UI elements. 
 * You can use these variables throughout your CSS to maintain consistency.
*/

.elementor-kit-9 {
  /* 
   * Elementor Global Colors 
   */
  /* Primary color */
  --e-global-color-primary: #0f2682;
  /* Secondary color */
  --e-global-color-secondary: #c3acd0;
  /* Text color */
  --e-global-color-text: #000000;
  /* Accent color */
  --e-global-color-accent: #7743db;

  /* 
   * Custom Colors (might be brand-specific colors)
   */
  /* Heading color (possibly the same as primary color) */
  --e-global-color-a8d992b: #0f2682;
  /* Background color */
  --e-global-color-3a19026: #ffffff;

  /* 
   * Inherited colors for this element (.elementor-kit-9)
   */
  --foreground: var(
    --e-global-color-text
  ); /* Inherits text color from --e-global-color-text */
  --background: var(
    --e-global-color-3a19026
  ); /* Inherits background color from --e-global-color-3a19026 */
}
        
    

Define your Dark/Night Mode CSS colors

        
        
/* 
  Styles applied when the user has dark mode enabled 
  (prefers-color-scheme: dark media query)
*/
.dark-theme {
  /* Sets the color scheme to 'light dark', likely for better dark mode contrast */
  color-scheme: light dark;

  /* 
   Elementor Global Colors for Dark Mode
  */
  /* Primary color for dark mode */
  --e-global-color-primary: #212f69;
  /* Secondary color for dark mode */
  --e-global-color-secondary: #9e73b7;
  /* Text color for dark mode */
  --e-global-color-text: #000;
  /* Accent color for dark mode */
  --e-global-color-accent: #8462c2;

  /* 
    Custom Colors - These might be brand-specific colors 
  */
  /* Possibly unused variable */
  --e-global-color-a8d992b: #c1ccf5;
  /* Background color for dark mode */
  --e-global-color-3a19026: #202020;
  /* Possibly unused variable */
  --e-global-color-66b2cd3: #ffffff42;
  /* Inherits background color from --e-global-color-3a19026 variable */
  --background: var(--e-global-color-3a19026);
  /* Inherits foreground color from --e-global-color-text variable */
  --foreground: var(--e-global-color-text);
}
        
    

Media query targeting users who prefer dark mode

        
        
/* 
* Media query targeting users who prefer dark mode 
*/
@media (prefers-color-scheme: dark) {
  /* 
  * Styles within this media query will only be applied 
     if the user has dark mode enabled 
  */
  .dark-theme {
    /* Sets the color scheme to 'light dark', likely for better dark mode contrast */
    color-scheme: light dark;
    /* Redefines global color variables for dark mode */
    --e-global-color-primary: #212f69; /* Primary color for dark mode */
    --e-global-color-secondary: #9e73b7; /* Secondary color for dark mode */
    --e-global-color-text: #fff; /* Text color for dark mode */
    --e-global-color-accent: #8462c2; /* Accent color for dark mode */
    --e-global-color-a8d992b: #c1ccf5; /* Possibly unused variable */
    --e-global-color-3a19026: #202020; /* Background color for dark mode */
    --e-global-color-66b2cd3: #ffffff42; /* Possibly unused variable */

    /* Inherits background color from --e-global-color-3a19026 variable */
    --background: var(--e-global-color-3a19026);

    /* Inherits foreground color from --e-global-color-text variable */
    --foreground: var(--e-global-color-text);
  }
}
        
    

The final result that includes all the CSS

        
        
/* 
 * Global Colors and Custom Colors (for demonstration purposes only) 
 * The actual class names and variable names in your CSS might be different.
 * Update the variable names to match your specific colors.
 * This section defines color variables for various UI elements. 
 * You can use these variables throughout your CSS to maintain consistency.
*/

.elementor-kit-9 {
  /* 
   * Elementor Global Colors 
   */
  /* Primary color */
  --e-global-color-primary: #0f2682;
  /* Secondary color */
  --e-global-color-secondary: #c3acd0;
  /* Text color */
  --e-global-color-text: #000000;
  /* Accent color */
  --e-global-color-accent: #7743db;

  /* 
   * Custom Colors (might be brand-specific colors)
   */
  /* Heading color (possibly the same as primary color) */
  --e-global-color-a8d992b: #0f2682;
  /* Background color */
  --e-global-color-3a19026: #ffffff;
  /* 
   * Inherited colors for this element (.elementor-kit-9)
   */
  --foreground: var(
    --e-global-color-text
  ); /* Inherits text color from --e-global-color-text */
  --background: var(
    --e-global-color-3a19026
  ); /* Inherits background color from --e-global-color-3a19026 */
}

/* 
 * Styles applied when the user has dark mode enabled 
  (prefers-color-scheme: dark media query)
*/
.dark-theme {
  /* Sets the color scheme to 'light dark', likely for better dark mode contrast */
  color-scheme: light dark;

  /* 
    Elementor Global Colors for Dark Mode
  */
  /* Primary color for dark mode */
  --e-global-color-primary: #212f69;
  /* Secondary color for dark mode */
  --e-global-color-secondary: #9e73b7;
  /* Text color for dark mode */
  --e-global-color-text: #000;
  /* Accent color for dark mode */
  --e-global-color-accent: #8462c2;

  /* 
    Custom Colors - These might be brand-specific colors 
  */
  /* Possibly unused variable */
  --e-global-color-a8d992b: #c1ccf5;
  /* Background color for dark mode */
  --e-global-color-3a19026: #202020;
  /* Possibly unused variable */
  --e-global-color-66b2cd3: #ffffff42;
  /* Inherits background color from --e-global-color-3a19026 variable */
  --background: var(--e-global-color-3a19026);
  /* Inherits foreground color from --e-global-color-text variable */
  --foreground: var(--e-global-color-text);
}

/* Media query targeting users who prefer dark mode */
@media (prefers-color-scheme: dark) {
  /* 
     Styles within this media query will only be applied 
     if the user has dark mode enabled 
  */
  .dark-theme {
    /* Sets the color scheme to 'light dark', likely for better dark mode contrast */
    color-scheme: light dark;
    /* Redefines global color variables for dark mode */
    --e-global-color-primary: #212f69; /* Primary color for dark mode */
    --e-global-color-secondary: #9e73b7; /* Secondary color for dark mode */
    --e-global-color-text: #fff; /* Text color for dark mode */
    --e-global-color-accent: #8462c2; /* Accent color for dark mode */
    --e-global-color-a8d992b: #c1ccf5; /* Possibly unused variable */
    --e-global-color-3a19026: #202020; /* Background color for dark mode */
    --e-global-color-66b2cd3: #ffffff42; /* Possibly unused variable */

    /* Inherits background color from --e-global-color-3a19026 variable */
    --background: var(--e-global-color-3a19026);

    /* Inherits foreground color from --e-global-color-text variable */
    --foreground: var(--e-global-color-text);
  }
}
        
    

How to Use Elementor’s Global Colors & Fonts on website

To use the Global colors, watch the official YouTube video and implement it on your project.

If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store
Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *