Ryan Warner

Theming your apps

February 02, 2019

Do you work on more than one codebase or project in a day? Context switching can slow down productivity, and is often unavoidable. Using visual cues built right into the tools I use every day has helped me switch between projects more efficiently, sometimes without losing flow state.

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.

Table of Contents

  • VSCode per-workspace color overrides
  • Slack Themes
  • System Level Folder Icons
  • Notion Icons

VSCode per-workspace color overrides

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

VSCode Workspace Theming

  1. Create a project workspace
  • File > Save Workspace As...
  • project.code-workspace
  1. Override colors. Check the official documentation for a list of all the possible overrides.

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.

  1. Navigate to your workspace's preferences.

    Preferences

  2. 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.

    Sidebar

  3. I tend to set "Active Item" to the brand's primary color.

    Theme

System Level Folder Icons

End result: Folder Icons

I recently started a new project, Let's 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.

Folder Icons

  1. 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.

    Preview Copy

  2. Right-click on the folder you want to customize, and click "Get Info"

    Get Info

  3. In the top right of the info window, select the folder icon.

    Unselected Top

    Selected Top Selected

  4. CMD + V to paste the image.

    Paste

  5. That's it!

    Result

Notion Icons

Notion

Notion lets you set custom icons per page.

Notion

Click on the icon for the page you want to change and then select your preferred image.

Conclusion

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

© Ryan Warner 2024
GithubDribbbleTwitter