更改带有过渡的CSS样式表?

我有一个导航栏,一个页脚,一些内容框和一个我想在轻按一下即可更改的图像。我认为我实际上想在单击按钮时交换样式表。

我知道我可以像这样使用JavaScript更改元素

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Change the image</button>

但是我已经遇到了几个问题

  1. 它没有褪色的过渡
  2. 这不会贯穿我的页面

因此,基本上,用户应该能够在整个站点中的浅色主题和深色主题之间进行选择,并且在交换时,元素上的过渡效果应会逐渐淡化,例如1秒。

到目前为止,我能想到的最好的方法是在加载第二张工作表时进行javascript转换(因此JS处理页面上的转换,并且当新页面加载了不同的CSS文件时)

但是我想知道是否有人有更好的解决方案?