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#EEF1F2
  • activityBar.border#C7CED1
  • activityBar.foreground#35618D
  • activityBarBadge.background#35618D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#35618D
  • badge.foreground#FFFFFF
  • button.background#35618D
  • button.foreground#FFFFFF
  • button.hoverBackground#35618D
  • dropdown.background#FFFFFF
  • dropdown.border#C7CED1
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#EEF1F2CC
  • editor.selectionBackground#F1EADA66
  • editorBracketMatch.background#F1EADA55
  • editorBracketMatch.border#35618D
  • editorCursor.foreground#35618D
  • editorGroupHeader.tabsBackground#EEF1F2
  • editorIndentGuide.activeBackground#C7CED1
  • editorIndentGuide.background#C7CED188
  • editorLineNumber.activeForeground#8A632E
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#C7CED166
  • focusBorder#C7CED1
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A82F24
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#396A52
  • input.background#FFFFFF
  • input.border#C7CED1
  • input.foreground#000000
  • inputOption.activeBorder#35618D
  • list.activeSelectionBackground#F1EADA
  • list.activeSelectionForeground#000000
  • list.focusOutline#35618D
  • list.hoverBackground#FFFFFF
  • list.inactiveSelectionBackground#F1EADA
  • minimap.selectionHighlight#F1EADAAA
  • panel.background#EEF1F2
  • panel.border#C7CED1
  • peekView.border#C7CED1
  • peekViewEditor.background#FFFFFF
  • peekViewTitle.background#EEF1F2
  • scrollbarSlider.activeBackground#35618DAA
  • scrollbarSlider.background#C7CED166
  • scrollbarSlider.hoverBackground#C7CED199
  • sideBar.background#F6F8F9
  • sideBar.border#C7CED1
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EEF1F2
  • statusBar.border#C7CED1
  • statusBar.foreground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#000000
  • tab.border#C7CED1
  • tab.inactiveBackground#F1EADA
  • tab.inactiveForeground#8A632E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8A632E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#8A632E
  • terminal.ansiMagenta#35618D
  • terminal.ansiRed#35618D
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F1EADA
  • terminal.background#FFFFFF
  • terminal.foreground#000000
  • titleBar.activeBackground#EEF1F2
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F6F8F9
  • titleBar.inactiveForeground#000000
  • widget.shadow#6A798155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6A7981italic
string, constant.other.symbol, string.regexp, string.template#8A632E
constant.character.escape#35618D
constant.numeric#35618D
constant.language.boolean, constant.language.null, constant.language.undefined#35618D
constant, entity.name.constant, support.constant#35618D
keyword, storage.type, storage.modifier, storage.type.function#35618D
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#35618D
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6A7981
storage.type.class, storage.type.interface, storage.type.enum#35618D
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6A7981
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8A632E
support.type.builtin, entity.name.type.primitive#8A632E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#252E37
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#35618D
variable.parameter, variable.parameter.function#252E37
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8A632E
variable, meta.definition.variable, variable.other.readwrite#252E37
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#35618D
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6A7981
entity.other.attribute-name, entity.other.attribute-name.html#8A632E
support.class.component, entity.name.tag.template.value#35618D
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#396A52
entity.other.attribute-name.class.css, entity.other.attribute-name.class#35618D
entity.other.attribute-name.id.css, entity.other.attribute-name.id#35618D
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8A632E
markup.heading#35618Dbold
markup.boldbold
markup.italicitalic
markup.quote#252E37
markup.inline.raw, markup.fenced_code#8A632E
invalid, invalid.illegal#C22929