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#34383D
  • activityBar.foreground#D43542
  • activityBarBadge.background#D43542
  • activityBarBadge.foreground#15191E
  • badge.background#D43542
  • badge.foreground#15191E
  • button.background#D43542
  • button.foreground#15191E
  • button.hoverBackground#509EA5
  • dropdown.background#1F2429
  • dropdown.border#435456
  • dropdown.foreground#E9EBEC
  • editor.background#111418
  • editor.foreground#DDE1E3
  • editor.lineHighlightBackground#1A1F2399
  • editor.selectionBackground#2E423880
  • editorBracketMatch.background#2E423855
  • editorBracketMatch.border#D43542
  • editorCursor.foreground#D43542
  • editorGroupHeader.tabsBackground#1A1F23
  • editorIndentGuide.activeBackground#435456
  • editorIndentGuide.background#34383D88
  • editorLineNumber.activeForeground#64AEB4
  • editorLineNumber.foreground#8B979CAA
  • editorWhitespace.foreground#34383D66
  • focusBorder#435456
  • foreground#DDE1E3
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#62A785
  • input.background#1F2429
  • input.border#435456
  • input.foreground#E9EBEC
  • inputOption.activeBorder#D43542
  • list.activeSelectionBackground#2E4238
  • list.activeSelectionForeground#DDE1E3
  • list.focusOutline#D43542
  • list.hoverBackground#202724
  • list.inactiveSelectionBackground#1D2521
  • minimap.selectionHighlight#2E4238AA
  • panel.background#1A1F23
  • panel.border#34383D
  • peekView.border#435456
  • peekViewEditor.background#181C20
  • peekViewTitle.background#1A1F23
  • scrollbarSlider.activeBackground#D43542AA
  • scrollbarSlider.background#43545666
  • scrollbarSlider.hoverBackground#43545699
  • sideBar.background#15191E
  • sideBar.border#34383D
  • sideBar.foreground#D8DCDE
  • sideBarTitle.foreground#DDE1E3
  • statusBar.background#1A1F23
  • statusBar.border#34383D
  • statusBar.foreground#858F93
  • tab.activeBackground#111418
  • tab.activeForeground#DDE1E3
  • tab.border#34383D
  • tab.inactiveBackground#1D2521
  • tab.inactiveForeground#70A98C
  • terminal.ansiBlack#111418
  • terminal.ansiBlue#70A98C
  • terminal.ansiCyan#8B979C
  • terminal.ansiGreen#64AEB4
  • terminal.ansiMagenta#56ABB3
  • terminal.ansiRed#D43542
  • terminal.ansiWhite#DDE1E3
  • terminal.ansiYellow#605424
  • terminal.background#111418
  • terminal.foreground#DDE1E3
  • titleBar.activeBackground#1A1F23
  • titleBar.activeForeground#DDE1E3
  • titleBar.inactiveBackground#15191E
  • titleBar.inactiveForeground#8B979C
  • widget.shadow#080A0C55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8B979Citalic
string, constant.other.symbol, string.regexp, string.template#79AF94
constant.character.escape#A8C7B8
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#86BCC1
constant, entity.name.constant, support.constant#A1CBCE
keyword, storage.type, storage.modifier, storage.type.function#DD5F6A
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E2838B
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#838C91
storage.type.class, storage.type.interface, storage.type.enum#DD5F6A
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#798286
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#97C0C4
support.type.builtin, entity.name.type.primitive#B0CCCF
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#E28D94
variable.parameter, variable.parameter.function#BEC3C5
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#97BAA8
variable, meta.definition.variable, variable.other.readwrite#E3E6E8
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DD5F6A
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8B979C
entity.other.attribute-name, entity.other.attribute-name.html#97C0C4
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#79AF94
entity.other.attribute-name.class.css, entity.other.attribute-name.class#86BCC1
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DD5F6A
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#97C0C4
markup.heading#DD5F6Abold
markup.boldbold
markup.italicitalic
markup.quote#E3E6E8
markup.inline.raw, markup.fenced_code#79AF94
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme