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.background#1E2024
  • activityBar.border#35373B
  • activityBar.foreground#D43542
  • activityBarBadge.background#D43542
  • activityBarBadge.foreground#191B1F
  • badge.background#D43542
  • badge.foreground#191B1F
  • button.background#D43542
  • button.foreground#191B1F
  • button.hoverBackground#A97E60
  • dropdown.background#22252A
  • dropdown.border#464A53
  • dropdown.foreground#ECE9EA
  • editor.background#14161A
  • editor.foreground#E3DDDF
  • editor.lineHighlightBackground#1E202499
  • editor.selectionBackground#3F313680
  • editorBracketMatch.background#3F313655
  • editorBracketMatch.border#D43542
  • editorCursor.foreground#D43542
  • editorGroupHeader.tabsBackground#1E2024
  • editorIndentGuide.activeBackground#464A53
  • editorIndentGuide.background#35373B88
  • editorLineNumber.activeForeground#A17885
  • editorLineNumber.foreground#9C8B91AA
  • editorWhitespace.foreground#35373B66
  • focusBorder#464A53
  • foreground#E3DDDF
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5A8CE2
  • input.background#22252A
  • input.border#464A53
  • input.foreground#ECE9EA
  • inputOption.activeBorder#D43542
  • list.activeSelectionBackground#3F3136
  • list.activeSelectionForeground#E3DDDF
  • list.focusOutline#D43542
  • list.hoverBackground#212327
  • list.inactiveSelectionBackground#212327
  • minimap.selectionHighlight#3F3136AA
  • panel.background#1E2024
  • panel.border#35373B
  • peekView.border#464A53
  • peekViewEditor.background#1C1E22
  • peekViewTitle.background#1E2024
  • scrollbarSlider.activeBackground#D43542AA
  • scrollbarSlider.background#464A5366
  • scrollbarSlider.hoverBackground#464A5399
  • sideBar.background#191B1F
  • sideBar.border#35373B
  • sideBar.foreground#DED8DA
  • sideBarTitle.foreground#E3DDDF
  • statusBar.background#1E2024
  • statusBar.border#35373B
  • statusBar.foreground#858A93
  • tab.activeBackground#14161A
  • tab.activeForeground#E3DDDF
  • tab.border#35373B
  • tab.inactiveBackground#212327
  • tab.inactiveForeground#AF8F79
  • terminal.ansiBlack#14161A
  • terminal.ansiBlue#AF8F79
  • terminal.ansiCyan#9C8B91
  • terminal.ansiGreen#A17885
  • terminal.ansiMagenta#A57384
  • terminal.ansiRed#D43542
  • terminal.ansiWhite#E3DDDF
  • terminal.ansiYellow#534032
  • terminal.background#14161A
  • terminal.foreground#E3DDDF
  • titleBar.activeBackground#1E2024
  • titleBar.activeForeground#E3DDDF
  • titleBar.inactiveBackground#191B1F
  • titleBar.inactiveForeground#9C8B91
  • widget.shadow#090A0C55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8B919Citalic
string, constant.other.symbol, string.regexp, string.template#6C92E0
constant.character.escape#90ABDF
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#BF9F88
constant, entity.name.constant, support.constant#DF9097
keyword, storage.type, storage.modifier, storage.type.function#E07B83
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E89299
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#838791
storage.type.class, storage.type.interface, storage.type.enum#E07B83
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#797D86
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#BE9DA8
support.type.builtin, entity.name.type.primitive#CBB4BB
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#D8B041
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#E28D94
variable.parameter, variable.parameter.function#C5BEC1
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#B899A3
variable, meta.definition.variable, variable.other.readwrite#E8E3E5
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E07B83
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B919C
entity.other.attribute-name, entity.other.attribute-name.html#BE9DA8
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#6C92E0
entity.other.attribute-name.class.css, entity.other.attribute-name.class#BF9F88
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E07B83
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#BE9DA8
markup.heading#E07B83bold
markup.boldbold
markup.italicitalic
markup.quote#E8E3E5
markup.inline.raw, markup.fenced_code#6C92E0
invalid, invalid.illegal#FF6B6B