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#f0e0f8
  • activityBar.activeBorder#faf4fd
  • activityBar.background#f0e0f8
  • activityBar.foreground#8e06a0
  • activityBar.inactiveForeground#2b2b2bcc
  • activityBarBadge.background#e47ff8
  • activityBarBadge.foreground#000
  • badge.background#bc5be9
  • badge.foreground#fff
  • breadcrumb.background#faf4fd
  • breadcrumb.focusForeground#d1c083
  • breadcrumb.foreground#2b2b2b
  • button.background#790b70
  • button.foreground#ddd
  • button.hoverBackground#48084b
  • button.secondaryBackground#370b4b
  • button.secondaryForeground#ddd
  • button.secondaryHoverBackground#2e0336
  • editor.background#faf4fd
  • editor.findMatchBackground#e99494
  • editor.findMatchHighlightBackground#d27fda5e
  • editor.foreground#1a0017
  • editor.hoverHighlightBackground#d97febc2
  • editor.inactiveSelectionBackground#f27ffc9f
  • editor.lineHighlightBackground#e9c6fa
  • editor.lineHighlightBorder#f0e0f8
  • editor.rangeHighlightBackground#d1a2eca6
  • editor.rangeHighlightBorder#bb56f5
  • editor.selectionBackground#d9a1dbb7
  • editor.selectionHighlightBackground#7eccb8
  • editor.wordHighlightBackground#f1adf7ee
  • editor.wordHighlightStrongBackground#b37df0
  • editor.wordHighlightStrongBorder#f1ffb9
  • editorBracketHighlight.foreground1#ec2a4a
  • editorBracketHighlight.foreground2#8e9103
  • editorBracketHighlight.foreground3#0e84d3
  • editorBracketHighlight.foreground4#276007
  • editorBracketHighlight.foreground5#00b8a3
  • editorBracketHighlight.foreground6#dc195a
  • editorBracketMatch.background#f0e0f8
  • editorBracketMatch.border#f0e0f8
  • editorCursor.foreground#8d01ff
  • editorError.border#00b8a3
  • editorError.foreground#ff0000
  • editorGroupHeader.tabsBackground#faf4fd
  • editorGutter.background#faf4fd
  • editorHoverWidget.background#f0e0f8
  • editorHoverWidget.border#9b9b9b
  • editorHoverWidget.foreground#000
  • editorIndentGuide.activeBackground#e653eb
  • editorLineNumber.activeForeground#ff00b3
  • editorLineNumber.foreground#6223648c
  • editorOverviewRuler.border#faf4fd
  • editorSuggestWidget.background#fff2f8
  • editorSuggestWidget.border#faf4fd
  • editorSuggestWidget.focusHighlightForeground#f30655
  • editorSuggestWidget.foreground#c055a5
  • editorSuggestWidget.highlightForeground#660449
  • editorSuggestWidget.selectedBackground#eabff3
  • editorSuggestWidget.selectedForeground#450463
  • editorSuggestWidget.selectedIconForeground#d008e2
  • editorWidget.background#f0e0f8
  • editorWidget.foreground#000
  • editorWidget.resizeBorder#f5ad05
  • focusBorder#df5e5e
  • input.background#f0e0f8
  • input.border#ac3feb
  • input.foreground#62036b
  • input.placeholderForeground#3f282d
  • inputOption.activeBackground#882dac
  • inputOption.activeForeground#fff
  • list.activeSelectionBackground#a749dd
  • list.activeSelectionIconForeground#000
  • list.hoverBackground#f2b3fa
  • list.inactiveSelectionBackground#e1adeb
  • menu.background#f0e0f8
  • menu.border#faf4fd
  • menu.foreground#000
  • menu.selectionBackground#c697d4
  • minimapSlider.activeBackground#00000028
  • minimapSlider.background#0000001a
  • minimapSlider.hoverBackground#e693fb62
  • notifications.background#f0e0f8
  • notifications.border#faf4fd
  • notifications.foreground#000
  • panel.border#faf4fd
  • quickInput.background#f0e0f8
  • quickInput.foreground#000
  • scrollbarSlider.activeBackground#e38fd8
  • scrollbarSlider.background#ddb3f8
  • scrollbarSlider.hoverBackground#d27ce7
  • settings.checkboxBackground#d6aab4
  • settings.dropdownBackground#faf4fd
  • settings.textInputBackground#f0e0f8
  • sideBar.background#f0e0f8
  • sideBar.border#faf4fd
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#faf4fd
  • sideBarSectionHeader.border#faf4fd
  • sideBarSectionHeader.foreground#a504b4
  • sideBarTitle.foreground#000
  • statusBar.background#f0e0f8
  • statusBar.debuggingBackground#361e44
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#2b2b2b
  • statusBar.noFolderBackground#e7ffed
  • tab.activeBackground#faf4fd
  • tab.activeBorder#faf4fd
  • tab.activeBorderTop#af01ff
  • tab.activeForeground#360f0f
  • tab.border#f0e0f8
  • tab.hoverBackground#e1aceb
  • tab.hoverBorder#faf4fd
  • tab.inactiveBackground#f0e0f8
  • tab.inactiveForeground#2b2b2b
  • terminal.ansiBlack#1D2021
  • terminal.ansiBlue#00a1f9
  • terminal.ansiBrightBlack#665C54
  • terminal.ansiBrightBlue#0D6678
  • terminal.ansiBrightCyan#8BA59B
  • terminal.ansiBrightGreen#0687ff
  • terminal.ansiBrightMagenta#8F4673
  • terminal.ansiBrightRed#FB543F
  • terminal.ansiBrightWhite#FDF4C1
  • terminal.ansiBrightYellow#FFCC80
  • terminal.ansiCyan#8BA59B
  • terminal.ansiGreen#95C085
  • terminal.ansiMagenta#8F4673
  • terminal.ansiRed#FB543F
  • terminal.ansiWhite#A89984
  • terminal.ansiYellow#FAC03B
  • terminal.background#f0e0f8
  • terminal.foreground#cdcdcd
  • terminalCursor.foreground#686464
  • titleBar.activeBackground#f0e0f8
  • titleBar.activeForeground#000
  • titleBar.border#f0e0f8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#817f7fitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27—
invalid.illegal#660000—
keyword.operator#01a868—
keyword, storage#e60b33—
storage.type, support.type#a201ff—
constant.language, support.constant, variable.language#f1560d—
variable, support.variable#044c7cbold
entity.name.function, support.function#2bbd26italic bold
entity.name.type, entity.other.inherited-class, support.class#3e9d8dbold
entity.name.exception#660000—
entity.name.section—bold
constant.numeric, constant.character, constant#29a1ec—
string#016e53—
constant.character.escape#777777—
string.regexp#4B83CD—
constant.other.symbol#AB6526—
punctuation#0bb4ac—
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#136dd3—
entity.name.tag#048383italic bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#018f41italic
constant.character.entity, punctuation.definition.entity#7e3d05—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#0a9739italic bold
meta.property-name, support.type.property-name#011530—
meta.property-value, meta.property-value constant.other, support.constant.property-value#065972—
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—