Skip to end of metadata
Go to start of metadata

No custom colours

To begin with, the very first rule around colours is that the designers should not use any random colour they come up with during design. All of the colours we use should be mapped to the variables which exist in the system. Designers should first consult the colour charts and pick a colour from there, rather than opening Sketch's colour picker and picking some fancy colour from there.

Then the question is: how do I know which colour to pick in which situation?

Rule 1: Pick semantically applicable variable

Many of the variables we have at our disposal have good semantic name which can be directly applied to our components. A good example is the default button.

The variables for button are:

--vscode-button-foreground
--vscode-button-background

And this corresponds directly to our needs for colour of the button.



Many other variables are directly applicable in the same fashion. Input background & foreground, menu backgrounds, separators, etc. All have a nice semantically applicable variable which we can use.

Rule 2: Alternatively, pick a variable that sounds semantically as-close-as-possible 

As VS Code was not designed to house large complex extensions like we are building, the creators simply didn't include variables for many components we have created. We use all sorts of tiles, connecting lines, panels, popups, etc. Those simply don't exist in the system. Therefore, in those cases we can pick some colour variable which sounds the closest to the UI element we are building.

For example, this tile isn't technically necessary a widget. However, of all of the colour variables available, "widget" was the closest possible match.


Although this variable shares its colour with many other variables from Dark+ (#252526)

Rule 3: Ultimately, if all fails, pick any variable from the list, but use common sense

If everything fails and you cannot find any variable that would even remotely sound like what you need, pick something that holds the colour you need but do check how that variable behaves in other themes. Check Dark, Light, High Contrast, perhaps install some popular themes on the marketplace and see what happens with your designs, and with that funky variable you picked. Perhaps on some themes that variable causes your designs to fall apart. Check, double check! 

Rule 4: If possible, pick variables that come from an enclosed set

The UI blocks we build usually contain multiple colours. Background, typography, headers, highlights, and similar. If possible, we should pick that entire set of colours to come from an enclosed variable set. For example, out of notifications block of variables ...

VariableLight+ HexDark+ Hex
--vscode-notifications-foreground #616161; #cccccc;
--vscode-notifications-background #f3f3f3; #252526;
--vscode-notificationLink-foreground #006ab1; #3794ff;
--vscode-notificationCenterHeader-background #e7e7e7; #303031;
--vscode-notifications-border #e7e7e7; #303031;
--vscode-notificationsErrorIcon-foreground #e51400; #f48771;
--vscode-notificationsWarningIcon-foreground #e9a700; #cca700;
--vscode-notificationsInfoIcon-foreground #75beff; #75beff;

... we can actually build a tile like this. We can use ErrorIcon-foreground as some error state visual notification. Use Foreground as primary font colour, two types of background (Header and plain background), and Link as some blue decorator. So we can use pretty much this entire set of Notifications as an enclosed variable group.

  • No labels