Experimenting with OutSystems PWA — Dark Mode
There is a relatively recent trend in web/app design called “Dark Mode”. It started back in 2019 when Apple launched the feature in Mac OS and iOS operating systems. “Dark Mode” brings a new dark color scheme that works system-wide and in native apps.
Some of the benefits being announced include reduced eye strain caused by bright screens and also improved battery life in devices with OLED displays having to use less energy because of darker pixels.
With the general availability of OutSystems PWAs, I took the opportunity to have my Personal Environment upgraded to the latest Platform version and play around a bit. You need Platform Server 11.9 or later to distribute your app as PWA.
Having an iOS device, I decided that my first challenge would be trying to see if I could have a PWA react to iOS Dark Mode settings.
Start from existing apps
To speed things up, I decided to try out the new collection of apps that OutSystems released.
In Service Studio (you need version 11.6 or later) I created a new application and chose “Start from an app”. Then I picked one of the existing templates. I went for the Task Manager app for my challenge.
Dark Mode support in WebKit
PWAs in iOS have some limitations when compared to, for instance, Android, where the latter has more API available to integrate into your app. Luckily for me, support for Dark Mode is available for WebKit/Safari from iOS 13 onwards.
This means I can try to use the prefers-color-scheme media query in the Task Manager app and see if I can obtain a dark-themed variant that responds to my device settings.
The prefers-color-scheme media feature is used to detect if a user has requested the page to use a light or dark color theme.
Adding custom CSS
To test the media query I added custom CSS to the Task Manager style sheet. The prefers-color-scheme media query accepts two values: light and dark.
- light: Indicates that the user has notified the system that they prefer an interface that has a light theme.
- dark: Indicates that the user has notified the system that they prefer an interface that has a dark theme.
Because the default theme is already light, I went for the dark option.
I took a peek at the elements in the MyTasks screen and I opted to change the header and content’s background-color. I also changed the floating button’s color. Black text over a dark background doesn’t look good so I made it white.
Will it work?
To “install” the Task Manager app in iOS, after publishing you have to:
- Visit the application URL in Safari.
- Tap the Share button at the bottom.
- Tap the Add to Home Screen option.
Time to test it. I fired Task Manager from the Home Screen and I changed the Dark Mode settings from Control Centre. It works! 🎉
Great to know I can give the choice between light and dark appearance to my PWA’s users. Time to do some more CSS 🤓
Debugging Dark Mode
If you are using Chrome to help you in the process of developing web apps you can emulate the prefers-color-scheme using the Developer Tools.
- In Chrome, open the Developer Tools.
- Open the Command Menu (Command+Shift+P in Mac/Control+Shift+P in Windows).
- Type “show rendering” and press Enter.
- Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug.
