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#bdbdbd
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#bdbdbd
  • badge.background#d4d4d4
  • badge.foreground#00279a
  • button.background#b8caff
  • button.foreground#313131
  • button.hoverBackground#b8caffbf
  • debugExceptionWidget.background#e3c78a
  • debugExceptionWidget.border#cfa038
  • debugToolBar.background#bdbdbd
  • descriptionForeground#bdbdbd
  • dropdown.background#000000
  • dropdown.border#595959
  • dropdown.foreground#bdbdbd
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#e3c78abf
  • editor.findMatchBorder#cfa038
  • editor.findMatchHighlightBackground#80a0ff99
  • editor.foreground#bdbdbd
  • editor.hoverHighlightBackground#c6c6c699
  • editor.lineHighlightBackground#323437
  • editor.lineHighlightBorder#323437
  • editor.rangeHighlightBackground#cf87e899
  • editor.selectionBackground#80a0ff99
  • editor.selectionHighlightBackground#80a0ff99
  • editor.wordHighlightBackground#79dac8bf
  • editor.wordHighlightStrongBackground#85dc85b3
  • editorBracketMatch.background#80a0ff99
  • editorBracketMatch.border#1a54ff
  • editorCodeLens.foreground#bdbdbd
  • editorCursor.foreground#bdbdbd
  • editorError.foreground#ff5189
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#8cc85f
  • editorGutter.deletedBackground#ff5454
  • editorGutter.modifiedBackground#80a0ff99
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#63676c
  • editorIndentGuide.activeBackground1#c6c6c6
  • editorIndentGuide.background1#e4e4e4
  • editorLineNumber.foreground#e4e4e4
  • editorRuler.foreground#e4e4e4
  • editorWhitespace.foreground#c6c684
  • editorWidget.background#000000
  • editorWidget.border#333333
  • errorForeground#ff5189
  • focusBorder#333333
  • foreground#bdbdbd
  • gitDecoration.addedResourceForeground#8cc85f
  • gitDecoration.conflictingResourceForeground#e3c78a
  • gitDecoration.deletedResourceForeground#ff5454
  • gitDecoration.ignoredResourceForeground#f5946e
  • gitDecoration.modifiedResourceForeground#e3c78a
  • gitDecoration.submoduleResourceForeground#cf87e8
  • gitDecoration.untrackedResourceForeground#79dac8
  • input.background#000000
  • input.border#bdbdbd
  • list.activeSelectionBackground#949494
  • list.activeSelectionForeground#bdbdbd
  • list.dropBackground#40404099
  • list.errorForeground#ff5189
  • list.focusBackground#eeeeee
  • list.focusForeground#616161
  • list.highlightForeground#80a0ff
  • list.hoverBackground#eeeeee
  • list.hoverForeground#616161
  • list.inactiveFocusBackground#c6c6c6
  • list.inactiveSelectionBackground#404040
  • list.inactiveSelectionForeground#bdbdbd
  • list.invalidItemForeground#bdbdbd
  • list.warningForeground#c6c684
  • ports.iconRunningProcessForeground#80a0ff
  • progressBar.background#c6c6c6
  • sideBar.background#000000
  • sideBar.foreground#bdbdbd
  • sideBarTitle.foreground#bdbdbd
  • statusBar.background#000000
  • statusBar.debuggingBackground#ff5454
  • statusBar.foreground#bdbdbd
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#949494
  • tab.activeForeground#bdbdbd
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#bdbdbd
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#80a0ff
  • terminal.ansiBrightBlack#949494
  • terminal.ansiBrightBlue#74b2ff
  • terminal.ansiBrightCyan#85dc85
  • terminal.ansiBrightGreen#36c692
  • terminal.ansiBrightMagenta#ae81ff
  • terminal.ansiBrightRed#ff5189
  • terminal.ansiBrightWhite#e4e4e4
  • terminal.ansiBrightYellow#c6c684
  • terminal.ansiCyan#79dac8
  • terminal.ansiGreen#8cc85f
  • terminal.ansiMagenta#cf87e8
  • terminal.ansiRed#ff5454
  • terminal.ansiWhite#c6c6c6
  • terminal.ansiYellow#e3c78a
  • terminal.background#000000
  • terminal.foreground#bdbdbd
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#bdbdbd
  • titleBar.border#000000
  • titleBar.inactiveBackground#949494
  • titleBar.inactiveForeground#bdbdbd

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
#323437
#ff5454
entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name#8cc85f
string#e3c78a
storage.type, support.function, support.type, support.class#80a0ff
keyword, storage, entity.name.tag#cf87e8
support.constant#79dac8
keyword.operator.class, constant.other, source.php.embedded.line#c6c6c6
comment#949494
invalid#ff5189
#36c692
variable.parameter#c6c684
#74b2ff
constant.numeric, constant.language, constant.character, constant.other#ae81ff
#85dc85
#e4e4e4
Eggsthetic by friedegg - VS Code Theme