Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 post will discuss the CSS slider functionality to produce a dark theme.
A common user interface component called a CSS slider, commonly referred to as a range slider, enables users to choose a value within a range by sliding a handle along a track. They are frequently employed in settings panels and online forms.
Syntax
<input type="range" min="number" max="number" value="number" class="slider">
Type − input type such as button check box or range
Min − minimum range
Max − maximum range of slider
Value − slider total value in numbers
Class − class specified for slider container
Example
Here we will create a slider to change the theme of the web page from light to dark. This slider will help you change the page theme in different shades from light to dark. We will create a dark theme slider, by using some CSS properties to style the slider track, handle, and background. Along with that, we will create JavaScript code to update the background color of the page based on the value of the slider.
Algorithm
Step −1: Create a container for the slider and the page content. This container will be a div that includes all contents of the slider.
Step −2: Insert the label and other inputs for the slider portion.
Step −3: Add page styling to set page content for light background.
Step −4: Now set the css to style the slider page content, handle, and background to have dark colors.
Step −5: Add an event listener to the slider that will help the user to update the background colour of the page.
Step −6: Include Javascript code to set the background colour of the page based on the value of the slider.
Here, we will be using the div element to wrap the slider and the content of the page.
<!DOCTYPE html>
<html>
<head>
<title>Dark Theme Slider</title>
<style>
/* Define variable values for the dark theme */
:root {
--bg-color: #212121;
--text-color: #fff;
}
/* Default light theme styles */
body {
background-color: #fff;
color: #212121;
}
/* Dark theme styles */
.dark-theme {
background-color: var(--bg-color);
color: var(--text-color);
}
.slider-container {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Tutorials Point Slider</h1>
<!-- div for slider this is the basic container -->
<div class="slider-container">
<label for="dark-slider">Switch To Darkness:</label>
<input type="range" id="dark-slider" min="0" max="100" value="50">
</div>
<p>Add page content here...</p>
<script>
const slider = document.getElementById("dark-slider");
const body = document.querySelector("body");
slider.addEventListener("input", function() {
const value = slider.value;
// Calculate new color values based on slider value
const bgValue = 255 - (value * 2.55);
const textValue = value * 2.55;
// Set new variable values for the dark theme
document.documentElement.style.setProperty('--bg-color', `rgb(${bgValue}, ${bgValue}, ${bgValue})`);
document.documentElement.style.setProperty('--text-color', `rgb(${textValue}, ${textValue}, ${textValue})`);
// Add or remove dark theme class based on slider value
if (value >= 50) {
body.classList.add("dark-theme");
} else {
body.classList.remove("dark-theme");
}
});
</script>
</body>
</html>
Conclusion
Making a dark theme slider using CSS is a rather simple procedure that entails customizing the slider handle, background, and track using CSS attributes and changing the page's background color using JavaScript. For your website or application, you can quickly develop a dark theme slider by using the technique described in this article. This can assist to lessen blurred vision and make it simpler to read material on displays for extended periods of time. Implementing a dark theme slider may be a useful feature to your user interface toolbox as dark themes are a growing trend.
254 Views
