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.activeBackground#00b8ad
  • activityBar.background#00a69c
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#2f8af5
  • activityBarBadge.foreground#fff
  • badge.background#2f8af5
  • badge.foreground#fff
  • diffEditor.diagonalFill#ed6b4f77
  • diffEditor.insertedTextBackground#30b56515
  • diffEditor.removedTextBackground#ed6b4f30
  • editor.background#F4F6F8
  • editor.findMatchBackground#ffca65
  • editor.findMatchHighlightBackground#ffca6555
  • editor.foreground#00a69c
  • editor.selectionBackground#2f8af533
  • editor.selectionForeground#2f8af5
  • editor.wordHighlightBackground#2f8af577
  • editorCursor.background#00a69c
  • editorCursor.foreground#00a69c
  • editorLineNumber.activeForeground#30b565
  • editorWidget.background#F4F6F8
  • errorForeground#ed6b4f
  • focusBorder#00a69c
  • foreground#434e5b
  • gitDecoration.deletedResourceForeground#ed6b4f
  • gitDecoration.modifiedResourceForeground#f0af09
  • gitDecoration.untrackedResourceForeground#30b565
  • icon.foreground#434e5b
  • list.activeSelectionBackground#fff
  • list.activeSelectionForeground#232b34
  • list.activeSelectionIconForeground#fff
  • list.dropBackground#C8D0D8
  • list.errorForeground#ed6b4f
  • list.focusOutline#00b8ad
  • list.inactiveFocusBackground#D7DEE3
  • list.inactiveSelectionBackground#D7DEE3
  • minimap.background#EEF1F5
  • scrollbarSlider.background#C8D0D8bb
  • selection.background#2f8af555
  • sideBar.background#E8ECEF
  • sideBarSectionHeader.background#D7DEE3
  • statusBarItem.errorForeground#ff0000
  • statusBarItem.warningForeground#ff0000
  • terminal.foreground#434e5b
  • terminalCursor.background#00a69c
  • terminalCursor.foreground#00a69c
  • titleBar.activeBackground#D7DEE3
  • titleBar.activeForeground#434e5b
  • widget.shadow#434e5b22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A3B1BFitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#777777
keyword, storage#ed6b4fitalic bold
storage.type, support.type, constant.language, support.constant, variable.language#00b8aditalic bold
keyword.operator.new#ed6b4f
variable, support.variable#434e5bitalic
variable.parameter#e86161italic
entity.name.function, support.function#5451d6bold
entity.other.inherited-class, support.class#00b8adbold
entity.name.type#5451d6bold underline
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#2f8af5
string#30b565
constant.character.escape#ffca65bold
string.regexp#4B83CD
constant.other.symbol#f00
punctuation#00b8ad
keyword.operator#00b8ad
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#f00
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#00b8ad
entity.name.tag#00a69cbold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#5451d6italic
constant.character.entity, punctuation.definition.entity, meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#434e5bbold
meta.property-name, support.type.property-name#434e5b
meta.property-value, meta.property-value constant.other, support.constant.property-value#434e5b
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343