Javascript Angular应用程序中两个样式表之间的平滑过渡

因此，我在我的应用程序中有两个不同的样式表（一个黑暗主题和一个光明主题），我可以通过切换来切换主题。它工作得很好，但我想知道是否有可能以某种方式制作这样的平滑过渡动画，无论是JS还是纯CSS=>

切换样式的代码如下所示：

cssFiles = ["styles-dark.css","styles-light.css"]
toggle() {
    var theme;
    if(localStorage.getItem("theme") == "dark"){
      localStorage.setItem("theme", "light")
      theme = this.cssFiles[1]
    }else{
      localStorage.setItem("theme", "dark")
      theme = this.cssFiles[0]
    }
    
    const head = this.document.getElementsByTagName('head')[0];
    let themeLink = this.document.getElementById(
      'mycss'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = theme;
    } else {
      const style = this.document.createElement('link');
      style.id = 'mycss';
      style.rel = 'stylesheet';
      style.href = `${theme}`;

      head.appendChild(style);
    }
  }

---

我建议的一种方法是利用CSS转换

创建一个基本样式表，在其中定义所有样式，而不使用特定于主题的规则（可能主要是颜色）。将CSS转换设置为可能更改的属性。不应切换此样式表

为主题创建样式表：

主题之间的切换应该在您定义的转换中进行

请注意，所有的测量、过渡时间和颜色都只是为了演示。下面是一个非常简单的工作示例：

//主题样式表的简化示例
常数暗色=`
身体{
背景色：黑色；
}
.卡片{
背景颜色：浅灰色；
}
h3{
颜色：黑色；
}
`;
document.getElementById（'darkThemeToggle'）。addEventListener（'click'，（）=>{
const styleTag=document.createElement（'style'）；
styleTag.append（暗色）
document.body.append（styleTag）；
});
正文{
过渡：背景色0.5s；
}
.卡片{
过渡：背景色0.5s；
宽度：200px；
高度：100px；
填充：10px；
边缘底部：10px；
边界半径：5px
}
h3{
过渡：颜色0.5s；
}
/*假设下面的样式来自灯光主题样式表*/
身体{
背景色：白色；
}
.卡片{
背景颜色：灰色；
}
h3{
颜色：白色；
}

内容
切换到黑暗主题

/* base.css */
 body {
   transition: background-color 0.5s ease;
 }

 .card {
   transition: background-color 0.5s ease;
   width: 200px;
   height: 100px;
   padding: 10px;
   border-radius: 5px
 }

 h3 {
   transition: color 0.5s ease;
 }

/* styles-light.css */
  body {
    background-color: white;
  }

  .card {
    background-color: gray;
  }

  h3 {
   color: white;
  }

/* styles-dark.css */
  body {
    background-color: black;
  }

  .card {
    background-color: lightgray;
  }

  h3 {
   color: black;
  }