How to build an Ionic 4 Theme Switcher & Dynamic CSS Variables

[@RubenMiquelino]

I am just starting development of theme switcher. You are always very opportune. Not the first time it happens with me. Thanks a lot for your videos and tutorials.

[@galaxies_dev]

Haha glad I have a good timing :)

[@nickk6245]

after hours of searching i finally found you...big thanks

[@galaxies_dev]

You are welcome Nick :)

[@checkaaddy]

Thanks bro I Love you , I was trying this using the official ion theme and it ate me up trying to customize the theme according to my requirement. You made it easy af. P.S. I guess this is the first time I am ever commenting on a video is 15 years

[@galaxies_dev]

Glad it was helpful for you and thanks for the comment :)

[@townheadbluesboy]

Very good video as usual Simon. Now I need to give it a go.

[@LuisCruz-su6ue]

Nice video! Cheers from Mexico 👍🏻

[@lifasibiya4810]

Awesome tuto👌🏽I'm horrible when it comes to styling ☺️ however this will give me a big boost

[@LexMadafaka]

Great one! Thank you.

[@galaxies_dev]

Glad you liked it!

[@damienosullivan6353]

I have put the "dark-theme" CSS into app.component.scss, is that correct? Because the colors aren't changing for me. The theme is changing to "dark-theme" as expected, but the colors aren't updating.

[@galaxies_dev]

Check out the link below the video to the written version! It's directly inside app.scss

[@rezhwanraouf1726]

Hi Damien you have to import the app.component.scss in the global.scss file then it will work ! i hope my answer will be helpful !

[@voidMainScript]

@@rezhwanraouf1726 What do you mean by this? I've followed the entire tutorial but I got the same problem as Damien. However, I placed the scss to app.scss

[@florencedelprat1283]

1. Add this to your global.scss : @import "./theme/red.theme.scss"; :root { .red-theme { @include red-theme; } } 2. Copy the CSS rules to your theme (src/theme/red.theme.scss) with "mixin" : @mixin red-theme { ion-content { --background: #2c4b84; } // ... }

[@rezhwanraouf1726]

Thank you for an amazing video and videos Simon !

[@wimaxisp]

I love it. I have bee waiting for this. Thanks so much

[@rajureddy7512]

Great concept... bro

[@tommii858]

Nice Video, but why exactly do we need a Factory? I don’t get the theory

[@izzatullokanoatov370]

Appreciate your hard work and Hugeeee thank you.

[@the.maciota]

hey my lord, thanks for video, share yours extensions for ionic 4 ?

[@BCD_Gaming-01]

This is who really i need now..😆

[@devendragaud831]

I want to change the height of the ion-select-option element, how can I do that?

[@galaxies_dev]

You would have to work with the CSS variables of the select, you can find them out by using the debugging tools of your browser!

[@devendragaud831]

@@galaxies_dev I tried that and this is how it looks ibb.co/XFBVt7w when I changed the height of .action-sheet-button.sc-ion-action-sheet-md (in the middle right), it solved the problem ibb.co/2Y5Prgg but I don't know how to do it from my .scss file.

[@edwardgomez5992]

Excelente Simón, espero sea posible videos con subtítulos en español. Saludos desde Colombia.

[@mubashirali427]

Great video 😘

[@Kamleshkumar2010]

Superb 👌 🙌

[@SvenBudak]

you miss the part with statusBar

[@mediprixtutos7064]

thanks

[@albanr8028]

Great !