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#1d2c39
  • activityBar.border#595a63
  • activityBar.foreground#eaedef
  • activityBarBadge.background#70a0ff
  • activityBarBadge.foreground#131c2b
  • badge.background#204358
  • badge.foreground#ecf0ff
  • button.background#204358
  • button.foreground#ecf0ff
  • button.hoverBackground#684d54
  • diffEditor.border#595a63
  • diffEditor.insertedLineBackground#16353099
  • diffEditor.insertedTextBackground#20493f99
  • diffEditor.removedLineBackground#4a202d99
  • diffEditor.removedTextBackground#5e242f99
  • dropdown.background#131c2b
  • dropdown.border#595a63
  • dropdown.foreground#eaedef
  • editor.background#131c2b
  • editor.findMatchBackground#847020
  • editor.findMatchHighlightBackground#2f5f9f99
  • editor.findRangeHighlightBackground#403f2299
  • editor.foreground#eaedef
  • editor.hoverHighlightBackground#684d5499
  • editor.inactiveSelectionBackground#28447799
  • editor.lineHighlightBackground#243242
  • editor.selectionBackground#183c65
  • editor.selectionHighlightBackground#20435899
  • editor.wordHighlightBackground#10432499
  • editor.wordHighlightStrongBackground#49516a99
  • editorBracketMatch.background#6c5d54
  • editorBracketMatch.border#f59acf
  • editorCursor.foreground#8fdfff
  • editorError.foreground#ff7a5f
  • editorGutter.addedBackground#41bf4f
  • editorGutter.background#1a2331
  • editorGutter.deletedBackground#ff7a5f
  • editorGutter.modifiedBackground#f0c060
  • editorHint.foreground#969faf
  • editorIndentGuide.activeBackground1#4a5664
  • editorIndentGuide.background1#595a63
  • editorInfo.foreground#41bf4f
  • editorLineNumber.activeForeground#eaedef
  • editorLineNumber.foreground#969faf
  • editorOverviewRuler.addedForeground#41bf4f
  • editorOverviewRuler.border#595a63
  • editorOverviewRuler.deletedForeground#ff7a5f
  • editorOverviewRuler.modifiedForeground#f0c060
  • editorRuler.foreground#2a3644
  • editorWarning.foreground#f0c060
  • editorWhitespace.foreground#595a63
  • gitDecoration.addedResourceForeground#41bf4f
  • gitDecoration.conflictingResourceForeground#ff7788
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#969faf
  • gitDecoration.modifiedResourceForeground#dada90
  • gitDecoration.submoduleResourceForeground#90a0dc
  • gitDecoration.untrackedResourceForeground#30c489
  • input.background#131c2b
  • input.border#595a63
  • input.foreground#eaedef
  • input.placeholderForeground#969faf
  • inputOption.activeBackground#204358
  • inputOption.activeBorder#70a0ff
  • inputValidation.errorBackground#551327
  • inputValidation.errorBorder#ff7a5f
  • inputValidation.infoBackground#104324
  • inputValidation.infoBorder#41bf4f
  • inputValidation.warningBackground#403f22
  • inputValidation.warningBorder#f0c060
  • list.activeSelectionBackground#204358
  • list.activeSelectionForeground#ecf0ff
  • list.activeSelectionIconForeground#70a0ff
  • list.focusBackground#204358
  • list.highlightForeground#70a0ff
  • list.hoverBackground#684d54
  • list.inactiveSelectionBackground#284477
  • notificationCenterHeader.background#2a3644
  • notificationCenterHeader.foreground#eaedef
  • panel.background#131c2b
  • panel.border#595a63
  • panelTitle.activeBorder#70a0ff
  • panelTitle.activeForeground#eaedef
  • panelTitle.inactiveForeground#969faf
  • progressBar.background#70a0ff
  • sideBar.background#1d2c39
  • sideBar.border#595a63
  • sideBar.foreground#eaedef
  • sideBarSectionHeader.background#2a3644
  • sideBarSectionHeader.foreground#eaedef
  • sideBarTitle.foreground#eaedef
  • statusBar.background#2f527b
  • statusBar.border#595a63
  • statusBar.debuggingBackground#b05fcf
  • statusBar.debuggingForeground#ecf0ff
  • statusBar.foreground#ecf0ff
  • statusBar.noFolderBackground#2a3644
  • statusBar.noFolderForeground#eaedef
  • tab.activeBackground#131c2b
  • tab.activeBorder#70a0ff
  • tab.activeForeground#eaedef
  • tab.border#595a63
  • tab.hoverBackground#243242
  • tab.hoverBorder#595a63
  • tab.inactiveBackground#1d2c39
  • tab.inactiveForeground#969faf
  • tab.unfocusedActiveBackground#1a2331
  • tab.unfocusedActiveBorder#595a63
  • tab.unfocusedActiveForeground#969faf
  • terminal.ansiBlack#eaedef
  • terminal.ansiBlue#57b0ff
  • terminal.ansiBrightBlack#969faf
  • terminal.ansiBrightBlue#70a0ff
  • terminal.ansiBrightCyan#7fcfdf
  • terminal.ansiBrightGreen#7fce5f
  • terminal.ansiBrightMagenta#fa90ea
  • terminal.ansiBrightRed#ff7a5f
  • terminal.ansiBrightWhite#131c2b
  • terminal.ansiBrightYellow#f0c060
  • terminal.ansiCyan#2fd0db
  • terminal.ansiGreen#41bf4f
  • terminal.ansiMagenta#f59acf
  • terminal.ansiRed#ff6f6f
  • terminal.ansiWhite#1d2c39
  • terminal.ansiYellow#d0d24f
  • terminal.background#131c2b
  • terminal.foreground#eaedef
  • terminalCursor.foreground#8fdfff
  • titleBar.activeBackground#2a3644
  • titleBar.activeForeground#eaedef
  • titleBar.border#595a63
  • titleBar.inactiveBackground#1a2331
  • 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#cf90ff
keyword.operator#969faf
storage.type, support.type, entity.name.type, entity.other.inherited-class#30c489
entity.name.function, support.function, meta.function-call, variable.function#fa90ea
variable, support.variable, variable.other#65d5a8
constant, constant.numeric, constant.character, constant.language, support.constant#12b4ff
string, constant.other.symbol#70a0ff
constant.character.escape, string.regexp#f59acf
punctuation#969faf
invalid, invalid.illegal#ff7a5f
markup.heading#ff6f6fbold
markup.bold, markup.italic#70a0ffbold italic
meta.link, markup.underline.link#70a0ffunderline
markup.list, markup.quote#90a0dc
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