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#e8e8e8
  • activityBar.activeBorder#000
  • activityBar.activeFocusBorder#444
  • activityBar.background#ddd
  • activityBar.border#000
  • activityBar.dropBorder#444
  • activityBar.foreground#444
  • activityBar.inactiveForeground#aaa
  • activityBarBadge.background#666
  • activityBarBadge.foreground#eee
  • badge.background#bbb
  • badge.foreground#222
  • breadcrumb.activeSelectionForeground#000
  • breadcrumb.background#e8e8e8
  • breadcrumb.focusForeground#000
  • breadcrumb.foreground#444
  • breadcrumbPicker.background#ddd
  • button.background#eee
  • button.border#000
  • button.foreground#444
  • button.hoverBackground#fff
  • checkbox.background#fff
  • checkbox.border#000
  • checkbox.foreground#444
  • disabledForeground#777
  • dropdown.background#fff
  • dropdown.border#000
  • dropdown.foreground#444
  • dropdown.listBackground#fff
  • editor.background#f2f2f2
  • editor.findMatchBackground#ff7b0040
  • editor.findMatchBorder#ff7b00a0
  • editor.findMatchHighlightBackground#ff7b0020
  • editor.findMatchHighlightBorder#ff7b0080
  • editor.findRangeHighlightBackground#ff7b0020
  • editor.foreground#444
  • editor.hoverHighlightBackground#d8d5cf
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#8888
  • editor.selectionBackground#0099ff30
  • editor.selectionHighlightBackground#0099ff20
  • editor.selectionHighlightBorder#0099ff60
  • editor.wordHighlightBackground#0001
  • editor.wordHighlightBorder#0008
  • editor.wordHighlightStrongBackground#0001
  • editor.wordHighlightStrongBorder#0008
  • editorBracketMatch.background#e8e8e8
  • editorBracketMatch.border#000
  • editorCursor.background#fff
  • editorCursor.foreground#320
  • editorError.foreground#e41507
  • editorGroup.border#000
  • editorGroup.dropBackground#8888
  • editorGroup.emptyBackground#eee
  • editorGroupHeader.border#000
  • editorGroupHeader.tabsBackground#ddd
  • editorGroupHeader.tabsBorder#000
  • editorGutter.addedBackground#57bd66
  • editorGutter.deletedBackground#e41507
  • editorGutter.foldingControlForeground#222
  • editorGutter.modifiedBackground#2981ca
  • editorIndentGuide.activeBackground#00000080
  • editorIndentGuide.background#00000010
  • editorLineNumber.activeForeground#888
  • editorLineNumber.foreground#ccc
  • editorLink.activeForeground#2981ca
  • editorOverviewRuler.findMatchForeground#ccc
  • editorSuggestWidget.selectedBackground#fff
  • editorWhitespace.foreground#ffffff80
  • editorWidget.background#eee
  • errorForeground#e41507
  • extensionButton.prominentBackground#ccc
  • extensionButton.prominentHoverBackground#ddd
  • focusBorder#888
  • foreground#444
  • icon.foreground#888
  • input.background#fff
  • input.border#000
  • input.foreground#444
  • list.activeSelectionBackground#eee
  • list.activeSelectionForeground#000000
  • list.focusBackground#eee
  • list.focusForeground#000000
  • list.highlightForeground#000000
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#ddd
  • list.inactiveSelectionBackground#ddd
  • list.inactiveSelectionForeground#000000
  • panel.background#e8e8e8
  • panel.border#000
  • quickInput.background#ccc
  • quickInput.foreground#000
  • quickInputList.focusBackground#f2f2f2
  • quickInputList.focusForeground#444
  • quickInputList.focusIconForeground#444
  • quickInputTitle.background#ccc
  • searchEditor.findMatchBackground#ff7b0040
  • searchEditor.findMatchBorder#ff7b00a0
  • sideBar.background#e8e8e8
  • sideBar.border#000
  • sideBar.dropBackground#eee
  • sideBar.foreground#444
  • sideBarSectionHeader.background#ddd
  • sideBarSectionHeader.border#000
  • sideBarSectionHeader.foreground#000
  • sideBarTitle.foreground#222
  • statusBar.background#ddd
  • statusBar.border#000
  • statusBar.debuggingBackground#ddd
  • statusBar.foreground#444
  • statusBar.noFolderBackground#ddd
  • tab.activeBackground#e8e8e8
  • tab.activeBorder#e8e8e8
  • tab.border#000
  • tab.inactiveBackground#ddd
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2981ca
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#4190F7
  • terminal.ansiBrightCyan#a3ffff
  • terminal.ansiBrightGreen#99e391
  • terminal.ansiBrightMagenta#d9b9f0
  • terminal.ansiBrightRed#FF675D
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffde82
  • terminal.ansiCyan#51d2ff
  • terminal.ansiGreen#57bd66
  • terminal.ansiMagenta#a464d1
  • terminal.ansiRed#e41507
  • terminal.ansiWhite#DDDDDD
  • terminal.ansiYellow#ffbd5e
  • terminal.background#e8e8e8
  • terminal.border#000
  • terminal.foreground#444
  • terminalCursor.background#ddd
  • terminalCursor.foreground#444
  • textLink.activeForeground#4190f7
  • textLink.foreground#2981ca
  • titleBar.activeBackground#ddd
  • titleBar.border#000
  • titleBar.inactiveBackground#ddd
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#329033italic
comment.block.preprocessor#265b27bold
comment.documentation, comment.block.documentation#448C27—
invalid.illegal#800000underline
keyword, storage#000bold
keyword.operator, keyword.symbol, keyword.control.preprocessor, keyword.other.colon, keyword.other.double-colon#e41507—
meta.pattern-match, meta.type-definition#e41507—
support.type, storage.type#000bold
entity.name.type, entity.other.inherited-class, support.class#2981cabold italic
entity.name.module, entity.name.namespace#222bold italic
constant.language, support.constant, variable.language#000italic
constant.other#222italic
variable, support.variable#666italic
entity.name.function, support.function#444italic
entity.name.exception#a00underline
entity.name.section—bold
constant.numeric, constant.character, constant#2981ca—
string#194E00—
constant.character.escape#2981cabold
string.regexp#194E00—
constant.other.symbol#000—
punctuation, comment.punctuation, meta.brace, meta.bracket, meta.paren, meta.paren-group#ec444f—
meta.attribute#888bold italic
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#aaa—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#e41507bold
entity.name.tag#000bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#666italic
constant.character.entity, punctuation.definition.entity#666italic
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#000bold italic
meta.property-name, support.type.property-name#444bold
meta.property-value, meta.property-value constant.other, support.constant.property-value#666italic
keyword.other.important#000bold
markup.changed#000000—
markup.deleted#000000—
markup.italic—italic
markup.error#660000—
markup.inserted#000000—
meta.link#2981caunderline
markup.output, markup.raw#777777—
markup.prompt#777777—
markup.heading#000bold
markup.bold—bold
markup.traceback#660000—
markup.strikethrough—strikethrough
markup.underline—underline
markup.quote#888italic
markup.list#2981ca—
markup.bold, markup.italic, markup.strikethrough, markup.underline#222—
markup.inline.raw#888
meta.diff.range, meta.diff.index, meta.separator#434343—
meta.diff.header.from-file#434343—
meta.diff.header.to-file#434343—