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#373b3d
  • activityBar.border#4f5f66
  • activityBar.foreground#d0d0d0
  • activityBarBadge.background#a0a0ef
  • activityBarBadge.foreground#292c2f
  • badge.background#354864
  • badge.foreground#dadfe5
  • button.background#354864
  • button.foreground#dadfe5
  • button.hoverBackground#8f7a7f
  • diffEditor.border#4f5f66
  • diffEditor.insertedLineBackground#1a363099
  • diffEditor.insertedTextBackground#304a3f99
  • diffEditor.removedLineBackground#4a203499
  • diffEditor.removedTextBackground#5a314299
  • dropdown.background#292c2f
  • dropdown.border#4f5f66
  • dropdown.foreground#d0d0d0
  • editor.background#292c2f
  • editor.findMatchBackground#8f665f
  • editor.findMatchHighlightBackground#4f509f99
  • editor.findRangeHighlightBackground#3f3c2f99
  • editor.foreground#d0d0d0
  • editor.hoverHighlightBackground#8f7a7f99
  • editor.inactiveSelectionBackground#3f427399
  • editor.lineHighlightBackground#344255
  • editor.selectionBackground#404f66
  • editor.selectionHighlightBackground#35486499
  • editor.wordHighlightBackground#10403299
  • editor.wordHighlightStrongBackground#41596099
  • editorBracketMatch.background#706069
  • editorBracketMatch.border#e5a0ea
  • editorCursor.foreground#afe6ef
  • editorError.foreground#df885f
  • editorGutter.addedBackground#70bb70
  • editorGutter.background#333539
  • editorGutter.deletedBackground#df885f
  • editorGutter.modifiedBackground#d1a45f
  • editorHint.foreground#857f8f
  • editorIndentGuide.activeBackground1#60676b
  • editorIndentGuide.background1#4f5f66
  • editorInfo.foreground#70bb70
  • editorLineNumber.activeForeground#d0d0d0
  • editorLineNumber.foreground#857f8f
  • editorOverviewRuler.addedForeground#70bb70
  • editorOverviewRuler.border#4f5f66
  • editorOverviewRuler.deletedForeground#df885f
  • editorOverviewRuler.modifiedForeground#d1a45f
  • editorRuler.foreground#40474b
  • editorWarning.foreground#d1a45f
  • editorWhitespace.foreground#4f5f66
  • gitDecoration.addedResourceForeground#70bb70
  • gitDecoration.conflictingResourceForeground#e4959f
  • gitDecoration.deletedResourceForeground#f0bfcf
  • gitDecoration.ignoredResourceForeground#857f8f
  • gitDecoration.modifiedResourceForeground#dada90
  • gitDecoration.submoduleResourceForeground#aab9af
  • gitDecoration.untrackedResourceForeground#60bd90
  • input.background#292c2f
  • input.border#4f5f66
  • input.foreground#d0d0d0
  • input.placeholderForeground#857f8f
  • inputOption.activeBackground#354864
  • inputOption.activeBorder#a0a0ef
  • inputValidation.errorBackground#4f231f
  • inputValidation.errorBorder#df885f
  • inputValidation.infoBackground#104032
  • inputValidation.infoBorder#70bb70
  • inputValidation.warningBackground#3f3c2f
  • inputValidation.warningBorder#d1a45f
  • list.activeSelectionBackground#354864
  • list.activeSelectionForeground#dadfe5
  • list.activeSelectionIconForeground#a0a0ef
  • list.focusBackground#354864
  • list.highlightForeground#a0a0ef
  • list.hoverBackground#8f7a7f
  • list.inactiveSelectionBackground#3f4273
  • notificationCenterHeader.background#40474b
  • notificationCenterHeader.foreground#d0d0d0
  • panel.background#292c2f
  • panel.border#4f5f66
  • panelTitle.activeBorder#a0a0ef
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#857f8f
  • progressBar.background#a0a0ef
  • sideBar.background#373b3d
  • sideBar.border#4f5f66
  • sideBar.foreground#d0d0d0
  • sideBarSectionHeader.background#40474b
  • sideBarSectionHeader.foreground#d0d0d0
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#5b637e
  • statusBar.border#4f5f66
  • statusBar.debuggingBackground#885997
  • statusBar.debuggingForeground#dadfe5
  • statusBar.foreground#dadfe5
  • statusBar.noFolderBackground#40474b
  • statusBar.noFolderForeground#d0d0d0
  • tab.activeBackground#292c2f
  • tab.activeBorder#a0a0ef
  • tab.activeForeground#d0d0d0
  • tab.border#4f5f66
  • tab.hoverBackground#344255
  • tab.hoverBorder#4f5f66
  • tab.inactiveBackground#373b3d
  • tab.inactiveForeground#857f8f
  • tab.unfocusedActiveBackground#333539
  • tab.unfocusedActiveBorder#4f5f66
  • tab.unfocusedActiveForeground#857f8f
  • terminal.ansiBlack#d0d0d0
  • terminal.ansiBlue#80a4e0
  • terminal.ansiBrightBlack#857f8f
  • terminal.ansiBrightBlue#a0a0ef
  • terminal.ansiBrightCyan#99bfd0
  • terminal.ansiBrightGreen#98c06f
  • terminal.ansiBrightMagenta#d389af
  • terminal.ansiBrightRed#df885f
  • terminal.ansiBrightWhite#292c2f
  • terminal.ansiBrightYellow#d1a45f
  • terminal.ansiCyan#8fb8ea
  • terminal.ansiGreen#70bb70
  • terminal.ansiMagenta#e5a0ea
  • terminal.ansiRed#d67869
  • terminal.ansiWhite#373b3d
  • terminal.ansiYellow#c09f6f
  • terminal.background#292c2f
  • terminal.foreground#d0d0d0
  • terminalCursor.foreground#afe6ef
  • titleBar.activeBackground#40474b
  • titleBar.activeForeground#d0d0d0
  • titleBar.border#4f5f66
  • titleBar.inactiveBackground#333539
  • titleBar.inactiveForeground#857f8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#cbb0a0italic
comment.documentation, comment.block.documentation, string.quoted.docstring#a2c5d8
keyword, storage, storage.modifier#cfa0e8
keyword.operator#857f8f
storage.type, support.type, entity.name.type, entity.other.inherited-class#60bd90
entity.name.function, support.function, meta.function-call, variable.function#d389af
variable, support.variable, variable.other#7ac0b9
constant, constant.numeric, constant.character, constant.language, support.constant#72aff0
string, constant.other.symbol#a0a0ef
constant.character.escape, string.regexp#e5a0ea
punctuation#857f8f
invalid, invalid.illegal#df885f
markup.heading#d67869bold
markup.bold, markup.italic#a0a0efbold italic
meta.link, markup.underline.link#a0a0efunderline
markup.list, markup.quote#aab9af
markup.inline.raw#d389af
markup.inserted, meta.diff.header.to-file#a0d0d0
markup.deleted, meta.diff.header.from-file#f0bfcf
markup.changed, meta.diff.range#dada90
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme