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#000000
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#b3b1ad
  • badge.background#cccac7
  • badge.foreground#02314c
  • button.background#85d0fb
  • button.foreground#32312f
  • button.hoverBackground#85d0fbbf
  • debugExceptionWidget.background#f9af4f
  • debugExceptionWidget.border#db7f07
  • debugToolBar.background#b3b1ad
  • descriptionForeground#b3b1ad
  • dropdown.background#000000
  • dropdown.border#595959
  • dropdown.foreground#b3b1ad
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#f9af4fbf
  • editor.findMatchBorder#db7f07
  • editor.findMatchHighlightBackground#53bdfa99
  • editor.foreground#b3b1ad
  • editor.hoverHighlightBackground#c7c7c799
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#fae99499
  • editor.selectionBackground#53bdfa99
  • editor.selectionHighlightBackground#53bdfa99
  • editor.wordHighlightBackground#90e1c6bf
  • editor.wordHighlightStrongBackground#95e6cbb3
  • editorBracketMatch.background#53bdfa99
  • editorBracketMatch.border#0791e0
  • editorCodeLens.foreground#b3b1ad
  • editorCursor.foreground#b3b1ad
  • editorError.foreground#f07178
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#91b362
  • editorGutter.deletedBackground#ea6c73
  • editorGutter.modifiedBackground#53bdfa99
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#c7c7c7
  • editorIndentGuide.background1#ffffff
  • editorLineNumber.foreground#ffffff
  • editorRuler.foreground#ffffff
  • editorWhitespace.foreground#ffb454
  • editorWidget.background#000000
  • editorWidget.border#333333
  • errorForeground#f07178
  • focusBorder#333333
  • foreground#b3b1ad
  • gitDecoration.addedResourceForeground#91b362
  • gitDecoration.conflictingResourceForeground#f9af4f
  • gitDecoration.deletedResourceForeground#ea6c73
  • gitDecoration.ignoredResourceForeground#f28f63
  • gitDecoration.modifiedResourceForeground#f9af4f
  • gitDecoration.submoduleResourceForeground#fae994
  • gitDecoration.untrackedResourceForeground#90e1c6
  • input.background#000000
  • input.border#b3b1ad
  • list.activeSelectionBackground#686868
  • list.activeSelectionForeground#b3b1ad
  • list.dropBackground#40404099
  • list.errorForeground#f07178
  • list.focusBackground#ffffff
  • list.focusForeground#686868
  • list.highlightForeground#53bdfa
  • list.hoverBackground#ffffff
  • list.hoverForeground#686868
  • list.inactiveFocusBackground#c7c7c7
  • list.inactiveSelectionBackground#404040
  • list.inactiveSelectionForeground#b3b1ad
  • list.invalidItemForeground#b3b1ad
  • list.warningForeground#ffb454
  • ports.iconRunningProcessForeground#53bdfa
  • progressBar.background#c7c7c7
  • sideBar.background#000000
  • sideBar.foreground#b3b1ad
  • sideBarTitle.foreground#b3b1ad
  • statusBar.background#000000
  • statusBar.debuggingBackground#ea6c73
  • statusBar.foreground#b3b1ad
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#686868
  • tab.activeForeground#b3b1ad
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#b3b1ad
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#000000
  • terminal.foreground#b3b1ad
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#000000
  • titleBar.inactiveBackground#686868
  • titleBar.inactiveForeground#b3b1ad

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis, storage, comment, entity.other.attribute-name, markup.italic, keyword.control, variable.languageitalic
strong, markup.bold, markup.headingbold
markup.underlineunderline
#000000
#ea6c73
entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name#91b362
string#f9af4f
storage.type, support.function, support.type, support.class#53bdfa
keyword, storage, entity.name.tag#fae994
support.constant#90e1c6
keyword.operator.class, constant.other, source.php.embedded.line#c7c7c7
comment#686868
invalid#f07178
#c2d94c
variable.parameter#ffb454
#59c2ff
constant.numeric, constant.language, constant.character, constant.other#ffee99
#95e6cb
#ffffff
Eggsthetic by friedegg - VS Code Theme