Automating Design: Switch Dark & Light Modes Instantly in Sketch
By: Teisanu Tudor
Tags: UI, Plugins, Design, Automation, Sketch

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.

Doing this for 20 different screens is just a pain and very error prone

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.

The artboard name also changes by adding “Dark” to its name. I’m using the shortcut here, to skip going through the menu

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.

The avatar icon and button are two symbols. Each one can be re-used with overrides, in this case layer style for the avatar and text for the button. The plugin takes all that into account

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.

Brought them back in the original artboard to show the difference

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.

Colour variables are extracted from a linked library in this case: “Brand Colours”. They can also be local, in the working document.

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.