# Edit variables.scss colors **URL:** \ **Category:** ionic-v3\ **Created:** [May 10, 2018, 11:12pm UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232 "2018-05-10T23:12:09Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![filepinheiro](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@filepinheiro](https://forum.ionicframework.com/u/filepinheiro)\ **Post date:** [May 10, 2018, 11:12pm UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/1 "2018-05-10T23:12:09Z")
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? ---
**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\ **Post date:** [May 11, 2018, 12:47am UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/2 "2018-05-11T00:47:57Z")
See: - [https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/](https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/) - [https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/](https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/) ![toggle-themes](https://global.discourse-cdn.com/ionicframework/original/3X/0/2/02f81d1bdd37ad6e7b4d206a2e7de6d1c1e6a9c0.jpg) And: - [https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/](https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/) - [https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/](https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/) ---
**Author:** ![filepinheiro](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@filepinheiro](https://forum.ionicframework.com/u/filepinheiro)\ **Post date:** [May 11, 2018, 1:49pm UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/3 "2018-05-11T13:49:55Z")
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](https://global.discourse-cdn.com/ionicframework/original/3X/2/3/2354fe52581bc6159d99339a24cd6a9192077c5f.png) white-theme.scss ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/f/af5e130eb2888a14cc34b83438e26082e6b3e592.png) variables.scss ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/f/cf269393cded3b63ebe548dbb21e20f604b0b3ef.png) ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/a/cadc458bbc39c53f092eebc6563cf5627edd92a1.png) app.component.ts ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/9/29b2cc14baa07150ff739153b3492bdcfd46594a.png) ---
**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\ **Post date:** [May 11, 2018, 10:21pm UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/4 "2018-05-11T22:21:23Z")
See: [https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/](https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/) variables.scss: ```auto // 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: ```auto .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/](https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/) app.component.ts: ```auto 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: ```auto ``` Sample source code: [https://github.com/Robinyo/big-top](https://github.com/Robinyo/big-top) ---
**Author:** ![filepinheiro](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@filepinheiro](https://forum.ionicframework.com/u/filepinheiro)\ **Post date:** [May 12, 2018, 3:17am UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/5 "2018-05-12T03:17:26Z")
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 ---
**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\ **Post date:** [May 12, 2018, 3:35am UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/6 "2018-05-12T03:35:30Z")
> [@filepinheiro](#): > > maybe this method only works on browsers The Blue theme, on an Android device: ![image](https://global.discourse-cdn.com/ionicframework/original/3X/6/6/66cfd08fa84d996509ee35d2f98c5c1a9c154144.jpg) See: [https://craftbeer.org.au/](https://craftbeer.org.au/) ---
**Author:** ![filepinheiro](https://avatars.discourse-cdn.com/v4/letter/f/278dde/32.png) [@filepinheiro](https://forum.ionicframework.com/u/filepinheiro)\ **Post date:** [May 12, 2018, 3:55am UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/7 "2018-05-12T03:55:30Z")
I forgot to use !default property on colors… Now it’s working !! thanks a lot ! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:36pm UTC](https://forum.ionicframework.com/t/edit-variables-scss-colors/130232/8 "2021-07-19T21:36:44Z")
Closed on July 19, 2021, 9:36pm UTC