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#1F1F1F
  • activityBar.border#2E2E2E
  • activityBar.foreground#D586A0
  • activityBarBadge.background#D586A0
  • activityBarBadge.foreground#171717
  • badge.background#D586A0
  • badge.foreground#171717
  • button.background#D586A0
  • button.foreground#171717
  • button.hoverBackground#D586A0
  • dropdown.background#242424
  • dropdown.border#424242
  • dropdown.foreground#FFFFFF
  • editor.background#0F0F0F
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1F1F1F99
  • editor.selectionBackground#3E282F80
  • editorBracketMatch.background#3E282F55
  • editorBracketMatch.border#D586A0
  • editorCursor.foreground#D586A0
  • editorGroupHeader.tabsBackground#1F1F1F
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#2E2E2E88
  • editorLineNumber.activeForeground#ADADAD
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#2E2E2E66
  • focusBorder#424242
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#C95E70
  • gitDecoration.modifiedResourceForeground#AF986A
  • gitDecoration.untrackedResourceForeground#699680
  • input.background#242424
  • input.border#424242
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D586A0
  • list.activeSelectionBackground#3E282F
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D586A0
  • list.hoverBackground#212121
  • list.inactiveSelectionBackground#1F2023
  • minimap.selectionHighlight#3E282FAA
  • panel.background#1F1F1F
  • panel.border#2E2E2E
  • peekView.border#424242
  • peekViewEditor.background#1C1C1C
  • peekViewTitle.background#1F1F1F
  • scrollbarSlider.activeBackground#D586A0AA
  • scrollbarSlider.background#42424266
  • scrollbarSlider.hoverBackground#42424299
  • sideBar.background#171717
  • sideBar.border#2E2E2E
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1F1F1F
  • statusBar.border#2E2E2E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0F0F0F
  • tab.activeForeground#FFFFFF
  • tab.border#2E2E2E
  • tab.inactiveBackground#1F2023
  • tab.inactiveForeground#ACB0B9
  • terminal.ansiBlack#0F0F0F
  • terminal.ansiBlue#ACB0B9
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#ADADAD
  • terminal.ansiMagenta#BA5E7D
  • terminal.ansiRed#D586A0
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#3F3A31
  • terminal.background#0F0F0F
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#05050555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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