Below are all 226 tokens declared by DeepMono, with values for both appearances. These are theme declarations, not browser-computed colors. var() and calc() remain visible to show dependencies. The seven --deepmono-syntax-* tokens belong to that theme’s syntax styling; copy their declarations or start with Duplicate before using them in your own theme.
Choose a useful starting point
Section titled “Choose a useful starting point”| Change | Start with |
|---|---|
| Main background and text | --color-background, --color-background-text |
| Surfaces and borders | --color-surface, --color-surface-variant, --color-outline |
| Accent and text on the accent | --color-primary, --color-primary-text |
| Spacing density | --density; --space-* uses it, fixed dimensions may not |
| Control corners | --radius-control, --radius-menu, --radius-modal |
| Interface text size | --font-size and dependent --font-size-* |
| Editor or terminal | Structured editor and terminal fields first, then spacing tokens |
Place tokens in common.tokens, light.tokens or dark.tokens. Token values are CSS strings, so a size is "14px" and density is "1". Names are case-sensitive and must begin with -- followed by a lowercase letter.
Structured editor, terminal, backgrounds and plugins fields generate their own variables. If the same resolved theme sets both terminal.fontSize and tokens["--terminal-font-size"], the structured field wins. Avoid two sources for the same value. External CSS follows the normal cascade, and personal terminal settings take precedence.
Removing your key restores inheritance. Empty strings and null are not reset operations. A custom, correctly named token is allowed but has no effect until a style consumes it. --color-* tokens follow the color restrictions; other values must make sense for the CSS property consuming them.
Semantic colors
Section titled “Semantic colors”| Token | Light | Dark |
|---|---|---|
--color-background |
#f4f4f4 |
#101010 |
--color-background-text |
#161616 |
#e0e0e0 |
--color-surface |
#fafafa |
#161616 |
--color-surface-text |
#1a1a1a |
#dcdcdc |
--color-surface-variant |
#ececec |
#222222 |
--color-surface-variant-text |
#4a4a4a |
#a8a8a8 |
--color-outline |
#c8c8c8 |
#3a3a3a |
--color-surface-container |
#efefef |
#1c1c1c |
--color-surface-container-high |
#e4e4e4 |
#262626 |
--color-surface-container-highest |
#d8d8d8 |
#303030 |
--color-primary |
#9a9a9a |
#9a9a9a |
--color-primary-text |
#0d0d0d |
#0d0d0d |
--color-primary-container |
#c2c2c2 |
#6e6e6e |
--color-secondary |
#878787 |
#787878 |
--color-surface-tint |
#9a9a9a |
#9a9a9a |
--color-error |
#b3261e |
#c75c5c |
--color-warning |
#a36b00 |
#c9a227 |
--color-info |
#3a5a78 |
#7a8fa6 |
--color-accent-text |
var(--color-surface-variant-text) |
var(--color-primary) |
--color-muted-text |
var(--color-surface-variant-text) |
var(--color-secondary) |
--color-backdrop |
color-mix( in srgb, var(--color-background) 70%, transparent ) |
color-mix( in srgb, var(--color-background) 70%, transparent ) |
--color-drop-overlay |
color-mix( in srgb, var(--color-surface-container-high) 85%, transparent ) |
color-mix( in srgb, var(--color-surface-container-high) 85%, transparent ) |
Typography and spacing scale
Section titled “Typography and spacing scale”| Token | Light | Dark |
|---|---|---|
--font-family |
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif |
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif |
--font-family-mono |
"Cascadia Code", "SFMono-Regular", "Liberation Mono", monospace |
"Cascadia Code", "SFMono-Regular", "Liberation Mono", monospace |
--font-size |
13px |
13px |
--density |
1 |
1 |
--font-size-9 |
calc(var(--font-size) * 0.692308) |
calc(var(--font-size) * 0.692308) |
--font-size-10 |
calc(var(--font-size) * 0.769231) |
calc(var(--font-size) * 0.769231) |
--font-size-11 |
calc(var(--font-size) * 0.846154) |
calc(var(--font-size) * 0.846154) |
--font-size-12 |
calc(var(--font-size) * 0.923077) |
calc(var(--font-size) * 0.923077) |
--font-size-13 |
calc(var(--font-size) * 1) |
calc(var(--font-size) * 1) |
--font-size-14 |
calc(var(--font-size) * 1.076923) |
calc(var(--font-size) * 1.076923) |
--font-size-15 |
calc(var(--font-size) * 1.153846) |
calc(var(--font-size) * 1.153846) |
--font-size-17 |
calc(var(--font-size) * 1.307692) |
calc(var(--font-size) * 1.307692) |
--font-size-18 |
calc(var(--font-size) * 1.384615) |
calc(var(--font-size) * 1.384615) |
--font-size-22 |
calc(var(--font-size) * 1.692308) |
calc(var(--font-size) * 1.692308) |
--space-1 |
calc(1px * var(--density)) |
calc(1px * var(--density)) |
--space-2 |
calc(2px * var(--density)) |
calc(2px * var(--density)) |
--space-3 |
calc(3px * var(--density)) |
calc(3px * var(--density)) |
--space-4 |
calc(4px * var(--density)) |
calc(4px * var(--density)) |
--space-5 |
calc(5px * var(--density)) |
calc(5px * var(--density)) |
--space-6 |
calc(6px * var(--density)) |
calc(6px * var(--density)) |
--space-7 |
calc(7px * var(--density)) |
calc(7px * var(--density)) |
--space-8 |
calc(8px * var(--density)) |
calc(8px * var(--density)) |
--space-9 |
calc(9px * var(--density)) |
calc(9px * var(--density)) |
--space-10 |
calc(10px * var(--density)) |
calc(10px * var(--density)) |
--space-11 |
calc(11px * var(--density)) |
calc(11px * var(--density)) |
--space-12 |
calc(12px * var(--density)) |
calc(12px * var(--density)) |
--space-14 |
calc(14px * var(--density)) |
calc(14px * var(--density)) |
--space-16 |
calc(16px * var(--density)) |
calc(16px * var(--density)) |
--space-18 |
calc(18px * var(--density)) |
calc(18px * var(--density)) |
--space-20 |
calc(20px * var(--density)) |
calc(20px * var(--density)) |
--space-22 |
calc(22px * var(--density)) |
calc(22px * var(--density)) |
--space-24 |
calc(24px * var(--density)) |
calc(24px * var(--density)) |
--space-28 |
calc(28px * var(--density)) |
calc(28px * var(--density)) |
--space-30 |
calc(30px * var(--density)) |
calc(30px * var(--density)) |
--space-32 |
calc(32px * var(--density)) |
calc(32px * var(--density)) |
--space-70 |
calc(70px * var(--density)) |
calc(70px * var(--density)) |
Radii, shadows and global controls
Section titled “Radii, shadows and global controls”| Token | Light | Dark |
|---|---|---|
--border-width |
1px |
1px |
--focus-width |
1px |
1px |
--icon-stroke-width |
1.6 |
1.6 |
--radius-xs |
2px |
2px |
--radius-sm |
3px |
3px |
--radius-md |
4px |
4px |
--radius-control |
5px |
5px |
--radius-tab |
6px |
6px |
--radius-menu |
7px |
7px |
--radius-modal |
9px |
9px |
--radius-window |
0px |
0px |
--radius-pane |
0px |
0px |
--opacity-disabled |
0.4 |
0.4 |
--opacity-window |
1 |
1 |
--shadow-menu |
0 12px 35px color-mix(in srgb, var(--color-background-text) 16%, transparent) |
0 12px 35px color-mix(in srgb, var(--color-background) 70%, transparent) |
--shadow-modal |
0 20px 70px color-mix(in srgb, var(--color-background-text) 22%, transparent) |
0 20px 70px color-mix(in srgb, var(--color-background) 80%, transparent) |
--radius-sidebar |
0px |
0px |
--radius-editor |
var(--radius-pane) |
var(--radius-pane) |
Terminal
Section titled “Terminal”| Token | Light | Dark |
|---|---|---|
--terminal-padding |
8px 4px 4px 10px |
8px 4px 4px 10px |
--terminal-font-family |
"JetBrains Mono", var(--font-family-mono) |
"JetBrains Mono", var(--font-family-mono) |
--terminal-font-size |
16px |
16px |
--terminal-line-height |
1.25 |
1.25 |
--terminal-letter-spacing |
0px |
0px |
--terminal-font-weight |
normal |
normal |
--terminal-font-weight-bold |
bold |
bold |
--terminal-cursor-style |
bar |
bar |
--terminal-cursor-inactive-style |
outline |
outline |
--terminal-cursor-blink |
1 |
1 |
--terminal-cursor-width |
1 |
1 |
--terminal-minimum-contrast-ratio |
4.5 |
1 |
--terminal-draw-bold-text-in-bright-colors |
1 |
1 |
--terminal-selection-foreground |
none |
none |
--terminal-background |
var(--color-background) |
var(--color-background) |
--terminal-foreground |
var(--color-surface-text) |
var(--color-surface-text) |
--terminal-cursor |
var(--color-surface-text) |
var(--color-primary) |
--terminal-cursor-accent |
var(--color-background) |
var(--color-primary-text) |
--terminal-selection-background |
var(--color-surface-container-highest) |
var(--color-surface-container-highest) |
--terminal-selection-inactive-background |
var(--color-surface-container-high) |
var(--color-surface-container-high) |
--terminal-black |
var(--color-background-text) |
var(--color-background) |
--terminal-red |
var(--color-error) |
var(--color-error) |
--terminal-green |
var(--color-surface-variant-text) |
var(--color-primary) |
--terminal-yellow |
var(--color-warning) |
var(--color-warning) |
--terminal-blue |
var(--color-info) |
var(--color-info) |
--terminal-magenta |
var(--color-surface-variant-text) |
var(--color-primary-container) |
--terminal-cyan |
var(--color-info) |
var(--color-info) |
--terminal-white |
var(--color-surface-text) |
var(--color-surface-text) |
--terminal-bright-black |
var(--color-secondary) |
var(--color-secondary) |
--terminal-bright-red |
var(--color-error) |
var(--color-error) |
--terminal-bright-green |
var(--color-background-text) |
var(--color-background-text) |
--terminal-bright-yellow |
var(--color-warning) |
var(--color-warning) |
--terminal-bright-blue |
var(--color-info) |
var(--color-info) |
--terminal-bright-magenta |
var(--color-surface-variant-text) |
var(--color-primary) |
--terminal-bright-cyan |
var(--color-info) |
var(--color-info) |
--terminal-bright-white |
var(--color-background-text) |
var(--color-background-text) |
--terminal-search-match-background |
var(--color-surface-container-highest) |
var(--color-surface-container-highest) |
--terminal-search-active-match-background |
var(--color-primary-container) |
var(--color-primary-container) |
--terminal-search-match-border |
var(--color-secondary) |
var(--color-secondary) |
--terminal-search-active-match-border |
var(--color-primary) |
var(--color-primary) |
--terminal-heading-padding |
var(--space-4) var(--space-8) 0 |
var(--space-4) var(--space-8) 0 |
--terminal-heading-align |
center |
center |
--terminal-title-gap |
var(--space-8) |
var(--space-8) |
Editor, Markdown and DeepMono syntax
Section titled “Editor, Markdown and DeepMono syntax”| Token | Light | Dark |
|---|---|---|
--deepmono-syntax-keyword |
color-mix(in srgb, var(--color-info) 75%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-info) 75%, var(--editor-foreground)) |
--deepmono-syntax-type |
color-mix(in srgb, var(--color-info) 60%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-info) 60%, var(--editor-foreground)) |
--deepmono-syntax-function |
color-mix(in srgb, var(--color-warning) 65%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-warning) 65%, var(--editor-foreground)) |
--deepmono-syntax-string |
color-mix(in srgb, var(--color-warning) 40%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-warning) 40%, var(--editor-foreground)) |
--deepmono-syntax-number |
color-mix(in srgb, var(--color-info) 40%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-info) 40%, var(--editor-foreground)) |
--deepmono-syntax-property |
color-mix(in srgb, var(--editor-foreground) 85%, var(--color-info)) |
color-mix(in srgb, var(--editor-foreground) 85%, var(--color-info)) |
--deepmono-syntax-invalid |
color-mix(in srgb, var(--color-error) 65%, var(--editor-foreground)) |
color-mix(in srgb, var(--color-error) 65%, var(--editor-foreground)) |
--editor-heading-gap |
var(--space-12) |
var(--space-12) |
--editor-heading-padding |
var(--space-4) var(--space-12) |
var(--space-4) var(--space-12) |
--editor-heading-height |
38px |
38px |
--editor-font-family |
"JetBrains Mono", var(--font-family-mono) |
"JetBrains Mono", var(--font-family-mono) |
--editor-font-size |
var(--font-size-14) |
var(--font-size-14) |
--editor-line-height |
1.6 |
1.6 |
--editor-background |
var(--color-background) |
var(--color-background) |
--editor-foreground |
var(--color-background-text) |
var(--color-background-text) |
--editor-gutter-background |
var(--editor-background) |
var(--editor-background) |
--editor-gutter-foreground |
var(--color-surface-variant-text) |
var(--color-surface-variant-text) |
--editor-active-line |
var(--color-surface-container) |
var(--color-surface-container) |
--editor-selection |
color-mix(in srgb, var(--color-primary) 28%, var(--editor-background)) |
color-mix(in srgb, var(--color-primary) 28%, var(--editor-background)) |
--editor-cursor |
var(--color-surface-text) |
var(--color-surface-text) |
--editor-content-padding |
var(--space-12) 0 |
var(--space-12) 0 |
--editor-line-padding |
0 var(--space-12) |
0 var(--space-12) |
--markdown-padding |
var(--space-24) clamp(16px, 4%, 48px) 72px |
var(--space-24) clamp(16px, 4%, 48px) 72px |
--markdown-max-width |
80ch |
80ch |
--markdown-line-height |
1.7 |
1.7 |
--editor-setting-padding |
var(--space-18) 0 |
var(--space-18) 0 |
--editor-heading-border-width |
var(--border-width) |
var(--border-width) |
--editor-border |
var(--pane-border) |
var(--pane-border) |
--editor-shadow |
var(--pane-shadow) |
var(--pane-shadow) |
--editor-overflow |
hidden |
hidden |
Workspace, panels and file tree
Section titled “Workspace, panels and file tree”| Token | Light | Dark |
|---|---|---|
--sidebar-background |
var(--color-surface) |
var(--color-surface) |
--sidebar-min-width |
180px |
180px |
--tree-row-height |
27px |
27px |
--tree-indent |
14px |
14px |
--app-padding |
0px |
0px |
--app-gap |
0px |
0px |
--work-area-padding |
0px |
0px |
--work-area-gap |
0px |
0px |
--stage-padding |
0px |
0px |
--pane-spacing |
0px |
0px |
--sidebar-padding |
0px |
0px |
--sidebar-section-gap |
0px |
0px |
--sidebar-heading-height |
38px |
38px |
--sidebar-heading-padding |
var(--space-5) var(--space-10) var(--space-5) var(--space-16) |
var(--space-5) var(--space-10) var(--space-5) var(--space-16) |
--tree-heading-padding |
var(--space-3) var(--space-10) var(--space-3) var(--space-14) |
var(--space-3) var(--space-10) var(--space-3) var(--space-14) |
--tree-padding |
var(--space-4) 0 var(--space-16) |
var(--space-4) 0 var(--space-16) |
--tree-entry-gap |
var(--space-6) |
var(--space-6) |
--pane-border |
0px solid var(--color-outline) |
0px solid var(--color-outline) |
--pane-shadow |
none |
none |
--sidebar-max-width |
520px |
520px |
Title bar, tabs and status bar
Section titled “Title bar, tabs and status bar”| Token | Light | Dark |
|---|---|---|
--titlebar-height |
44px |
44px |
--statusbar-height |
28px |
28px |
--tab-height |
32px |
32px |
--tab-min-width |
128px |
128px |
--tab-max-width |
164px |
164px |
--titlebar-background |
var(--color-surface) |
var(--color-surface) |
--statusbar-background |
var(--color-surface) |
var(--color-surface) |
--tab-background-active |
var(--color-surface-container-high) |
var(--color-surface-container-high) |
--titlebar-padding-left |
var(--space-8) |
var(--space-8) |
--titlebar-gap |
var(--space-3) |
var(--space-3) |
--tab-bar-gap |
var(--space-6) |
var(--space-6) |
--tab-gap |
var(--space-4) |
var(--space-4) |
--tab-padding |
0 var(--space-5) 0 var(--space-9) |
0 var(--space-5) 0 var(--space-9) |
--statusbar-gap |
var(--space-10) |
var(--space-10) |
--statusbar-padding |
0 var(--space-12) 0 var(--space-6) |
0 var(--space-12) 0 var(--space-6) |
--titlebar-border-width |
var(--border-width) |
var(--border-width) |
--statusbar-border-width |
var(--border-width) |
var(--border-width) |
--tab-border-width |
var(--border-width) |
var(--border-width) |
Settings and theme library
Section titled “Settings and theme library”| Token | Light | Dark |
|---|---|---|
--settings-background |
var(--color-background) |
var(--color-background) |
--settings-nav-width |
150px |
150px |
--settings-page-padding |
28px |
28px |
--settings-gap |
0px |
0px |
--settings-layout-padding |
0px |
0px |
--settings-nav-padding |
var(--space-18) var(--space-10) |
var(--space-18) var(--space-10) |
--settings-nav-item-padding |
var(--space-9) var(--space-12) |
var(--space-9) var(--space-12) |
--settings-nav-item-gap |
var(--space-9) |
var(--space-9) |
--settings-heading-margin |
var(--space-22) |
var(--space-22) |
--settings-row-padding |
var(--space-14) 0 |
var(--space-14) 0 |
--theme-library-padding |
var(--space-18) |
var(--space-18) |
--theme-card-padding |
var(--space-16) |
var(--space-16) |
--theme-list-gap |
var(--space-10) |
var(--space-10) |
Git and changes
Section titled “Git and changes”| Token | Light | Dark |
|---|---|---|
--git-section-margin |
0px |
0px |
--git-toolbar-padding |
var(--space-5) var(--space-8) |
var(--space-5) var(--space-8) |
--git-repository-padding |
var(--space-5) var(--space-10) |
var(--space-5) var(--space-10) |
--git-commit-flex |
0 0 clamp(112px, 21vh, 184px) |
0 0 clamp(112px, 21vh, 184px) |
--git-commit-padding |
var(--space-10) |
var(--space-10) |
--git-file-padding |
0 var(--space-5) 0 var(--space-8) |
0 var(--space-5) 0 var(--space-8) |
--git-file-gap |
var(--space-4) |
var(--space-4) |
--commit-file-list-flex |
0 0 26% |
0 0 26% |
Buttons, menus, inputs and dialogs
Section titled “Buttons, menus, inputs and dialogs”| Token | Light | Dark |
|---|---|---|
--menu-background |
var(--color-surface-container) |
var(--color-surface-container) |
--modal-background |
var(--color-surface-container) |
var(--color-surface-container) |
--input-background |
var(--color-background) |
var(--color-background) |
--button-background |
var(--color-surface-container-high) |
var(--color-surface-container-high) |
--icon-button-size |
28px |
28px |
--scrollbar-width |
8px |
8px |
--scrollbar-height |
5px |
5px |
--button-padding |
var(--space-7) var(--space-12) |
var(--space-7) var(--space-12) |
--button-gap |
var(--space-7) |
var(--space-7) |
--menu-padding |
var(--space-7) |
var(--space-7) |
--menu-item-padding |
var(--space-8) |
var(--space-8) |
--menu-item-gap |
var(--space-8) |
var(--space-8) |
--modal-heading-padding |
var(--space-10) var(--space-12) var(--space-10) var(--space-18) |
var(--space-10) var(--space-12) var(--space-10) var(--space-18) |
--modal-content-padding |
var(--space-18) |
var(--space-18) |
--control-border-width |
var(--border-width) |
var(--border-width) |
--menu-border-width |
var(--border-width) |
var(--border-width) |
--modal-border-width |
var(--border-width) |
var(--border-width) |
--input-padding |
var(--space-8) var(--space-10) |
var(--space-8) var(--space-10) |
Generated variables
Section titled “Generated variables”This catalogue does not list every name that can be generated at runtime. --asset-<alias> comes from resources; --plugin-<owner>-<name> from plugin tokens; --syntax-<category>-<property> from syntax; --background-<area>-<property> from backgrounds. VS Code import adds --vscode-*. See resources and CSS and the format reference for those rules.
Sources: DeepMono, CSS baseline, runtime.