0

I'm making a dark mode and want to have a little transition but the transition isn't working

my css

body {
    transition: background 0.5s ease-in-out;
    background: radial-gradient(circle, rgba(235,128,40,1) 0%, rgba(176,28,19,1) 100%);
}
.dark-mode {
    transition: background 0.5s ease-in-out;
    background: radial-gradient(circle, rgba(79,64,129,1) 0%, rgba(44,27,101,1) 100%);
}

DarkMode script

function toggleDarkMode(buttonId, logoId) {
    var button = document.getElementById(buttonId);
    var logo = document.getElementById(logoId);

    if(document.body.classList.contains("dark-mode")) {
        document.body.classList.remove("dark-mode");
        logo.src="{{ asset('build/images/pokemons/koraidon-detail-2x.png') }}";
    } else {
        document.body.classList.add("dark-mode");
        logo.src="{{ asset('build/images/pokemons/miraidon-detail-2x.png') }}";
    }
}

document.getElementById("darkModeButton").addEventListener("click", function(){
    toggleDarkMode('darkModeButton', 'logo')
});

do I have to add something else for the transition?

sheaqx
  • 1
  • 1
  • Can you share the JS logic for changing the modes? – Milad Kareem Jan 16 '23 at 18:44
  • Looks like radial-gradient transition is not very well supported - maybe that helps you: https://stackoverflow.com/a/6542623/4584472 – Luckyfella Jan 16 '23 at 20:18
  • The `background-image` CSS property isn't animatable (that's the property for drawing gradients). You can animate background-position and/or background-size. – jme11 Jan 16 '23 at 20:18

0 Answers0