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#F2F1EE
  • activityBar.border#D8DEDA
  • activityBar.foreground#A52727
  • activityBarBadge.background#A52727
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A52727
  • badge.foreground#FDFDFC
  • button.background#A52727
  • button.foreground#FDFDFC
  • button.hoverBackground#BB9B1B
  • dropdown.background#FDFDFC
  • dropdown.border#B9C5CB
  • dropdown.foreground#203226
  • editor.background#FDFDFC
  • editor.foreground#26402F
  • editor.lineHighlightBackground#F2F1EECC
  • editor.selectionBackground#DAE7DE66
  • editorBracketMatch.background#DAE7DE55
  • editorBracketMatch.border#A52727
  • editorCursor.foreground#A52727
  • editorGroupHeader.tabsBackground#F2F1EE
  • editorIndentGuide.activeBackground#B9C5CB
  • editorIndentGuide.background#D8DEDA88
  • editorLineNumber.activeForeground#446B7E
  • editorLineNumber.foreground#607668AA
  • editorWhitespace.foreground#D8DEDA66
  • focusBorder#B9C5CB
  • foreground#26402F
  • gitDecoration.deletedResourceForeground#A52727
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#326744
  • input.background#FDFDFC
  • input.border#B9C5CB
  • input.foreground#203226
  • inputOption.activeBorder#A52727
  • list.activeSelectionBackground#DAE7DE
  • list.activeSelectionForeground#26402F
  • list.focusOutline#A52727
  • list.hoverBackground#FAFAF9
  • list.inactiveSelectionBackground#E7EEE9
  • minimap.selectionHighlight#DAE7DEAA
  • panel.background#F2F1EE
  • panel.border#D8DEDA
  • peekView.border#B9C5CB
  • peekViewEditor.background#EFEEEB
  • peekViewTitle.background#F2F1EE
  • scrollbarSlider.activeBackground#A52727AA
  • scrollbarSlider.background#B9C5CB66
  • scrollbarSlider.hoverBackground#B9C5CB99
  • sideBar.background#F6F6F3
  • sideBar.border#D8DEDA
  • sideBar.foreground#203226
  • sideBarTitle.foreground#26402F
  • statusBar.background#F2F1EE
  • statusBar.border#D8DEDA
  • statusBar.foreground#4D6B57
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#26402F
  • tab.border#D8DEDA
  • tab.inactiveBackground#E7EEE9
  • tab.inactiveForeground#3C7C51
  • terminal.ansiBlack#26402F
  • terminal.ansiBlue#3C7C51
  • terminal.ansiCyan#607668
  • terminal.ansiGreen#446B7E
  • terminal.ansiMagenta#4D7589
  • terminal.ansiRed#A52727
  • terminal.ansiWhite#26402F
  • terminal.ansiYellow#F3E7BA
  • terminal.background#FDFDFC
  • terminal.foreground#26402F
  • titleBar.activeBackground#F2F1EE
  • titleBar.activeForeground#26402F
  • titleBar.inactiveBackground#F6F6F3
  • titleBar.inactiveForeground#607668
  • widget.shadow#43604D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6C7F72italic
string, constant.other.symbol, string.regexp, string.template#326744
constant.character.escape#3D5866
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#9C821C
constant, entity.name.constant, support.constant#978020
keyword, storage.type, storage.modifier, storage.type.function#A52727
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#8B1D1D
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5F6D64
storage.type.class, storage.type.interface, storage.type.enum#A52727
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#808E85
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#436170
support.type.builtin, entity.name.type.primitive#567281
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A4F10
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C13333
variable.parameter, variable.parameter.function#3E4C43
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#4C6876
variable, meta.definition.variable, variable.other.readwrite#1D2B21
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#A52727
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B9C91
entity.other.attribute-name, entity.other.attribute-name.html#436170
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#326744
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9C821C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#A52727
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#436170
markup.heading#A52727bold
markup.boldbold
markup.italicitalic
markup.quote#1D2B21
markup.inline.raw, markup.fenced_code#326744
invalid, invalid.illegal#C22929