How does the browser know which theme (MD/iOS) to render?


I am currently developing a PWA with Ionic Framework 5 React. I was wondering how the browser knows which OS (Material Design/iOS) theme it has to render? I know that there are CSS classes for Android .md and iOS .ios devices.

With the Developer Tool, I can preview the app on Android and iOS devices. At which certain point does the browser know I’m watching the app on an Android or iOS device?

I’m just curious how that internally works. I did not find any documentation for that and appreciate any answers or sources to the doc.

This is a harder question than you might think, because responsibility is a bit diffuse.

Ionic components are written using a project called Stencil. Stencil is ostensibly decoupled from Ionic Framework itself, which means that the notion of “mode” (what Ionic calls what you’re calling “theme” here) is treated by Stencil as manna from heaven. So the part of your question about how to get from a mode setting to the CSS classes is all Stencil’s responsibility.

Now, how Stencil gets a mode setting is back in the Ionic Framework code itself. That code gets run as part of the bootstrap process, and looks at whether something was set on the <html> element. If it wasn’t, it tries peeking at the UserAgent. If it finds something that looks iOS-y, it uses ios, otherwise defaults to md.

1 Like

Ah yes, mode is more appropriate than theme in this case.

I had a vague assumption that it possibly could look at the User-Agent, but didn’t know the part of <html> element. I see it now. The Stencil project and the implementation on Github clear things up.

Thanks for your reply and the sources!