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#2A1A1C
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#C898A8
  • activityBarBadge.background#9A2850
  • activityBarBadge.foreground#ffffff
  • badge.background#9A2850
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#9A2850
  • breadcrumb.background#FEFAFB
  • breadcrumb.focusForeground#2A1A1C
  • breadcrumb.foreground#6A5558
  • breadcrumbPicker.background#ffffff
  • button.background#9A2850
  • button.foreground#ffffff
  • button.hoverBackground#8A2048
  • button.secondaryBackground#3A5568
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2A4558
  • descriptionForeground#6A5558
  • dropdown.background#ffffff
  • dropdown.border#E8D0D4
  • dropdown.foreground#2A1A1C
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#9A285050
  • editor.findMatchHighlightBackground#9A285025
  • editor.foreground#2A1A1C
  • editor.inactiveSelectionBackground#FCE8EC40
  • editor.lineHighlightBackground#FEFAFB
  • editor.lineHighlightBorder#FCE8EC
  • editor.selectionBackground#9A285030
  • editor.wordHighlightBackground#3A556820
  • editor.wordHighlightStrongBackground#3A556840
  • editorBracketMatch.background#3A556830
  • editorBracketMatch.border#3A5568
  • editorCursor.foreground#9A2850
  • editorGroupHeader.tabsBackground#FCE8EC
  • editorGutter.addedBackground#509068
  • editorGutter.deletedBackground#9A2850
  • editorGutter.modifiedBackground#3A5568
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#E8D0D4
  • editorIndentGuide.activeBackground1#D8A8B0
  • editorIndentGuide.background1#F0D8DC
  • editorLineNumber.activeForeground#9A2850
  • editorLineNumber.foreground#D8B8C0
  • editorRuler.foreground#F0D8DC
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#2A1A1C
  • editorSuggestWidget.highlightForeground#9A2850
  • editorSuggestWidget.selectedBackground#FCE8EC
  • editorWidget.background#FEFAFB
  • editorWidget.border#E8D0D4
  • editorWidget.foreground#2A1A1C
  • errorForeground#9A2850
  • focusBorder#9A285080
  • gitDecoration.addedResourceForeground#509068
  • gitDecoration.conflictingResourceForeground#B83060
  • gitDecoration.deletedResourceForeground#9A2850
  • gitDecoration.ignoredResourceForeground#B8A0A8
  • gitDecoration.modifiedResourceForeground#3A5568
  • gitDecoration.untrackedResourceForeground#4A8898
  • icon.foreground#2A1A1C
  • input.background#ffffff
  • input.border#E8D0D4
  • input.foreground#2A1A1C
  • input.placeholderForeground#A08890
  • inputOption.activeBackground#9A2850
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#9A2850
  • inputValidation.errorBorder#9A2850
  • inputValidation.warningBackground#A08040
  • inputValidation.warningBorder#A08040
  • list.activeSelectionBackground#9A2850
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#FCE8EC
  • list.hoverBackground#FDF8F9
  • list.inactiveSelectionBackground#FCE8EC
  • list.inactiveSelectionForeground#2A1A1C
  • minimap.background#FEFAFB
  • minimap.findMatchHighlight#9A285080
  • minimap.selectionHighlight#9A285050
  • minimapGutter.addedBackground#509068
  • minimapGutter.deletedBackground#9A2850
  • minimapGutter.modifiedBackground#3A5568
  • notificationCenter.border#E8D0D4
  • notifications.background#ffffff
  • notifications.border#E8D0D4
  • notifications.foreground#2A1A1C
  • notificationsErrorIcon.foreground#9A2850
  • notificationsInfoIcon.foreground#3A5568
  • notificationsWarningIcon.foreground#A08040
  • panel.background#FEFAFB
  • panel.border#E8D0D4
  • panelTitle.activeBorder#9A2850
  • panelTitle.activeForeground#2A1A1C
  • panelTitle.inactiveForeground#A08890
  • peekView.border#9A2850
  • peekViewEditor.background#FEFAFB
  • peekViewEditorGutter.background#FCE8EC
  • peekViewResult.background#FCE8EC
  • peekViewResult.fileForeground#2A1A1C
  • peekViewResult.lineForeground#2A1A1C
  • peekViewResult.matchHighlightBackground#9A285050
  • peekViewResult.selectionBackground#9A285030
  • peekViewResult.selectionForeground#2A1A1C
  • peekViewTitle.background#2A1A1C
  • peekViewTitleDescription.foreground#C898A8
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#9A2850
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#9A2850
  • scrollbarSlider.background#D8A8B050
  • scrollbarSlider.hoverBackground#D8A8B080
  • selection.background#9A285040
  • sideBar.background#FEFAFB
  • sideBar.foreground#2A1A1C
  • sideBarSectionHeader.background#FCE8EC
  • sideBarSectionHeader.foreground#2A1A1C
  • sideBarTitle.foreground#9A2850
  • statusBar.background#9A2850
  • statusBar.debuggingBackground#B83060
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#3A5568
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#9A2850
  • tab.activeForeground#2A1A1C
  • tab.border#F8E0E4
  • tab.hoverBackground#ffffff
  • tab.hoverForeground#9A2850
  • tab.inactiveBackground#FEFAFB
  • tab.inactiveForeground#6A5558
  • terminal.ansiBlack#2A1A1C
  • terminal.ansiBlue#3A5568
  • terminal.ansiBrightBlack#6A5558
  • terminal.ansiBrightBlue#4A6578
  • terminal.ansiBrightCyan#5A98A8
  • terminal.ansiBrightGreen#60A078
  • terminal.ansiBrightMagenta#B83060
  • terminal.ansiBrightRed#B83060
  • terminal.ansiBrightWhite#FEFAFB
  • terminal.ansiBrightYellow#B09050
  • terminal.ansiCyan#4A8898
  • terminal.ansiGreen#509068
  • terminal.ansiMagenta#9A2850
  • terminal.ansiRed#9A2850
  • terminal.ansiWhite#FCE8EC
  • terminal.ansiYellow#A08040
  • terminal.background#ffffff
  • terminal.foreground#2A1A1C
  • textLink.activeForeground#8A2048
  • textLink.foreground#9A2850
  • titleBar.activeBackground#2A1A1C
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#3A2A2C
  • titleBar.inactiveForeground#C898A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A08890italic
