A switch button located in the top right corner can toggle between light and dark modes. The background features a zoomed-in image.
Currently, the transition is as follows:
- From left to right when switched to dark mode
- From right to left when switched to light mode
However, I would like the transition to occur in only one direction. For instance, if it's in light mode and switched to dark mode, the background image should shift to the right (left > right) accordingly. And then, when switched back to light mode, the background image should move from left to right again (left > right).
Essentially, like a continuous loop controlled by a toggle button.
Is there a way to achieve this?
I'm thinking it may be possible with keyframes and animations, but I'm unsure. Is there a method to accomplish this using JavaScript without the necessity for keyframes?
Pay no mind to the code snippet below as it had to be extracted from my React project, so some CSS properties may appear unnecessary.
let Dark = false
const DarkOrLight = () => {
const container = document.getElementsByClassName('Login-container')[0]
if (!Dark) {
container.style.backgroundPosition = 'right'
} else {
container.style.backgroundPosition = 'left'
}
Dark = !Dark
}.toggle-container {
position: fixed;
top: 5px;
right: 5%;
}
.toggle {
appearance: none;
width: 50px;
height: 30px;
background-image: linear-gradient(120deg, #383030 0%, #22282e 100%);
cursor: pointer;
border-radius: 20px;
}
.toggle:focus {
outline: 0;
}
.toggle::after {
content: '';
background-image: linear-gradient(120deg, rgb(182, 244, 146), rgb(51, 139, 147));
position: absolute;
top: 5px;
left: 5px;
width: 25px;
height: 25px;
border-radius: 50%;
transition: all 1s ease;
}
.toggle:checked {
background-color: #b6f492;
background-image: linear-gradient(120deg, #b6f492, rgb(51, 139, 147));
}
.toggle:checked::after {
transform: translateX(23px);
background-image: linear-gradient(120deg, #383030 0%, #22282e 100%);
}
.Login-container {
position: relative;
background-image: linear-gradient(120deg, #b6f492, #338b93, #383030, #22282e);
background-size: 400%;
background-position: left;
width: 100%;
height: 100vh;
display: flex;
justify-content: end;
transition: all 1s ease;
font-family: Merriweather;
}<div class="Login-container">
<div class="toggle-container">
<input class="toggle" type="checkbox" onClick=DarkOrLight()></input>
</div>
</div>