How to Create dark theme using Slider in CSS ?
Last Updated :
18 Apr, 2025
In this article, we will learn to create a dark theme using the slider in CSS. In modern websites, we see a wonderful feature to change the website themes just by checking a slider. To check this awesome feature go to the geeksforgeeks.org website where you can change the theme as per your preference. In this article, we will learn to create a slider to change the website theme. It allows users to customize the interface of the website as per their preference is the best user experience. Here we are going to create a nice slider to change our website theme.
Steps to create a dark theme slider: These are the following steps to create a Dark theme slider.
- Create a webpage using HTML
- Define all CSS variables such as background color, primary text color, secondary text color for the default theme, and dark theme.
- Add functionality using JavaScript to toggle default mode to dark mode.
Example: The following example demonstrates how to create a dark theme using the slider in CSS.
Step 1: Create an index.html file and add the following HTML code into it to provide a basic structure to the webpage.
Step 2: Now we will create a new file for adding style to the above HTML code called style.css
Step 3: Now we will create a javascript file and make the function toggleSwitch which allow us to toggle between dark and light theme.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script defer src="/script.js"></script>
</head>
<body>
<!--Heading Section-->
<header>
<nav>
<!-- Add your custom menu here
and theme slider -->
<div class="theme-switch-container">
<label class="theme-slider" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="round slider"></div>
</label>
<p>use this slider to change theme</p>
</div>
</nav>
</header>
<!-- Main Section -->
<main>
<h1>GeeksforGeeks</h1>
<p>
GeeksforGeeks is a best learning
plateform for geeks.
</p>
<p>
click below link to open
geeksforgeeks website
</p>
<a href="https://www.geeksforgeeks.org/">
GeeksforGeeks
</a>
</main>
</body>
</html>
/* Default light theme */
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--text-color: #424242;
--background-color: #fff;
--heading-color: #292922;
}
/* Dark theme */
[theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--text-color: #e1e1ff;
--background-color: #161625;
--heading-color: #818cab;
}
/* Adding css variable in our webpage */
body {
background-color: var(--background-color);
color: var(--text-color);
}
h1 {
color: var(--secondary-color);
}
a {
color: var(--primary-color);
}
/* Slider styling */
.theme-switch-container {
display: flex;
align-items: center;
}
.theme-slider {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-slider input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked+.slider {
background-color: #66bb6a;
}
input:checked+.slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
const toggleSwitch =
document.querySelector('.theme-slider input[type="checkbox"]');
/* Function to change theme */
function switchTheme(e) {
/* Once checkbox is checked default theme change to dark */
if (e.target.checked) {
document.documentElement.setAttribute('theme', 'dark');
}
/* While page in dark mode and checkbox is
checked then theme back to change light*/
else {
document.documentElement.setAttribute('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
Output
Similar Reads
How to Create Multiple Themes using Tailwind CSS ? In this article, we will discuss how to create multiple themes using Tailwind CSS. Tailwind CSS is a popular utility-first CSS framework that provides a lot of pre-designed CSS classes for designing websites. With Tailwind CSS, you can easily create multiple themes for your website. This means that
3 min read
How to Create a Slider using HTML and CSS? A slider (also called a slideshow) is a sequence of content frames that users can navigate through. Creating a slider using just HTML and CSS is efficient because it doesn't require JavaScript, making it lightweight and fast. The slider can contain images, text, or any other content you want to show
3 min read
How to Darken an Image using CSS? To darken an image using CSS, the filter property with the brightness() function and the background-image property can be used. By setting the brightness value below 100% (e.g., brightness(70%)You can reduce the lightness of the image, making it appear darker. This approach is simple and effective f
3 min read
How to create Image Comparison Slider using CSS ? In this article, we will see how to create an Image Comparison Slider using CSS. The Image Comparison Slider essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images in a better way.Approach: The approach
2 min read
How to create linear gradient text using HTML and CSS ? The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide
2 min read
How to create dark mode using prefer-color-scheme media query ? In this article, we are creating a dark mode interface using the prefer-color-scheme media query. The prefer-color-scheme is a new media query that is used to detect the current theme of your system and provide a feature that helps in creating your web page theme according to your system preference.
3 min read