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

Question

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

Did you check in css debugger why colors are not applied to your toggle? Are they overriden by something? — David
– David, Commented Apr 17, 2018 at 12:27

Mario Padilla · Accepted Answer · 2018-04-18 10:10:11Z

1

+50

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

edited Apr 18, 2018 at 10:10

answered Apr 16, 2018 at 13:34

Mario Padilla

5215 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Midhunsai Over a year ago

it is not changing the color, returning color is not appending to the toggle @Mario Padilla

Mario Padilla Over a year ago

I updated the answer. First part shows you how update ion-toggle [color] dynamically. Second part explains how get a global 'scss' variable @Midhunsai

Midhunsai Over a year ago

for me userCustomColor comes dynamically from api when user loggedIn, in your aanswer it is hardcoded in variable.scss, i need it change dynamically @Mario Padilla

Mario Padilla Over a year ago

@Midhunsai I updated the answer. I gave you a solution with JQuery. I tested it and it's working.

Collectives™ on Stack Overflow

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

home.html

home.ts

what i tried

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

home.html

home.ts

what i tried

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related