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#1C2130
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#72869F
  • activityBarBadge.background#973D6A
  • activityBarBadge.foreground#ffffff
  • badge.background#973D6A
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#973D6A
  • breadcrumb.background#F6F0F2
  • breadcrumb.focusForeground#1C2130
  • breadcrumb.foreground#5A6578
  • breadcrumbPicker.background#ffffff
  • button.background#973D6A
  • button.foreground#ffffff
  • button.hoverBackground#802D50
  • button.secondaryBackground#3C4359
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2C3440
  • descriptionForeground#5A6578
  • dropdown.background#ffffff
  • dropdown.border#D8CDCC
  • dropdown.foreground#1C2130
  • dropdown.listBackground#ffffff
  • editor.background#FFFCFA
  • editor.findMatchBackground#973D6A50
  • editor.findMatchHighlightBackground#973D6A25
  • editor.foreground#1C2130
  • editor.inactiveSelectionBackground#E4D8DC40
  • editor.lineHighlightBackground#F0E8EB
  • editor.lineHighlightBorder#E4D8DC
  • editor.selectionBackground#973D6A30
  • editor.wordHighlightBackground#72869F20
  • editor.wordHighlightStrongBackground#72869F40
  • editorBracketMatch.background#72869F30
  • editorBracketMatch.border#72869F
  • editorCursor.foreground#973D6A
  • editorGroupHeader.tabsBackground#E4D8DC
  • editorGutter.addedBackground#508060
  • editorGutter.deletedBackground#973D6A
  • editorGutter.modifiedBackground#72869F
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#D8CDCC
  • editorIndentGuide.activeBackground1#A898A0
  • editorIndentGuide.background1#D8CDCC
  • editorLineNumber.activeForeground#973D6A
  • editorLineNumber.foreground#A098A8
  • editorRuler.foreground#D8CDCC
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#1C2130
  • editorSuggestWidget.highlightForeground#973D6A
  • editorSuggestWidget.selectedBackground#E4D8DC
  • editorWidget.background#F6F0F2
  • editorWidget.border#D8CDCC
  • editorWidget.foreground#1C2130
  • errorForeground#973D6A
  • focusBorder#973D6A80
  • gitDecoration.addedResourceForeground#508060
  • gitDecoration.conflictingResourceForeground#B04070
  • gitDecoration.deletedResourceForeground#973D6A
  • gitDecoration.ignoredResourceForeground#A098A0
  • gitDecoration.modifiedResourceForeground#72869F
  • gitDecoration.untrackedResourceForeground#805070
  • icon.foreground#1C2130
  • input.background#ffffff
  • input.border#D8CDCC
  • input.foreground#1C2130
  • input.placeholderForeground#8890A0
  • inputOption.activeBackground#973D6A
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#973D6A
  • inputValidation.errorBorder#973D6A
  • inputValidation.warningBackground#B08040
  • inputValidation.warningBorder#B08040
  • list.activeSelectionBackground#973D6A
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#E4D8DC
  • list.hoverBackground#F0E8EB
  • list.inactiveSelectionBackground#E4D8DC
  • list.inactiveSelectionForeground#1C2130
  • minimap.background#F6F0F2
  • minimap.findMatchHighlight#973D6A80
  • minimap.selectionHighlight#973D6A50
  • minimapGutter.addedBackground#508060
  • minimapGutter.deletedBackground#973D6A
  • minimapGutter.modifiedBackground#72869F
  • notificationCenter.border#D8CDCC
  • notifications.background#ffffff
  • notifications.border#D8CDCC
  • notifications.foreground#1C2130
  • notificationsErrorIcon.foreground#973D6A
  • notificationsInfoIcon.foreground#3C4359
  • notificationsWarningIcon.foreground#B08040
  • panel.background#F6F0F2
  • panel.border#D8CDCC
  • panelTitle.activeBorder#973D6A
  • panelTitle.activeForeground#1C2130
  • panelTitle.inactiveForeground#8890A0
  • peekView.border#973D6A
  • peekViewEditor.background#F6F0F2
  • peekViewEditorGutter.background#E4D8DC
  • peekViewResult.background#E4D8DC
  • peekViewResult.fileForeground#1C2130
  • peekViewResult.lineForeground#1C2130
  • peekViewResult.matchHighlightBackground#973D6A50
  • peekViewResult.selectionBackground#973D6A30
  • peekViewResult.selectionForeground#1C2130
  • peekViewTitle.background#1C2130
  • peekViewTitleDescription.foreground#A098A8
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#973D6A
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#973D6A
  • scrollbarSlider.background#A898A050
  • scrollbarSlider.hoverBackground#A898A080
  • selection.background#973D6A40
  • sideBar.background#F6F0F2
  • sideBar.foreground#1C2130
  • sideBarSectionHeader.background#E4D8DC
  • sideBarSectionHeader.foreground#1C2130
  • sideBarTitle.foreground#973D6A
  • statusBar.background#3C4359
  • statusBar.debuggingBackground#973D6A
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#282E3A
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#973D6A
  • tab.activeForeground#1C2130
  • tab.border#D8CDCC
  • tab.hoverBackground#ffffff
  • tab.hoverForeground#973D6A
  • tab.inactiveBackground#F6F0F2
  • tab.inactiveForeground#5A6578
  • terminal.ansiBlack#1C2130
  • terminal.ansiBlue#3C4359
  • terminal.ansiBrightBlack#5A6578
  • terminal.ansiBrightBlue#506080
  • terminal.ansiBrightCyan#889AB0
  • terminal.ansiBrightGreen#609070
  • terminal.ansiBrightMagenta#A06080
  • terminal.ansiBrightRed#B04070
  • terminal.ansiBrightWhite#F6F0F2
  • terminal.ansiBrightYellow#C09050
  • terminal.ansiCyan#72869F
  • terminal.ansiGreen#508060
  • terminal.ansiMagenta#805070
  • terminal.ansiRed#973D6A
  • terminal.ansiWhite#E4D8DC
  • terminal.ansiYellow#B08040
  • terminal.background#ffffff
  • terminal.foreground#1C2130
  • textLink.activeForeground#802D50
  • textLink.foreground#973D6A
  • titleBar.activeBackground#1C2130
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#2C3440
  • titleBar.inactiveForeground#72869F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8890A0italic
