How do I apply Dark Mode as default (onInit)

Hi guys, I’ve been looking into making an ionic application -
and I started out with creating it of the ionic release ‘conference app’, in that they have made a dark mode toggle.

That looks very cool, and they just added this to the class AppComponent
dark = false;

Then I simply set it to true, and the application starts with a dark theme, and after it has been compiled -
this was added to my app.component.html

<ion-app [class.dark-theme]=“dark”>

I would love to know how to add this to my own project, but all i see everywhere is CSS Overrides - i know that, that’s what it really is - but i can’t see logic in manually adding it, to have a boolean value in your class you can make it depend on?

Any tips or tricks out there, feel free to join the debate :tada:

I did manage to do a workaround, I just find it odd to do it this way…
I added class=“dark” to my body in my src/index.html
I read the docs a thousand times, it’s dumb imo… :frowning: :disappointed: :relieved:

Have you read this?

1 Like

Yes I did, a lot of times - but it doesn’t explain how they did the trick on the Conf App?? :smirk: