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#1A1D23
  • activityBar.border#32363E
  • activityBar.foreground#E24A36
  • activityBarBadge.background#E24A36
  • activityBarBadge.foreground#15181E
  • badge.background#E24A36
  • badge.foreground#15181E
  • button.background#E24A36
  • button.foreground#15181E
  • button.hoverBackground#DA432F
  • dropdown.background#1E2229
  • dropdown.border#415A62
  • dropdown.foreground#ECEBE9
  • editor.background#101318
  • editor.foreground#E3E2DD
  • editor.lineHighlightBackground#1A1D2399
  • editor.selectionBackground#27414980
  • editorBracketMatch.background#27414955
  • editorBracketMatch.border#E24A36
  • editorCursor.foreground#E24A36
  • editorGroupHeader.tabsBackground#1A1D23
  • editorIndentGuide.activeBackground#415A62
  • editorIndentGuide.background#32363E88
  • editorLineNumber.activeForeground#59A6C0
  • editorLineNumber.foreground#7B959DAA
  • editorWhitespace.foreground#32363E66
  • focusBorder#415A62
  • foreground#E3E2DD
  • gitDecoration.deletedResourceForeground#EC5E51
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5AAF7D
  • input.background#1E2229
  • input.border#415A62
  • input.foreground#ECEBE9
  • inputOption.activeBorder#E24A36
  • list.activeSelectionBackground#274149
  • list.activeSelectionForeground#E3E2DD
  • list.focusOutline#E24A36
  • list.hoverBackground#1F2228
  • list.inactiveSelectionBackground#1D2026
  • minimap.selectionHighlight#274149AA
  • panel.background#1A1D23
  • panel.border#32363E
  • peekView.border#415A62
  • peekViewEditor.background#181B21
  • peekViewTitle.background#1A1D23
  • scrollbarSlider.activeBackground#E24A36AA
  • scrollbarSlider.background#415A6266
  • scrollbarSlider.hoverBackground#415A6299
  • sideBar.background#15181E
  • sideBar.border#32363E
  • sideBar.foreground#DEDCD8
  • sideBarTitle.foreground#E3E2DD
  • statusBar.background#1A1D23
  • statusBar.border#32363E
  • statusBar.foreground#838995
  • tab.activeBackground#101318
  • tab.activeForeground#E3E2DD
  • tab.border#32363E
  • tab.inactiveBackground#1D2026
  • tab.inactiveForeground#69A9BF
  • terminal.ansiBlack#101318
  • terminal.ansiBlue#69A9BF
  • terminal.ansiCyan#7B959D
  • terminal.ansiGreen#59A6C0
  • terminal.ansiMagenta#3D99B8
  • terminal.ansiRed#E24A36
  • terminal.ansiWhite#E3E2DD
  • terminal.ansiYellow#6F2920
  • terminal.background#101318
  • terminal.foreground#E3E2DD
  • titleBar.activeBackground#1A1D23
  • titleBar.activeForeground#E3E2DD
  • titleBar.inactiveBackground#15181E
  • titleBar.inactiveForeground#7B959D
  • widget.shadow#08090D55

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#6EA7B9
constant.character.escape#E8C545
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#77B1C5
constant, entity.name.constant, support.constant#DF5A49
keyword, storage.type, storage.modifier, storage.type.function#E76655
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E78274
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#808793
storage.type.class, storage.type.interface, storage.type.enum#E76655
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#787D87
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8BB3C1
support.type.builtin, entity.name.type.primitive#A6C1C9
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#ED6A5E
variable.parameter, variable.parameter.function#C5C3BE
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#7CAFC0
variable, meta.definition.variable, variable.other.readwrite#E8E6E3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E76655
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B919C
entity.other.attribute-name, entity.other.attribute-name.html#8BB3C1
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#6EA7B9
entity.other.attribute-name.class.css, entity.other.attribute-name.class#77B1C5
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E76655
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8BB3C1
markup.heading#E76655bold
markup.boldbold
markup.italicitalic
markup.quote#E8E6E3
markup.inline.raw, markup.fenced_code#6EA7B9
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme