Dark Mode — Working with Color Systems
The requirements for designers to be more structured has been surging across the industry these past years. And with the introduction of Dark Modes in both mobile and desktop OS’s, another area of design now needs to be put into systems. Our colors.
As designers, we often base our color choices on what looks best for the specific element we are working on. When we do this, the only consistency will be our personal taste and we might end up with a slightly inconsistent use of colors because of it. And an inconsistent color palette will give you problems once you want to create a secondary color scheme, or a dark mode.
Applying a systematic approach to our colors will help us stay organized and give us reasoning behind how and when we use certain colors. But most importantly, it will enable us to easily apply a new color scheme to our design. Our Dark Mode will only be a few color tweaks away, once everything is put into the system.
Let’s dive into one approach of creating a color system.
Roles
As with all systems, one of the most important things are reasoning. Why we’re using this color instead of that color. That’s exactly what we need to do. We need to assign roles to all of our colors.
Luckily it’s really simple, and we can learn a lot from both Apple and Google. You can dig into their documentation to know how they work with color systems.
Looking at our own color system, we need to define our roles and give them clear and descriptive names. The name of our colors should convey the purpose of the color, and not the specific color value.
For this case, we will split them into 3 categories.
Category 1 — Tints
A tint is often the brand color and our secondary colors. We can add as many tints as we need. I.e. we might have a brand color and a few semi-transparent variations of that brand color.
Gradients should be added as individual colors. This will make it easier to change later on.
Tints are usually used for interactive elements, but they don’t have to. The only important thing is that they have a defined role.
So let’s do that.
Role — Used for interactive elements, illustrations and highlights.
Category 2— Backgrounds
Background colors are what it sounds like. A background color.
Since we will use more than one background color in our product, we need to define a few of these and their roles.
The role of the backgrounds are usually defined in layers. So our primary background is always at the bottom, then comes the secondary background, and then the tertiary background on top.
Alternative backgound colors can also be defined.
Role — Used for the backgrounds of elements, in 3 levels.
Category 3— Foreground Content
Now we reached the elements we place on our background colors. This will mostly be text, separators etc. Since we will need text labels with different emphasis, we will define a few levels for those.
You might also need more than one separator color, depending on what background they are placed on.
Role — Used all foreground elements placed on any background.
Other cases
Sometimes we will need to create roles that are very specific. This is not wrong, but we should always keep our system as simple as possible.
In our case, we need a role specifically for text placed on a Tint color.
Role — Used for elements placed on a Tint color.
Assigning colors
Now that we have defined our roles, it’s time to assign colors to them.
This isn’t that different than what we’re used to, when creating a color scheme.
It’s a good idea to try out your color scheme in an interface before you save them. It’s just easier when your colors aren’t locked into the system.
This is also the right time to make sure that your color scheme lives up to the standards of WCAG 2.0 and are as accessible as possible.
So play around, and once you are happy with your color scheme, you save them and assign them a role (in reality it’s just a matter of naming you color the same as the role).
Heres an example of a color scheme with roles assigned.
Join the Dark side
Since we defined roles for every single color, it’s simple to assign new colors to all of the roles, and instantly we will have recolored our entire product.
The color system forces us to choose colors that work for their role and the backgrounds they are placed on. And as a bonus, we already did most of the work for the developers that are going to be implementing the Dark Mode. They will be able to use the color roles as their variables and can assign any set of colors to those variables.
Have a look:
Now, wouldn’t it be nice if you could switch between your light and dark color scheme in Sketch? Without having to create duplicate styles and duplicate elements?
Well, now you can!
Introducing Color Systems for Sketch
A simple plugin to manage your color system, and switch between light and dark mode, as you design. Built to be lightweight, and feel like a part of Sketch. It integrates seamlessly with your Document Colors, so you can continue to work like you are used to.
Simply flip the switch to change the color scheme. Pretty neat right?Download the plugin to get started on your dark mode!
