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.underlineunderline
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...