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#1A1F23
  • activityBar.border#363D45
  • activityBar.foreground#72ADCA
  • activityBarBadge.background#72ADCA
  • activityBarBadge.foreground#12171C
  • badge.background#72ADCA
  • badge.foreground#12171C
  • button.background#72ADCA
  • button.foreground#12171C
  • button.hoverBackground#72ADCA
  • dropdown.background#1A1F23
  • dropdown.border#363D45
  • dropdown.foreground#FFFFFF
  • editor.background#0C0F13
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1A1F2399
  • editor.selectionBackground#3E331E80
  • editorBracketMatch.background#3E331E55
  • editorBracketMatch.border#72ADCA
  • editorCursor.foreground#72ADCA
  • editorGroupHeader.tabsBackground#1A1F23
  • editorIndentGuide.activeBackground#363D45
  • editorIndentGuide.background#363D4588
  • editorLineNumber.activeForeground#D2B879
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#363D4566
  • focusBorder#363D45
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D15347
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#5CA380
  • input.background#1A1F23
  • input.border#363D45
  • input.foreground#FFFFFF
  • inputOption.activeBorder#72ADCA
  • list.activeSelectionBackground#3E331E
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#72ADCA
  • list.hoverBackground#1A1F23
  • list.inactiveSelectionBackground#3E331E
  • minimap.selectionHighlight#3E331EAA
  • panel.background#1A1F23
  • panel.border#363D45
  • peekView.border#363D45
  • peekViewEditor.background#1A1F23
  • peekViewTitle.background#1A1F23
  • scrollbarSlider.activeBackground#72ADCAAA
  • scrollbarSlider.background#363D4566
  • scrollbarSlider.hoverBackground#363D4599
  • sideBar.background#12171C
  • sideBar.border#363D45
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1A1F23
  • statusBar.border#363D45
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0C0F13
  • tab.activeForeground#FFFFFF
  • tab.border#363D45
  • tab.inactiveBackground#3E331E
  • tab.inactiveForeground#D2B879
  • terminal.ansiBlack#0C0F13
  • terminal.ansiBlue#D2B879
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#D2B879
  • terminal.ansiMagenta#72ADCA
  • terminal.ansiRed#72ADCA
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#3E331E
  • terminal.background#0C0F13
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1A1F23
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#12171C
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#819298italic
string, constant.other.symbol, string.regexp, string.template#D2B879
constant.character.escape#72ADCA
constant.numeric#72ADCA
constant.language.boolean, constant.language.null, constant.language.undefined#72ADCA
constant, entity.name.constant, support.constant#72ADCA
keyword, storage.type, storage.modifier, storage.type.function#72ADCA
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#72ADCA
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#819298
storage.type.class, storage.type.interface, storage.type.enum#72ADCA
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#819298
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#DDE2E4
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#72ADCA
variable.parameter, variable.parameter.function#DDE2E4
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#DDE2E4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#72ADCA
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#819298
entity.other.attribute-name, entity.other.attribute-name.html#D2B879
support.class.component, entity.name.tag.template.value#72ADCA
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5CA380
entity.other.attribute-name.class.css, entity.other.attribute-name.class#72ADCA
entity.other.attribute-name.id.css, entity.other.attribute-name.id#72ADCA
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#D2B879
markup.heading#72ADCAbold
markup.boldbold
markup.italicitalic
markup.quote#DDE2E4
markup.inline.raw, markup.fenced_code#D2B879
invalid, invalid.illegal#FF6B6B