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#f6f8fa
  • activityBar.activeBorder#f6f8fa
  • activityBar.background#f6f8fa
  • activityBar.border#f6f8fa
  • activityBar.foreground#242424
  • activityBar.inactiveForeground#71797c
  • activityBarBadge.background#24292f
  • activityBarBadge.foreground#f6f8fa
  • badge.background#24292f
  • badge.foreground#f6f8fa
  • banner.background#29393f
  • breadcrumb.background#f6f8fa
  • breadcrumb.focusForeground#d1c083
  • breadcrumb.foreground#2b2b2b
  • button.background#6251b9
  • button.border#8d85be
  • button.foreground#ddd
  • button.hoverBackground#99553a
  • button.secondaryBackground#0b394b
  • button.secondaryForeground#ddd
  • button.secondaryHoverBackground#360314
  • checkbox.background#ddf4ff
  • checkbox.border#bad8e4
  • checkbox.foreground#000
  • descriptionForeground#242424
  • dropdown.border#bad8e4
  • editor.background#f6f8fa
  • editor.findMatchBackground#d797ff
  • editor.findMatchHighlightBackground#dcdcfe
  • editor.findMatchHighlightBorder#d797ff
  • editor.foreground#00161a
  • editor.hoverHighlightBackground#d5cfff
  • editor.inactiveSelectionBackground#ddf3ff
  • editor.lineHighlightBackground#96a0f83a
  • editor.lineHighlightBorder#f1faff
  • editor.rangeHighlightBackground#c8cceee1
  • editor.selectionBackground#ddf3ff
  • editor.selectionHighlightBackground#7eccb8
  • editor.selectionHighlightBorder#7c9098
  • editor.wordHighlightBackground#adb5f7d2
  • editor.wordHighlightBorder#7c9098
  • editor.wordHighlightStrongBackground#b37df0
  • editor.wordHighlightStrongBorder#f1ffb9
  • editorBracketHighlight.foreground1#00b8a3
  • editorBracketHighlight.foreground2#7fa3e7
  • editorBracketHighlight.foreground3#0e84d3
  • editorBracketHighlight.foreground4#8e9103
  • editorBracketHighlight.foreground5#276007
  • editorBracketHighlight.foreground6#dc195a
  • editorBracketMatch.background#e2e5ff
  • editorBracketMatch.border#e2e5ff
  • editorCursor.foreground#6e71ff
  • editorError.background#f8baba
  • editorError.border#ff0000
  • editorError.foreground#ff0000
  • editorGroup.border#f6f8fa
  • editorGroupHeader.tabsBackground#ddf4ff
  • editorGroupHeader.tabsBorder#f6f8fa
  • editorGutter.background#f6f8fa
  • editorHoverWidget.background#e2e5ff
  • editorHoverWidget.border#9b9b9b
  • editorHoverWidget.foreground#000
  • editorIndentGuide.activeBackground#907fe0
  • editorIndentGuide.background#7a9ff017
  • editorInfo.border#5e479e
  • editorLineNumber.activeForeground#8377f7
  • editorLineNumber.foreground#24236469
  • editorOverviewRuler.border#f6f8fa
  • editorOverviewRuler.findMatchForeground#6494db
  • editorSuggestWidget.background#f6f8fa
  • editorSuggestWidget.border#b8c7f7
  • editorSuggestWidget.focusHighlightForeground#8006f3
  • editorSuggestWidget.foreground#242424
  • editorSuggestWidget.highlightForeground#4c5be4
  • editorSuggestWidget.selectedBackground#96a0f880
  • editorSuggestWidget.selectedForeground#d6208a
  • editorSuggestWidget.selectedIconForeground#026380
  • editorWidget.background#ddf4ff
  • editorWidget.border#bad8e4
  • editorWidget.foreground#000
  • editorWidget.resizeBorder#f5ad05
  • focusBorder#b9e8ff
  • foreground#242424
  • icon.foreground#242424
  • input.background#fdfeff
  • input.border#6f62ad
  • input.foreground#000
  • input.placeholderForeground#242424
  • inputOption.activeBackground#0084ff
  • inputOption.activeForeground#f6f8fa
  • list.activeSelectionBackground#8694ff
  • list.activeSelectionIconForeground#000
  • list.deemphasizedForeground#cdcdcd
  • list.hoverBackground#ddf4ff
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#ddf4ff
  • list.inactiveSelectionForeground#242424
  • list.inactiveSelectionIconForeground#242424
  • menu.background#f6f8fa
  • menu.border#dcf2fa
  • menu.foreground#000
  • menu.selectionBackground#24292f
  • menu.selectionBorder#d5cfff
  • menu.selectionForeground#fff
  • menu.separatorBackground#d5cfff
  • menubar.selectionBackground#ddf4ff
  • menubar.selectionForeground#242424
  • minimapSlider.activeBackground#00000028
  • minimapSlider.background#0000001a
  • minimapSlider.hoverBackground#e2e5ffa1
  • notifications.background#f6f8fa
  • notifications.border#f6f8fa
  • notifications.foreground#000
  • panel.background#f6f8fa
  • panel.border#f6f8fa
  • panelTitle.activeBorder#242424
  • panelTitle.activeForeground#000
  • panelTitle.inactiveForeground#242424
  • quickInput.background#f6f8fa
  • quickInput.foreground#000
  • quickInputList.focusBackground#7095ff
  • quickInputList.focusForeground#f6f8fa
  • quickInputList.focusIconForeground#242424
  • scrollbarSlider.activeBackground#cdb7f5
  • scrollbarSlider.background#d4f2ff
  • scrollbarSlider.hoverBackground#7cb7e7c5
  • settings.checkboxBackground#d5f2ff
  • settings.checkboxBorder#c4eafc
  • settings.checkboxForeground#b7d8d8
  • settings.dropdownBackground#f6f8fa
  • settings.dropdownBorder#c4eafc
  • settings.dropdownForeground#000
  • settings.focusedRowBackground#f0e8ff
  • settings.focusedRowBorder#c4eafc
  • settings.headerBorder#c4eafc
  • settings.headerForeground#242424
  • settings.modifiedItemIndicator#ddf4ff
  • settings.numberInputBackground#ddf4ff
  • settings.numberInputBorder#c4eafc
  • settings.numberInputForeground#000
  • settings.rowHoverBackground#ddf4ff
  • settings.sashBorder#c4eafc
  • settings.textInputBackground#ddf4ff
  • settings.textInputBorder#c4eafc
  • settings.textInputForeground#000
  • sideBar.background#f6f8fa
  • sideBar.border#f6f8fa
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#ddf4ff
  • sideBarSectionHeader.foreground#242424
  • sideBarTitle.foreground#000
  • statusBar.background#24292f
  • statusBar.debuggingBackground#2f242e
  • statusBar.debuggingForeground#f6f8fa
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#ddf4ff
  • statusBarItem.hoverBackground#d5cfff
  • statusBarItem.remoteBackground#213547
  • statusBarItem.remoteForeground#f6f8fa
  • tab.activeBackground#f6f8fa
  • tab.activeBorder#ddf4ff
  • tab.activeBorderTop#24292f
  • tab.activeForeground#242424
  • tab.border#ddf4ff
  • tab.hoverBackground#f6f8fa
  • tab.hoverBorder#babbff
  • tab.hoverForeground#000
  • tab.inactiveBackground#ddf4ff
  • tab.inactiveForeground#2b2b2b
  • tab.unfocusedActiveBorder#242424
  • tab.unfocusedActiveBorderTop#f6f8fa
  • tab.unfocusedActiveForeground#f3f5f8
  • tab.unfocusedHoverBorder#7c9098
  • tab.unfocusedInactiveBackground#ddf4ff
  • tab.unfocusedInactiveForeground#242424
  • 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#ddf4ff
  • terminal.findMatchBackground#8694ff
  • terminal.findMatchHighlightBackground#ddf4ff
  • terminal.foreground#242424
  • terminal.selectionBackground#ddf4ff
  • terminal.selectionForeground#000
  • terminalCursor.background#9486ee
  • terminalCursor.foreground#6e71ff
  • terminalOverviewRuler.cursorForeground#f6f8fa
  • titleBar.activeBackground#f6f8fa
  • titleBar.activeForeground#000
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#242424
  • tree.indentGuidesStroke#242424
  • widget.shadow#ddf4ff

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#e06b81—
storage.type, support.type#a201ff—
constant.language, support.constant, variable.language#cc764e—
variable, support.variable#213547bold
entity.name.function, support.function#bd8126italic bold
entity.name.type, entity.other.inherited-class, support.class#3e9d8dbold
entity.name.exception#660000—
entity.name.section—bold
constant.numeric, constant.character, constant#bd34fe—
string#016e53—
constant.character.escape#777777—
string.regexp#4B83CD—
constant.other.symbol#AB6526—
punctuation#00201f—
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#03668d—
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—