Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create dark theme using Slider in CSS ?

  • Last Updated : 25 Aug, 2021

In this article, we will learn to create a dark theme using the slider in CSS. In modern websites, we see that a wonderful feature to change website theme 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 that how to create dark theme using 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.

Filename: index.html



HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Stylesheet link -->
    <link rel="stylesheet" href="./style.css">
 
    <!-- JavaScript file -->
    <script defer src="/script.js"></script>
    <!-- Instead of add defer, embedd javascript
        file in body tag -->
</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>

  
Step 2: Now we will create new file for adding style to above html code.

Filename: style.css

CSS




/* 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%;
}

 
Step 3: Now we will create javascript file and make function toggleSwitch which which allow us to toggle between dark and light theme.

Filename: script.js

Javascript




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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!