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#f6ece8
  • activityBar.border#baafba
  • activityBar.foreground#222222
  • activityBarBadge.background#4250ef
  • activityBarBadge.foreground#fff8f0
  • badge.background#fadacf
  • badge.foreground#111133
  • button.background#fadacf
  • button.foreground#111133
  • button.hoverBackground#b4cfff
  • diffEditor.border#baafba
  • diffEditor.insertedLineBackground#e0f3e099
  • diffEditor.insertedTextBackground#ccefcf99
  • diffEditor.removedLineBackground#ffe3e399
  • diffEditor.removedTextBackground#ffd4d899
  • dropdown.background#fff8f0
  • dropdown.border#baafba
  • dropdown.foreground#222222
  • editor.background#fff8f0
  • editor.findMatchBackground#fac200
  • editor.findMatchHighlightBackground#cbcfff99
  • editor.findRangeHighlightBackground#ffe5ba99
  • editor.foreground#222222
  • editor.hoverHighlightBackground#b4cfff99
  • editor.inactiveSelectionBackground#cfdff999
  • editor.lineHighlightBackground#f9e8c0
  • editor.selectionBackground#caeafa
  • editor.selectionHighlightBackground#fadacf99
  • editor.wordHighlightBackground#cff5d099
  • editor.wordHighlightStrongBackground#aaeccf99
  • editorBracketMatch.background#afbfef
  • editorBracketMatch.border#ba35af
  • editorCursor.foreground#1144ff
  • editorError.foreground#dd1100
  • editorGutter.addedBackground#217a3c
  • editorGutter.background#f9f2ef
  • editorGutter.deletedBackground#dd1100
  • editorGutter.modifiedBackground#9f4a00
  • editorHint.foreground#63728f
  • editorIndentGuide.activeBackground1#c7c0ba
  • editorIndentGuide.background1#baafba
  • editorInfo.foreground#217a3c
  • editorLineNumber.activeForeground#222222
  • editorLineNumber.foreground#63728f
  • editorOverviewRuler.addedForeground#217a3c
  • editorOverviewRuler.border#baafba
  • editorOverviewRuler.deletedForeground#dd1100
  • editorOverviewRuler.modifiedForeground#9f4a00
  • editorRuler.foreground#e7e0da
  • editorWarning.foreground#9f4a00
  • editorWhitespace.foreground#baafba
  • gitDecoration.addedResourceForeground#217a3c
  • gitDecoration.conflictingResourceForeground#c04440
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#63728f
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.submoduleResourceForeground#856f4a
  • gitDecoration.untrackedResourceForeground#008058
  • input.background#fff8f0
  • input.border#baafba
  • input.foreground#222222
  • input.placeholderForeground#63728f
  • inputOption.activeBackground#fadacf
  • inputOption.activeBorder#4250ef
  • inputValidation.errorBackground#ffdfe6
  • inputValidation.errorBorder#dd1100
  • inputValidation.infoBackground#cff5d0
  • inputValidation.infoBorder#217a3c
  • inputValidation.warningBackground#ffe5ba
  • inputValidation.warningBorder#9f4a00
  • list.activeSelectionBackground#fadacf
  • list.activeSelectionForeground#111133
  • list.activeSelectionIconForeground#4250ef
  • list.focusBackground#fadacf
  • list.highlightForeground#4250ef
  • list.hoverBackground#b4cfff
  • list.inactiveSelectionBackground#cfdff9
  • notificationCenterHeader.background#e7e0da
  • notificationCenterHeader.foreground#222222
  • panel.background#fff8f0
  • panel.border#baafba
  • panelTitle.activeBorder#4250ef
  • panelTitle.activeForeground#222222
  • panelTitle.inactiveForeground#63728f
  • progressBar.background#4250ef
  • sideBar.background#f6ece8
  • sideBar.border#baafba
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#e7e0da
  • sideBarSectionHeader.foreground#222222
  • sideBarTitle.foreground#222222
  • statusBar.background#f8cf8f
  • statusBar.border#baafba
  • statusBar.debuggingBackground#df8fff
  • statusBar.debuggingForeground#111133
  • statusBar.foreground#111133
  • statusBar.noFolderBackground#e7e0da
  • statusBar.noFolderForeground#222222
  • tab.activeBackground#fff8f0
  • tab.activeBorder#4250ef
  • tab.activeForeground#222222
  • tab.border#baafba
  • tab.hoverBackground#f9e8c0
  • tab.hoverBorder#baafba
  • tab.inactiveBackground#f6ece8
  • tab.inactiveForeground#63728f
  • tab.unfocusedActiveBackground#f9f2ef
  • tab.unfocusedActiveBorder#baafba
  • tab.unfocusedActiveForeground#63728f
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#375cd8
  • terminal.ansiBrightBlack#63728f
  • terminal.ansiBrightBlue#4250ef
  • terminal.ansiBrightCyan#3f70a0
  • terminal.ansiBrightGreen#4a7d00
  • terminal.ansiBrightMagenta#cf25aa
  • terminal.ansiBrightRed#dd1100
  • terminal.ansiBrightWhite#fff8f0
  • terminal.ansiBrightYellow#9f4a00
  • terminal.ansiCyan#1f6fbf
  • terminal.ansiGreen#217a3c
  • terminal.ansiMagenta#ba35af
  • terminal.ansiRed#cc3333
  • terminal.ansiWhite#f6ece8
  • terminal.ansiYellow#8a5d00
  • terminal.background#fff8f0
  • terminal.foreground#222222
  • terminalCursor.foreground#1144ff
  • titleBar.activeBackground#e7e0da
  • titleBar.activeForeground#222222
  • titleBar.border#baafba
  • titleBar.inactiveBackground#f9f2ef
  • titleBar.inactiveForeground#63728f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#765640italic
comment.documentation, comment.block.documentation, string.quoted.docstring#406f90
keyword, storage, storage.modifier#6052cf
keyword.operator#63728f
storage.type, support.type, entity.name.type, entity.other.inherited-class#008058
entity.name.function, support.function, meta.function-call, variable.function#cf25aa
variable, support.variable, variable.other#1f77bb
constant, constant.numeric, constant.character, constant.language, support.constant#065fff
string, constant.other.symbol#4250ef
constant.character.escape, string.regexp#ba35af
punctuation#63728f
invalid, invalid.illegal#dd1100
markup.heading#cc3333bold
markup.bold, markup.italic#4250efbold italic
meta.link, markup.underline.link#4250efunderline
markup.list, markup.quote#856f4a
markup.inline.raw#cf25aa
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