Theming My Tools

Ryan Warner
Feb 5, 2019 · 3 min read

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.

Image for post
Image for post
  • 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.
Image for post
Image for post
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.
Image for post
Image for post
Select “Sidebar” and then scroll all the way down
  • I like to set “Active Item” to the brand’s primary color.
Image for post
Image for post
Customize hex values using brand colors

System Level Folder Icons

End result:

Image for post
Image for post
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.

Image for post
Image for post
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.
Image for post
Image for post
From Preview, copy the image
  • Right click on the folder you want to customize, and click “Get Info”
Image for post
Image for post
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.
Image for post
Image for post
Unselected
Image for post
Image for post
Selected
  • CMD+V to paste the image.
  • That’s it!
Image for post
Image for post
My new project now has a custom folder icon

Notion Icons

Image for post
Image for post
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.

Let’s Go Design

Getting started is the hardest part; that’s why we’re here.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store