Ionic 5 - Creating Theme Switcher (light and dark) using Angular

In this video, we will take a look at how we can create a manual theme swither toggle that switches to light and dark theme using Ionic 5 and Angular

[@sriz21]

Thanks!

[@kaniwarhannan5483]

hello do you have a way to do it on react instead of angular please?

[@weixiangng8279]

Hi if I want to make the app stays light theme eventhough my phone is set to dark theme how can I achieve that?

[@mbaljeetsingh]

You might want to save the theme state in the local storage or any other persistent storage and then read the value from there.

[@merenelresearch8775]

Great, thank you. I actually just needed to place the dark as default so I just set in index.html Thank you very much!!!

[@jensuwebecker6923]

Wow, that was easy. I have a feature request for you: Please add your voice as stereo sound next time. That would be great!^^

[@mbaljeetsingh]

Thanks, Forgot to change mono to stereo, will try to remember next time

[@ferduno5629]

Thanks mate

[@chiefnarx]

Great video!
This didn't work for me, though. Don't we have to define the "dark"??

[@brunorodrigoramoslamadrid6884]

how do i keep the option selected? When I refresh the page It turns back to light theme

[@mbaljeetsingh]

Look into local storage

[@SushantRawale]

Thank you for the video, it's very easy.
Could you please make video on sample page with login and restricting user to go back to login page from home page and vice versa?

[@mbaljeetsingh]

Yes, soon

[@martinberit3558]

Thanks a lot, Baljeet - excellent explaination. Just one question: What do we gain by using the Renderer2 ? - it worked well without it...

[@mbaljeetsingh]

If you do SSR in the app, it might not work with direct Dom manipulation.

[@likhileshsuryabhanbalpande531]

Very helpful! Thank you!

[@mayankkataria7080]

You saved my day. Thanks alot!!!

[@musthagmohamed8175]

it does not work now. SAD...

[@mbaljeetsingh]

It actually should, what issue are you facing.

[@musthagmohamed8175]

@@mbaljeetsingh no errors... Everything works but does not change color

[@prashantkumawat2070]

@@musthagmohamed8175 Yes same issue at my side

[@jfmmhonca]

Thank you for the video, it's very useful.

[@Besthooloo]

Renderer2 doesn't support directly in a service so it needs to be defined the RendererFactory2 injection for working with Renderer2 otherwise it gets back a null error exception.

[@jared4670]

private renderer: Renderer2;
constructor(rendererFactory: RendererFactory2) {
this.renderer = rendererFactory.createRenderer(null, null);
}

[@munamurad4266]

dose it work with a blank project not tabs ?

[@mikhailpetrunenko6472]

Thank you very much!

[@maharshigohel1936]

Thank you so much

[@mohanedbenmansour5927]

thank you for this great tutorial

[@whyneil]

which extension do you use for the i-item type of autocomplete?

[@mbaljeetsingh]

Search for ionic snipppets by fivethree

[@chentongliew3512]

thanks!!! this video helps me a lot

[@angadsaluja3489]

Thanks Jatta! Khich ke rakh!

[@nishanthasanjeewa4442]

is it works?when reload the page?

[@mbaljeetsingh]

By default no, but you can save the toggle state in the local storage and then check for its value.

[@johngeronimo8821]

Is the state will be saved if I reload the page?

[@mbaljeetsingh]

Not currently, but you can use local storage for that

[@munamurad4266]

@@mbaljeetsingh how ? please let me know

[@iqbalsingh6311]

Very informative video

[@mbaljeetsingh]

Thank you