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.section—bold
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.important—bold
markup.changed#000000—
markup.deleted#000000—
markup.italic—italic
markup.error#660000—
markup.inserted#000000—
meta.link#4B83CD—
markup.output, markup.raw#777777—
markup.prompt#777777—
markup.heading#AA3731—
markup.bold—bold
markup.traceback#660000—
markup.underline—underline
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—
Layers Theme by Layers - VS Code Theme