Theming My Tools

Theming the tools I use everyday helps me move efficiently between projects’ windows and applications. I can tell what project a particular instance of VSCode is without needing to read a word.

In this post, I will detail step by step instructions to theme VSCode, Mac Folder Icons, Slack, and Notion. If there are any tools you use not listed here, let me know.

VSCode per-workspace color overrides

I use the product’s branding for color choices. Here’s the settings I use. You could take this much further, but I mainly use the titleBar and statusBar.

  • Create a project workspace
File > Save Workspace As…

Here’s my <project>.code-workspace:

{
“folders”: [
{
“path”: “.”
}
],
“settings”: {
“workbench.colorCustomizations”: {
“sideBar.background”: “#202021”,
“editor.background”: “#202021”,
“titleBar.border”: “#5B26AF”,
“titleBar.activeForeground”: “#E450AE”
}
}
}

Slack Themes

Slack comes with a number of preset theme options, but you can override these themes to your liking.

Project Branded Slack Theme
  • Navigate to your workspace’s preferences.
Select your workspace menu in the top left of the Slack app, then click “Preferences”
  • Select “Sidebar” and scroll all the way down to the bottom. If you don’t see the Custom Theme option, you may need to click advanced options.
Select “Sidebar” and then scroll all the way down
  • I like to set “Active Item” to the brand’s primary color.
Customize hex values using brand colors

System Level Folder Icons

End result:

My projects directory

I recently started a new project, Lets Go Design. Naturally, this means a new top level folder in my _projects/ directory. I like to customize the icons of these folders for visual cues when browsing these folders.

I’ve created the directory, but it still has the default folder icon.

The 04_LetsGo folder needs a custom icon
  • Find the image file you want to use as the custom icon and open it in Preview. CMD+C to copy the image to your clipboard.
From Preview, copy the image
  • Right click on the folder you want to customize, and click “Get Info”
Back to the folder you want to customize, right click > “Get Info”
  • In the top right of the info window, select the folder icon by clicking it.
Unselected
Selected
  • CMD+V to paste the image.
  • That’s it!
My new project now has a custom folder icon

Notion Icons

Like Mac Icons, Notion lets you customize icons per page
  1. Click on the icon for the page you want to change
  2. Select your preferred image.

Conclusion

I hope this gave you some inspiration in ways to theme your apps on a project level. Please feel free to suggest improvements to my list.