My client wants an in-app button to switch between dark & light modes, regardless of the ipad’s system setting.
Is there an easy way to change the font colour of the controls with css or the likes, while in the app? Or is it just a manual process of changing each individual control?
There is no magic switch for this. If your app is just black and white, you can simply swap them - but it gets more complicated if you are using colors.
Here are a couple of links which may help:
You should be able to do this using css variables:
Define a variable like “–button-color;brown”, use it in styling the buttons (with "var(–button-color) and then change its value in javascript. This should change it in every style that uses the --button-color variable.
@slm thanks but I couldn’t get that working for me
@ghenne that toggle works well thank you. I barely had to touch a control in my app. I can’t find a way of ascertaining which mode the app is in.
window.matchMedia('(prefers-color-scheme: dark)')
seemed the most likely but the property is false regardless of mode. I assume this is a system set property, rather than a .body level property.