5 Styling Zed Themes

Nate Butler edited this page 2021-08-05 14:53:59 -04:00

Table of Contents

• Overview
• Available Styles
• Object
• Icon
• Buffer
• Extending
• Writing a Theme
• Wishlist

Overview

From PR#125 Add flexible theme system:

This PR adds a theme system with features to support a basic design system.

Check out _base.toml along with light.toml and dark.toml for an initial example of these features.

If a theme's file name begins with an _, it's treated as abstract, meaning it won't be displayed in the theme selector but can be extended by other themes. Currently we have one abstract theme, _base.toml. Themes can extend other themes with an extends field at their top level. Both light.toml and dark.toml extend _base. We create a copy of the base theme and then deeply extend it with the properties of the extending theme. "Deeply" means that if the base theme and extending theme both contain objects at the same location, the object in the base theme will be extended with fields from the extending theme rather than that object being fully overwritten. Themes can declare variables with a top-level variables object. Themes can refer to variables by referring to their $-prefixed names. In this PR, _base.toml refers to several variables that are declared in light.toml and dark.toml. Objects in themes can extend other objects with an extends field that declares a key path to another object. For example, _base.toml declares that ui.active_tab extends ui.tab. This means that ui.active_tab will be a copy of the contents of ui.tab with any properties it declares overwriting the original. These object-level extends directives also work deeply. In addition to the theme features above, this PR adds a theme selector.

To toggle themes, use the cmd-k cmd-t binding. To reload the current theme from disk in development mode, use cmd-k shift-T. This won't work in a release build because the themes are compiled into the binary in that case.

Available Styles

An element has a number of stylable components:

Object

• background:
• text:
• border:
• padding:
• margin:
• corner_radius:
• shadow:
• highlight_text:

Icon

• icon_close:
• icon_dirty:
• icon_conflict:

Buffer

• gutter_background:
• active_line_background:
• line_number:
• line_number_active:

Extending

Using extend...

Writing a Theme

WIP

Wishlist