angularjs - 我们如何将 Ionic App 中的主题从浅色版本切换为深色版本?

标签 angularjs ionic-framework hybrid-mobile-app

我生成了两个 CSS 文件,一个用于浅色版本,另一个用于深色版本。所以请让我知道如何为同一个应用程序维护两个主题?

知道如何使用主题切换在 ionic 应用程序上实现它吗?

最佳答案

Working plunker

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

index.html:

  1. HTML 标记上设置您的 ng-app:

    <html ng-app="starter">
    
  2. 动态设置您的风格:

    <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>

关于angularjs - 我们如何将 Ionic App 中的主题从浅色版本切换为深色版本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34228693/

相关文章:

javascript - Android webview - JavaScript 回调不起作用?

android - 启动 React Native 命令行界面

javascript - Angular Chart.js 不适用于 $http 调用

angularjs - 如何在 Azure 部署中指定不同的 api URL 与本地运行?

javascript - AngularJS body 函数随机关闭

angular - Ionic3 ionScroll 在 iOS 中无法正常触发

javascript - 生成 Angular JS href

android - 从已部署的 Cordova 应用访问 console.log/error

javascript - Angular-openlayers-directive 标记中的 OnClick

javascript - Ionic 2 - (任何窗口).resolveLocalFileSystemURL() 抛出错误