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 treehouse.sh 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

Variable	Description
--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.

Fonts

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.