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#c6c6c4
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#c6c6c4
  • badge.background#d0d0ce
  • badge.foreground#003e57
  • button.background#005476
  • button.foreground#fbfbfa
  • button.hoverBackground#005476bf
  • debugExceptionWidget.background#ffd700
  • debugExceptionWidget.border#998100
  • debugToolBar.background#c6c6c4
  • descriptionForeground#c6c6c4
  • dropdown.background#000000
  • dropdown.border#595959
  • dropdown.foreground#c6c6c4
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#ffd700bf
  • editor.findMatchBorder#998100
  • editor.findMatchHighlightBackground#0087bd99
  • editor.foreground#c6c6c4
  • editor.hoverHighlightBackground#c6c6c499
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#9a4eae99
  • editor.selectionBackground#0087bd99
  • editor.selectionHighlightBackground#0087bd99
  • editor.wordHighlightBackground#20b2aabf
  • editor.wordHighlightStrongBackground#00ccccb3
  • editorBracketMatch.background#0087bd99
  • editorBracketMatch.border#003e57
  • editorCodeLens.foreground#c6c6c4
  • editorCursor.foreground#c6c6c4
  • editorError.foreground#ff2400
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#009f6b
  • editorGutter.deletedBackground#c40233
  • editorGutter.modifiedBackground#0087bd99
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#c6c6c4
  • editorIndentGuide.background1#fffafa
  • editorLineNumber.foreground#fffafa
  • editorRuler.foreground#fffafa
  • editorWhitespace.foreground#fdff00
  • editorWidget.background#000000
  • editorWidget.border#333333
  • errorForeground#ff2400
  • focusBorder#333333
  • foreground#c6c6c4
  • gitDecoration.addedResourceForeground#009f6b
  • gitDecoration.conflictingResourceForeground#ffd700
  • gitDecoration.deletedResourceForeground#c40233
  • gitDecoration.ignoredResourceForeground#e5822e
  • gitDecoration.modifiedResourceForeground#ffd700
  • gitDecoration.submoduleResourceForeground#9a4eae
  • gitDecoration.untrackedResourceForeground#20b2aa
  • input.background#000000
  • input.border#c6c6c4
  • list.activeSelectionBackground#696969
  • list.activeSelectionForeground#c6c6c4
  • list.dropBackground#40404099
  • list.errorForeground#ff2400
  • list.focusBackground#fffafa
  • list.focusForeground#696969
  • list.highlightForeground#00abf0
  • list.hoverBackground#fffafa
  • list.hoverForeground#696969
  • list.inactiveFocusBackground#c6c6c4
  • list.inactiveSelectionBackground#404040
  • list.inactiveSelectionForeground#c6c6c4
  • list.invalidItemForeground#c6c6c4
  • list.warningForeground#fdff00
  • ports.iconRunningProcessForeground#0087bd
  • progressBar.background#c6c6c4
  • sideBar.background#000000
  • sideBar.foreground#c6c6c4
  • sideBarTitle.foreground#c6c6c4
  • statusBar.background#000000
  • statusBar.debuggingBackground#c40233
  • statusBar.foreground#c6c6c4
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#696969
  • tab.activeForeground#c6c6c4
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#c6c6c4
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0087bd
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#007fff
  • terminal.ansiBrightCyan#00cccc
  • terminal.ansiBrightGreen#04c03c
  • terminal.ansiBrightMagenta#ff1493
  • terminal.ansiBrightRed#ff2400
  • terminal.ansiBrightWhite#fffafa
  • terminal.ansiBrightYellow#fdff00
  • terminal.ansiCyan#20b2aa
  • terminal.ansiGreen#009f6b
  • terminal.ansiMagenta#9a4eae
  • terminal.ansiRed#c40233
  • terminal.ansiWhite#c6c6c4
  • terminal.ansiYellow#ffd700
  • terminal.background#000000
  • terminal.foreground#c6c6c4
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#c6c6c4
  • titleBar.border#000000
  • titleBar.inactiveBackground#696969
  • titleBar.inactiveForeground#c6c6c4

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
#c40233
entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name#009f6b
string#ffd700
storage.type, support.function, support.type, support.class#0087bd
keyword, storage, entity.name.tag#9a4eae
support.constant#20b2aa
keyword.operator.class, constant.other, source.php.embedded.line#c6c6c4
comment#696969
invalid#ff2400
#04c03c
variable.parameter#fdff00
#007fff
constant.numeric, constant.language, constant.character, constant.other#ff1493
#00cccc
#fffafa
Eggsthetic by friedegg - VS Code Theme