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#eaeaea
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#eaeaea
  • badge.background#fcfcfc
  • badge.foreground#234d7e
  • button.background#b2cbea
  • button.foreground#383838
  • button.hoverBackground#b2cbeabf
  • debugExceptionWidget.background#e6c547
  • debugExceptionWidget.border#af9018
  • debugToolBar.background#eaeaea
  • descriptionForeground#eaeaea
  • dropdown.background#000000
  • dropdown.border#595959
  • dropdown.foreground#eaeaea
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#e6c547bf
  • editor.findMatchBorder#af9018
  • editor.findMatchHighlightBackground#7aa6da99
  • editor.foreground#eaeaea
  • editor.hoverHighlightBackground#42424299
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#c397d899
  • editor.selectionBackground#7aa6da99
  • editor.selectionHighlightBackground#7aa6da99
  • editor.wordHighlightBackground#70c0babf
  • editor.wordHighlightStrongBackground#54ced6b3
  • editorBracketMatch.background#7aa6da99
  • editorBracketMatch.border#3471ba
  • editorCodeLens.foreground#eaeaea
  • editorCursor.foreground#eaeaea
  • editorError.foreground#ff3334
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#b9ca4a
  • editorGutter.deletedBackground#d54e53
  • editorGutter.modifiedBackground#7aa6da99
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#5c5c5c
  • editorIndentGuide.background1#5d5d5d
  • editorLineNumber.foreground#5d5d5d
  • editorRuler.foreground#5d5d5d
  • editorWhitespace.foreground#e7c547
  • editorWidget.background#000000
  • editorWidget.border#333333
  • errorForeground#ff3334
  • focusBorder#333333
  • foreground#eaeaea
  • gitDecoration.addedResourceForeground#b9ca4a
  • gitDecoration.conflictingResourceForeground#e6c547
  • gitDecoration.deletedResourceForeground#d54e53
  • gitDecoration.ignoredResourceForeground#e08d50
  • gitDecoration.modifiedResourceForeground#e6c547
  • gitDecoration.submoduleResourceForeground#c397d8
  • gitDecoration.untrackedResourceForeground#70c0ba
  • input.background#000000
  • input.border#eaeaea
  • list.activeSelectionBackground#666666
  • list.activeSelectionForeground#eaeaea
  • list.dropBackground#40404099
  • list.errorForeground#ff3334
  • list.focusBackground#373737
  • list.focusForeground#a6a6a6
  • list.highlightForeground#7aa6da
  • list.hoverBackground#373737
  • list.hoverForeground#a6a6a6
  • list.inactiveFocusBackground#424242
  • list.inactiveSelectionBackground#404040
  • list.inactiveSelectionForeground#eaeaea
  • list.invalidItemForeground#eaeaea
  • list.warningForeground#e7c547
  • ports.iconRunningProcessForeground#7aa6da
  • progressBar.background#424242
  • sideBar.background#000000
  • sideBar.foreground#eaeaea
  • sideBarTitle.foreground#eaeaea
  • statusBar.background#000000
  • statusBar.debuggingBackground#d54e53
  • statusBar.foreground#eaeaea
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#666666
  • tab.activeForeground#eaeaea
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#eaeaea
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7aa6da
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#7aa6da
  • terminal.ansiBrightCyan#54ced6
  • terminal.ansiBrightGreen#9ec400
  • terminal.ansiBrightMagenta#b77ee0
  • terminal.ansiBrightRed#ff3334
  • terminal.ansiBrightWhite#2a2a2a
  • terminal.ansiBrightYellow#e7c547
  • terminal.ansiCyan#70c0ba
  • terminal.ansiGreen#b9ca4a
  • terminal.ansiMagenta#c397d8
  • terminal.ansiRed#d54e53
  • terminal.ansiWhite#424242
  • terminal.ansiYellow#e6c547
  • terminal.background#000000
  • terminal.foreground#eaeaea
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#eaeaea
  • titleBar.border#000000
  • titleBar.inactiveBackground#666666
  • titleBar.inactiveForeground#eaeaea

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
#d54e53
entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name#b9ca4a
string#e6c547
storage.type, support.function, support.type, support.class#7aa6da
keyword, storage, entity.name.tag#c397d8
support.constant#70c0ba
keyword.operator.class, constant.other, source.php.embedded.line#424242
comment#666666
invalid#ff3334
#9ec400
variable.parameter#e7c547
#7aa6da
constant.numeric, constant.language, constant.character, constant.other#b77ee0
#54ced6
#2a2a2a
Eggsthetic by friedegg - VS Code Theme