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#F0F4F3
  • activityBar.border#DDE4E2
  • activityBar.foreground#178C69
  • activityBarBadge.background#178C69
  • activityBarBadge.foreground#FFFFFF
  • badge.background#178C69
  • badge.foreground#FFFFFF
  • button.background#178C69
  • button.foreground#FFFFFF
  • button.hoverBackground#178C69
  • dropdown.background#FCFDFC
  • dropdown.border#ACCDC3
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0F4F3CC
  • editor.selectionBackground#D3EEE666
  • editorBracketMatch.background#D3EEE655
  • editorBracketMatch.border#178C69
  • editorCursor.foreground#178C69
  • editorGroupHeader.tabsBackground#F0F4F3
  • editorIndentGuide.activeBackground#ACCDC3
  • editorIndentGuide.background#DDE4E288
  • editorLineNumber.activeForeground#885E3A
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#DDE4E266
  • focusBorder#ACCDC3
  • foreground#000000
  • gitDecoration.deletedResourceForeground#B62A20
  • gitDecoration.modifiedResourceForeground#A56112
  • gitDecoration.untrackedResourceForeground#2B8268
  • input.background#FCFDFC
  • input.border#ACCDC3
  • input.foreground#000000
  • inputOption.activeBorder#178C69
  • list.activeSelectionBackground#D3EEE6
  • list.activeSelectionForeground#000000
  • list.focusOutline#178C69
  • list.hoverBackground#FCFDFC
  • list.inactiveSelectionBackground#F9EBD2
  • minimap.selectionHighlight#D3EEE6AA
  • panel.background#F0F4F3
  • panel.border#DDE4E2
  • peekView.border#ACCDC3
  • peekViewEditor.background#FBF1DA
  • peekViewTitle.background#F0F4F3
  • scrollbarSlider.activeBackground#178C69AA
  • scrollbarSlider.background#ACCDC366
  • scrollbarSlider.hoverBackground#ACCDC399
  • sideBar.background#F9FBFA
  • sideBar.border#DDE4E2
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F0F4F3
  • statusBar.border#DDE4E2
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#DDE4E2
  • tab.inactiveBackground#F9EBD2
  • tab.inactiveForeground#8E5829
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8E5829
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#885E3A
  • terminal.ansiMagenta#F49325
  • terminal.ansiRed#178C69
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#FAD89E
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#F0F4F3
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9FBFA
  • titleBar.inactiveForeground#000000
  • widget.shadow#526D7A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#5C6970italic
string, constant.other.symbol, string.regexp, string.template#8E5829
constant.character.escape#F49325
constant.numeric#178C69
constant.language.boolean, constant.language.null, constant.language.undefined#178C69
constant, entity.name.constant, support.constant#206F57
keyword, storage.type, storage.modifier, storage.type.function#178C69
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#206F57
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5C6970
storage.type.class, storage.type.interface, storage.type.enum#178C69
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#5C6970
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#885E3A
support.type.builtin, entity.name.type.primitive#8E5829
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#1D2D34
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#178C69
variable.parameter, variable.parameter.function#1D2D34
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#885E3A
variable, meta.definition.variable, variable.other.readwrite#1D2D34
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#178C69
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#5C6970
entity.other.attribute-name, entity.other.attribute-name.html#8E5829
support.class.component, entity.name.tag.template.value#178C69
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#2B8268
entity.other.attribute-name.class.css, entity.other.attribute-name.class#178C69
entity.other.attribute-name.id.css, entity.other.attribute-name.id#178C69
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8E5829
markup.heading#178C69bold
markup.boldbold
markup.italicitalic
markup.quote#2A3D46
markup.inline.raw, markup.fenced_code#8E5829
invalid, invalid.illegal#C22929