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#1C1E26
  • activityBar.border#3A3D4A
  • activityBar.foreground#7288CA
  • activityBarBadge.background#7288CA
  • activityBarBadge.foreground#14161F
  • badge.background#7288CA
  • badge.foreground#14161F
  • button.background#7288CA
  • button.foreground#14161F
  • button.hoverBackground#7288CA
  • dropdown.background#1C1E26
  • dropdown.border#3A3D4A
  • dropdown.foreground#FFFFFF
  • editor.background#0E0F16
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1C1E2699
  • editor.selectionBackground#372E1B80
  • editorBracketMatch.background#372E1B55
  • editorBracketMatch.border#7288CA
  • editorCursor.foreground#7288CA
  • editorGroupHeader.tabsBackground#1C1E26
  • editorIndentGuide.activeBackground#3A3D4A
  • editorIndentGuide.background#3A3D4A88
  • editorLineNumber.activeForeground#D2B879
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A3D4A66
  • focusBorder#3A3D4A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#DAA12F
  • gitDecoration.untrackedResourceForeground#59A679
  • input.background#1C1E26
  • input.border#3A3D4A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#7288CA
  • list.activeSelectionBackground#372E1B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#7288CA
  • list.hoverBackground#1C1E26
  • list.inactiveSelectionBackground#372E1B
  • minimap.selectionHighlight#372E1BAA
  • panel.background#1C1E26
  • panel.border#3A3D4A
  • peekView.border#3A3D4A
  • peekViewEditor.background#1C1E26
  • peekViewTitle.background#1C1E26
  • scrollbarSlider.activeBackground#7288CAAA
  • scrollbarSlider.background#3A3D4A66
  • scrollbarSlider.hoverBackground#3A3D4A99
  • sideBar.background#14161F
  • sideBar.border#3A3D4A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1C1E26
  • statusBar.border#3A3D4A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E0F16
  • tab.activeForeground#FFFFFF
  • tab.border#3A3D4A
  • tab.inactiveBackground#372E1B
  • tab.inactiveForeground#D2B879
  • terminal.ansiBlack#0E0F16
  • terminal.ansiBlue#D2B879
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#D2B879
  • terminal.ansiMagenta#7288CA
  • terminal.ansiRed#7288CA
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#372E1B
  • terminal.background#0E0F16
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14161F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#989081italic
string, constant.other.symbol, string.regexp, string.template#D2B879
constant.character.escape#7288CA
constant.numeric#7288CA
constant.language.boolean, constant.language.null, constant.language.undefined#7288CA
constant, entity.name.constant, support.constant#7288CA
keyword, storage.type, storage.modifier, storage.type.function#7288CA
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#7288CA
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#989081
storage.type.class, storage.type.interface, storage.type.enum#7288CA
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#989081
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#D2B879
support.type.builtin, entity.name.type.primitive#D2B879
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E5E3DC
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#7288CA
variable.parameter, variable.parameter.function#E5E3DC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#D2B879
variable, meta.definition.variable, variable.other.readwrite#E5E3DC
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#7288CA
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#989081
entity.other.attribute-name, entity.other.attribute-name.html#D2B879
support.class.component, entity.name.tag.template.value#7288CA
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#59A679
entity.other.attribute-name.class.css, entity.other.attribute-name.class#7288CA
entity.other.attribute-name.id.css, entity.other.attribute-name.id#7288CA
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#D2B879
markup.heading#7288CAbold
markup.boldbold
markup.italicitalic
markup.quote#E5E3DC
markup.inline.raw, markup.fenced_code#D2B879
invalid, invalid.illegal#FF6B6B