How to change/update scss variables values?

Ionic Framework ionic-v3
1 
$theme_color: rgb(0,170,80);
$colors: (
  primary:    $theme_color, //488aff
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222, //#222,
  lightgrn:   #EAEDED,
  footer_bg: rgba(0,0,0,0.2),
  blur_bg: rgba(0,0,0,0.4),
  transpnt: transparent
);

How to change $theme_color value from Components.ts file ?
is this possible?
Thanks in advance

  • Anand
2

See:

1 Like
3

Thanks for your reply.
I need change value like

In components.ts file
Platform.ready(()=>{
$color.primary = < new value >
});

is this possible ?

4

See this post: https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/

Re ‘dynamically switching themes’

5

I can understand your answer. But I need update variable value at run time in variable.scss file.
I think it’s not possible…:roll_eyes:
correct ?

6

When you build an Ionic App the Ionic CLI invokes the Sass executable to compile .sass and .scss files to .css files.

7

I got the answer, here my working code
variable.scss

$theme_color: rgb(0,170,80);  //default
.myTheme1 {
  $theme_color: red !global;
}
.myTheme2 {
  $theme_color: blue !global;
}
.myTheme3 {
  $theme_color: yellow !global;
}

$colors: (
  primary:    $theme_color,
  secondary:  00aa51,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222, //#222,
  lightgrn:   #EAEDED,
  footer_bg: rgba(0,0,0,0.2),
  blur_bg: rgba(0,0,0,0.4),
  transpnt: transparent
);

app.html
<ion-nav [root]=“rootPage” #content [class]=“myTheme”>

Component.ts
myTheme: string = “myTheme2”;

Thank you for you replies.

8

I don’t know why, but without setting mytheme = ‘whatever’ is taking the last theme and all ‘primary’ are yellow. If I delete theme3 then are blue. and when I set the theme nothing changes.

9

Hi L3vick, I am getting this same problem.
It is already automatically defaulting to the last theme and its colours and is not dynamically changing.
Did you manage to find a solution to this?