comment.block.preprocessor#8890A0
comment.documentation, comment.block.documentation#607080—
invalid.illegal#ffffff—
keyword.operator#5A6578—
keyword, storage#973D6A—
storage.type, support.type#3C4359—
constant.language, support.constant, variable.language#802D50—
variable, support.variable#1C2130—
entity.name.function, support.function#72869Fbold
entity.name.type, entity.other.inherited-class, support.class#3C4359bold
entity.name.exception#973D6A—
entity.name.section#1C2130bold
constant.numeric, constant.character, constant#506080—
string#4A7080—
constant.character.escape#973D6A—
string.regexp#802D50—
constant.other.symbol#506080—
punctuation#607080—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#A098A8—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8C98A8—
entity.name.tag#973D6A—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#3C4359italic
constant.character.entity, punctuation.definition.entity#506080—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#3C4359—
meta.property-name, support.type.property-name#973D6A—
meta.property-value, meta.property-value constant.other, support.constant.property-value#4A7080—
keyword.other.important#973D6Abold
markup.changed#72869F—
markup.deleted#973D6A—
markup.italic#1C2130italic
markup.error#973D6A—
markup.inserted#508060—
meta.link#973D6A—
markup.output, markup.raw#5A6578—
markup.prompt#5A6578—
markup.heading#973D6Abold
markup.bold#1C2130bold
markup.traceback#973D6A—
markup.underline—underline
markup.quote#5A6578italic
markup.list#973D6A—
markup.bold, markup.italic#1C2130—
markup.inline.raw#506080
meta.diff.range, meta.diff.index, meta.separator#3C4359—
meta.diff.header.from-file#973D6A—
meta.diff.header.to-file#508060—