User Guide

CSS Theming

You can create your own custom theme for Treehouse using our built-in variables a.k.a. custom properties.

Create a theme

  1. Add a top level folder called "ext" to your repository
  2. Create a CSS file inside the ext folder
  3. Use the format below to populate the variables with hex code values. Tip: Create color variables inside the root block to reuse color styles between custom properties.
:root {
  --font: 'Font name';

  --color-primary: #hex;

  --color-background: #hex;
  --color-background-sidebar: #hex;

  --color-icon: #hex;
  --color-icon-secondary: #hex;

  --color-nav-label: #hex;

  --color-text: #hex;
  --color-text-placeholder: #hex;
  --color-text-secondary: #hex;

  --color-highlight: #hex;

  --color-node-handle: #hex;
  --color-node-handle-secondary: #hex;

  --color-outline: #hex;
  --color-outline-secondary: #hex;

Managing multiple CSS files

If you have multiple CSS files you want to swap between, append ".disabled" to the end of the unused CSS filename(s).

Variable Reference

--font Global font definition. Change the font itself but not sizes or styles with this.
--color-primary Background color of primary button
--color-background Background color of main panels, menus, and modals
--color-background-sidebar Background color of sidebar navigation
--color-icon High contrast color used for primary icons. For example: icons in the top navigation
--color-icon-secondary Low-contrast color used for secondary icons
--color-nav-label Used for top and sidebar navigation labels
--color-text Default text color used for body text, navigation, and primary icons
--color-text-placeholder Lower-contrast color used for placeholder text in inputs
--color-text-secondary Lower-contrast color used for secondary text
--color-highlight Lowest-contrast color to subtly highlight selected item in the menu, search, and command palette
--color-node-handle Bullet color for nodes (a.k.a. the node handle)
--color-node-handle-secondary Lower-contrast accent color on node handles. For instance, the outer filled circle on a node indicating collapsed children.
--color-outline High contrast border color on pop-over containers like modals and menus.
--color-outline-secondary Lower contrast border color where less extreme contrast is needed, such as the divider between panels and the navigation.


To use a non-system font, you may import a font into your CSS file using either the @import method or the @font-face method.

Stay in touch

Sign up for our mailing list to receive updates on the project.

We don't share your email.