时间戳

首页 > 解决方案 > Ionic v3 在运行时在明暗主题之间切换（动态）

css - Ionic v3 在运行时在明暗主题之间切换（动态）

问题描述

在 Ionic v3 中，文件中包含主题的导入variable.scss。

@import 'ionic.theme.default';

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

@import 'ionic.theme.dark';

效果很好。但是如何在运行时在两个主题之间切换？以及如何知道当前活动的主题来设置自定义组件的样式。

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

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

标签： cssionic-frameworksassthemes

解决方案

假设我正确理解了问题，首先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 问题可能很重要。

推荐阅读