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#1B2128
  • activityBar.border#2E3238
  • activityBar.foreground#44A1E4
  • activityBarBadge.background#44A1E4
  • activityBarBadge.foreground#14191F
  • badge.background#44A1E4
  • badge.foreground#14191F
  • button.background#44A1E4
  • button.foreground#14191F
  • button.hoverBackground#44A1E4
  • dropdown.background#1F262D
  • dropdown.border#3B4754
  • dropdown.foreground#FFFFFF
  • editor.background#0E1116
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1B212899
  • editor.selectionBackground#22384F80
  • editorBracketMatch.background#22384F55
  • editorBracketMatch.border#44A1E4
  • editorCursor.foreground#44A1E4
  • editorGroupHeader.tabsBackground#1B2128
  • editorIndentGuide.activeBackground#3B4754
  • editorIndentGuide.background#2E323888
  • editorLineNumber.activeForeground#87AC6C
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#2E323866
  • focusBorder#3B4754
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#E6574C
  • gitDecoration.modifiedResourceForeground#E28736
  • gitDecoration.untrackedResourceForeground#4DB380
  • input.background#1F262D
  • input.border#3B4754
  • input.foreground#FFFFFF
  • inputOption.activeBorder#44A1E4
  • list.activeSelectionBackground#22384F
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#44A1E4
  • list.hoverBackground#21241E
  • list.inactiveSelectionBackground#23291F
  • minimap.selectionHighlight#22384FAA
  • panel.background#1B2128
  • panel.border#2E3238
  • peekView.border#3B4754
  • peekViewEditor.background#191E24
  • peekViewTitle.background#1B2128
  • scrollbarSlider.activeBackground#44A1E4AA
  • scrollbarSlider.background#3B475466
  • scrollbarSlider.hoverBackground#3B475499
  • sideBar.background#14191F
  • sideBar.border#2E3238
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1B2128
  • statusBar.border#2E3238
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1116
  • tab.activeForeground#FFFFFF
  • tab.border#2E3238
  • tab.inactiveBackground#23291F
  • tab.inactiveForeground#8EB96E
  • terminal.ansiBlack#0E1116
  • terminal.ansiBlue#8EB96E
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#87AC6C
  • terminal.ansiMagenta#E77E23
  • terminal.ansiRed#44A1E4
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#874E1D
  • terminal.background#0E1116
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1B2128
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14191F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#05070A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#A7ADB4italic
string, constant.other.symbol, string.regexp, string.template#8EB96E
constant.character.escape#E77E23
constant.numeric#44A1E4
constant.language.boolean, constant.language.null, constant.language.undefined#44A1E4
constant, entity.name.constant, support.constant#E29A5A
keyword, storage.type, storage.modifier, storage.type.function#44A1E4
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#E29A5A
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#A7ADB4
storage.type.class, storage.type.interface, storage.type.enum#44A1E4
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#A7ADB4
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#87AC6C
support.type.builtin, entity.name.type.primitive#8EB96E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E8EBEE
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#44A1E4
variable.parameter, variable.parameter.function#E8EBEE
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#87AC6C
variable, meta.definition.variable, variable.other.readwrite#E8EBEE
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#44A1E4
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#A7ADB4
entity.other.attribute-name, entity.other.attribute-name.html#8EB96E
support.class.component, entity.name.tag.template.value#44A1E4
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4DB380
entity.other.attribute-name.class.css, entity.other.attribute-name.class#44A1E4
entity.other.attribute-name.id.css, entity.other.attribute-name.id#44A1E4
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8EB96E
markup.heading#44A1E4bold
markup.boldbold
markup.italicitalic
markup.quote#D7DBE0
markup.inline.raw, markup.fenced_code#8EB96E
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme