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#3D2D2A
  • activityBar.border#F0D5CC
  • activityBar.foreground#FFD0C8
  • activityBar.inactiveForeground#9D8A85
  • activityBarBadge.background#E85A5A
  • activityBarBadge.foreground#ffffff
  • badge.background#E85A5A
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#DA5A48
  • breadcrumb.background#FFFCFA
  • breadcrumb.focusForeground#383131
  • breadcrumb.foreground#706060
  • breadcrumbPicker.background#ffffff
  • button.background#E85A5A
  • button.border#E85A5A60
  • button.foreground#ffffff
  • button.hoverBackground#D84848
  • button.secondaryBackground#5D4A45
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#3D2D2A
  • descriptionForeground#706060
  • dropdown.background#ffffff
  • dropdown.border#F0D5CC
  • dropdown.foreground#3D2D2A
  • dropdown.listBackground#FFF8F5
  • editor.background#FFFCFA
  • editor.findMatchBackground#E8A05050
  • editor.findMatchBorder#E85A5A
  • editor.findMatchHighlightBackground#E85A5A28
  • editor.foreground#3D2D2A
  • editor.inactiveSelectionBackground#FFEBE640
  • editor.lineHighlightBackground#FFF3EE
  • editor.lineHighlightBorder#FFEBE600
  • editor.selectionBackground#E85A5A35
  • editor.wordHighlightBackground#E85A5A20
  • editor.wordHighlightBorder#E85A5A60
  • editor.wordHighlightStrongBackground#E85A5A40
  • editor.wordHighlightStrongBorder#E85A5A80
  • editorBracketMatch.background#E85A5A30
  • editorBracketMatch.border#E85A5A
  • editorCursor.foreground#E85A5A
  • editorGroupHeader.tabsBackground#FFF8F5
  • editorGroupHeader.tabsBorder#F0D5CC
  • editorGutter.addedBackground#70A070
  • editorGutter.background#FFFCFA
  • editorGutter.deletedBackground#D84848
  • editorGutter.modifiedBackground#E8A050
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#F0D5CC
  • editorHoverWidget.statusBarBackground#FFF8F5
  • editorIndentGuide.activeBackground1#D8A898
  • editorIndentGuide.background1#F0D5CC
  • editorLineNumber.activeForeground#E85A5A
  • editorLineNumber.foreground#D0C0B8
  • editorRuler.foreground#F0D5CC
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#F0D5CC
  • editorSuggestWidget.focusHighlightForeground#D84848
  • editorSuggestWidget.foreground#3D2D2A
  • editorSuggestWidget.highlightForeground#E85A5A
  • editorSuggestWidget.selectedBackground#FFEBE6
  • editorWidget.background#ffffff
  • editorWidget.border#F0D5CC
  • editorWidget.foreground#3D2D2A
  • editorWidget.resizeBorder#E85A5A
  • errorForeground#C03020
  • focusBorder#DA5A4880
  • gitDecoration.addedResourceForeground#609060
  • gitDecoration.conflictingResourceForeground#E05040
  • gitDecoration.deletedResourceForeground#C03020
  • gitDecoration.ignoredResourceForeground#A09090
  • gitDecoration.modifiedResourceForeground#D89020
  • gitDecoration.untrackedResourceForeground#C05060
  • icon.foreground#383131
  • input.background#ffffff
  • input.border#F0D5CC
  • input.foreground#3D2D2A
  • input.placeholderForeground#9D8A85
  • inputOption.activeBackground#E85A5A
  • inputOption.activeBorder#D84848
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#D8484820
  • inputValidation.errorBorder#D84848
  • inputValidation.infoBackground#E85A5A20
  • inputValidation.infoBorder#E85A5A
  • inputValidation.warningBackground#E8803020
  • inputValidation.warningBorder#E88030
  • list.activeSelectionBackground#E85A5A
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#FFEBE6
  • list.hoverBackground#FFF3EE
  • list.inactiveSelectionBackground#FFEBE6
  • list.inactiveSelectionForeground#3D2D2A
  • minimap.background#FFFCFA
  • minimap.findMatchHighlight#D8902080
  • minimap.selectionHighlight#DA5A4850
  • minimapGutter.addedBackground#609060
  • minimapGutter.deletedBackground#C03020
  • minimapGutter.modifiedBackground#D89020
  • notificationCenter.border#E8D0CC
  • notifications.background#ffffff
  • notifications.border#E8D0CC
  • notifications.foreground#383131
  • notificationsErrorIcon.foreground#C03020
  • notificationsInfoIcon.foreground#DA5A48
  • notificationsWarningIcon.foreground#C08020
  • panel.background#FFFCFA
  • panel.border#E8D0CC
  • panelTitle.activeBorder#DA5A48
  • panelTitle.activeForeground#383131
  • panelTitle.inactiveForeground#A09090
  • peekView.border#DA5A48
  • peekViewEditor.background#FFFCFA
  • peekViewEditorGutter.background#FEECE8
  • peekViewResult.background#FEECE8
  • peekViewResult.fileForeground#383131
  • peekViewResult.lineForeground#383131
  • peekViewResult.matchHighlightBackground#DA5A4850
  • peekViewResult.selectionBackground#DA5A4830
  • peekViewResult.selectionForeground#383131
  • peekViewTitle.background#383131
  • peekViewTitleDescription.foreground#AA9999
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#DA5A48
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#E85A5A
  • scrollbarSlider.background#E8A89860
  • scrollbarSlider.hoverBackground#E8A89880
  • selection.background#DA5A4840
  • sideBar.background#FFF8F5
  • sideBar.foreground#5D4A45
  • sideBarSectionHeader.background#FFEBE6
  • sideBarSectionHeader.border#F0D5CC
  • sideBarSectionHeader.foreground#3D2D2A
  • sideBarTitle.foreground#E85A5A
  • statusBar.background#E85A5A
  • statusBar.border#F0D5CC
  • statusBar.debuggingBackground#D84848
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#5D4A45
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#FFFCFA
  • tab.activeBorder#E85A5A
  • tab.activeBorderTop#E85A5A
  • tab.activeForeground#E85A5A
  • tab.border#F0D5CC
  • tab.hoverBackground#FFF3EE
  • tab.hoverBorder#E85A5A80
  • tab.hoverForeground#E85A5A
  • tab.inactiveBackground#FFF8F5
  • tab.inactiveForeground#8D7A75
  • terminal.ansiBlack#383131
  • terminal.ansiBlue#506080
  • terminal.ansiBrightBlack#706060
  • terminal.ansiBrightBlue#607090
  • terminal.ansiBrightCyan#609090
  • terminal.ansiBrightGreen#70B070
  • terminal.ansiBrightMagenta#C05060
  • terminal.ansiBrightRed#E05040
  • terminal.ansiBrightWhite#FFFCFA
  • terminal.ansiBrightYellow#E0A040
  • terminal.ansiCyan#508080
  • terminal.ansiGreen#609060
  • terminal.ansiMagenta#A04050
  • terminal.ansiRed#C03020
  • terminal.ansiWhite#FEECE8
  • terminal.ansiYellow#C08020
  • terminal.background#ffffff
  • terminal.foreground#383131
  • textLink.activeForeground#C04030
  • textLink.foreground#DA5A48
  • titleBar.activeBackground#3D2D2A
  • titleBar.activeForeground#FFD0C8
  • titleBar.border#F0D5CC
  • titleBar.inactiveBackground#5D4A45
  • titleBar.inactiveForeground#9D8A85

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A09090italic
comment.block.preprocessor#A09090
comment.documentation, comment.block.documentation#807060
invalid.illegal#ffffff
keyword.operator#706060
keyword, storage#C04030
storage.type, support.type#611D1E
constant.language, support.constant, variable.language#D07040
variable, support.variable#383131
entity.name.function, support.function#DA5A48bold
entity.name.type, entity.other.inherited-class, support.class#611D1Ebold
entity.name.exception#C03020
entity.name.section#383131bold
constant.numeric, constant.character, constant#D89020
string#887050
constant.character.escape#DA5A48
string.regexp#D07040
constant.other.symbol#D89020
punctuation#706060
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#A09090
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C0A0A0
entity.name.tag#DA5A48
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#611D1Eitalic
constant.character.entity, punctuation.definition.entity#D89020
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#611D1E
meta.property-name, support.type.property-name#DA5A48
meta.property-value, meta.property-value constant.other, support.constant.property-value#887050
keyword.other.important#C04030bold
markup.changed#D89020
markup.deleted#C03020
markup.italic#383131italic
markup.error#C03020
markup.inserted#609060
meta.link#DA5A48
markup.output, markup.raw#706060
markup.prompt#706060
markup.heading#DA5A48bold
markup.bold#383131bold
markup.traceback#C03020
markup.underlineunderline
markup.quote#706060italic
markup.list#DA5A48
markup.bold, markup.italic#383131
markup.inline.raw#D07040
meta.diff.range, meta.diff.index, meta.separator#611D1E
meta.diff.header.from-file#C03020
meta.diff.header.to-file#609060

Shiki preview

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

Loading...