Bringing darkness to the BBC Sounds mobile apps
One of the strikingly bold things about the original design for the BBC Sounds app on iOS and Android was how bright it was. Its visually distinctive look with a white background looked clean and impactful on a desktop monitor. But if you’re thinking of listening to something soothing at night time, and you pull a phone out of your pocket to launch an app which greets you with a glaring white screen, this can have an unexpectedly thermonuclear effect on your retinas. This was a popular theme in user feedback.
Paint it Black
Then, along with the release of Android 10 and iOS 12 in Autumn 2019 came standardised OS level support for dark mode. This was very exciting news for us app developers. Every other Friday, we get 10% time — an opportunity for the whole team to expand our coding horizons and play around with new technologies. We used our next available 10% time slot to investigate the new dark mode APIs.
We had previously settled on a centralised approach for our colour definitions in the app, ensuring that any colours used were referenced from a single place. This made things pretty easy for adding dark mode - it meant that on Android and on iOS 13 we could just switch out one set of ‘light mode’ colours for another more muted set of ‘dark mode’ colours. After a day of 10% time, a single developer on each platform was able to demo a first pass at inverting the colours, using white text on a black background. This attracted a lot of interest in the wider Sounds team! People got excited, and soon enough we had some tickets on the board to implement dark mode for real.
Back to Black
Unfortunately there were a lot of other cases to consider outside of the 10% time demo.
On iOS 11 & 12, it was impossible to quickly switch the asset catalogue colours for dark mode, so there was a laborious task involved of going through all the existing ui elements and making them fit a new protocol, allowing dark mode versions to be manually swapped in at runtime. Android works slightly differently — the values-night resource qualifier has been available since way back in Android 2.2 (Froyo), so we can use that to provide different dark mode ui for all Android versions.
The new dark mode support in both Android 10 and iOS 13 adds a dark mode on/off switch for all your apps from the OS settings, so we needed to hook into this mechanism, and for older OS versions we needed to provide an alternative dark mode switch within the app.
“Every time you try to operate one of these weird black controls that are labelled in black on a black background, a little black light lights up black to let you know you’ve done it.”
― Douglas Adams, The Restaurant at the End of the Universe
There was also the question of icons — in many cases, the icons had been designed to sit on a white background, and there was insufficient contrast to pick them out in the dark mode prototype. On iOS this meant going through all the screens and importing new images where necessary. On Android, we use vector assets for the icons, which means we can edit the drawable xml to reference a colour from our colors.xml file. We have a different version of the colors.xml file in our values-night resource bucket, so a single vector icon can be rendered as dark or light depending on the current dark mode setting.
In some cases, there were dialogs which had a different background colour to the main app, so we ended up with white text on a white background. Or animations in dark mode where a transient state exposed a white background, giving jarring bright flashes.
Our UX team did an amazing job of going through the whole app with a fine tooth comb to pick out all the dark mode niggles. Most of the tickets we worked on had an engineer paired with a UX person, sitting together to fine tune the problem areas. There was a lot of work involved, but the end was in sight. The iOS dark mode release was ready to go, we just had to wrap up the Android loose ends. The sun was shining, it was mid March 2020. What could possibly go wrong?
Help Me Make It Through the Night
Just as we were about to build the release candidate for dark mode on Android, we found ourselves in a very different working environment. In our homes on our own, or with our kids, having to homeschool and work at the same time. We had to say goodbye to our nice short feedback loops of UX and dev sitting next to each other, passing a phone around. And hello to a lot of difficult Zoom calls. There were many surreal moments - holding a phone up to a webcam and trying to angle the screen right to point at an icon, whilst also trying to explain King John and the Magna Carta, split digraphs and set up kitchen chromatography experiments.
The task that lay in front of us was daunting. In the fragmented Android ecosystem with its myriad manufacturers, OS versions and devices, with the whole team now at home, how do we ensure everyone has the devices they need to test? It’s here that I must pay tribute to the incredible resilience and resourcefulness of the Sounds mobile team. Jo Griffith, our Senior Tester, gathered up all our phones and tablets, sanitised the screens and delivered them to drop locations outside testers’ houses in a safe and socially distant manner. While Andy Shearer, our Senior Product Owner, stepped outside his usual role for a day into the wonderful world of engineering - setting up Android Studio on his laptop so we could remote pair on Zoom to debug an issue observed only on his phone.
There were a lot of Zoom calls, a lot of collaboratively shared documents, some laughs and some tears, but we started to pull together the release. The unfaltering cheerfulness and positivity of the whole team throughout this period kept me going. People went above and beyond to extend a hand of companionship remotely, and keep everyone’s spirits up - setting up social calls for breakfast, coffee, lunchtime games, pub quiz, happy hour and open mic night. If you will indulge me in a moment of unfettered raw emotion, I love everyone on this team and not a day goes past without thinking how fortunate and privileged I am to work here.
Exit Light, Enter Night
By the end of March, the dark mode feature in BBC Sounds was live in both Android and iOS app stores. Having followed a rather unconventional route to production from the origins of the idea in 10% time to its rollout at the start of a pandemic, it is now out there and being enjoyed by users.
