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#181B21
  • activityBar.border#292C32
  • activityBar.foreground#E24236
  • activityBarBadge.background#E24236
  • activityBarBadge.foreground#111318
  • badge.background#E24236
  • badge.foreground#111318
  • button.background#E24236
  • button.foreground#111318
  • button.hoverBackground#E24236
  • dropdown.background#1D2026
  • dropdown.border#3A404A
  • dropdown.foreground#FFFFFF
  • editor.background#0A0C0F
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#181B2199
  • editor.selectionBackground#1E3E3180
  • editorBracketMatch.background#1E3E3155
  • editorBracketMatch.border#E24236
  • editorCursor.foreground#E24236
  • editorGroupHeader.tabsBackground#181B21
  • editorIndentGuide.activeBackground#3A404A
  • editorIndentGuide.background#292C3288
  • editorLineNumber.activeForeground#54B68D
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#292C3266
  • focusBorder#3A404A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#E44E44
  • gitDecoration.modifiedResourceForeground#CEA23B
  • gitDecoration.untrackedResourceForeground#37BE86
  • input.background#1D2026
  • input.border#3A404A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#E24236
  • list.activeSelectionBackground#1E3E31
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#E24236
  • list.hoverBackground#191F1D
  • list.inactiveSelectionBackground#182520
  • minimap.selectionHighlight#1E3E31AA
  • panel.background#181B21
  • panel.border#292C32
  • peekView.border#3A404A
  • peekViewEditor.background#15181E
  • peekViewTitle.background#181B21
  • scrollbarSlider.activeBackground#E24236AA
  • scrollbarSlider.background#3A404A66
  • scrollbarSlider.hoverBackground#3A404A99
  • sideBar.background#111318
  • sideBar.border#292C32
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#181B21
  • statusBar.border#292C32
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0A0C0F
  • tab.activeForeground#FFFFFF
  • tab.border#292C32
  • tab.inactiveBackground#182520
  • tab.inactiveForeground#4DCB97
  • terminal.ansiBlack#0A0C0F
  • terminal.ansiBlue#4DCB97
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#54B68D
  • terminal.ansiMagenta#25D089
  • terminal.ansiRed#E24236
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#6B2824
  • terminal.background#0A0C0F
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#181B21
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#111318
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#04050655

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#87A196italic
string, constant.other.symbol, string.regexp, string.template#4DCB97
constant.character.escape#25D089
constant.numeric#E24236
constant.language.boolean, constant.language.null, constant.language.undefined#E24236
constant, entity.name.constant, support.constant#D3B369
keyword, storage.type, storage.modifier, storage.type.function#E24236
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D3B369
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#87A196
storage.type.class, storage.type.interface, storage.type.enum#E24236
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#87A196
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#54B68D
support.type.builtin, entity.name.type.primitive#4DCB97
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#ECE8DF
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#E24236
variable.parameter, variable.parameter.function#ECE8DF
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#54B68D
variable, meta.definition.variable, variable.other.readwrite#ECE8DF
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E24236
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#87A196
entity.other.attribute-name, entity.other.attribute-name.html#4DCB97
support.class.component, entity.name.tag.template.value#E24236
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#37BE86
entity.other.attribute-name.class.css, entity.other.attribute-name.class#E24236
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E24236
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#4DCB97
markup.heading#E24236bold
markup.boldbold
markup.italicitalic
markup.quote#DAD5C8
markup.inline.raw, markup.fenced_code#4DCB97
invalid, invalid.illegal#FF6B6B