Animate dark mode

This commit is contained in:
Jake Howard 2022-08-20 15:55:50 +01:00
parent 727ad725d1
commit 366d135285
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 11 additions and 1 deletions

View file

@ -30,4 +30,8 @@ window.addEventListener("load", () => {
darkModeToggle.addEventListener("click", () => {
handleDarkMode(window.localStorage.getItem(STORAGE_KEY) !== "true");
});
window.setTimeout(() => {
body.classList.add("dark-mode-animate");
}, 1000);
});

View file

@ -1,4 +1,10 @@
@mixin dark-mode {
// Ensure animations aren't for the initial transition
body.dark-mode-animate & {
transition-duration: 0.5s;
transition-property: color, background-color;
}
body.dark-mode & {
@content;
}

View file

@ -8,7 +8,7 @@
}
#dark-mode-toggle i {
transition: transform 0.3s;
transition: transform 0.5s !important;
@include dark-mode {
transform: rotate(180deg);