- CSS / HTML / JavaScript
How To Use Dark/Light Mode With CSS And JavaScript?
I have used Dark / Light mode before using SCSS as well as Style-Component, but the same functionality can be accomplished using CSS and some JavaScript.
In this article, I will provide a step-by-step guide on how to accomplish this for your own application.
<!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">
<title>Dark Mode - SetUp</title>
<style>
[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
}
[data-theme="dark"] .bg-black {
background-color: #fff !important;
}
[data-theme="dark"] .bg-dark {
background-color: #eee !important;
}
[data-theme="dark"] .bg-light {
background-color: #222 !important;
}
[data-theme="dark"] .bg-white {
background-color: #000 !important;
}
</style>
</head>
<body>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.0.1/darkmode-js.min.js"></script>
</body>
</html>
