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#282c34
  • activityBar.foreground#F8F8F2
  • activityBarBadge.background#6fa19b
  • activityBarBadge.foreground#F8F8F2
  • badge.background#44475A
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#282c34
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#61dafb
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#F8F8F2
  • contrastBorder#1e2127
  • debugToolBar.background#282c34
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • editor.background#282c34
  • editor.findMatchBackground#353b45
  • editor.findMatchHighlightBackground#353b45
  • editor.lineHighlightBackground#1e2127
  • editor.selectionBackground#353b45
  • editorBracketMatch.background#252b39
  • editorBracketMatch.border#c5a5c5
  • editorCodeLens.foreground#6272A4
  • editorGroupHeader.tabsBackground#282c34
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#282c34
  • editorLineNumber.foreground#999999
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWidget.background#21222C
  • focusBorder#282c34
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#282A36
  • input.border#1e2127
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#ff5370
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBorder#ffcb6b
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • notification.background#282c34
  • panel.background#282c34
  • panel.border#282c34
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • progressBar.background#61dafb
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#F8F8F2
  • sideBar.background#282c34
  • sideBar.foreground#bbbbbb
  • sideBarSectionHeader.background#282c34
  • statusBar.background#282c34
  • tab.activeBorder#ddd
  • tab.inactiveBackground#282c34
  • tab.inactiveForeground#eee
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#282c34
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#282c34
  • titleBar.inactiveBackground#282c34
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b2b2b2—
keyword, storage.type.class#c5a5c5—
string#8dc891—
function#79b6f2—
variable, meta.jsx.children#fff—
type, support.type, support.type.property-name.json.comments#fac863—
variable.other.constant#8be9ee—
markup.heading.1 punctuation.definition.heading#ff0000—
constant.character.entity#d67c9b—
entity.name.exception#d67c9b—
entity.name.function, support.function, support.class.builtin, keyword.other.name-of-parameter#79b6f2—
entity.name.tag#fc929e—
support.class, support.class.component, constant.numeric, punctuation.terminator.statement, support.variable.property.dom#fc929e—
entity.other.inherited-class, entity.name.type#fac863—
storage.modifier, storage.type#c5a5c5—
constructor#79b6f2—
variable.language, entity.other.attribute-name, constant.language.undefined, constant.language.null#c5a5c5
constant.language.boolean#ff8b50—
variable.parameter, variable.other.constant, variable.other.readwrite, meta.object-literal.key#fff—
punctuation, punctuation.definition.tag, punctuation.section.embedded, meta.brace.round, meta.array.literal#88c6be—
keyword.operator#d7deea—
punctuation.definition.comment, comment.line, comment.line.double-slash#b2b2b2italic