css - Ionic v3 在运行时在浅色和深色主题之间切换(动态)

Question

在 Ionic v3 中，文件 variable.scss 中导入了主题。

@import 'ionic.theme.default';

并且可以替换为深色主题以使用深色主题而不是默认的浅色主题。

@import 'ionic.theme.dark';

效果很好。但是如何在运行时在两个主题之间切换呢？以及如何知道哪个主题当前处于事件状态以设置自定义组件的样式。

我已经在互联网上搜索过了，包括这里。但我发现没有任何帮助。所以我认为这不是重复的。也许我错过了什么。但是应该有一种方法可以导入默认和深色主题并在运行时启用切换。

我可以通过 css“hacking”编写自己的主题。但我更喜欢使用 Ionic preset 官方方式。

Answer 1

假设我理解正确，首先在链接中添加一个id

<link
    id="color-CSS"
    rel="stylesheet"
    href=".path/light.css"
    type="text/css"
  />

然后使用一个JS函数来启用切换，比如

<script>
  const mainTheme = "./path/light.css";
  const altTheme = "./path/dark.css";
  const currentCSS = document.querySelector("#color-CSS");
  function toggleTheme() {       
    if (currentCSS.href.includes(mainTheme)) {
      currentCSS.setAttribute("href", altTheme);
    } else {
      currentCSS.setAttribute("href", mainTheme);
    }
  }    
</script>

我不确定，但文件路径开头的点 (.) 可能对解决 MIME 问题很重要。