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.background#efefef
  • activityBar.border#bfc4da
  • activityBar.foreground#202020
  • activityBarBadge.background#4250ef
  • activityBarBadge.foreground#ffffff
  • badge.background#bfe8ff
  • badge.foreground#151515
  • button.background#bfe8ff
  • button.foreground#151515
  • button.hoverBackground#aaeccf
  • diffEditor.border#bfc4da
  • diffEditor.insertedLineBackground#e5ffe599
  • diffEditor.insertedTextBackground#d0f0d099
  • diffEditor.removedLineBackground#ffe9e999
  • diffEditor.removedTextBackground#ffd8d599
  • dropdown.background#ffffff
  • dropdown.border#bfc4da
  • dropdown.foreground#202020
  • editor.background#ffffff
  • editor.findMatchBackground#fac200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffeabb99
  • editor.foreground#202020
  • editor.hoverHighlightBackground#aaeccf99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#e4efd8
  • editor.selectionBackground#bfefff
  • editor.selectionHighlightBackground#bfe8ff99
  • editor.wordHighlightBackground#d0efda99
  • editor.wordHighlightStrongBackground#ccbfff99
  • editorBracketMatch.background#dfa0f3
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#0033cc
  • editorError.foreground#e00033
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f9f9f9
  • editorGutter.deletedBackground#e00033
  • editorGutter.modifiedBackground#b6532f
  • editorHint.foreground#68759f
  • editorIndentGuide.activeBackground1#b3b3b3
  • editorIndentGuide.background1#bfc4da
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#202020
  • editorLineNumber.foreground#68759f
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#bfc4da
  • editorOverviewRuler.deletedForeground#e00033
  • editorOverviewRuler.modifiedForeground#b6532f
  • editorRuler.foreground#dbdbdb
  • editorWarning.foreground#b6532f
  • editorWhitespace.foreground#bfc4da
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#d51272
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#68759f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#397a70
  • gitDecoration.untrackedResourceForeground#008858
  • input.background#ffffff
  • input.border#bfc4da
  • input.foreground#202020
  • input.placeholderForeground#68759f
  • inputOption.activeBackground#bfe8ff
  • inputOption.activeBorder#4250ef
  • inputValidation.errorBackground#ffd5ea
  • inputValidation.errorBorder#e00033
  • inputValidation.infoBackground#d0efda
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#ffeabb
  • inputValidation.warningBorder#b6532f
  • list.activeSelectionBackground#bfe8ff
  • list.activeSelectionForeground#151515
  • list.activeSelectionIconForeground#4250ef
  • list.focusBackground#bfe8ff
  • list.highlightForeground#4250ef
  • list.hoverBackground#aaeccf
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#dbdbdb
  • notificationCenterHeader.foreground#202020
  • panel.background#ffffff
  • panel.border#bfc4da
  • panelTitle.activeBorder#4250ef
  • panelTitle.activeForeground#202020
  • panelTitle.inactiveForeground#68759f
  • progressBar.background#4250ef
  • sideBar.background#efefef
  • sideBar.border#bfc4da
  • sideBar.foreground#202020
  • sideBarSectionHeader.background#dbdbdb
  • sideBarSectionHeader.foreground#202020
  • sideBarTitle.foreground#202020
  • statusBar.background#b7c7ff
  • statusBar.border#bfc4da
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#151515
  • statusBar.foreground#151515
  • statusBar.noFolderBackground#dbdbdb
  • statusBar.noFolderForeground#202020
  • tab.activeBackground#ffffff
  • tab.activeBorder#4250ef
  • tab.activeForeground#202020
  • tab.border#bfc4da
  • tab.hoverBackground#e4efd8
  • tab.hoverBorder#bfc4da
  • tab.inactiveBackground#efefef
  • tab.inactiveForeground#68759f
  • tab.unfocusedActiveBackground#f9f9f9
  • tab.unfocusedActiveBorder#bfc4da
  • tab.unfocusedActiveForeground#68759f
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#3740cf
  • terminal.ansiBrightBlack#68759f
  • terminal.ansiBrightBlue#4250ef
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cf25aa
  • terminal.ansiBrightRed#e00033
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#b6532f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#d3303a
  • terminal.ansiWhite#efefef
  • terminal.ansiYellow#a45f22
  • terminal.background#ffffff
  • terminal.foreground#202020
  • terminalCursor.foreground#0033cc
  • titleBar.activeBackground#dbdbdb
  • titleBar.activeForeground#202020
  • titleBar.border#bfc4da
  • titleBar.inactiveBackground#f9f9f9
  • titleBar.inactiveForeground#68759f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a65f6aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#506fa0
keyword, storage, storage.modifier#6052cf
keyword.operator#68759f
storage.type, support.type, entity.name.type, entity.other.inherited-class#008858
entity.name.function, support.function, meta.function-call, variable.function#cf25aa
variable, support.variable, variable.other#1f77bb
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4250ef
constant.character.escape, string.regexp#ba35af
punctuation#68759f
invalid, invalid.illegal#e00033
markup.heading#d3303abold
markup.bold, markup.italic#4250efbold italic
meta.link, markup.underline.link#4250efunderline
markup.list, markup.quote#397a70
markup.inline.raw#cf25aa
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00