Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#00000000
  • activityBar.background#303030
  • activityBar.border#454545
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3584E4
  • breadcrumb.background#262626
  • button.background#3584E4
  • button.border#3584E4
  • button.hoverBackground#4990e7
  • commandCenter.background#444444
  • commandCenter.border#00000000
  • editor.background#1d1d1d
  • editorBracketMatch.background#45454520
  • editorBracketMatch.border#454545
  • editorGroup.border#454545
  • editorGroupHeader.border#454545
  • editorGroupHeader.tabsBackground#262626
  • editorGroupHeader.tabsBorder#454545
  • editorGutter.addedBackground#1F7F56
  • editorGutter.deletedBackground#A51D2D
  • editorGutter.modifiedBackground#1A5FB4
  • editorIndentGuide.activeBackground#45454599
  • editorIndentGuide.background#45454580
  • editorLineNumber.foreground#666666
  • editorRuler.foreground#45454580
  • focusBorder#5f7999
  • gitDecoration.addedResourceForeground#8FF0A4dd
  • gitDecoration.deletedResourceForeground#F66151dd
  • gitDecoration.ignoredResourceForeground#77767B
  • gitDecoration.modifiedResourceForeground#FFBE6Fdd
  • gitDecoration.renamedResourceForeground#8FF0A4dd
  • gitDecoration.stageDeletedResourceForeground#F66151dd
  • gitDecoration.stageModifiedResourceForeground#FFBE6Fdd
  • gitDecoration.untrackedResourceForeground#8FF0A4dd
  • input.background#3a3a3a
  • list.activeSelectionBackground#1B497E
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#333333
  • list.inactiveSelectionBackground#3a3a3a
  • panel.background#242424
  • panel.border#454545
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#454545
  • panelTitle.activeBorder#cccccc
  • panelTitle.activeForeground#cccccc
  • scrollbar.shadow#00000000
  • sideBar.background#242424
  • sideBar.border#454545
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#454545
  • statusBar.background#1C71D8
  • statusBar.border#454545
  • statusBar.debuggingBackground#C64600
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#613583
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.remoteBackground#1F7F56
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#303030
  • tab.border#454545
  • tab.hoverBackground#363636
  • tab.inactiveBackground#262626
  • titleBar.activeBackground#303030
  • titleBar.border#454545
  • tree.indentGuidesStroke#45454599
  • widget.shadow#00000033
  • window.activeBorder#454545

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
, meta.embedded, variable, meta.tag.attributes punctuation.section.embedded, keyword.operator, storage.type.function.arrow, keyword.control.flow.block-scalar.literal, keyword.control.flow.block-scalar.folded, storage.modifier.chomping-indicator, storage.type.string, string.quoted.byte.raw, meta.macro.rules entity.name.function.macro.rust#C0BFBC
constant.numeric.binary, constant.numeric.octal, constant.numeric.hex, keyword.other.unit.binary, keyword.other.unit.octal, keyword.other.unit.hexadecimal, keyword.other.unit.imaginary, keyword.other.unit.exponent#7D8AC7
constant.language.boolean, constant.language.bool#7D8AC7
comment, entity.other.document.begin.yaml, entity.other.document.end.yaml#77767B
constant.language, string.quoted.single.char, support.type.property-name, support.constant.property-value.css, source.css keyword.other.unit#7D8AC7
constant.numeric, constant.numeric entity.name.type.numeric#7D8AC7
comment.block.documentation#9A9996
constant.numeric.float#7D8AC7
#62A0EA
markup.heading.markdown#33B2A4bold
keyword, keyword.operator.new, keyword.operator.logical.python, source.js keyword.operator.expression, source.ts keyword.operator.expression, storage.modifier, storage.type.class, storage.type.function, entity.name.tag.yaml, source.js storage.type, source.ts storage.type, source.tsx storage.type, source.rust storage.type#FFA348bold
constant.numeric#7D8AC7
#7D8AC7
meta.preprocessor, meta.preprocessor keyword.control, punctuation.decorator, meta.decorator entity.name.function, entity.name.function.decorator, keyword.control.at-rule.media, constant.character.entity, punctuation.section.embedded, punctuation.definition.template-expression#E66100
comment.line.number-sign.shebang#9A9996bold
constant.character.escape#F66151
string#5BC8AF
markup.bold.markdownbold
storage.type, entity.name.type, entity.name.namespace, keyword.type.cs, support.type, support.class.builtin, support.class.promise#5BC8AFbold
meta.preprocessor.cs#5E5C64
constant.other.placeholder#7D8AC7
source.c storage.modifier#5BC8AFbold
source.c storage.type#5BC8AFbold
entity.other.attribute-name.id.css#33B2A4bold
support.type.property-name.css#FF7800
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, meta.selector.css punctuation.section.function#7D8AC7bold
meta.selector.css keyword.operator, entity.other.attribute-name.css#FF7800bold
support.type.vendored.property-name.css#E5A50A
markup.inserted.diff#33B2A4
markup.changed#FF7800
meta.diff.header#7D8AC7
meta.diff.range#F5C211
markup.deleted.diff#F66151
constant.other.placeholder.go#4E57BA
support.function.builtin.python#62A0EA
entity.name.type.class.python#5BC8AFbold
keyword.control.import.python#F66151
meta.attribute.rust, meta.attribute.rust keyword.operator#7D8AC7
entity.name.type.lifetime.rust#FFA348
entity.name.function.macro#7D8AC7
meta.tag entity.other.attribute-name, meta.tag keyword.operator.assignment, punctuation.separator.key-value.html, punctuation.separator.key-value.svelte, text.xml meta.tag#FF7800
meta.tag string#7D8AC7
entity.name.tag, support.class.component.svelte, punctuation.definition.tag#33B2A4
text.xml meta.tag.preprocessor entity.name.tag, text.xml meta.tag.preprocessor punctuation.definition.tag#F5C211bold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...