How can I make a night mode in my App?


#1

Hello, I’m making an app with ionic and I want to make in settings an option that change the theme from theme/variables.scss. How can I do it?


#2

Create a button and a function that will switch between the scss


#3

Yes, but, how I can switch it in the function?


#4

Making a switch statement.

https://www.w3schools.com/js/js_switch.asp


#5

I know how to do a Switch, the thing that I don’t know how to do is the changing of the theme


#6

Take a look at this tutorial:
https://devdactic.com/dynamic-theming-ionic/


#7

There’s lots of options as the referred link above says, we just have to think a bit more creative.

You could use JavaScript to trigger the changing scene colors along the app.

I’ve personally found it easiest to understand I need a default color and a set color. So I turned to my storage units, if my storage doesn’t exist with the night theme then trigger the light theme. If someone clicks the night trigger, set the new color and use a dynamic reference (your storage unit color) to decypher which color should be present in the nav-bar, etc.

Hope this helped.