Question

我试图根据用户所需的主题颜色更改我的应用主题颜色，例如我有多个用户，每个用户都有自己的应用主题颜色，如果用户登录到我的应用，则该用户主题颜色必须应用到我的整个应用程序，所以基于该主题值我的应用程序字体和所有切换需要更改，截至目前我尝试使用[ngStyle]通过调用我的组件功能，如下所示

home.html的

<div [ngStyle]="setBgColor()">
  <p>{{myName}}</P>
  <p>{{myPlace}}</P>
  <p>{{myPhone}}</P>
</div>

home.ts

 setBgColor(){
  return {'background-color': userThemeColor}
 }

但现在我想将ion-toggle颜色以及ion-slides分页项目符号颜色更改为userThemeColor，我该怎样才能形成它们

我尝试了什么

<ion-toggle (ionChange)="toggleChange()" [ngStyle]="setBgColor()"></ion-toggle> 这里它没有改变切换，所以现在我想将我的主题颜色值导出到scss文件，并且我必须使用下面的颜色

.toggle-md .toggle-icon{
   background-color:{{userThemeColor}}
 }

Answer 1

据我所知，您不能在scss文件中使用动态变量。

替代：使用JQuery的（脏）解决方案将是：

<强>的index.html

<head>
  ...
  <style id="extraCSS" type="text/css"></style>
</head>

<强> custom.ts

var customColor = 'rgb(255, 50, 50)';
var customColorWithTransparency = 'rgba(255, 50, 50, 0.75)';

$('#extraCSS').text(
    '.toggle-checked .toggle-icon { background-color: ' + customColorWithTransparency + ' !important;}' +
    '.toggle-checked .toggle-inner { background-color: ' + customColor + ' !important;}');
}

您无法在运行时动态更改color或ion-toggle中的ion-checkbox。相反，您可以设置预定义（静态）sass变量，如下所示：

<ion-toggle color="somePredefinedColor"></ion-toggle>

...但是，因为您无法设置hex-color-string，所以无法从服务器/ API更新color 指令作为十六进制字符串（暂时）。

如何在ionic3中的scss文件中使用组件变量

home.html的

home.ts

我尝试了什么

1 个答案: