Javascript css文件更改时的平滑过渡

我想让我的用户决定他们最喜欢哪种颜色的主题，因此为每个主题编写不同的css文件。然而，我发现它的工作并不顺利。当我使用JS从一个主题切换到另一个主题时，在加载新主题时，原有的css丢失了一段时间。我怎样才能顺利地从一个主题过渡到另一个主题？有一些示例代码：

        if (!(localStorage['color-choice'] === element)){
            localStorage['color-choice'] = element
            if(element === 'black'){
                $('#style-homepage').attr('href', '/static/sources/css/index/dark.css')
            }else if(element === 'pink'){
                $('#style-homepage').attr('href', '/static/sources/css/index/style.css')
            }else if(element === 'white'){
                $('#style-homepage').attr('href', '/static/sources/css/index/white.css')
            }
        }

---

请，提供尽可能多的代码，让我们。请看看这个演示网站，但是，它似乎工作良好，现在。。。这很奇怪。。。有没有其他方法可以替代这种方法？我只是想让我的用户自己决定主题。我曾经通过CSS变量在我的网站上实现黑暗模式。通过这种方式，所有CSS代码只需下载一次，而不需要不同的文件。但是，您使用缓存，因此这也是一种可行的方法。是的，css变量可能是一种方法，您不能真正使用样式表之间的转换。保留单独css文件的一个ide是，您可以淡出活动的css文件，然后淡入新的css文件。