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#efecec
  • activityBar.border#adadad
  • activityBar.foreground#1a1a1a
  • activityBarBadge.background#4250ef
  • activityBarBadge.foreground#fff9f9
  • badge.background#ffcada
  • badge.foreground#1a0a0f
  • button.background#ffcada
  • button.foreground#1a0a0f
  • button.hoverBackground#8fcfff
  • diffEditor.border#adadad
  • diffEditor.insertedLineBackground#d7eff599
  • diffEditor.insertedTextBackground#c9efea99
  • diffEditor.removedLineBackground#ffe9e699
  • diffEditor.removedTextBackground#ffd6e099
  • dropdown.background#fff9f9
  • dropdown.border#adadad
  • dropdown.foreground#1a1a1a
  • editor.background#fff9f9
  • editor.findMatchBackground#ff7f78
  • editor.findMatchHighlightBackground#a8c8ef99
  • editor.findRangeHighlightBackground#efcae699
  • editor.foreground#1a1a1a
  • editor.hoverHighlightBackground#8fcfff99
  • editor.inactiveSelectionBackground#c8e6f799
  • editor.lineHighlightBackground#ffdadf
  • editor.selectionBackground#dadadf
  • editor.selectionHighlightBackground#ffcada99
  • editor.wordHighlightBackground#cfdfef99
  • editor.wordHighlightStrongBackground#eda9dc99
  • editorBracketMatch.background#8fc0cf
  • editorBracketMatch.border#aa357f
  • editorCursor.foreground#bb0000
  • editorError.foreground#dd0000
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f7f2f2
  • editorGutter.deletedBackground#dd0000
  • editorGutter.modifiedBackground#965000
  • editorHint.foreground#756275
  • editorIndentGuide.activeBackground1#bdb9b9
  • editorIndentGuide.background1#adadad
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#1a1a1a
  • editorLineNumber.foreground#756275
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#adadad
  • editorOverviewRuler.deletedForeground#dd0000
  • editorOverviewRuler.modifiedForeground#965000
  • editorRuler.foreground#ddd9d9
  • editorWarning.foreground#965000
  • editorWhitespace.foreground#adadad
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#c50f4f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#756275
  • gitDecoration.modifiedResourceForeground#333399
  • gitDecoration.submoduleResourceForeground#194f90
  • gitDecoration.untrackedResourceForeground#008058
  • input.background#fff9f9
  • input.border#adadad
  • input.foreground#1a1a1a
  • input.placeholderForeground#756275
  • inputOption.activeBackground#ffcada
  • inputOption.activeBorder#4250ef
  • inputValidation.errorBackground#ffbfca
  • inputValidation.errorBorder#dd0000
  • inputValidation.infoBackground#cfdfef
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#efcae6
  • inputValidation.warningBorder#965000
  • list.activeSelectionBackground#ffcada
  • list.activeSelectionForeground#1a0a0f
  • list.activeSelectionIconForeground#4250ef
  • list.focusBackground#ffcada
  • list.highlightForeground#4250ef
  • list.hoverBackground#8fcfff
  • list.inactiveSelectionBackground#c8e6f7
  • notificationCenterHeader.background#ddd9d9
  • notificationCenterHeader.foreground#1a1a1a
  • panel.background#fff9f9
  • panel.border#adadad
  • panelTitle.activeBorder#4250ef
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#756275
  • progressBar.background#4250ef
  • sideBar.background#efecec
  • sideBar.border#adadad
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#ddd9d9
  • sideBarSectionHeader.foreground#1a1a1a
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#ff99aa
  • statusBar.border#adadad
  • statusBar.debuggingBackground#e09fc0
  • statusBar.debuggingForeground#1a0a0f
  • statusBar.foreground#1a0a0f
  • statusBar.noFolderBackground#ddd9d9
  • statusBar.noFolderForeground#1a1a1a
  • tab.activeBackground#fff9f9
  • tab.activeBorder#4250ef
  • tab.activeForeground#1a1a1a
  • tab.border#adadad
  • tab.hoverBackground#ffdadf
  • tab.hoverBorder#adadad
  • tab.inactiveBackground#efecec
  • tab.inactiveForeground#756275
  • tab.unfocusedActiveBackground#f7f2f2
  • tab.unfocusedActiveBorder#adadad
  • tab.unfocusedActiveForeground#756275
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#375cd8
  • terminal.ansiBrightBlack#756275
  • terminal.ansiBrightBlue#4250ef
  • terminal.ansiBrightCyan#2f5faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#bf256a
  • terminal.ansiBrightRed#dd0000
  • terminal.ansiBrightWhite#fff9f9
  • terminal.ansiBrightYellow#965000
  • terminal.ansiCyan#2070af
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#aa357f
  • terminal.ansiRed#aa0010
  • terminal.ansiWhite#efecec
  • terminal.ansiYellow#805d00
  • terminal.background#fff9f9
  • terminal.foreground#1a1a1a
  • terminalCursor.foreground#bb0000
  • titleBar.activeBackground#ddd9d9
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#adadad
  • titleBar.inactiveBackground#f7f2f2
  • titleBar.inactiveForeground#756275

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#776d6aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#5f6a90
keyword, storage, storage.modifier#af40af
keyword.operator#756275
storage.type, support.type, entity.name.type, entity.other.inherited-class#008058
entity.name.function, support.function, meta.function-call, variable.function#bf256a
variable, support.variable, variable.other#007faa
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4250ef
constant.character.escape, string.regexp#aa357f
punctuation#756275
invalid, invalid.illegal#dd0000
markup.heading#aa0010bold
markup.bold, markup.italic#4250efbold italic
meta.link, markup.underline.link#4250efunderline
markup.list, markup.quote#194f90
markup.inline.raw#bf256a
markup.inserted, meta.diff.header.to-file#004840
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#333399
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme