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