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
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme