Poniżej znajdziesz 226 tokenów deklarowanych przez DeepMono i ich wartości dla obu trybów. To odczyt deklaracji motywu, nie kolorów obliczonych przez przeglądarkę. Wyrażenia var() i calc() pozostają widoczne, aby pokazać zależności. Siedem tokenów --deepmono-syntax-* należy do składni tego motywu; przy użyciu ich we własnym motywie skopiuj deklaracje lub zacznij od Duplicate.
Jak wybrać właściwy token
Dział zatytułowany „Jak wybrać właściwy token”| Chcesz zmienić | Zacznij od |
|---|---|
| Główne tło i tekst | --color-background, --color-background-text |
| Powierzchnie i obramowania | --color-surface, --color-surface-variant, --color-outline |
| Akcent i tekst na akcencie | --color-primary, --color-primary-text |
| Gęstość odstępów | --density; skala --space-* z niej korzysta, stałe wymiary nie muszą |
| Zaokrąglenia kontrolek | --radius-control, --radius-menu, --radius-modal |
| Wielkość tekstu interfejsu | --font-size i zależne --font-size-* |
| Edytor lub terminal | Najpierw strukturalne pola editor i terminal, potem tokeny odstępów |
Wpisz tokeny do common.tokens, light.tokens lub dark.tokens. Wartości tokenów są tekstem CSS, więc rozmiar zapisujesz jako "14px", a gęstość jako "1". Nazwy są rozróżniane wielkością liter i muszą zaczynać się od -- oraz małej litery.
Strukturalne pola editor, terminal, backgrounds i plugins generują własne zmienne. Gdy w tym samym rozwiązanym motywie ustawisz np. terminal.fontSize i tokens["--terminal-font-size"], wygrywa pole strukturalne. Unikaj dwóch źródeł tej samej wartości. Zewnętrzny CSS podlega normalnej kaskadzie, a osobiste ustawienia terminala mają pierwszeństwo.
Usunięcie własnego klucza przywraca dziedziczenie. Pusty tekst lub null nie służą do resetowania. Własny poprawnie nazwany token jest dozwolony, ale niczego nie zmieni, dopóki jakiś styl go nie użyje. Tokeny --color-* podlegają ograniczeniom kolorów; pozostałe wartości muszą mieć sens dla właściwości CSS, która ich używa.
Kolory semantyczne
Dział zatytułowany „Kolory semantyczne”| 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 ) |
Typografia i skala odstępów
Dział zatytułowany „Typografia i skala odstępów”| 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)) |
Zaokrąglenia, cienie i wspólne kontrolki
Dział zatytułowany „Zaokrąglenia, cienie i wspólne kontrolki”| 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
Dział zatytułowany „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) |
Edytor, Markdown i składnia DeepMono
Dział zatytułowany „Edytor, Markdown i składnia DeepMono”| 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 |
Obszar pracy, panele i drzewo plików
Dział zatytułowany „Obszar pracy, panele i drzewo plików”| 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 |
Pasek tytułu, karty i pasek stanu
Dział zatytułowany „Pasek tytułu, karty i pasek stanu”| 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) |
Ustawienia i biblioteka motywów
Dział zatytułowany „Ustawienia i biblioteka motywów”| 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 i zmiany
Dział zatytułowany „Git i zmiany”| 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% |
Przyciski, menu, pola i okna dialogowe
Dział zatytułowany „Przyciski, menu, pola i okna dialogowe”| 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) |
Zmienne generowane
Dział zatytułowany „Zmienne generowane”Katalog nie obejmuje wszystkich możliwych nazw tworzonych w runtime. --asset-<alias> pochodzi z zasobów; --plugin-<owner>-<name> z tokenów pluginów; --syntax-<category>-<property> ze składni; --background-<area>-<property> z tła. Import VS Code dodaje --vscode-*. Reguły znajdziesz w zasobach i CSS oraz referencji formatu.
Źródła: DeepMono, CSS baseline, runtime.