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#040495
  • activityBar.border#111174
  • activityBar.foreground#FFFF57
  • activityBarBadge.background#FFFF57
  • activityBarBadge.foreground#0000A8
  • badge.background#FFFF57
  • badge.foreground#0000A8
  • button.background#FFFF57
  • button.foreground#0000A8
  • button.hoverBackground#FBEC51
  • dropdown.background#1818AA
  • dropdown.border#5EEDED
  • dropdown.foreground#F9FBFB
  • editor.background#060674
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#04049599
  • editor.selectionBackground#0000F580
  • editorBracketMatch.background#0000F555
  • editorBracketMatch.border#FFFF57
  • editorCursor.foreground#FFFF57
  • editorGroupHeader.tabsBackground#040495
  • editorIndentGuide.activeBackground#5EEDED
  • editorIndentGuide.background#11117488
  • editorLineNumber.activeForeground#FBFB6A
  • editorLineNumber.foreground#80FFFFAA
  • editorWhitespace.foreground#11117466
  • focusBorder#5EEDED
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#FFFF57
  • gitDecoration.untrackedResourceForeground#5CFFFF
  • input.background#1818AA
  • input.border#5EEDED
  • input.foreground#F9FBFB
  • inputOption.activeBorder#FFFF57
  • list.activeSelectionBackground#0000F5
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#FFFF57
  • list.hoverBackground#0A0A7B
  • list.inactiveSelectionBackground#0B0B84
  • minimap.selectionHighlight#0000F5AA
  • panel.background#040495
  • panel.border#111174
  • peekView.border#5EEDED
  • peekViewEditor.background#090986
  • peekViewTitle.background#040495
  • scrollbarSlider.activeBackground#FFFF57AA
  • scrollbarSlider.background#5EEDED66
  • scrollbarSlider.hoverBackground#5EEDED99
  • sideBar.background#0000A8
  • sideBar.border#111174
  • sideBar.foreground#FAFAFA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#040495
  • statusBar.border#111174
  • statusBar.foreground#D4D4D4
  • tab.activeBackground#060674
  • tab.activeForeground#FFFFFF
  • tab.border#111174
  • tab.inactiveBackground#0B0B84
  • tab.inactiveForeground#60FBFB
  • terminal.ansiBlack#060674
  • terminal.ansiBlue#60FBFB
  • terminal.ansiCyan#80FFFF
  • terminal.ansiGreen#FBFB6A
  • terminal.ansiMagenta#64F7EB
  • terminal.ansiRed#FFFF57
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FF66FF
  • terminal.background#060674
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#040495
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0000A8
  • titleBar.inactiveForeground#80FFFF
  • widget.shadow#00003D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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