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#b7b7b7
  • activityBar.activeFocusBorder#444
  • activityBar.background#ddd
  • activityBar.border#b7b7b7
  • 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#f2f2f2
  • button.border#b7b7b7
  • button.foreground#444
  • button.hoverBackground#fff
  • checkbox.background#fff
  • checkbox.border#8880
  • checkbox.foreground#444
  • disabledForeground#777
  • dropdown.background#fff
  • dropdown.border#8880
  • 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#b7b7b7
  • editorGroup.dropBackground#8888
  • editorGroup.emptyBackground#eee
  • editorGroupHeader.border#b7b7b7
  • editorGroupHeader.tabsBackground#ddd
  • editorGroupHeader.tabsBorder#b7b7b7
  • 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#8880
  • 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#b7b7b7
  • 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#b7b7b7
  • sideBar.dropBackground#eee
  • sideBar.foreground#444
  • sideBarSectionHeader.background#ddd
  • sideBarSectionHeader.border#b7b7b7
  • sideBarSectionHeader.foreground#000
  • sideBarTitle.foreground#222
  • statusBar.background#ddd
  • statusBar.border#b7b7b7
  • statusBar.debuggingBackground#ddd
  • statusBar.foreground#444
  • statusBar.noFolderBackground#ddd
  • tab.activeBackground#e8e8e8
  • tab.activeBorder#e8e8e8
  • tab.border#b7b7b7
  • 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#b7b7b7
  • terminal.foreground#444
  • terminalCursor.background#ddd
  • terminalCursor.foreground#444
  • textLink.activeForeground#4190f7
  • textLink.foreground#2981ca
  • titleBar.activeBackground#ddd
  • titleBar.border#b7b7b7
  • titleBar.inactiveBackground#ddd
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#bbbitalic
comment.block.preprocessor#999bold
comment.documentation, comment.block.documentation#999—
invalid.illegal#800000underline
keyword, storage#000bold
keyword.operator, keyword.symbol, keyword.control.preprocessor, keyword.other.colon, keyword.other.double-colon#444—
meta.pattern-match, meta.type-definition#444—
support.type, storage.type#000bold
entity.name.type, entity.other.inherited-class, support.class#666bold italic
entity.name.module, entity.name.namespace#222bold italic
constant.language, support.constant, variable.language#111italic
constant.other#444italic
variable, support.variable#888italic
entity.name.function, support.function#666italic
entity.name.exception#a00underline
entity.name.section—bold
constant.numeric, constant.character, constant#000—
string#000—
constant.character.escape#444bold
string.regexp#000—
constant.other.symbol#000—
punctuation, comment.punctuation, meta.brace, meta.bracket, meta.paren, meta.paren-group#777—
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#888bold
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#000underline
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#666—
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—