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#282026
  • activityBar.border#555564
  • activityBar.foreground#dfd0d5
  • activityBarBadge.background#6a88ff
  • activityBarBadge.foreground#15050f
  • badge.background#441824
  • badge.foreground#ffffff
  • button.background#441824
  • button.foreground#ffffff
  • button.hoverBackground#00405f
  • diffEditor.border#555564
  • diffEditor.insertedLineBackground#001f3899
  • diffEditor.insertedTextBackground#002d3f99
  • diffEditor.removedLineBackground#37040f99
  • diffEditor.removedTextBackground#4d091f99
  • dropdown.background#15050f
  • dropdown.border#555564
  • dropdown.foreground#dfd0d5
  • editor.background#15050f
  • editor.findMatchBackground#950f4f
  • editor.findMatchHighlightBackground#165f7099
  • editor.findRangeHighlightBackground#40173d99
  • editor.foreground#dfd0d5
  • editor.hoverHighlightBackground#00405f99
  • editor.inactiveSelectionBackground#22436099
  • editor.lineHighlightBackground#3f1515
  • editor.selectionBackground#293140
  • editor.selectionHighlightBackground#44182499
  • editor.wordHighlightBackground#00354f99
  • editor.wordHighlightStrongBackground#5e3e5b99
  • editorBracketMatch.background#2f5f7a
  • editorBracketMatch.border#b0648f
  • editorCursor.foreground#fd3333
  • editorError.foreground#df4f4f
  • editorGutter.addedBackground#2fa526
  • editorGutter.background#1a1517
  • editorGutter.deletedBackground#df4f4f
  • editorGutter.modifiedBackground#d0730f
  • editorHint.foreground#908890
  • editorIndentGuide.activeBackground1#554f4f
  • editorIndentGuide.background1#555564
  • editorInfo.foreground#2fa526
  • editorLineNumber.activeForeground#dfd0d5
  • editorLineNumber.foreground#908890
  • editorOverviewRuler.addedForeground#2fa526
  • editorOverviewRuler.border#555564
  • editorOverviewRuler.deletedForeground#df4f4f
  • editorOverviewRuler.modifiedForeground#d0730f
  • editorRuler.foreground#352f2f
  • editorWarning.foreground#d0730f
  • editorWhitespace.foreground#555564
  • gitDecoration.addedResourceForeground#2fa526
  • gitDecoration.conflictingResourceForeground#d24f7f
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#908890
  • gitDecoration.modifiedResourceForeground#e3cfff
  • gitDecoration.submoduleResourceForeground#afdaef
  • gitDecoration.untrackedResourceForeground#00b066
  • input.background#15050f
  • input.border#555564
  • input.foreground#dfd0d5
  • input.placeholderForeground#908890
  • inputOption.activeBackground#441824
  • inputOption.activeBorder#6a88ff
  • inputValidation.errorBackground#451212
  • inputValidation.errorBorder#df4f4f
  • inputValidation.infoBackground#00354f
  • inputValidation.infoBorder#2fa526
  • inputValidation.warningBackground#40173d
  • inputValidation.warningBorder#d0730f
  • list.activeSelectionBackground#441824
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#6a88ff
  • list.focusBackground#441824
  • list.highlightForeground#6a88ff
  • list.hoverBackground#00405f
  • list.inactiveSelectionBackground#224360
  • notificationCenterHeader.background#352f2f
  • notificationCenterHeader.foreground#dfd0d5
  • panel.background#15050f
  • panel.border#555564
  • panelTitle.activeBorder#6a88ff
  • panelTitle.activeForeground#dfd0d5
  • panelTitle.inactiveForeground#908890
  • progressBar.background#6a88ff
  • sideBar.background#282026
  • sideBar.border#555564
  • sideBar.foreground#dfd0d5
  • sideBarSectionHeader.background#352f2f
  • sideBarSectionHeader.foreground#dfd0d5
  • sideBarTitle.foreground#dfd0d5
  • statusBar.background#671822
  • statusBar.border#555564
  • statusBar.debuggingBackground#a04f9f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#352f2f
  • statusBar.noFolderForeground#dfd0d5
  • tab.activeBackground#15050f
  • tab.activeBorder#6a88ff
  • tab.activeForeground#dfd0d5
  • tab.border#555564
  • tab.hoverBackground#3f1515
  • tab.hoverBorder#555564
  • tab.inactiveBackground#282026
  • tab.inactiveForeground#908890
  • tab.unfocusedActiveBackground#1a1517
  • tab.unfocusedActiveBorder#555564
  • tab.unfocusedActiveForeground#908890
  • terminal.ansiBlack#dfd0d5
  • terminal.ansiBlue#379cf6
  • terminal.ansiBrightBlack#908890
  • terminal.ansiBrightBlue#6a88ff
  • terminal.ansiBrightCyan#3f9aaf
  • terminal.ansiBrightGreen#64aa0f
  • terminal.ansiBrightMagenta#c560aa
  • terminal.ansiBrightRed#df4f4f
  • terminal.ansiBrightWhite#15050f
  • terminal.ansiBrightYellow#d0730f
  • terminal.ansiCyan#3fafcf
  • terminal.ansiGreen#2fa526
  • terminal.ansiMagenta#b0648f
  • terminal.ansiRed#cf4f5f
  • terminal.ansiWhite#282026
  • terminal.ansiYellow#c48702
  • terminal.background#15050f
  • terminal.foreground#dfd0d5
  • terminalCursor.foreground#fd3333
  • titleBar.activeBackground#352f2f
  • titleBar.activeForeground#dfd0d5
  • titleBar.border#555564
  • titleBar.inactiveBackground#1a1517
  • titleBar.inactiveForeground#908890

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#cf9f7fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#82a0af
keyword, storage, storage.modifier#a6699f
keyword.operator#908890
storage.type, support.type, entity.name.type, entity.other.inherited-class#00b066
entity.name.function, support.function, meta.function-call, variable.function#c560aa
variable, support.variable, variable.other#4fafaf
constant, constant.numeric, constant.character, constant.language, support.constant#029fff
string, constant.other.symbol#6a88ff
constant.character.escape, string.regexp#b0648f
punctuation#908890
invalid, invalid.illegal#df4f4f
markup.heading#cf4f5fbold
markup.bold, markup.italic#6a88ffbold italic
meta.link, markup.underline.link#6a88ffunderline
markup.list, markup.quote#afdaef
markup.inline.raw#c560aa
markup.inserted, meta.diff.header.to-file#cbdfff
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#e3cfff
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme