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#f2e4ea
  • activityBar.border#c6bbc6
  • activityBar.foreground#4f4073
  • activityBarBadge.background#5250ef
  • activityBarBadge.foreground#fff2f3
  • badge.background#f4cfff
  • badge.foreground#341f58
  • button.background#f4cfff
  • button.foreground#341f58
  • button.hoverBackground#b4cfff
  • diffEditor.border#c6bbc6
  • diffEditor.insertedLineBackground#dff6ea99
  • diffEditor.insertedTextBackground#caf4da99
  • diffEditor.removedLineBackground#ffdfe699
  • diffEditor.removedTextBackground#ffcee099
  • dropdown.background#fff2f3
  • dropdown.border#c6bbc6
  • dropdown.foreground#4f4073
  • editor.background#fff2f3
  • editor.findMatchBackground#ffc200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe5ba99
  • editor.foreground#4f4073
  • editor.hoverHighlightBackground#b4cfff99
  • editor.inactiveSelectionBackground#ccdfff99
  • editor.lineHighlightBackground#ffd6e5
  • editor.selectionBackground#eecfff
  • editor.selectionHighlightBackground#f4cfff99
  • editor.wordHighlightBackground#bbefda99
  • editor.wordHighlightStrongBackground#aaeccf99
  • editorBracketMatch.background#9fc0ef
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#cf0090
  • editorError.foreground#e00033
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f7ebee
  • editorGutter.deletedBackground#e00033
  • editorGutter.modifiedBackground#b6532f
  • editorHint.foreground#786e74
  • editorIndentGuide.activeBackground1#cfb3c4
  • editorIndentGuide.background1#c6bbc6
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#4f4073
  • editorLineNumber.foreground#786e74
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#c6bbc6
  • editorOverviewRuler.deletedForeground#e00033
  • editorOverviewRuler.modifiedForeground#b6532f
  • editorRuler.foreground#efd3e4
  • editorWarning.foreground#b6532f
  • editorWhitespace.foreground#c6bbc6
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#d50f7f
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#786e74
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#af4988
  • gitDecoration.untrackedResourceForeground#007f68
  • input.background#fff2f3
  • input.border#c6bbc6
  • input.foreground#4f4073
  • input.placeholderForeground#786e74
  • inputOption.activeBackground#f4cfff
  • inputOption.activeBorder#5250ef
  • inputValidation.errorBackground#ffd0e6
  • inputValidation.errorBorder#e00033
  • inputValidation.infoBackground#bbefda
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#ffe5ba
  • inputValidation.warningBorder#b6532f
  • list.activeSelectionBackground#f4cfff
  • list.activeSelectionForeground#341f58
  • list.activeSelectionIconForeground#5250ef
  • list.focusBackground#f4cfff
  • list.highlightForeground#5250ef
  • list.hoverBackground#b4cfff
  • list.inactiveSelectionBackground#ccdfff
  • notificationCenterHeader.background#efd3e4
  • notificationCenterHeader.foreground#4f4073
  • panel.background#fff2f3
  • panel.border#c6bbc6
  • panelTitle.activeBorder#5250ef
  • panelTitle.activeForeground#4f4073
  • panelTitle.inactiveForeground#786e74
  • progressBar.background#5250ef
  • sideBar.background#f2e4ea
  • sideBar.border#c6bbc6
  • sideBar.foreground#4f4073
  • sideBarSectionHeader.background#efd3e4
  • sideBarSectionHeader.foreground#4f4073
  • sideBarTitle.foreground#4f4073
  • statusBar.background#ffa4dc
  • statusBar.border#c6bbc6
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#341f58
  • statusBar.foreground#341f58
  • statusBar.noFolderBackground#efd3e4
  • statusBar.noFolderForeground#4f4073
  • tab.activeBackground#fff2f3
  • tab.activeBorder#5250ef
  • tab.activeForeground#4f4073
  • tab.border#c6bbc6
  • tab.hoverBackground#ffd6e5
  • tab.hoverBorder#c6bbc6
  • tab.inactiveBackground#f2e4ea
  • tab.inactiveForeground#786e74
  • tab.unfocusedActiveBackground#f7ebee
  • tab.unfocusedActiveBorder#c6bbc6
  • tab.unfocusedActiveForeground#786e74
  • terminal.ansiBlack#4f4073
  • terminal.ansiBlue#375ce6
  • terminal.ansiBrightBlack#786e74
  • terminal.ansiBrightBlue#5250ef
  • terminal.ansiBrightCyan#3f6faf
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cb1aaa
  • terminal.ansiBrightRed#e00033
  • terminal.ansiBrightWhite#fff2f3
  • terminal.ansiBrightYellow#b6532f
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#d3303a
  • terminal.ansiWhite#f2e4ea
  • terminal.ansiYellow#a45f22
  • terminal.background#fff2f3
  • terminal.foreground#4f4073
  • terminalCursor.foreground#cf0090
  • titleBar.activeBackground#efd3e4
  • titleBar.activeForeground#4f4073
  • titleBar.border#c6bbc6
  • titleBar.inactiveBackground#f7ebee
  • titleBar.inactiveForeground#786e74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a5f6aitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#5f60bf
keyword, storage, storage.modifier#8e44f3
keyword.operator#786e74
storage.type, support.type, entity.name.type, entity.other.inherited-class#007f68
entity.name.function, support.function, meta.function-call, variable.function#cb1aaa
variable, support.variable, variable.other#0f7b8f
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#5250ef
constant.character.escape, string.regexp#ba35af
punctuation#786e74
invalid, invalid.illegal#e00033
markup.heading#d3303abold
markup.bold, markup.italic#5250efbold italic
meta.link, markup.underline.link#5250efunderline
markup.list, markup.quote#af4988
markup.inline.raw#cb1aaa
markup.inserted, meta.diff.header.to-file#005000
markup.deleted, meta.diff.header.from-file#8f1313
markup.changed, meta.diff.range#553d00
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme