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#1A2023
  • activityBar.border#343A3D
  • activityBar.foreground#CC3E3E
  • activityBarBadge.background#CC3E3E
  • activityBarBadge.foreground#151B1E
  • badge.background#CC3E3E
  • badge.foreground#151B1E
  • button.background#CC3E3E
  • button.foreground#151B1E
  • button.hoverBackground#CAAA2B
  • dropdown.background#1F2529
  • dropdown.border#435649
  • dropdown.foreground#EDECE9
  • editor.background#111518
  • editor.foreground#E4E3DD
  • editor.lineHighlightBackground#1A202399
  • editor.selectionBackground#2D433480
  • editorBracketMatch.background#2D433455
  • editorBracketMatch.border#CC3E3E
  • editorCursor.foreground#CC3E3E
  • editorGroupHeader.tabsBackground#1A2023
  • editorIndentGuide.activeBackground#435649
  • editorIndentGuide.background#343A3D88
  • editorLineNumber.activeForeground#6C97AC
  • editorLineNumber.foreground#87A190AA
  • editorWhitespace.foreground#343A3D66
  • focusBorder#435649
  • foreground#E4E3DD
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#60A978
  • input.background#1F2529
  • input.border#435649
  • input.foreground#EDECE9
  • inputOption.activeBorder#CC3E3E
  • list.activeSelectionBackground#2D4334
  • list.activeSelectionForeground#E4E3DD
  • list.focusOutline#CC3E3E
  • list.hoverBackground#202723
  • list.inactiveSelectionBackground#1D2520
  • minimap.selectionHighlight#2D4334AA
  • panel.background#1A2023
  • panel.border#343A3D
  • peekView.border#435649
  • peekViewEditor.background#181D20
  • peekViewTitle.background#1A2023
  • scrollbarSlider.activeBackground#CC3E3EAA
  • scrollbarSlider.background#43564966
  • scrollbarSlider.hoverBackground#43564999
  • sideBar.background#151B1E
  • sideBar.border#343A3D
  • sideBar.foreground#DEDDD8
  • sideBarTitle.foreground#E4E3DD
  • statusBar.background#1A2023
  • statusBar.border#343A3D
  • statusBar.foreground#959283
  • tab.activeBackground#111518
  • tab.activeForeground#E4E3DD
  • tab.border#343A3D
  • tab.inactiveBackground#1D2520
  • tab.inactiveForeground#6AAF81
  • terminal.ansiBlack#111518
  • terminal.ansiBlue#6AAF81
  • terminal.ansiCyan#87A190
  • terminal.ansiGreen#6C97AC
  • terminal.ansiMagenta#DAB82F
  • terminal.ansiRed#CC3E3E
  • terminal.ansiWhite#E4E3DD
  • terminal.ansiYellow#67581E
  • terminal.background#111518
  • terminal.foreground#E4E3DD
  • titleBar.activeBackground#1A2023
  • titleBar.activeForeground#E4E3DD
  • titleBar.inactiveBackground#151B1E
  • titleBar.inactiveForeground#87A190
  • widget.shadow#080B0C55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#9C998Bitalic
string, constant.other.symbol, string.regexp, string.template#74B489
constant.character.escape#A4CCB1
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#DFC768
constant, entity.name.constant, support.constant#E6D389
keyword, storage.type, storage.modifier, storage.type.function#D66666
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E08585
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#918E83
storage.type.class, storage.type.interface, storage.type.enum#D66666
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#868379
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#99B4C2
support.type.builtin, entity.name.type.primitive#B3C3CC
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#DF9090
variable.parameter, variable.parameter.function#C7C5BD
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#95AFBB
variable, meta.definition.variable, variable.other.readwrite#E8E7E3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D66666
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9C998B
entity.other.attribute-name, entity.other.attribute-name.html#99B4C2
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#74B489
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DFC768
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D66666
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#99B4C2
markup.heading#D66666bold
markup.boldbold
markup.italicitalic
markup.quote#E8E7E3
markup.inline.raw, markup.fenced_code#74B489
invalid, invalid.illegal#FF6B6B