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#fefefe
  • badge.foreground#005f6e
  • button.background#7deeff
  • button.foreground#444444
  • button.hoverBackground#7deeffbf
  • debugExceptionWidget.background#ffa500
  • debugExceptionWidget.border#996300
  • debugToolBar.background#eaeaea
  • descriptionForeground#eaeaea
  • dropdown.background#000000
  • dropdown.border#595959
  • dropdown.foreground#eaeaea
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#ffa500bf
  • editor.findMatchBorder#996300
  • editor.findMatchHighlightBackground#3be5ff99
  • editor.foreground#eaeaea
  • editor.hoverHighlightBackground#42424299
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#80008099
  • editor.selectionBackground#3be5ff99
  • editor.selectionHighlightBackground#3be5ff99
  • editor.wordHighlightBackground#00ffffbf
  • editor.wordHighlightStrongBackground#00ffffb3
  • editorBracketMatch.background#3be5ff99
  • editorBracketMatch.border#00b8d4
  • editorCodeLens.foreground#eaeaea
  • editorCursor.foreground#eaeaea
  • editorError.foreground#ff0000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#bfff00
  • editorGutter.deletedBackground#ff0000
  • editorGutter.modifiedBackground#3be5ff99
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#5c5c5c
  • editorIndentGuide.background1#5d5d5d
  • editorLineNumber.foreground#5d5d5d
  • editorRuler.foreground#5d5d5d
  • editorWhitespace.foreground#d1a055
  • editorWidget.background#000000
  • editorWidget.border#333333
  • errorForeground#ff0000
  • focusBorder#333333
  • foreground#eaeaea
  • gitDecoration.addedResourceForeground#bfff00
  • gitDecoration.conflictingResourceForeground#ffa500
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#ff6f00
  • gitDecoration.modifiedResourceForeground#ffa500
  • gitDecoration.submoduleResourceForeground#800080
  • gitDecoration.untrackedResourceForeground#00ffff
  • input.background#000000
  • input.border#eaeaea
  • list.activeSelectionBackground#4a4a4a
  • list.activeSelectionForeground#eaeaea
  • list.dropBackground#40404099
  • list.errorForeground#ff0000
  • list.focusBackground#3e3e3e
  • list.focusForeground#b0b0b0
  • list.highlightForeground#3BE5FF
  • list.hoverBackground#3e3e3e
  • list.hoverForeground#b0b0b0
  • list.inactiveFocusBackground#424242
  • list.inactiveSelectionBackground#404040
  • list.inactiveSelectionForeground#eaeaea
  • list.invalidItemForeground#eaeaea
  • list.warningForeground#d1a055
  • ports.iconRunningProcessForeground#3BE5FF
  • progressBar.background#424242
  • sideBar.background#000000
  • sideBar.foreground#eaeaea
  • sideBarTitle.foreground#eaeaea
  • statusBar.background#000000
  • statusBar.debuggingBackground#ff0000
  • statusBar.foreground#eaeaea
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#4a4a4a
  • tab.activeForeground#eaeaea
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#eaeaea
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3BE5FF
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#a0c8e0
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#bfff00
  • terminal.ansiBrightMagenta#d8bfd8
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#2a2a2a
  • terminal.ansiBrightYellow#d1a055
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#bfff00
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#424242
  • terminal.ansiYellow#ffa500
  • terminal.background#000000
  • terminal.foreground#eaeaea
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#eaeaea
  • titleBar.border#000000
  • titleBar.inactiveBackground#4a4a4a
  • 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
#ff0000
entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name#bfff00
string#ffa500
storage.type, support.function, support.type, support.class#3BE5FF
keyword, storage, entity.name.tag#800080
support.constant#00ffff
keyword.operator.class, constant.other, source.php.embedded.line#424242
comment#4a4a4a
invalid#ff0000
#bfff00
variable.parameter#d1a055
#a0c8e0
constant.numeric, constant.language, constant.character, constant.other#d8bfd8
#00ffff
#2a2a2a
Eggsthetic by friedegg - VS Code Theme