Is it possible to add a transition effect when changing my theme stylesheet?

Question

Hi I need to know how I can add a transition effect when my theme stylesheet changes when clicking on the button. The following is my code.

document.addEventListener('DOMContentLoaded', () => {

  const themeStylesheet = document.getElementById('theme');

  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    themeStylesheet.href = storedTheme;
  }
  const themeToggle = document.getElementById('theme-toggley');
  themeToggle.addEventListener('click', () => {
    // if it's light -> go dark
    if (themeStylesheet.href.includes('light')) {
      themeStylesheet.href = 'css/dark-theme.css';




    } else {
      // if it's dark -> go light
      themeStylesheet.href = 'css/light-theme.css';




    }
    // save the preference to localStorage
    localStorage.setItem('theme', themeStylesheet.href)

  })
})

user_16145931 · Answer

just adding a

*{
 transition-duration: 2s;
}

will work

eg:-

document.addEventListener('DOMContentLoaded', () => {

var lightTheme = document.getElementById('light-theme'),
darkTheme = document.getElementById("dark-theme");
var currentTheme;
function setTheme (themeId){
    currentTheme = themeId;
    document.querySelectorAll("link[rel=stylesheet].theme").forEach(link=>{
        link.removeAttribute("rel");
    })
    document.querySelector(`#${themeId}`).setAttribute("rel","stylesheet");
}

const storedTheme = localStorage.getItem('theme');
if(storedTheme){
    if(storedTheme == "light-theme"){
        setTheme("dark-theme")
    }else{
        setTheme("light-theme")
    }
}else{
    setTheme("light-theme")
}
const themeToggle = document.getElementById('theme-toggley');
themeToggle.addEventListener('click', () => {
    // if it's light -> go dark
    if(currentTheme == "light-theme"){
        setTheme("dark-theme")
    } else {
        // if it's dark -> go light
        setTheme("light-theme")
    }
    // save the preference to localStorage
    localStorage.setItem('theme',currentTheme)
     
})
})

*{
/*main*/
    transition-duration: 2s;
}
button{
    padding:10px ;border-radius:15px;
    font-size: 20px;
}

Is it possible to add a transition effect when changing my theme stylesheet?

1 Answers