Mobile app plugin dark mode colors

Mobile app plugin dark mode colors

by Richard Müller -
Number of replies: 1

Hello.

I've added mobile app support to my block plugin. One pretty big problem is the way it looks in dark mode.

All the elements (most importantly the red box and the striped table) use custom CSS (in the web version I use stuff from bootstrap, but I haven't found anything suitable in the app). When switching to dark mode, the red box and the table become pretty hard to read, as you can see in the images here:

How the block looks in light mode How the block looks in dark mode

Is there a way to make the block look better in dark mode?

Average of ratings: -
In reply to Richard Müller

Re: Mobile app plugin dark mode colors

by Richard Müller -
For anyone still wondering about how the dark mode works in the app: When switching to dark mode, the body of the HTML will get the `dark` class.

So you can just write down all your CSS rules for light mode and then after that you put the same rules again except you prepend the selectors with something like `body.ionic5.moodleapp-4.dark` (and you of course change the colors the way you want) to overwrite the rules for light mode.
Average of ratings: -