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#EEF2F6
  • activityBar.border#D4DBE2
  • activityBar.foreground#055AD1
  • activityBarBadge.background#055AD1
  • activityBarBadge.foreground#FFFFFF
  • badge.background#055AD1
  • badge.foreground#FFFFFF
  • button.background#055AD1
  • button.foreground#FFFFFF
  • button.hoverBackground#DAB10B
  • dropdown.background#FFFFFF
  • dropdown.border#B9C5D5
  • dropdown.foreground#123E7D
  • editor.background#FFFFFF
  • editor.foreground#104793
  • editor.lineHighlightBackground#EEF2F6CC
  • editor.selectionBackground#F3EBCE66
  • editorBracketMatch.background#F3EBCE55
  • editorBracketMatch.border#055AD1
  • editorCursor.foreground#055AD1
  • editorGroupHeader.tabsBackground#EEF2F6
  • editorIndentGuide.activeBackground#B9C5D5
  • editorIndentGuide.background#D4DBE288
  • editorLineNumber.activeForeground#1354AE
  • editorLineNumber.foreground#566881AA
  • editorWhitespace.foreground#D4DBE266
  • focusBorder#B9C5D5
  • foreground#104793
  • gitDecoration.deletedResourceForeground#C72929
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#0552BD
  • input.background#FFFFFF
  • input.border#B9C5D5
  • input.foreground#123E7D
  • inputOption.activeBorder#055AD1
  • list.activeSelectionBackground#F3EBCE
  • list.activeSelectionForeground#104793
  • list.focusOutline#055AD1
  • list.hoverBackground#FCFCFD
  • list.inactiveSelectionBackground#F9F3DC
  • minimap.selectionHighlight#F3EBCEAA
  • panel.background#EEF2F6
  • panel.border#D4DBE2
  • peekView.border#B9C5D5
  • peekViewEditor.background#EBF0F4
  • peekViewTitle.background#EEF2F6
  • scrollbarSlider.activeBackground#055AD1AA
  • scrollbarSlider.background#B9C5D566
  • scrollbarSlider.hoverBackground#B9C5D599
  • sideBar.background#F5F7FA
  • sideBar.border#D4DBE2
  • sideBar.foreground#123E7D
  • sideBarTitle.foreground#104793
  • statusBar.background#EEF2F6
  • statusBar.border#D4DBE2
  • statusBar.foreground#55657D
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#104793
  • tab.border#D4DBE2
  • tab.inactiveBackground#F9F3DC
  • tab.inactiveForeground#CBA50B
  • terminal.ansiBlack#104793
  • terminal.ansiBlue#CBA50B
  • terminal.ansiCyan#566881
  • terminal.ansiGreen#1354AE
  • terminal.ansiMagenta#F9CA10
  • terminal.ansiRed#055AD1
  • terminal.ansiWhite#104793
  • terminal.ansiYellow#F8E9AA
  • terminal.background#FFFFFF
  • terminal.foreground#104793
  • titleBar.activeBackground#EEF2F6
  • titleBar.activeForeground#104793
  • titleBar.inactiveBackground#F5F7FA
  • titleBar.inactiveForeground#566881
  • widget.shadow#36537D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6B7080italic
string, constant.other.symbol, string.regexp, string.template#0552BD
constant.character.escape#4A91E8
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#A27910
constant, entity.name.constant, support.constant#B62020
keyword, storage.type, storage.modifier, storage.type.function#C72929
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A72020
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#5B6371
storage.type.class, storage.type.interface, storage.type.enum#C72929
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7A8290
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#1D64C9
support.type.builtin, entity.name.type.primitive#2C79D8
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A5110
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D84141
variable.parameter, variable.parameter.function#3A4050
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#2A69C0
variable, meta.definition.variable, variable.other.readwrite#1B2132
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C72929
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#898F9F
entity.other.attribute-name, entity.other.attribute-name.html#1D64C9
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#0552BD
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A27910
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C72929
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#1D64C9
markup.heading#C72929bold
markup.boldbold
markup.italicitalic
markup.quote#1B2132
markup.inline.raw, markup.fenced_code#0552BD
invalid, invalid.illegal#C22929