提供更改应用程序CSS主题的最佳方法是什么？

Question

因此，首先，我没有在组件中使用<style>，我非常喜欢CSS样式的专用文件。并且该应用是在Vue CLI环境中制作的。在这种情况下，我想知道允许多个CSS主题的最佳选择是什么？

我能想到的就是：

1. 在<link>的{​​{1}}标记中链接了默认主题，然后让Vue通过执行DOM操作将其替换为所选主题。缺点是，除非您使用默认的
，否则最初的应用加载可能会暂时显示错误的主题
2. 在index.html文件中用require()导入主题，这可能会拉出您选择的主题（从初始加载开始），该主题将存储在cookie或localStorage中。这里的缺点是（我认为？）更改主题需要您重新加载页面才能看到更改。
3. 将主题名称（例如main.js，.light-theme）作为父元素的类声明附加到主题中的每个声明，然后在.dark-theme上添加我的类属性元素定义我正在使用的主题，以便可以通过执行#app来更改主题。这里的缺点是我链接的CSS文件更大或更复杂。

有没有第四种方法可以解决所有这些问题？含义：

1. 刷新后立即加载正确的主题，
2. 不需要重新加载
3. 不是所有主题都在一个文件中吗？