Edit variables.scss colors

Ionic Framework ionic-v3
1

Hi there,
I need to implement a day/night function changing the primary and secondary colors on sass to white or black.
How I can I edit this variables on typescript function when a button is pressed?

2

See:

toggle-themes
toggle-themes.jpg931×856 137 KB

And:

1 Like
3

I’ve created 2 themes with $colors variables and I’m using the event to subscribe on app component.
The subscribe it’s working, but don’t override theme

black-theme.scss
image
white-theme.scss
image
variables.scss
image
image
app.component.ts
image

4

See: https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/

variables.scss:

// Named Color Variables
// --------------------------------------------------

$blue:       #488aff !default;
$green:      #4DB6AC !default;
$red:        #f53d3d !default;
$gray:       #f4f4f4 !default;
$black:      #000000 !default;
$white:      #FFFFFF !default;
$yellow:     #FFFF00 !default;
$lightgray:  #D3D3D3 !default;
$orange:     #FF6D00 !default;

blue.theme.scss:

.ios, .md, .wp {

  .blue-theme {

    $colors: (
      primary:    $blue
    );

    ion-header {
      background-color: map-get($colors, primary);
    }

    ...

  }
}

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

app.component.ts:

export class MyApp {

  rootPage:any = HomePage;
  theme:String = 'green-and-blue-theme';

  constructor(public platform: Platform,
              public event: Events) {

    platform.ready().then(() => {
    
      event.subscribe('theme:toggle', () => {
        this.toggleTheme();
      });
      
    });
    
  }

  toggleTheme() {
    if (this.theme === 'facebook-messenger-theme') {
      this.theme = 'green-and-blue-theme';
    } else {
      this.theme = 'facebook-messenger-theme';
    }
  }
}

app.html:

<ion-nav [root]="rootPage" [class]="theme"></ion-nav>

Sample source code: https://github.com/Robinyo/big-top

5

Yep, I’ve added the [class]=“theme”
Still not working, I’m running the app on android device, maybe this method only works on browsers

6

The Blue theme, on an Android device:

image
image1080×1920 478 KB

See: https://craftbeer.org.au/

1 Like
7

I forgot to use !default property on colors…
Now it’s working !! thanks a lot !