How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript
Light or Dark? One-Click Theme Switching for Website Accessibility
Websites and applications now typically have two distinct themes: a light theme for better visibility during the day and a dark theme for less eye strain at night. To provide the best experience, your website should allow users to easily toggle between these themes based on their preferences. This article will guide you on creating a dark mode toggle for your website using HTML, CSS, and JavaScript, enabling users to switch between light and dark themes with a single click.
In this tutorial, we'll build a sun and moon toggle button to represent light and dark modes. When a user clicks the button, the website will smoothly transition between these two modes. We'll also save the user's theme preference in local storage for future visits.
See the demo or the complete source code on this GitHub repository. You can learn interactively with this step-by-step guide, or scroll down for a detailed tutorial.
Prerequisites
Before we begin, make sure you have:
- Basic knowledge of HTML, CSS, and JavaScript
- A text editor or IDE (e.g., Visual Studio Code, Sublime Text)
- A web browser for testing
Setting Up the HTML Structure
First, we'll create the basic HTML structure and add the necessary elements to build our toggle button and page content.
1. Create a new HTML file. Open your text editor and create a new index.html file with the basic HTML structure, including DOCTYPE, HTML, head, and body tags. Add the title tag for the page and import the external style.css and script.js files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light/Dark Mode Toggle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. Add necessary elements to the body. Inside the body tag, we'll add the following elements:
- A container div to wrap all our content
- An h1 title for the page
- A p paragraph for a brief description
- A toggle-container div that will include our toggle switch
- Sun and moon SVG icons
<body>
<div class="container">
<h1>Light/Dark Mode Toggle</h1>
<p>Click the toggle below to switch between dark and light modes.</p>
<div class="toggle-container" id="themeToggle">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
This is what our plain index.html file looks like:
Adding CSS Styling for Light and Dark Modes
In this section, we’ll style our HTML elements and create light and dark modes. We’ll also use transitions for smooth color changes and control the visibility of sun and moon icons based on the current mode.
3. Define CSS variables for light and dark colors. Open the style.css file in your text editor. We’ll define CSS variables for dark and light colors using the :root selector. This allows for easy theme customization later on. If you want to change the dark or light colors, you only need to update them in one place.
/* Root selector for defining global CSS variables */
:root {
--clr-dark: #333; /* Dark color for text in light mode, background in dark mode */
--clr-light: #fff; /* Light color for background in light mode, text in dark mode */
}
4. Set up basic CSS styles. Add styles for the body, .container, and h1 elements to establish the layout and typography of your page. You can customize these elements the way you like.
- body Center the content both vertically and horizontally using CSS variables for colors and a transition for smooth color changes.
- .container Center the content within our container.
- h1 Add some space below the heading.
/* Base styles for the body */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: var(--clr-light);
color: var(--clr-dark);
transition: background-color 0.3s, color 0.3s;
}
/* Container for centering content */
.container {
text-align: center;
}
/* Heading styles */
h1 {
margin-bottom: 20px;
}
5. Add CSS styling for dark mode. Create a CSS class named .dark-mode that swaps the background and text colors when applied to an element.
/* Styles for dark mode */
.dark-mode {
background-color: var(--clr-dark);
color: var(--clr-light);
}
6. Style the toggle icons. Add styles to the sun and moon SVG icons and control their visibility based on the current mode.
/* Styles for the toggle container */
.toggle-container {
cursor: pointer;
}
/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
width: 24px;
height: 24px;
transition: opacity 0.3s;
}
/* Hide moon icon by default (light mode) */
.moon-icon {
display: none;
}
/* Show moon icon and hide sun icon in dark mode */
.dark-mode .sun-icon {
display: none;
}
.dark-mode .moon-icon {
display: inline-block;
}
With these CSS styles, your page will have a default light theme. The cursor: pointer property makes it clear that the toggle is clickable.
Implementing JavaScript Functionality
Now that we have our HTML structure and CSS styling in place, it's time to add interactivity to our dark mode toggle with JavaScript and implement local storage to remember the user's preference.
7. Select DOM elements. Open the script.js file and select the DOM elements we want to modify, the themeToggle ID, which contains our toggle button.
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
8. Add event listeners to the toggle button. This is the core functionality of the dark mode toggle. Add an event listener to the themeToggle element to detect when the user clicks on it. It will add the dark-mode class to the body element if it’s absent, or removes the class if present.
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
At this point, the toggle switch is functional, and clicking on it will switch between light and dark modes. However, if you reload the page while in dark mode, the website will revert to its default light mode.
9. Save user theme preferences in local storage. To save the user's theme preference even after the browser is closed, we'll use the localStorage object. Inside the event listener callback function, it checks if the body element has the dark-mode class.
- If it does, localStorage.setItem() saves the 'dark-mode' value to the 'theme' key.
- If it doesn't, localStorage.setItem() saves an empty string to the 'theme' key.
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
// Store user preference in local storage
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark-mode');
} else {
localStorage.setItem('theme', '');
}
});
10. Check for a saved theme preference. When the page loads, we want to check if there's a saved theme preference in the local storage. Use localStorage.getItem() to retrieve the value associated with the 'theme' key. If a 'dark-mode' preference exists in the local storage, apply the dark mode theme immediately by adding the dark-mode class to the body element.
Note: Make sure to place the getItem() method before the event listener to ensure it runs on page load.
// Check if user preference exists in local storage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
body.classList.add(currentTheme);
}
The Dark Mode Toggle in Action
We've implemented all the necessary components for our dark mode toggle, so let's see it in action. Try clicking the toggle switch to see the smooth transition between light and dark themes. Refresh the page to verify your theme preference is remembered.
Check out the complete source code on this GitHub repository.
Tips for Dark Mode Implementation
Creating a dark mode toggle is just the beginning. To create a user-friendly dark mode experience, there are several best practices to keep in mind.
Tip #1: Choose the Right Colors for Dark Mode
Selecting colors for dark mode involves more than simply inverting your light theme. The goal is to create a contrast between text and background colors for readability. Use tools like color contrast checkers to verify that your chosen colors meet WCAG (Web Content Accessibility Guidelines) standards. Remember, a well-designed dark mode should be easy on the eyes and work well across devices.
Tip #2: Create a User-Friendly Toggle Button
Create a clear visual distinction between light and dark modes to help users identify each mode easily. Your toggle switch or button should clearly show the current mode. You can implement effective approaches such as a sun and moon icon toggle, which is used in this article and is an easily recognizable choice, a light and dark mode text button, or a sliding switch with light/dark mode labels. Whichever design you choose, make sure it's consistent with your user interface and provides clear feedback when the user interacts with it.
Tip #3: Implement Smooth Transitions
To create a more polished user experience, use CSS transitions or animations for a seamless shift between light and dark modes. Make sure that all elements, including images and icons, smoothly transition to the new color scheme. This can be done by adjusting opacity, brightness, or swapping out images for dark mode-specific versions.
Conclusion
Adding a dark mode toggle to your website greatly improves user experience. This is not just about aesthetics but also usability and accessibility. It allows users to view content comfortably based on their preferences and lighting conditions.
Throughout this article, we've walked through the process of creating a simple dark mode toggle, covering HTML structure, CSS styling for light and dark themes, JavaScript functionality, and storing user preference. The key is to keep it simple and user-friendly. Don't forget to test your dark mode thoroughly to ensure all elements remain readable and functional.
Now it's your turn to create your own dark mode toggle! Share your CodePen or GitHub link in the comments below.
Further Reading
Check out these resources to learn more about dark mode implementation and advanced techniques:
- Dark theme - Material Design: Learn about dark mode implementation, anatomy, properties, and best practices from Material Design guidelines.
- Top 20 CSS Toggle Switches [2024] - LambdaTest: Explore various CSS toggle switch designs for your website.
The above is the detailed content of How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to use vw and vh units in CSS
Aug 07, 2025 pm 11:44 PM
vw and vh units achieve responsive design by associating element sizes with viewport width and height; 1vw is equal to 1% of viewport width, and 1vh is equal to 1% of viewport height; commonly used in full screen area, responsive fonts and elastic spacing; 1. Use 100vh or better 100dvh in the full screen area to avoid the influence of the mobile browser address bar; 2. Responsive fonts can be limited with 5vw and combined with clamp (1.5rem, 3vw, 3rem) to limit the minimum and maximum size; 3. Elastic spacing such as width:80vw, margin:5vhauto, padding:2vh3vw, can make the layout adaptable; pay attention to mobile device compatibility, accessibility and fixed width content conflicts, and it is recommended to give priority to using dvh first;
What is the CSS aspect-ratio property and how to use it?
Aug 04, 2025 pm 04:38 PM
Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres
How to use the CSS :empty pseudo-class?
Aug 05, 2025 am 09:48 AM
The:emptypseudo-classselectselementswithnochildrenorcontent,includingspacesorcomments,soonlytrulyemptyelementslikematchit;1.Itcanhideemptycontainersbyusing:empty{display:none;}tocleanuplayouts;2.Itallowsaddingplaceholderstylingvia::beforeor::after,wh
How to create a vertical line with CSS
Aug 11, 2025 pm 12:49 PM
Use a div with border to quickly create vertical lines, and define styles and heights by setting border-left and height; 2. Use ::before or ::after pseudo-elements to add vertical lines without additional HTML tags, suitable for decorative separation; 3. In Flexbox layout, by setting the width and background color of the divider class, adaptive vertical dividers between elastic containers can be achieved; 4. In CSSGrid, insert vertical lines as independent columns (such as autowidth columns) into grid layout, which is suitable for responsive design; the most appropriate method should be selected according to the specific layout needs to ensure that the structure is simple and easy to maintain.
What are CSS pseudo-classes and how to use them?
Aug 06, 2025 pm 01:06 PM
CSS pseudo-class is a keyword used to define the special state of an element. It can dynamically apply styles based on user interaction or document location; 1.:hover is triggered when the mouse is hovered, such as button:hover changes the button color; 2.:focus takes effect when the element gets focus, improving form accessibility; 3.:nth-child() selects elements by position, supporting odd, even or formulas such as 2n 1; 4.:first-child and :last-child select the first and last child elements respectively; 5.:not() excludes elements that match the specified conditions; 6.:visited and:link set styles based on the link access status, but:visited is restricted by privacy.
How to use the filter property in CSS
Aug 11, 2025 pm 05:29 PM
TheCSSfilterpropertyallowsvisualeffectslikeblur,brightness,andgrayscaletobeapplieddirectlytoHTMLelements.1)Usethesyntaxfilter:filter-function(value)toapplyeffects.2)Combinemultiplefilterswithspaceseparation,e.g.,blur(2px)brightness(70%).3)Commonfunct
How to create a glassmorphism effect with CSS
Aug 22, 2025 am 07:54 AM
To create a glass mimicry effect of CSS, you need to use backdrop-filter to achieve background blur, set a translucent background such as rgba(255,255,255,0.1), add subtle borders and shadows to enhance the sense of hierarchy, and ensure that there is enough visual content behind the elements; 1. Use backdrop-filter:blur(10px) to blur the background content; 2. Use rgba or hsla to define the transparent background to control the degree of transparency; 3. Add 1pxsolidrgba(255,255,255,0.3) borders and box-shadow to enhance the three-dimensionality; 4. Ensure that the container has rich backgrounds such as pictures or textures to present a blurred penetration effect; 5. It is compatible with old browsers
How to create a dotted border in CSS
Aug 15, 2025 am 04:56 AM
Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.
