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#1E2229
  • activityBar.border#3F4750
  • activityBar.foreground#C95E70
  • activityBarBadge.background#C95E70
  • activityBarBadge.foreground#161A22
  • badge.background#C95E70
  • badge.foreground#161A22
  • button.background#C95E70
  • button.foreground#161A22
  • button.hoverBackground#C95E70
  • dropdown.background#1E2229
  • dropdown.border#3F4750
  • dropdown.foreground#FFFFFF
  • editor.background#101319
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1E222999
  • editor.selectionBackground#273B4980
  • editorBracketMatch.background#273B4955
  • editorBracketMatch.border#C95E70
  • editorCursor.foreground#C95E70
  • editorGroupHeader.tabsBackground#1E2229
  • editorIndentGuide.activeBackground#3F4750
  • editorIndentGuide.background#3F475088
  • editorLineNumber.activeForeground#98BBCD
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3F475066
  • focusBorder#3F4750
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#CF596D
  • gitDecoration.modifiedResourceForeground#D7A542
  • gitDecoration.untrackedResourceForeground#60A97E
  • input.background#1E2229
  • input.border#3F4750
  • input.foreground#FFFFFF
  • inputOption.activeBorder#C95E70
  • list.activeSelectionBackground#273B49
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#C95E70
  • list.hoverBackground#1E2229
  • list.inactiveSelectionBackground#273B49
  • minimap.selectionHighlight#273B49AA
  • panel.background#1E2229
  • panel.border#3F4750
  • peekView.border#3F4750
  • peekViewEditor.background#1E2229
  • peekViewTitle.background#1E2229
  • scrollbarSlider.activeBackground#C95E70AA
  • scrollbarSlider.background#3F475066
  • scrollbarSlider.hoverBackground#3F475099
  • sideBar.background#161A22
  • sideBar.border#3F4750
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1E2229
  • statusBar.border#3F4750
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#101319
  • tab.activeForeground#FFFFFF
  • tab.border#3F4750
  • tab.inactiveBackground#273B49
  • tab.inactiveForeground#98BBCD
  • terminal.ansiBlack#101319
  • terminal.ansiBlue#98BBCD
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#98BBCD
  • terminal.ansiMagenta#C95E70
  • terminal.ansiRed#C95E70
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#273B49
  • terminal.background#101319
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1E2229
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#161A22
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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