adamstep
commented
3 years ago React Native recently added the Appearance API to handle dark mode: https://reactnative.dev/docs/appearance
I haven't used it myself, but it looks like you can query the current mode and register an event handler for changes to the mode. So the plumbing is there to support the feature in Hyperview.
The question would be how to design the syntax for <style> elements to support different modes. One option is to scope the entire <styles> object with an attribute:
<doc xmlns="https://hyperview.org/hyperview">
<screen>
<!-- With no attribute, styles are always applied -->
<styles>
<style id="text" color="black" />
</styles>
<!-- These styles are only applied when OS requests light mode -->
<styles prefers-color-scheme="light">
<style id="text" color="white" />
</styles>
<!-- These styles are only applied when OS requests dark mode -->
<styles prefers-color-scheme="dark">
<style id="text" color="white" />
</styles>
<body>
<text style="text">Hello, World</text>
</body>
</screen>
</doc>Creation of stylesheets happens in this function: https://github.com/Instawork/hyperview/blob/3f3467656362a81335af5341d070494fa66a41d9/src/services/stylesheets/index.js#L148
It would be straight-forward to either pass a colorScheme parameter, or check Appearance.getColorScheme() in this function. Slightly more tricky would be to listen to changes to the OS color scheme. But we could register a listener or add a hook to the main Hyperview component to re-render when we get a new color scheme: https://github.com/Instawork/hyperview/blob/master/src/index.js#L90
What would be proper solution to night mode? I imagine the OS sends an event that the user has night mode enabled and somehow all the stylings need to be applied to the elements?
Any suggestions?