Как использовать переменную компонента в моем файле scss в ionic3

Я пытаюсь изменить цвет темы моего приложения на основе цвета темы, требуемого пользователем, например, у меня есть несколько пользователей, и каждый пользователь имеет свой собственный цвет темы приложения, если пользователь вошел в мое приложение, тогда этот цвет темы пользователя должен применяться ко всему моему app, поэтому на основе этого значения темы мои шрифты приложения и все переключатели необходимо изменить, на данный момент я попытался использовать [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-slidespagination на userThemeColor, как я могу это сделать из них

что я пробовал

<ion-toggle (ionChange)="toggleChange()" [ngStyle]="setBgColor()"></ion-toggle> здесь он не меняется для переключения, поэтому теперь я хочу экспортировать значение цвета моей темы в файл scss, и там я могу использовать этот цвет, как показано ниже

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

вы хотите изменить тему только на активной странице или на полной странице приложения

Utpaul 11.04.2018 12:40

полные страницы приложения @Utpaul

Midhunsai 11.04.2018 13:00

Вы проверяли в отладчике css, почему цвета не применяются к вашему переключателю? Они чем-то подавлены?

David 17.04.2018 14:27
1
3
126
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

… Но, поскольку вы не можете установить шестнадцатеричная цветовая строка, это невозможно обновить colorдиректива с сервера / API как шестнадцатеричные строки (на данный момент).

он не меняет цвет, возвращаемый цвет не добавляется к переключателю @Mario Padilla

Midhunsai 17.04.2018 14:15

Я обновил ответ. В первой части показано, как динамически обновлять ion-toggle [color]. Вторая часть объясняет, как получить глобальную переменную scss @Midhunsai.

Mario Padilla 17.04.2018 15:11

для меня userCustomColor динамически приходит из api, когда пользователь вошел в систему, в вашем ответе он жестко запрограммирован в variable.scss, мне нужно, чтобы он менялся динамически @Mario Padilla

Midhunsai 17.04.2018 15:26

@Midhunsai Я обновил ответ. Я дал вам решение с JQuery. Я протестировал это, и он работает.

Mario Padilla 18.04.2018 12:11

Другие вопросы по теме