我们如何将 Ionic App 中的主题从浅色版本切换到深色版本？

Question

我生成了两个 CSS 文件，一个用于浅色版本，另一个用于深色版本。所以请告诉我如何为同一个应用程序维护两个主题？

知道我们如何使用主题切换在离子应用程序上实现它吗？

Answer 1

Working plunker

您可以轻松地在 CSS 个文件之间切换。

index.html:

在 HTML 标签上设置您的 ng-app：
```
<html ng-app="starter">
```

动态设置您的风格：

<link ng-href="{{style}}" rel="stylesheet">

app.js: 在run:

中定义默认样式

$rootScope.style = "css/style.css";

controllers.js：添加你的切换样式逻辑：

//All available styles
$scope.styles = [
  {
    name: "Default",
    url: "style.css"
  },
  {
    name: "Dark",
    url: "dark-style.css"
  }
];

/**
 * Change the style.
 * @param style The selected style.
 */
$scope.changeStyle = function(style){
  $rootScope.style = "css/" + style.url;
};

view.html:附上相关的HTML:

<label class="item item-input item-select">
  <div class="input-label">
    Style
  </div>
  <select ng-options="style as style.name for style in styles" ng-change="changeStyle(style)" ng-model="style">
  </select>
</label>

我们如何将 Ionic App 中的主题从浅色版本切换到深色版本？

How can we switch the theme in Ionic App from Lighter version to darker version ?

angularjs

hybrid-mobile-app

ionic-framework

ionic