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#eef6ff
  • activityBar.border#dbe3ef
  • activityBar.foreground#0b1220
  • activityBar.inactiveForeground#64748b
  • badge.background#0284c7
  • badge.foreground#ffffff
  • descriptionForeground#334155
  • dropdown.background#f3f8ff
  • dropdown.border#dbe3ef
  • dropdown.foreground#0b1220
  • editor.background#ffffff
  • editor.findMatchBackground#f59e0b45
  • editor.findMatchHighlightBackground#f59e0b28
  • editor.foreground#0b1220
  • editor.hoverHighlightBackground#0284c714
  • editor.inactiveSelectionBackground#0284c718
  • editor.lineHighlightBackground#0b122006
  • editor.selectionBackground#0284c724
  • editor.wordHighlightBackground#38bdf828
  • editor.wordHighlightStrongBackground#38bdf844
  • editorBracketMatch.background#0284c71a
  • editorBracketMatch.border#0284c75a
  • editorCursor.foreground#0284c7
  • editorGroupHeader.tabsBackground#eef6ff
  • editorIndentGuide.activeBackground1#94a3b8
  • editorIndentGuide.background1#dbe3ef
  • editorLineNumber.activeForeground#334155
  • editorLineNumber.foreground#a3b2c7
  • editorOverviewRuler.errorForeground#9f1239cc
  • editorOverviewRuler.infoForeground#1d4ed8cc
  • editorOverviewRuler.warningForeground#a16207cc
  • errorForeground#9f1239
  • focusBorder#0284c7
  • foreground#0b1220
  • gitDecoration.addedResourceForeground#15803d
  • gitDecoration.deletedResourceForeground#9f1239
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#1d4ed8
  • gitDecoration.untrackedResourceForeground#0284c7
  • input.background#f3f8ff
  • input.border#dbe3ef
  • input.foreground#0b1220
  • input.placeholderForeground#64748b
  • list.activeSelectionBackground#0284c724
  • list.activeSelectionForeground#0b1220
  • list.hoverBackground#0b122008
  • list.hoverForeground#0b1220
  • list.inactiveSelectionBackground#0b122006
  • notificationCenterHeader.background#eef6ff
  • notifications.background#f3f8ff
  • notifications.border#dbe3ef
  • notifications.foreground#0b1220
  • panel.background#ffffff
  • panel.border#dbe3ef
  • sideBar.background#eef6ff
  • sideBar.border#dbe3ef
  • sideBar.foreground#0b1220
  • sideBarTitle.foreground#0b1220
  • statusBar.background#eef6ff
  • statusBar.border#dbe3ef
  • statusBar.debuggingBackground#1d4ed8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#0b1220
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#0284c7
  • tab.activeForeground#0b1220
  • tab.border#dbe3ef
  • tab.inactiveBackground#eef6ff
  • tab.inactiveForeground#334155
  • terminal.ansiBlack#0b1220
  • terminal.ansiBlue#1d4ed8
  • terminal.ansiCyan#0284c7
  • terminal.ansiGreen#15803d
  • terminal.ansiMagenta#a21caf
  • terminal.ansiRed#9f1239
  • terminal.ansiWhite#334155
  • terminal.ansiYellow#a16207
  • terminal.background#ffffff
  • terminal.foreground#0b1220
  • terminalCursor.foreground#0284c7
  • titleBar.activeBackground#eef6ff
  • titleBar.activeForeground#0b1220
  • titleBar.inactiveBackground#eef6ff
  • titleBar.inactiveForeground#64748b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
string, punctuation.definition.string#15803d
string.template, punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#0284c7
constant.numeric#a16207
constant.language#a21caf
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#0284c7
keyword.operator, punctuation, meta.brace, meta.delimiter#334155
entity.name.function, support.function, meta.function-call, meta.method-call#1d4ed8
variable.parameter, meta.parameters, meta.function.parameters#0b1220
variable, meta.definition.variable, entity.name.variable#0b1220
variable.other.constant, entity.name.constant#a16207
entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum#3730a3
entity.name.type.parameter, meta.type.parameters, meta.type.annotation#0284c7
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#0284c7
variable.language.this, variable.language.super, variable.language.self#a21caf
variable.other.property, support.variable.property#4f46e5
entity.name.tag#0284c7
entity.other.attribute-name#3730a3
invalid, invalid.deprecated#9f1239underline
support.type.property-name.json, meta.object-literal.key.json string.quoted.double.json, meta.object.member.json string.quoted.double.json#4f46e5
meta.object-literal.value.json string.quoted.double.json, meta.array.literal.json string.quoted.double.json, string.quoted.double.json#15803d
constant.numeric.json#a16207
constant.language.boolean.json, constant.language.null.json, constant.language.json#a21caf
punctuation.support.type.property-name.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.array.json#334155
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#0284c7bold
markup.bold, punctuation.definition.bold#0b1220bold
markup.italic, punctuation.definition.italic#0b1220italic
markup.inline.raw, markup.inline.raw.string.markdown#15803d
markup.fenced_code.block, markup.raw.block#0b1220
markup.underline.link, meta.link.inline, meta.link.reference#1d4ed8underline
markup.inserted, diff.inserted, meta.diff.header.to-file#15803d
markup.deleted, diff.deleted, meta.diff.header.from-file#9f1239
markup.changed, diff.changed#a16207
comment.keyword.todo, comment.keyword.fixme, comment.keyword.note, keyword.other.todo, keyword.other.fixme, keyword.other.note#a16207bold
string.regexp, string.regexp keyword.other, string.regexp punctuation.definition.string, string.regexp punctuation.definition.group, string.regexp punctuation.definition.character-class, string.regexp constant.character.escape#0284c7