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#291f26
  • activityBar.border#695960
  • activityBar.foreground#d3cfcf
  • activityBarBadge.background#a897ef
  • activityBarBadge.foreground#190a0f
  • badge.background#4a1937
  • badge.foreground#ffcfdf
  • button.background#4a1937
  • button.foreground#ffcfdf
  • button.hoverBackground#303f6f
  • diffEditor.border#695960
  • diffEditor.insertedLineBackground#00241099
  • diffEditor.insertedTextBackground#00351f99
  • diffEditor.removedLineBackground#340a1499
  • diffEditor.removedTextBackground#510c2899
  • dropdown.background#190a0f
  • dropdown.border#695960
  • dropdown.foreground#d3cfcf
  • editor.background#190a0f
  • editor.findMatchBackground#8f5040
  • editor.findMatchHighlightBackground#4648d099
  • editor.findRangeHighlightBackground#3a300499
  • editor.foreground#d3cfcf
  • editor.hoverHighlightBackground#303f6f99
  • editor.inactiveSelectionBackground#2a346399
  • editor.lineHighlightBackground#401f33
  • editor.selectionBackground#232f3f
  • editor.selectionHighlightBackground#4a193799
  • editor.wordHighlightBackground#00352a99
  • editor.wordHighlightStrongBackground#66364f99
  • editorBracketMatch.background#3f5f75
  • editorBracketMatch.border#ef80bf
  • editorCursor.foreground#ff5aaf
  • editorError.foreground#ff656f
  • editorGutter.addedBackground#60b444
  • editorGutter.background#1e1216
  • editorGutter.deletedBackground#ff656f
  • editorGutter.modifiedBackground#ea9955
  • editorHint.foreground#808898
  • editorIndentGuide.activeBackground1#594a4f
  • editorIndentGuide.background1#695960
  • editorInfo.foreground#60b444
  • editorLineNumber.activeForeground#d3cfcf
  • editorLineNumber.foreground#808898
  • editorOverviewRuler.addedForeground#60b444
  • editorOverviewRuler.border#695960
  • editorOverviewRuler.deletedForeground#ff656f
  • editorOverviewRuler.modifiedForeground#ea9955
  • editorRuler.foreground#392a2f
  • editorWarning.foreground#ea9955
  • editorWhitespace.foreground#695960
  • gitDecoration.addedResourceForeground#60b444
  • gitDecoration.conflictingResourceForeground#ff78aa
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#808898
  • gitDecoration.modifiedResourceForeground#efef80
  • gitDecoration.submoduleResourceForeground#bf9cdf
  • gitDecoration.untrackedResourceForeground#60bf88
  • input.background#190a0f
  • input.border#695960
  • input.foreground#d3cfcf
  • input.placeholderForeground#808898
  • inputOption.activeBackground#4a1937
  • inputOption.activeBorder#a897ef
  • inputValidation.errorBackground#461017
  • inputValidation.errorBorder#ff656f
  • inputValidation.infoBackground#00352a
  • inputValidation.infoBorder#60b444
  • inputValidation.warningBackground#3a3004
  • inputValidation.warningBorder#ea9955
  • list.activeSelectionBackground#4a1937
  • list.activeSelectionForeground#ffcfdf
  • list.activeSelectionIconForeground#a897ef
  • list.focusBackground#4a1937
  • list.highlightForeground#a897ef
  • list.hoverBackground#303f6f
  • list.inactiveSelectionBackground#2a3463
  • notificationCenterHeader.background#392a2f
  • notificationCenterHeader.foreground#d3cfcf
  • panel.background#190a0f
  • panel.border#695960
  • panelTitle.activeBorder#a897ef
  • panelTitle.activeForeground#d3cfcf
  • panelTitle.inactiveForeground#808898
  • progressBar.background#a897ef
  • sideBar.background#291f26
  • sideBar.border#695960
  • sideBar.foreground#d3cfcf
  • sideBarSectionHeader.background#392a2f
  • sideBarSectionHeader.foreground#d3cfcf
  • sideBarTitle.foreground#d3cfcf
  • statusBar.background#771a4f
  • statusBar.border#695960
  • statusBar.debuggingBackground#804fd5
  • statusBar.debuggingForeground#ffcfdf
  • statusBar.foreground#ffcfdf
  • statusBar.noFolderBackground#392a2f
  • statusBar.noFolderForeground#d3cfcf
  • tab.activeBackground#190a0f
  • tab.activeBorder#a897ef
  • tab.activeForeground#d3cfcf
  • tab.border#695960
  • tab.hoverBackground#401f33
  • tab.hoverBorder#695960
  • tab.inactiveBackground#291f26
  • tab.inactiveForeground#808898
  • tab.unfocusedActiveBackground#1e1216
  • tab.unfocusedActiveBorder#695960
  • tab.unfocusedActiveForeground#808898
  • terminal.ansiBlack#d3cfcf
  • terminal.ansiBlue#8fa5f6
  • terminal.ansiBrightBlack#808898
  • terminal.ansiBrightBlue#a897ef
  • terminal.ansiBrightCyan#9ac0e4
  • terminal.ansiBrightGreen#80b25f
  • terminal.ansiBrightMagenta#f470df
  • terminal.ansiBrightRed#ff656f
  • terminal.ansiBrightWhite#190a0f
  • terminal.ansiBrightYellow#ea9955
  • terminal.ansiCyan#8fbaef
  • terminal.ansiGreen#60b444
  • terminal.ansiMagenta#ef80bf
  • terminal.ansiRed#ff7359
  • terminal.ansiWhite#291f26
  • terminal.ansiYellow#e5b76f
  • terminal.background#190a0f
  • terminal.foreground#d3cfcf
  • terminalCursor.foreground#ff5aaf
  • titleBar.activeBackground#392a2f
  • titleBar.activeForeground#d3cfcf
  • titleBar.border#695960
  • titleBar.inactiveBackground#1e1216
  • titleBar.inactiveForeground#808898

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#bf9f8fitalic
comment.documentation, comment.block.documentation, string.quoted.docstring#aac0cf
keyword, storage, storage.modifier#df7fff
keyword.operator#808898
storage.type, support.type, entity.name.type, entity.other.inherited-class#60bf88
entity.name.function, support.function, meta.function-call, variable.function#f470df
variable, support.variable, variable.other#8fcfdf
constant, constant.numeric, constant.character, constant.language, support.constant#7fa5ff
string, constant.other.symbol#a897ef
constant.character.escape, string.regexp#ef80bf
punctuation#808898
invalid, invalid.illegal#ff656f
markup.heading#ff7359bold
markup.bold, markup.italic#a897efbold italic
meta.link, markup.underline.link#a897efunderline
markup.list, markup.quote#bf9cdf
markup.inline.raw#f470df
markup.inserted, meta.diff.header.to-file#a0e0a0
markup.deleted, meta.diff.header.from-file#ffbfbf
markup.changed, meta.diff.range#efef80
Ef (εὖ) themes for VSCode by bzy-debug - VS Code Theme