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#191C24
  • activityBar.border#32353E
  • activityBar.foreground#E23645
  • activityBarBadge.background#E23645
  • activityBarBadge.foreground#14171F
  • badge.background#E23645
  • badge.foreground#14171F
  • button.background#E23645
  • button.foreground#14171F
  • button.hoverBackground#5980CF
  • dropdown.background#1E2129
  • dropdown.border#435270
  • dropdown.foreground#F1F0EF
  • editor.background#101218
  • editor.foreground#E8E6E3
  • editor.lineHighlightBackground#191C2499
  • editor.selectionBackground#53282B80
  • editorBracketMatch.background#53282B55
  • editorBracketMatch.border#E23645
  • editorCursor.foreground#E23645
  • editorGroupHeader.tabsBackground#191C24
  • editorIndentGuide.activeBackground#435270
  • editorIndentGuide.background#32353E88
  • editorLineNumber.activeForeground#E2B736
  • editorLineNumber.foreground#818DA7AA
  • editorWhitespace.foreground#32353E66
  • focusBorder#435270
  • foreground#E8E6E3
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5A8CE2
  • input.background#1E2129
  • input.border#435270
  • input.foreground#F1F0EF
  • inputOption.activeBorder#E23645
  • list.activeSelectionBackground#53282B
  • list.activeSelectionForeground#E8E6E3
  • list.focusOutline#E23645
  • list.hoverBackground#1F2228
  • list.inactiveSelectionBackground#1D1F26
  • minimap.selectionHighlight#53282BAA
  • panel.background#191C24
  • panel.border#32353E
  • peekView.border#435270
  • peekViewEditor.background#181A21
  • peekViewTitle.background#191C24
  • scrollbarSlider.activeBackground#E23645AA
  • scrollbarSlider.background#43527066
  • scrollbarSlider.hoverBackground#43527099
  • sideBar.background#14171F
  • sideBar.border#32353E
  • sideBar.foreground#E2E1DF
  • sideBarTitle.foreground#E8E6E3
  • statusBar.background#191C24
  • statusBar.border#32353E
  • statusBar.foreground#838995
  • tab.activeBackground#101218
  • tab.activeForeground#E8E6E3
  • tab.border#32353E
  • tab.inactiveBackground#1D1F26
  • tab.inactiveForeground#EABF3E
  • terminal.ansiBlack#101218
  • terminal.ansiBlue#EABF3E
  • terminal.ansiCyan#818DA7
  • terminal.ansiGreen#E2B736
  • terminal.ansiMagenta#EDB91D
  • terminal.ansiRed#E23645
  • terminal.ansiWhite#E8E6E3
  • terminal.ansiYellow#725D1D
  • terminal.background#101218
  • terminal.foreground#E8E6E3
  • titleBar.activeBackground#191C24
  • titleBar.activeForeground#E8E6E3
  • titleBar.inactiveBackground#14171F
  • titleBar.inactiveForeground#818DA7
  • widget.shadow#07090D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#898F9Fitalic
string, constant.other.symbol, string.regexp, string.template#7595D7
constant.character.escape#F3D068
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#EDC85A
constant, entity.name.constant, support.constant#E68991
keyword, storage.type, storage.modifier, storage.type.function#E8737C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#EE8B93
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#808593
storage.type.class, storage.type.interface, storage.type.enum#E8737C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#777B88
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#85A0D6
support.type.builtin, entity.name.type.primitive#9CB4E2
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#EA868E
variable.parameter, variable.parameter.function#C5C3BF
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#819BCF
variable, meta.definition.variable, variable.other.readwrite#E7E6E4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E8737C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#85A0D6
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#7595D7
entity.other.attribute-name.class.css, entity.other.attribute-name.class#EDC85A
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E8737C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#85A0D6
markup.heading#E8737Cbold
markup.boldbold
markup.italicitalic
markup.quote#E7E6E4
markup.inline.raw, markup.fenced_code#7595D7
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme