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.activeBorder#f2f2f2
  • activityBar.background#f2f2f2
  • activityBar.border#e3e1e1
  • activityBar.foreground#8f8c8c
  • activityBarBadge.background#3f8ffa
  • activityBarBadge.foreground#e0e0e0
  • badge.background#1b8cff00
  • badge.foreground#1b8cff
  • button.background#3f8ffa
  • editor.background#fff
  • editor.findMatchBackground#ffffff00
  • editor.findMatchHighlightBackground#fffb173b
  • editor.foreground#8f8c8c
  • editor.lineHighlightBorder#ffffff
  • editor.rangeHighlightBackground#fffb173b
  • editor.selectionBackground#0069d91c
  • editor.snippetFinalTabstopHighlightBackground#e092241c
  • editor.snippetTabstopHighlightBackground#e092241c
  • editorCursor.foreground#3f8ffa
  • editorError.foreground#ff6347
  • editorGutter.addedBackground#8bc34a
  • editorGutter.deletedBackground#ff6347
  • editorGutter.modifiedBackground#e09224
  • editorIndentGuide.activeBackground#3f8ffa
  • editorIndentGuide.background#e0e0e0
  • editorInlayHint.background#3f90fa25
  • editorLightBulb.foreground#e09224
  • editorLightBulbAutoFix.foreground#3f8ffa
  • editorLineNumber.activeForeground#b0b0b0
  • editorLineNumber.foreground#ececec
  • editorLink.activeForeground#1a7bfa
  • editorSuggestWidget.background#f6f6f6
  • editorSuggestWidget.border#bab5b5
  • editorSuggestWidget.foreground#676767
  • editorSuggestWidget.selectedBackground#0069d91c
  • editorUnnecessaryCode.opacity#000000ab
  • editorWarning.foreground#e09224
  • editorWidget.background#f6f6f6
  • editorWidget.border#bab5b5
  • editorWidget.foreground#676767
  • errorForeground#ff6347
  • extensionButton.prominentBackground#3f8ffa
  • extensionButton.prominentForeground#f6f6f6
  • extensionButton.prominentHoverBackground#1a7bfa
  • focusBorder#ff000000
  • gitDecoration.addedResourceForeground#676767
  • gitDecoration.conflictingResourceForeground#676767
  • gitDecoration.deletedResourceForeground#676767
  • gitDecoration.ignoredResourceForeground#676767
  • gitDecoration.modifiedResourceForeground#676767
  • gitDecoration.submoduleResourceForeground#676767
  • gitDecoration.untrackedResourceForeground#676767
  • list.activeSelectionBackground#3f8ffa
  • list.activeSelectionForeground#fff
  • list.errorForeground#ff6347
  • list.hoverBackground#f2f2f2
  • list.inactiveSelectionBackground#dddddd
  • list.warningForeground#e09224
  • minimap.findMatchHighlight#3f8ffa
  • minimap.selectionHighlight#3f8ffa
  • panel.background#f3f3f3
  • panel.border#bab5b5
  • panelTitle.activeBorder#3f8ffa
  • progressBar.background#1b8cff
  • scrollbarSlider.activeBackground#8f8c8c6b
  • scrollbarSlider.background#c0c0c06b
  • scrollbarSlider.hoverBackground#8f8c8c6b
  • sideBar.background#f2f2f2
  • sideBar.border#bab5b5
  • sideBar.foreground#676767
  • sideBarSectionHeader.background#fff
  • sideBarSectionHeader.border#e3e1e1
  • statusBar.background#1b8cff
  • statusBar.foreground#e0effc
  • terminal.ansiBlack#ff0000
  • terminal.ansiBlue#56b6c2
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#56b6c2
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#ff75B5
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc95
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#ff2c6d
  • terminal.ansiWhite#d0d0d0
  • terminal.ansiYellow#d19a66
  • terminal.background#282c34
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#f2f2f2
  • titleBar.border#e3e1e1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b0b0b0italic
comment.block.preprocessor#b0b0b0
comment.documentation, comment.block.documentation#b0b0b0
invalid.illegal#660000
keyword.operator#777777
keyword, storage#b460c6
storage.type, support.type#b460c6
meta.type support.type#8f8c8c
constant.language, support.constant, variable.language#fc6d24
variable, support.variable#f10520
entity.name.function, support.function#297dc2
meta.object.type entity.name.function#f10520
entity.name.type, entity.other.inherited-class, support.class#f10520
entity.name.tag support.class#fc6d24
entity.name.type.module#f10520
entity.name.type#297dc2
meta.type entity.name.type, meta.type entity.name.type.module#fc6d24
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#fc6d24
string#a1c659
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#8f8c8c
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8f8c8c
meta.object-literal.key#a1c659
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#fc6d24italic
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#297dc2
meta.property-value, meta.property-value constant.other, support.constant.property-value#a1c659
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