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#F4F3F1
  • activityBar.border#E6E6E6
  • activityBar.foreground#C16785
  • activityBarBadge.background#C16785
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C16785
  • badge.foreground#FFFFFF
  • button.background#C16785
  • button.foreground#FFFFFF
  • button.hoverBackground#C16785
  • dropdown.background#FCFCFC
  • dropdown.border#D1D1D1
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#F4F3F1CC
  • editor.selectionBackground#F0E5E966
  • editorBracketMatch.background#F0E5E955
  • editorBracketMatch.border#C16785
  • editorCursor.foreground#C16785
  • editorGroupHeader.tabsBackground#F4F3F1
  • editorIndentGuide.activeBackground#D1D1D1
  • editorIndentGuide.background#E6E6E688
  • editorLineNumber.activeForeground#5C5C5C
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#E6E6E666
  • focusBorder#D1D1D1
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A63F50
  • gitDecoration.modifiedResourceForeground#836C3F
  • gitDecoration.untrackedResourceForeground#4F7261
  • input.background#FCFCFC
  • input.border#D1D1D1
  • input.foreground#000000
  • inputOption.activeBorder#C16785
  • list.activeSelectionBackground#F0E5E9
  • list.activeSelectionForeground#000000
  • list.focusOutline#C16785
  • list.hoverBackground#FBFAF9
  • list.inactiveSelectionBackground#EEEFF1
  • minimap.selectionHighlight#F0E5E9AA
  • panel.background#F4F3F1
  • panel.border#E6E6E6
  • peekView.border#D1D1D1
  • peekViewEditor.background#F7EEF1
  • peekViewTitle.background#F4F3F1
  • scrollbarSlider.activeBackground#C16785AA
  • scrollbarSlider.background#D1D1D166
  • scrollbarSlider.hoverBackground#D1D1D199
  • sideBar.background#F9F8F6
  • sideBar.border#E6E6E6
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F4F3F1
  • statusBar.border#E6E6E6
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#E6E6E6
  • tab.inactiveBackground#EEEFF1
  • tab.inactiveForeground#60646C
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#60646C
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#5C5C5C
  • terminal.ansiMagenta#E0AEBE
  • terminal.ansiRed#C16785
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#ECE8DF
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#F4F3F1
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F9F8F6
  • titleBar.inactiveForeground#000000
  • widget.shadow#61616155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6B6B6Bitalic
string, constant.other.symbol, string.regexp, string.template#60646C
constant.character.escape#E0AEBE
constant.numeric#C16785
constant.language.boolean, constant.language.null, constant.language.undefined#C16785
constant, entity.name.constant, support.constant#2E2E2E
keyword, storage.type, storage.modifier, storage.type.function#C16785
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#2E2E2E
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6B6B6B
storage.type.class, storage.type.interface, storage.type.enum#C16785
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6B6B6B
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#5C5C5C
support.type.builtin, entity.name.type.primitive#60646C
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#1F1F1F
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C16785
variable.parameter, variable.parameter.function#1F1F1F
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#5C5C5C
variable, meta.definition.variable, variable.other.readwrite#1F1F1F
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C16785
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6B6B6B
entity.other.attribute-name, entity.other.attribute-name.html#60646C
support.class.component, entity.name.tag.template.value#C16785
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4F7261
entity.other.attribute-name.class.css, entity.other.attribute-name.class#C16785
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C16785
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#60646C
markup.heading#C16785bold
markup.boldbold
markup.italicitalic
markup.quote#383838
markup.inline.raw, markup.fenced_code#60646C
invalid, invalid.illegal#C22929