I have implemented a light/dark toggle button and now I want to integrate the functionality for switching between light and dark themes on my webpage. The switch should toggle the theme between dark and light modes when clicked. Some basic styling has been applied to the switch to display either the light or dark theme upon toggling.
<html>
<div class="theme-toggle" style="cursor: pointer;">
<input type="checkbox" checked style="cursor: pointer;">
<div class="toggle-body" style="cursor: pointer;"></div>
<div class="celestial-body" style="cursor: pointer;"></div>
</div>
<style>
:root {
--width: 60px;
--height: 30px;
}
body {
font-family: monaco, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
margin: 2em;
}
.theme-toggle {
position: relative;
width: var(--width);
height: var(--height);
}
.theme-toggle input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
width: var(--width);
height: var(--height);
}
.theme-toggle .toggle-body {
position: absolute;
top: 0;
left: 0;
width: var(--width);
height: var(--height);
border: 2px solid #080808;
border-radius: var(--height);
transition: all 80ms ease-in-out;
}
.theme-toggle input[type="checkbox"]~.toggle-body {
background: #1d1d1d;
background-image: url("https://cdn.glitch.com/9be3ef5e-cf68-4fac-9bd5-82714468aed6%2F1e7b6b11b5b398711c60f2b71cdf9b03.gif?v=1599237363310");
background-size: cover;
}
...
</html>You can access this code snippet on JSFiddle.
I have incorporated a light/dark mode feature for my website where the theme changes to light or dark mode upon clicking with the help of the onclick() function.