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#171F2C
  • activityBar.border#2D3239
  • activityBar.foreground#FA8D2E
  • activityBarBadge.background#FA8D2E
  • activityBarBadge.foreground#101823
  • badge.background#FA8D2E
  • badge.foreground#101823
  • button.background#FA8D2E
  • button.foreground#101823
  • button.hoverBackground#FA8D2E
  • dropdown.background#1B2432
  • dropdown.border#3C4553
  • dropdown.foreground#FFFFFF
  • editor.background#0B1119
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#171F2C99
  • editor.selectionBackground#4F372280
  • editorBracketMatch.background#4F372255
  • editorBracketMatch.border#FA8D2E
  • editorCursor.foreground#FA8D2E
  • editorGroupHeader.tabsBackground#171F2C
  • editorIndentGuide.activeBackground#3C4553
  • editorIndentGuide.background#2D323988
  • editorLineNumber.activeForeground#9FA3AD
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#2D323966
  • focusBorder#3C4553
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#E6574C
  • gitDecoration.modifiedResourceForeground#E2A336
  • gitDecoration.untrackedResourceForeground#46B996
  • input.background#1B2432
  • input.border#3C4553
  • input.foreground#FFFFFF
  • inputOption.activeBorder#FA8D2E
  • list.activeSelectionBackground#4F3722
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#FA8D2E
  • list.hoverBackground#202327
  • list.inactiveSelectionBackground#2A2D32
  • minimap.selectionHighlight#4F3722AA
  • panel.background#171F2C
  • panel.border#2D3239
  • peekView.border#3C4553
  • peekViewEditor.background#161D27
  • peekViewTitle.background#171F2C
  • scrollbarSlider.activeBackground#FA8D2EAA
  • scrollbarSlider.background#3C455366
  • scrollbarSlider.hoverBackground#3C455399
  • sideBar.background#101823
  • sideBar.border#2D3239
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#171F2C
  • statusBar.border#2D3239
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0B1119
  • tab.activeForeground#FFFFFF
  • tab.border#2D3239
  • tab.inactiveBackground#2A2D32
  • tab.inactiveForeground#B2B6BD
  • terminal.ansiBlack#0B1119
  • terminal.ansiBlue#B2B6BD
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#9FA3AD
  • terminal.ansiMagenta#F49325
  • terminal.ansiRed#FA8D2E
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#774A22
  • terminal.background#0B1119
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#171F2C
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#101823
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#05070B55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#A5ADB6italic
string, constant.other.symbol, string.regexp, string.template#B2B6BD
constant.character.escape#F49325
constant.numeric#FA8D2E
constant.language.boolean, constant.language.null, constant.language.undefined#FA8D2E
constant, entity.name.constant, support.constant#ECA351
keyword, storage.type, storage.modifier, storage.type.function#FA8D2E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#ECA351
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#A5ADB6
storage.type.class, storage.type.interface, storage.type.enum#FA8D2E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#A5ADB6
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#9FA3AD
support.type.builtin, entity.name.type.primitive#B2B6BD
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#EDF1F3
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#FA8D2E
variable.parameter, variable.parameter.function#EDF1F3
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#9FA3AD
variable, meta.definition.variable, variable.other.readwrite#EDF1F3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#FA8D2E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#A5ADB6
entity.other.attribute-name, entity.other.attribute-name.html#B2B6BD
support.class.component, entity.name.tag.template.value#FA8D2E
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#46B996
entity.other.attribute-name.class.css, entity.other.attribute-name.class#FA8D2E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#FA8D2E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#B2B6BD
markup.heading#FA8D2Ebold
markup.boldbold
markup.italicitalic
markup.quote#DCE2E5
markup.inline.raw, markup.fenced_code#B2B6BD
invalid, invalid.illegal#FF6B6B