推荐的包含主题的方法是在应用的根目录下导入main.js文件：

import 'primevue/resources/themes/arya-orange/theme.css';

但我正在寻找一种基于用户系统主题和用户选择切换CSS文件的方法，因此我将其移动到我的主App.vue中：

export default {
  name: "App",
  components: {
    HelloWorld,
    toDo,
  },
  mounted() {

    //window.matchMedia('(prefers-color-scheme: dark)').matches ? do dark : do light
  },
};

<style>
@media (prefers-color-scheme: dark) {
  @import url("primevue/resources/themes/bootstrap4-dark-blue/theme.css");
}
@media (prefers-color-scheme: light) {
  @import url("primevue/resources/themes/bootstrap4-light-blue/theme.css");
}
</style>

我不能导入任何东西内挂载和在样式标签我不能导入内媒体也，这两个都不是正确的使用方式。
我在网上找不到任何其他方法或指导来解决这个问题。所有的解决方案都是基于作用域组件，使用类等。
我可以把所有的规则都放在一个主题里

@media (prefers-color-scheme: dark) {

另一个是灯光。但是话又说回来，我怎么能打开用户选择呢？

编辑：

我找到了一种方法让它在负载下工作：

(async () => {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    await import('primevue/resources/themes/bootstrap4-dark-blue/theme.css');
  }else {
    await import('primevue/resources/themes/bootstrap4-light-blue/theme.css');
  }
})();

单击时覆盖第一次导入：

methods: {
    theme() {
      (async () => {
          await import("primevue/resources/themes/bootstrap4-light-blue/theme.css");
      })();
    },
  },

但是当我试图切换回来使用点击它什么也没做，我的猜测是它的，因为如果系统是黑暗的加载黑暗的主题作为第一个进口，然后点击它加载轻的主题，但在那之后，它不会切换回黑暗的点击，我的猜测是因为黑暗是所有准备加载加载和它不生效的切换。

请指示。