CODEWITHSUNDEEP
cssangularsassionic3
Midhunsai
Midhunsai

Reputation: 427

how to use a component variable in my scss file in ionic3

im trying to change my app theme color based on the user required theme color,for example i have multiple users and each user having their own app theme color,if a user loggedIn to my app then that user theme color has to apply to my whole app,so based on that theme value my app fonts and all the toggles need to change, as of now i tried using [ngStyle] by calling the function fom my component like below

home.html

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

home.ts

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

but now i want to change the ion-toggle color and also for ion-slidespagination bullets color to the userThemeColor, how can i do it form them

what i tried

<ion-toggle (ionChange)="toggleChange()" [ngStyle]="setBgColor()"></ion-toggle> here it is not changing for toggle, so now i want to export my theme color value to scss file and there i hve to use that color like below

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

Upvotes: 1

Views: 142

Answers (1)

Mario Padilla
Mario Padilla

Reputation: 521

As far I know, you can NOT use a dynamic variable in your scss file.

Alternative: A (dirty) solution, with JQuery, would be:

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;}');
}

You can not change dynamically the color in ion-toggle or ion-checkbox at runtime. In opposite, you can set pre-defined (static) sass variable like this:

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

…but, because you can not set a hex-color-string, this is impossible update color directive from server/API as hex-strings (for now).

Upvotes: 1

Related Questions