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#FCDCD9
  • activityBar.border#BDDBD4
  • activityBar.foreground#FF4A3D
  • activityBarBadge.background#FF4A3D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4A3D
  • badge.foreground#FFFFFF
  • button.background#FF4A3D
  • button.foreground#FFFFFF
  • button.hoverBackground#FF675C
  • dropdown.background#FCFCFC
  • dropdown.border#E9AAA5
  • dropdown.foreground#C93680
  • editor.background#FFFFFF
  • editor.foreground#6F2520
  • editor.lineHighlightBackground#FCDCD9CC
  • editor.selectionBackground#BDE7FF66
  • editorBracketMatch.background#BDE7FF55
  • editorBracketMatch.border#FF4A3D
  • editorCursor.foreground#FF4A3D
  • editorGroupHeader.tabsBackground#FCDCD9
  • editorIndentGuide.activeBackground#E9AAA5
  • editorIndentGuide.background#BDDBD488
  • editorLineNumber.activeForeground#568177
  • editorLineNumber.foreground#527A71AA
  • editorWhitespace.foreground#BDDBD466
  • focusBorder#E9AAA5
  • foreground#6F2520
  • gitDecoration.deletedResourceForeground#C21D14
  • gitDecoration.modifiedResourceForeground#8A5E00
  • gitDecoration.untrackedResourceForeground#2D7B59
  • input.background#FCFCFC
  • input.border#E9AAA5
  • input.foreground#C93680
  • inputOption.activeBorder#FF4A3D
  • list.activeSelectionBackground#BDE7FF
  • list.activeSelectionForeground#6F2520
  • list.focusOutline#FF4A3D
  • list.hoverBackground#F8FAFC
  • list.inactiveSelectionBackground#CCECFF
  • minimap.selectionHighlight#BDE7FFAA
  • panel.background#FCDCD9
  • panel.border#BDDBD4
  • peekView.border#E9AAA5
  • peekViewEditor.background#DB5799
  • peekViewTitle.background#FCDCD9
  • scrollbarSlider.activeBackground#FF4A3DAA
  • scrollbarSlider.background#E9AAA566
  • scrollbarSlider.hoverBackground#E9AAA599
  • sideBar.background#FFE3E0
  • sideBar.border#BDDBD4
  • sideBar.foreground#5F201C
  • sideBarTitle.foreground#6F2520
  • statusBar.background#FCDCD9
  • statusBar.border#BDDBD4
  • statusBar.foreground#426B61
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#6F2520
  • tab.border#BDDBD4
  • tab.inactiveBackground#CCECFF
  • tab.inactiveForeground#207FB6
  • terminal.ansiBlack#6F2520
  • terminal.ansiBlue#207FB6
  • terminal.ansiCyan#527A71
  • terminal.ansiGreen#568177
  • terminal.ansiMagenta#FFB3D9
  • terminal.ansiRed#FF4A3D
  • terminal.ansiWhite#6F2520
  • terminal.ansiYellow#FFE7AD
  • terminal.background#FFFFFF
  • terminal.foreground#6F2520
  • titleBar.activeBackground#FCDCD9
  • titleBar.activeForeground#6F2520
  • titleBar.inactiveBackground#FFE3E0
  • titleBar.inactiveForeground#527A71
  • widget.shadow#8D356155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#527A71italic
string, constant.other.symbol, string.regexp, string.template#207FB6
constant.character.escape#C93680
constant.numeric#8A5E00
constant.language.boolean, constant.language.null, constant.language.undefined#C78800
constant, entity.name.constant, support.constant#8F2314
keyword, storage.type, storage.modifier, storage.type.function#FF4A3D
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E83026
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#527A71
storage.type.class, storage.type.interface, storage.type.enum#FF4A3D
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#527A71
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#C93680
support.type.builtin, entity.name.type.primitive#DB5799
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6F2520
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#E83026
variable.parameter, variable.parameter.function#6F352F
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#D03E6F
variable, meta.definition.variable, variable.other.readwrite#4C1815
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#FF4A3D
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#527A71
entity.other.attribute-name, entity.other.attribute-name.html#C93680
support.class.component, entity.name.tag.template.value#8A5E00
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#568177
entity.other.attribute-name.class.css, entity.other.attribute-name.class#8A5E00
entity.other.attribute-name.id.css, entity.other.attribute-name.id#FF4A3D
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#207FB6
markup.heading#FF4A3Dbold
markup.boldbold
markup.italicitalic
markup.quote#4C1815
markup.inline.raw, markup.fenced_code#207FB6
invalid, invalid.illegal#C22929