Create a Dark Mode Toggle in Elementor Without Plugins

Preface

Tired of straining your eyes in the dark while browsing your favorite websites? Dark mode is the answer! A dark mode toggle has become an increasingly popular feature in web design, offering users a comfortable viewing experience in low-light conditions. But what if you want to add this functionality to your Elementor website without bogging it down with extra plugins? Fortunately, you can! This comprehensive guide will show you how to create a dark mode toggle in Elementor without using any plugins, ensuring a lightweight and efficient website.

Why Add a Dark Mode Toggle?

Before we dive in, let’s explore the benefits of adding a dark mode toggle to your website:

• Reduced Eye Strain: Dark mode reduces the amount of blue light emitted by screens, which can help alleviate eye strain, especially in low-light environments.
• Improved Readability: Many users find that dark mode improves readability by reducing glare and increasing contrast.
• Extended Battery Life: On devices with OLED or AMOLED screens, dark mode can conserve battery life by reducing the power consumption of the display.
• Enhanced User Experience: Providing a dark mode option allows users to customize their browsing experience according to their preferences and needs.
• Accessibility: Dark mode can be beneficial for users with visual impairments, such as light sensitivity.

Prerequisites

Before you start, make sure you have the following:

• A WordPress website with Elementor installed and activated.
• Basic knowledge of HTML, CSS, and JavaScript (don’t worry, we’ll guide you through the code!).
• A code editor (like VS Code, Sublime Text, or Atom).

Hint: If you’re unfamiliar with Elementor, check out our comprehensive guide: Getting Started with Elementor: The Complete Guide.

Step-by-Step Guide: Creating a Dark Mode Toggle

Here’s how to create a fully functional dark mode toggle in Elementor without using any plugins:

Step 1: Create a Custom CSS Class

First, we need to define a CSS class that will control the appearance of our website in dark mode. You can add this CSS code to your theme’s stylesheet or use Elementor’s custom CSS feature.

1. Go to your WordPress dashboard.
2. Navigate to Elementor > Custom Code.
3. Click Add New.
4. Give your custom code a title (e.g., ‘Dark Mode CSS’).
5. Set the location to ‘wp_head’.
6. Add the following CSS code inside the code area:

body.dark-mode {
 background-color: #121212 !important; /* Dark background color */
 color: #ffffff !important; /* Light text color */
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
 color: #ffffff !important; /* Light heading color */
}

body.dark-mode p, body.dark-mode span, body.dark-mode a {
 color: #ffffff !important; /* Light text color */
}

/* Add more styles as needed for other elements */

Info: The `!important` declaration ensures that these styles override any existing styles on your website.

You can customize the colors to match your website’s design. This CSS targets the body element when it has the dark-mode class applied, changing the background color to a dark grey and the text color to white. It also targets heading elements and links to ensure they are readable in dark mode. You can extend these styles to other elements as needed.

7. Click ‘Publish’ and make sure it applies to the entire site.

Step 2: Add a Toggle Button in Elementor

Next, we need to add a toggle button to your website that users can click to switch between light and dark modes. You can create this button using Elementor’s button widget.

1. Open the Elementor editor on the page where you want to add the dark mode toggle.
2. Drag and drop a Button widget onto your page.
3. Customize the button’s text (e.g., ‘Dark Mode’).
4. In the button’s settings, go to the ‘Advanced’ tab.
5. Under ‘CSS Classes’, add the class dark-mode-toggle.
6. Remove any link from the button.

Step 3: Add the JavaScript Code

Now, we need to add the JavaScript code that will handle the toggling of the dark-mode class on the body element. You can add this code using Elementor’s HTML widget.

1. Drag and drop an HTML widget onto your page, preferably near the button you created.
2. Add the following JavaScript code inside the HTML widget:

Here’s what this JavaScript code does:

• It waits for the DOM to load before running.
• It selects the button with the class dark-mode-toggle.
• It adds a click event listener to the button.
• When the button is clicked, it toggles the dark-mode class on the body element.
• It saves the user’s preference in localStorage so that the dark mode setting is remembered across sessions.
• On page load, it checks if the user has previously enabled dark mode and applies the dark-mode class accordingly.

