Automating Design: Switch Dark & Light Modes Instantly in Sketch
Plugins can help us get rid of redundant tasks
Dark mode was revealed to the world by Apple in 2018, being called a new cool appearance “that people are sure to love”. Google followed, emphasising dark mode’s positive effect on battery lifetime and screen fatigue, compared to the white elevated style of material design. You might remember that night modes were already available, usually for reading, writing, or navigation. However, night mode was just another feature. Dark mode was ‘sold’ as a cool trend everyone wanted to try, being a device wide preference, apparently only bringing benefits (not here to argue whether it actually helps).
Let’s do it
As great as the dark mode hype was, we as designers, developers, managers all knew what was coming: more exciting work. Companies were racing to implement it, even announcing it publicly (Whatsapp, Instagram, Gmail).
At first, Designing a product’s dark mode was actually fun and interesting. Finding equivalent colours, elevations and text styles, was refreshing both your accessibility principles and teaching you new, specific dark mode practices. This part ended eventually.
The Robotic Way
Having finished re-creating the main flows in dark mode, you and your team are all excited, it looks awesome. You even took the initiative to update all relevant components in your design system with dark modes too. However, there are still dozens of smaller flows to be updated, in addition to all the work in progress and new features coming in.
Sooner or later this becomes robotic and repetitive. Moreover, this will have to be done with every new design, with each update taking two times longer.
Automating the Robotic Way
There must be an easier way to do this. Symbols, layer and text styles are all available in both dark and light mode. They are also all laid out perfectly well in a design, so:
Why couldn’t a software just copy/paste a design and simply switch all components, styles, etc. from one mode to another ?
I decided to create a Sketch plug-in to do this, automatically. As a non-professional developer, it took me around two full months, spread across an entire year, to get it to a decent state( more about the process in here ). At this point, I’m actively using the plug-in for my work, while presenting it to several design teams and companies interested in it.
How does it work ?
Designers can select one or more artboards, run the plug-in and have the light/dark mode equivalent within seconds. It can be used by an individual or a team having one or more shared libraries in Sketch.
Obviously there are some conditions in place when using it, which were all added after multiple designers tested it, in their work set-up.
- The plug-in can switch symbols, symbol overrides, texts, text styles, layer styles, shapes and colour variables. It does not work with groups.
- Symbols, must be based in one or multiple external libraries. Local symbols will not work.
- Symbols, colours, texts and styles must have the words ‘light’ and ‘dark’ in somewhere in their names; location is not important.
- Colours, layer styles and text styles can be generic, in single libraries, e.g. “Colours”, “Texts”, etc., or be part of other linked individual libraries.
- Colour variables can be based on the currently opened document, or in the single “colour” library.
Switching Symbols
As mentioned above, symbols are set in one or more external libraries. In this case, there are two linked: buttons and cards. Any type of override works, be it text, sub-symbol, or layer style.
Switching Layer Styles
Sometimes you might simply use a shape without making it a symbol. Its colour and/or elevation however, should follow a layer style. All the shape properties are kept and the layer style is switched between light and dark.
Switching Text Styles
These are quite straightforward, as long as they’re named consistently.
Switching Colour Variables
Recently, swatches…colour variables were implemented by Sketch. I’m still unsure how these will work out with layer styles in the long run, but the plug-in can handle them at the moment.
Is this the future?
Design tools are still forcing us to spend hours in front of screens pushing pixels around, most of the times repetitively. We have the ability now to move away from robotic tasks as naming layers, arranging artboards or even coming up with alternative layouts. We could then use this time to do more primary and secondary research, explore totally different alternatives and focus on the effect our UI designs will have on people’s experiences.
Let me know if you’re interested in testing the plugin, the latest version is available here: https://github.com/chaos-machine/switch-theme.
I’m looking forward to any feedback, the more it’s used in real setups, the better it will be at making our lives easier.