Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Dark Theme using Slider in CSS?
Dark themes have grown in popularity recently since they can lessen eye fatigue and make it easier to watch display screens for extended periods of time. This article will discuss how to use CSS and JavaScript to create an interactive slider that toggles between light and dark themes.
A CSS slider, commonly referred to as a range slider, is a user interface component that enables users to choose a value within a range by sliding a handle along a track. They are frequently employed in settings panels and web forms for theme switching.
Syntax
input[type="range"] {
/* Slider styling properties */
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ddd;
outline: none;
}
HTML Range Input Attributes
| Attribute | Description |
|---|---|
type="range" |
Specifies the input type as a slider |
min |
Minimum value of the slider |
max |
Maximum value of the slider |
value |
Current value of the slider |
step |
Step increment for slider values |
Example: Dark Theme Slider
Here we will create a slider to change the theme of the web page from light to dark. The slider will dynamically adjust the background and text colors based on the selected value
<!DOCTYPE html>
<html>
<head>
<title>Dark Theme Slider</title>
<style>
/* CSS Variables for theme colors */
:root {
--bg-color: #ffffff;
--text-color: #212121;
--slider-bg: #ddd;
--slider-thumb: #4CAF50;
}
body {
font-family: Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
padding: 20px;
transition: all 0.3s ease;
}
.slider-container {
margin: 30px 0;
text-align: center;
}
.theme-slider {
-webkit-appearance: none;
appearance: none;
width: 300px;
height: 8px;
border-radius: 5px;
background: var(--slider-bg);
outline: none;
margin: 10px;
}
.theme-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--slider-thumb);
cursor: pointer;
}
.theme-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--slider-thumb);
cursor: pointer;
border: none;
}
.content {
margin-top: 40px;
text-align: center;
}
.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
--slider-bg: #333;
--slider-thumb: #bb86fc;
}
</style>
</head>
<body>
<h1>Dark Theme Slider Demo</h1>
<div class="slider-container">
<label for="theme-slider">Theme: Light ? Dark</label><br>
<input type="range" id="theme-slider" class="theme-slider" min="0" max="100" value="0">
<p>Current Value: <span id="slider-value">0</span></p>
</div>
<div class="content">
<h2>Sample Content</h2>
<p>This is some sample content to demonstrate the dark theme transition. Move the slider above to switch between light and dark themes.</p>
</div>
<script>
const slider = document.getElementById('theme-slider');
const body = document.body;
const valueDisplay = document.getElementById('slider-value');
slider.addEventListener('input', function() {
const value = parseInt(this.value);
valueDisplay.textContent = value;
// Apply dark theme when slider value is 50 or higher
if (value >= 50) {
body.classList.add('dark-theme');
} else {
body.classList.remove('dark-theme');
}
});
</script>
</body>
</html>
A webpage with a styled range slider appears. Moving the slider from left (0) to right (100) gradually transitions the page from light theme to dark theme. At value 50 and above, the dark theme is fully activated with dark background and light text.
Key Features
CSS Variables: Used for dynamic color management that can be easily updated via JavaScript.
Smooth Transitions: The transition property creates smooth color changes when switching themes.
Cross-browser Compatibility: Includes both -webkit- and -moz- prefixes for slider thumb styling.
Interactive Feedback: Displays the current slider value to provide user feedback.
Conclusion
Creating a dark theme slider using CSS and JavaScript provides an excellent user experience for theme switching. By combining CSS variables, range inputs, and event listeners, you can create smooth transitions between light and dark themes that reduce eye strain during extended screen usage.
683 Views