Step 4: Test Your Dark Mode Toggle

Save your Elementor page and preview it. Click the ‘Dark Mode’ button to see if it toggles the dark mode on and off. If everything is set up correctly, the background color and text color should change when you click the button.

Info: If the dark mode toggle isn’t working, double-check your CSS and JavaScript code for any errors, and make sure that the CSS classes are correctly applied to the button and the body element.

Advanced Customization

Here are some advanced customization options to enhance your dark mode toggle:

Dynamic Styling with CSS Variables

Instead of hardcoding colors in your CSS, you can use CSS variables to make it easier to manage your website’s theme. Here’s how:

1. Define CSS variables in your theme’s stylesheet or in Elementor’s custom CSS:

:root {
 --bg-color: #ffffff; /* Light background color */
 --text-color: #000000; /* Dark text color */
 --heading-color: #000000; /* Dark heading color */
}

body.dark-mode {
 --bg-color: #121212; /* Dark background color */
 --text-color: #ffffff; /* Light text color */
 --heading-color: #ffffff; /* Light heading color */
}

body {
 background-color: var(--bg-color) !important;
 color: var(--text-color) !important;
}

h1, h2, h3, h4, h5, h6 {
 color: var(--heading-color) !important;
}

p, span, a {
 color: var(--text-color) !important;
}

This CSS uses variables to define the colors for both light and dark modes. The var() function is used to apply these variables to the corresponding elements.

Adding a Smooth Transition

To make the transition between light and dark modes smoother, you can add a CSS transition to the body element:

body {
 transition: background-color 0.3s ease, color 0.3s ease !important;
}

This CSS adds a 0.3-second transition to the background color and text color changes.

Using Different Icons for Light and Dark Mode

To provide a better visual cue for the toggle button, you can use different icons for light and dark modes. You can use Font Awesome icons or custom SVG icons.

1. Add Font Awesome to your website. You can install a plugin like ‘Font Awesome’ or add the Font Awesome CDN link to your theme’s header.
2. Modify the HTML widget to include the Font Awesome icons:

3. Add CSS to hide the appropriate icon based on the current mode:

.dark-icon {
 display: none;
}

body.dark-mode .light-icon {
 display: none;
}

body.dark-mode .dark-icon {
 display: inline-block;
}

This code adds a sun icon for light mode and a moon icon for dark mode, and toggles their visibility based on the current mode.

Best Practices for Implementing Dark Mode

• Accessibility: Ensure that your dark mode implementation meets accessibility standards. Use sufficient contrast ratios to ensure that text is readable.
• Consistency: Maintain consistency in your design across both light and dark modes. Use the same fonts, spacing, and other design elements to create a cohesive experience.
• User Preferences: Respect user preferences by saving their dark mode setting and applying it automatically on subsequent visits.
• Testing: Test your dark mode implementation on different devices and browsers to ensure that it works correctly.

Hint: Make sure to check out our other guides on enhancing your WordPress website, such as How to Optimize Your Website for SEO: A Quickstart Guide for WordPress.

Alternatives to Manual Implementation

While this guide focuses on creating a dark mode toggle without plugins, there are also several plugins available that can simplify the process. Some popular options include:

• Dark Mode by WP Dark Mode: A comprehensive plugin that offers a variety of customization options.
• Night Mode by Optimocha: A lightweight plugin that adds a simple dark mode toggle to your website.

However, implementing dark mode manually gives you more control over the design and functionality, and it helps you avoid unnecessary bloat from plugins.

Check out also our other blog posts to improve the functionality of your website. For example, read this one on how to install wordpress plugins: How to Install WordPress Plugins.

Conclusion

Creating a dark mode toggle in Elementor without plugins is a great way to enhance the user experience on your website while keeping it lightweight and efficient. By following the steps outlined in this guide, you can add a fully functional dark mode toggle to your website and customize it to match your brand. So go ahead and give it a try – your users (and their eyes) will thank you!