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.activeBackground#001400
  • activityBar.activeBorder#00FF00
  • activityBar.background#000000
  • activityBar.border#001400
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#00FF00
  • activityBarBadge.foreground#000000
  • badge.background#00ff0d
  • button.background#00ff0d
  • button.border#002800
  • button.foreground#002800
  • button.hoverBackground#00ff0d
  • button.secondaryBackground#002800
  • button.secondaryForeground#00ff0d
  • button.secondaryHoverBackground#002800
  • dropdown.background#000000
  • dropdown.border#001400
  • dropdown.foreground#FFFFFF
  • dropdown.listBackground#001400
  • editor.background#000000
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#00440079
  • editor.lineHighlightBackground#001400
  • editor.selectionBackground#004400
  • editorBracketMatch.background#004400
  • editorBracketMatch.border#FFFFFF
  • editorCursor.foreground#00FF00
  • editorGroup.border#001400
  • editorGroupHeader.tabsBackground#001400
  • editorGroupHeader.tabsBorder#001400
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#001400
  • editorHoverWidget.foreground#FFFFFF
  • editorHoverWidget.statusBarBackground#001400
  • editorIndentGuide.activeBackground1#001400
  • editorIndentGuide.background1#000000
  • editorLineNumber.foreground#808080
  • focusBorder#002800
  • input.background#000000
  • input.border#001400
  • input.foreground#FFFFFF
  • input.placeholderForeground#CCCCCC
  • inputOption.activeBackground#001400
  • inputOption.activeBorder#001400
  • inputOption.activeForeground#FFFFFF
  • inputValidation.errorBackground#004400
  • inputValidation.errorBorder#FF0000
  • inputValidation.infoBackground#004400
  • inputValidation.infoBorder#1E90FF
  • inputValidation.warningBackground#004400
  • inputValidation.warningBorder#FFA500
  • inputValidation.warningForeground#FFA500
  • list.activeSelectionBackground#004400
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#383B3D
  • list.focusBackground#001400
  • list.focusForeground#FFFFFF
  • list.hoverBackground#001400
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#004400
  • list.inactiveSelectionForeground#CCCCCC
  • quickInput.background#000000
  • quickInput.foreground#FFFFFF
  • quickInputList.focusBackground#001400
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#FFFFFF
  • quickInputTitle.background#001400
  • sideBar.background#000000
  • sideBar.border#001400
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#001400
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#001400
  • statusBar.border#001400
  • statusBar.debuggingBackground#00ff0d
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#001400
  • statusBar.noFolderForeground#FFFFFF
  • tab.activeBackground#001400
  • tab.activeBorder#00FF00
  • tab.activeBorderTop#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFA500
  • tab.border#001400
  • tab.hoverBackground#001400
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#CCCCCC
  • tab.unfocusedActiveForeground#CCCCCC
  • tab.unfocusedHoverBackground#001400
  • tab.unfocusedInactiveForeground#CCCCCC
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#569CD6
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#9CDCFE
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#B5CEA8
  • terminal.ansiBrightMagenta#B19CD9
  • terminal.ansiBrightRed#E54B4B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F2C000
  • terminal.ansiCyan#4EC9B0
  • terminal.ansiGreen#4E9A06
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#CE9178
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#D7BA7D
  • terminal.background#000000
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#001400
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#00FF00—
constant, entity.name.constant, variable.other.constant, variable.language#4E9A06—
variable#00FF00—
keyword#4E9A06—
storage, storage.type#4E9A06—
entity.name.class, entity.name.type.class#4E9A06—
meta.class#00FF00—
string#00FF00—
support.function#DCDCAA—
entity.name.function#DCDCAA—
variable.parameter#00FF00—
entity.name.tag#4E9A06—
keyword.operator#FFFFFF—
invalid#F44747—
source.js#FFFFFF—
string.quoted.double.js#00FF00—
support.function.console.js#DCDCAA—
variable.other.readwrite.js#00FF00—
punctuation.definition.string.begin.js#FFFFFF—
punctuation.definition.string.end.js#FFFFFF—