comment.block.preprocessor#A08890
comment.documentation, comment.block.documentation#807078—
invalid.illegal#ffffff—
keyword.operator#6A5558—
keyword, storage#9A2850—
storage.type, support.type#3A5568—
constant.language, support.constant, variable.language#8A2048—
variable, support.variable#2A1A1C—
entity.name.function, support.function#9A2850bold
entity.name.type, entity.other.inherited-class, support.class#3A5568bold
entity.name.exception#9A2850—
entity.name.section#2A1A1Cbold
constant.numeric, constant.character, constant#4A6578—
string#4A8898—
constant.character.escape#9A2850—
string.regexp#8A2048—
constant.other.symbol#4A6578—
punctuation#807078—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#A08890—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D8B8C0—
entity.name.tag#9A2850—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#3A5568italic
constant.character.entity, punctuation.definition.entity#4A6578—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#3A5568—
meta.property-name, support.type.property-name#9A2850—
meta.property-value, meta.property-value constant.other, support.constant.property-value#4A8898—
keyword.other.important#9A2850bold
markup.changed#3A5568—
markup.deleted#9A2850—
markup.italic#2A1A1Citalic
markup.error#9A2850—
markup.inserted#509068—
meta.link#9A2850—
markup.output, markup.raw#6A5558—
markup.prompt#6A5558—
markup.heading#9A2850bold
markup.bold#2A1A1Cbold
markup.traceback#9A2850—
markup.underline—underline
markup.quote#6A5558italic
markup.list#9A2850—
markup.bold, markup.italic#2A1A1C—
markup.inline.raw#4A6578
meta.diff.range, meta.diff.index, meta.separator#3A5568—
meta.diff.header.from-file#9A2850—
meta.diff.header.to-file#509068—