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#241C19
  • activityBar.border#3E3632
  • activityBar.foreground#CE673B
  • activityBarBadge.background#CE673B
  • activityBarBadge.foreground#1F1714
  • badge.background#CE673B
  • badge.foreground#1F1714
  • button.background#CE673B
  • button.foreground#1F1714
  • button.hoverBackground#438DB1
  • dropdown.background#29211E
  • dropdown.border#41584B
  • dropdown.foreground#EDEBE8
  • editor.background#181310
  • editor.foreground#E5E1DC
  • editor.lineHighlightBackground#241C1999
  • editor.selectionBackground#2D433680
  • editorBracketMatch.background#2D433655
  • editorBracketMatch.border#CE673B
  • editorCursor.foreground#CE673B
  • editorGroupHeader.tabsBackground#241C19
  • editorIndentGuide.activeBackground#41584B
  • editorIndentGuide.background#3E363288
  • editorLineNumber.activeForeground#599DC0
  • editorLineNumber.foreground#7E9A8AAA
  • editorWhitespace.foreground#3E363266
  • focusBorder#41584B
  • foreground#E5E1DC
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#47C27A
  • input.background#29211E
  • input.border#41584B
  • input.foreground#EDEBE8
  • inputOption.activeBorder#CE673B
  • list.activeSelectionBackground#2D4336
  • list.activeSelectionForeground#E5E1DC
  • list.focusOutline#CE673B
  • list.hoverBackground#28221F
  • list.inactiveSelectionBackground#261F1D
  • minimap.selectionHighlight#2D4336AA
  • panel.background#241C19
  • panel.border#3E3632
  • peekView.border#41584B
  • peekViewEditor.background#211A18
  • peekViewTitle.background#241C19
  • scrollbarSlider.activeBackground#CE673BAA
  • scrollbarSlider.background#41584B66
  • scrollbarSlider.hoverBackground#41584B99
  • sideBar.background#1F1714
  • sideBar.border#3E3632
  • sideBar.foreground#DFDCD8
  • sideBarTitle.foreground#E5E1DC
  • statusBar.background#241C19
  • statusBar.border#3E3632
  • statusBar.foreground#958E83
  • tab.activeBackground#181310
  • tab.activeForeground#E5E1DC
  • tab.border#3E3632
  • tab.inactiveBackground#261F1D
  • tab.inactiveForeground#60A97E
  • terminal.ansiBlack#181310
  • terminal.ansiBlue#60A97E
  • terminal.ansiCyan#7E9A8A
  • terminal.ansiGreen#599DC0
  • terminal.ansiMagenta#4799C2
  • terminal.ansiRed#CE673B
  • terminal.ansiWhite#E5E1DC
  • terminal.ansiYellow#284B5D
  • terminal.background#181310
  • terminal.foreground#E5E1DC
  • titleBar.activeBackground#241C19
  • titleBar.activeForeground#E5E1DC
  • titleBar.inactiveBackground#1F1714
  • titleBar.inactiveForeground#7E9A8A
  • widget.shadow#0D090855

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#9F9089italic
string, constant.other.symbol, string.regexp, string.template#64C48C
constant.character.escape#97C2D8
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#7EAFC8
constant, entity.name.constant, support.constant#9BC1D4
keyword, storage.type, storage.modifier, storage.type.function#DA9B81
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E3AD96
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#938680
storage.type.class, storage.type.interface, storage.type.enum#DA9B81
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#887C77
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#95C6A9
support.type.builtin, entity.name.type.primitive#AFCFBD
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#D8B041
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DA8181
variable.parameter, variable.parameter.function#C7C3BD
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#90C1A4
variable, meta.definition.variable, variable.other.readwrite#E8E6E3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DA9B81
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9F9089
entity.other.attribute-name, entity.other.attribute-name.html#95C6A9
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#64C48C
entity.other.attribute-name.class.css, entity.other.attribute-name.class#7EAFC8
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DA9B81
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#95C6A9
markup.heading#DA9B81bold
markup.boldbold
markup.italicitalic
markup.quote#E8E6E3
markup.inline.raw, markup.fenced_code#64C48C
invalid, invalid.illegal#FF6B6B