This combined with the jarring effect mentioned earlier means it can be hard to adapt designs to dark mode. This allowed me use that slightly lighter shade as the base colour for the rest of the design (essentially becoming the dark mode equivalent of white in my designs).Īnother important factor is contrast, because of the shift in background colour you may find that any accent colours that were compliant with WCAG are no longer contrasted enough to pass. In order to create a sense of depth in a design that’s already incredibly dark I used ‘proper’ black (#000000) for the darkest colour instead of the slightly lighter shade I had been using in light mode. This made things really easy to work with and sped up iterating over designs massively, and there was many iterations because it turns out designing for Dark Mode isn’t that easy.ĭark Mode isn’t just a case of inverting the light mode palette, you still need to convey the correct hierarchy of information and a simple white -> black inversion would flip this hierarchy on it’s head.Īdditionally, if you have bright colours you may find they become incredibly jarring when used in the Dark Mode context, I had to create a set of muted tones for my accent colour as the brightness was just too much in Dark Mode.Ĭompare the three images below the left is just an inversion of light mode, the middle is with making sure that the hierarchy of the screen elements is maintained and the right is the light mode version.Īs you can see the middle one maintains the visual hierarchy of light mode making the UI far easier to understand When designing the app I had used Figma to build prototypes in order to carry out some user testing and validate the idea before writing any code.Īs I had all the screens for the app already laid out from my initial designs I was able to use Figma’s palette swapping functionality to create copies of the designs and change the colours used for the dark mode colours.
![expo dark mode switch expo dark mode switch](https://images.wondershare.com/filmora/guide/switch-mode3.jpg)
I then came to realise that if I was having these issues then it’s likely that others will have similar issues and I should probably look to support both dark and light modes.
#Expo dark mode switch code#
I felt like a complete idiot, having wasted time thinking it was a code fix but then I started to think - If my phone is on dark mode then how come my component library didn’t have the same issue? It turns out that storybook was setting the theme to light mode regardless of the phone’s setting. Then, I updated my app pull in the new version of the component library, added the new component, took it for a test run on my iPhone and was presented with a blank box where the date picker was meant to be.Īfter a couple of new releases of changing the code in a desperate bid to get it to work and failing I finally found the answer to my problems - The date picker was there, it’s just that as my phone was in dark mode the text was white and my picker just happened to be on a white background too.
![expo dark mode switch expo dark mode switch](https://cdn-7dee.kxcdn.com/wp-content/uploads/2020/01/how-switch-dark-mode-music-iphone-3.jpg)
![expo dark mode switch expo dark mode switch](https://www.thewindowsclub.com/wp-content/uploads/2020/05/Facebook-Switch.jpg)
This date picker looked amazing in my component library and I was really proud of how it was working. Last week I added a new date picker component to my React Native app - Jiff圜V.
![expo dark mode switch expo dark mode switch](https://i.ytimg.com/vi/SnVWVBTmQUI/maxresdefault.jpg)
Adding Dark Mode to my Expo based React Native app