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#303332
  • activityBar.border#5d5f63
  • activityBar.foreground#eaf2ef
  • activityBarBadge.background#78afff
  • activityBarBadge.foreground#222524
  • badge.background#37493f
  • badge.foreground#ecf0ff
  • button.background#37493f
  • button.foreground#ecf0ff
  • button.hoverBackground#894f7a
  • diffEditor.border#5d5f63
  • diffEditor.insertedLineBackground#203a2f99
  • diffEditor.insertedTextBackground#20493f99
  • diffEditor.removedLineBackground#4a242a99
  • diffEditor.removedTextBackground#5e242f99
  • dropdown.background#222524
  • dropdown.border#5d5f63
  • dropdown.foreground#eaf2ef
  • editor.background#222524
  • editor.findMatchBackground#847020
  • editor.findMatchHighlightBackground#2f5f9f99
  • editor.findRangeHighlightBackground#42422399
  • editor.foreground#eaf2ef
  • editor.hoverHighlightBackground#894f7a99
  • editor.inactiveSelectionBackground#26486c99
  • editor.lineHighlightBackground#2f413f
  • editor.selectionBackground#543040
  • editor.selectionHighlightBackground#37493f99
  • editor.wordHighlightBackground#10442099
  • editor.wordHighlightStrongBackground#425d4a99
  • editorBracketMatch.background#3f6f5f
  • editorBracketMatch.border#f59acf
  • editorCursor.foreground#ef7fa8
  • editorError.foreground#ff7a5f
  • editorGutter.addedBackground#7fc87f
  • editorGutter.background#2b2e2d
  • editorGutter.deletedBackground#ff7a5f
  • editorGutter.modifiedBackground#e0b02f
  • editorHint.foreground#969faf
  • editorIndentGuide.activeBackground1#5e6160
  • editorIndentGuide.background1#5d5f63
  • editorInfo.foreground#7fc87f
  • editorLineNumber.activeForeground#eaf2ef
  • editorLineNumber.foreground#969faf
  • editorOverviewRuler.addedForeground#7fc87f
  • editorOverviewRuler.border#5d5f63
  • editorOverviewRuler.deletedForeground#ff7a5f
  • editorOverviewRuler.modifiedForeground#e0b02f
  • editorRuler.foreground#3e4140
  • editorWarning.foreground#e0b02f
  • editorWhitespace.foreground#5d5f63
  • gitDecoration.addedResourceForeground#7fc87f
  • gitDecoration.conflictingResourceForeground#fa7f88
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#969faf
  • gitDecoration.modifiedResourceForeground#dada90
  • gitDecoration.submoduleResourceForeground#8fcfbb
  • gitDecoration.untrackedResourceForeground#50cf89
  • input.background#222524
  • input.border#5d5f63
  • input.foreground#eaf2ef
  • input.placeholderForeground#969faf
  • inputOption.activeBackground#37493f
  • inputOption.activeBorder#78afff
  • inputValidation.errorBackground#551525
  • inputValidation.errorBorder#ff7a5f
  • inputValidation.infoBackground#104420
  • inputValidation.infoBorder#7fc87f
  • inputValidation.warningBackground#424223
  • inputValidation.warningBorder#e0b02f
  • list.activeSelectionBackground#37493f
  • list.activeSelectionForeground#ecf0ff
  • list.activeSelectionIconForeground#78afff
  • list.focusBackground#37493f
  • list.highlightForeground#78afff
  • list.hoverBackground#894f7a
  • list.inactiveSelectionBackground#26486c
  • notificationCenterHeader.background#3e4140
  • notificationCenterHeader.foreground#eaf2ef
  • panel.background#222524
  • panel.border#5d5f63
  • panelTitle.activeBorder#78afff
  • panelTitle.activeForeground#eaf2ef
  • panelTitle.inactiveForeground#969faf
  • progressBar.background#78afff
  • sideBar.background#303332
  • sideBar.border#5d5f63
  • sideBar.foreground#eaf2ef
  • sideBarSectionHeader.background#3e4140
  • sideBarSectionHeader.foreground#eaf2ef
  • sideBarTitle.foreground#eaf2ef
  • statusBar.background#35605d
  • statusBar.border#5d5f63
  • statusBar.debuggingBackground#b05fcf
  • statusBar.debuggingForeground#ecf0ff
  • statusBar.foreground#ecf0ff
  • statusBar.noFolderBackground#3e4140
  • statusBar.noFolderForeground#eaf2ef
  • tab.activeBackground#222524
  • tab.activeBorder#78afff
  • tab.activeForeground#eaf2ef
  • tab.border#5d5f63
  • tab.hoverBackground#2f413f
  • tab.hoverBorder#5d5f63
  • tab.inactiveBackground#303332
  • tab.inactiveForeground#969faf
  • tab.unfocusedActiveBackground#2b2e2d
  • tab.unfocusedActiveBorder#5d5f63
  • tab.unfocusedActiveForeground#969faf
  • terminal.ansiBlack#eaf2ef
  • terminal.ansiBlue#57aff6
  • terminal.ansiBrightBlack#969faf
  • terminal.ansiBrightBlue#78afff
  • terminal.ansiBrightCyan#7fcfdf
  • terminal.ansiBrightGreen#7fca5a
  • terminal.ansiBrightMagenta#fa90ea
  • terminal.ansiBrightRed#ff7a5f
  • terminal.ansiBrightWhite#222524
  • terminal.ansiBrightYellow#e0b02f
  • terminal.ansiCyan#6fcfd2
  • terminal.ansiGreen#7fc87f
  • terminal.ansiMagenta#f59acf
  • terminal.ansiRed#ff656a
  • terminal.ansiWhite#303332
  • terminal.ansiYellow#cac85f
  • terminal.background#222524
  • terminal.foreground#eaf2ef
  • terminalCursor.foreground#ef7fa8
  • titleBar.activeBackground#3e4140
  • titleBar.activeForeground#eaf2ef
  • titleBar.border#5d5f63
  • titleBar.inactiveBackground#2b2e2d
  • titleBar.inactiveForeground#969faf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#cac89fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#99bfcf
keyword, storage, storage.modifier#cfaaff
keyword.operator#969faf
storage.type, support.type, entity.name.type, entity.other.inherited-class#50cf89
entity.name.function, support.function, meta.function-call, variable.function#fa90ea
variable, support.variable, variable.other#60d5c2
constant, constant.numeric, constant.character, constant.language, support.constant#62cfef
string, constant.other.symbol#78afff
constant.character.escape, string.regexp#f59acf
punctuation#969faf
invalid, invalid.illegal#ff7a5f
markup.heading#ff656abold
markup.bold, markup.italic#78afffbold italic
meta.link, markup.underline.link#78afffunderline
markup.list, markup.quote#8fcfbb
markup.inline.raw#fa90ea
markup.inserted, meta.diff.header.to-file#a0e0a0
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#dada90
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme