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#2A3040
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#9098B0
  • activityBarBadge.background#E4B840
  • activityBarBadge.foreground#2A3040
  • badge.background#E4B840
  • badge.foreground#2A3040
  • breadcrumb.activeSelectionForeground#C09820
  • breadcrumb.background#FFFCFA
  • breadcrumb.focusForeground#2A3040
  • breadcrumb.foreground#606880
  • breadcrumbPicker.background#ffffff
  • button.background#E4B840
  • button.foreground#2A3040
  • button.hoverBackground#D4A830
  • button.secondaryBackground#3A4050
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2A3040
  • descriptionForeground#606880
  • dropdown.background#ffffff
  • dropdown.border#E0D8C0
  • dropdown.foreground#2A3040
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#E4B84050
  • editor.findMatchHighlightBackground#E4B84025
  • editor.foreground#2A3040
  • editor.inactiveSelectionBackground#FDFADC40
  • editor.lineHighlightBackground#FFFEF8
  • editor.lineHighlightBorder#FDFADC
  • editor.selectionBackground#E4B84030
  • editor.wordHighlightBackground#E4B84020
  • editor.wordHighlightStrongBackground#E4B84040
  • editorBracketMatch.background#E4B84030
  • editorBracketMatch.border#C09820
  • editorCursor.foreground#E4B840
  • editorGroupHeader.tabsBackground#FDFADC
  • editorGutter.addedBackground#609060
  • editorGutter.deletedBackground#C05050
  • editorGutter.modifiedBackground#D4A830
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#E0D8C0
  • editorIndentGuide.activeBackground1#D0B880
  • editorIndentGuide.background1#EEE8D0
  • editorLineNumber.activeForeground#C09820
  • editorLineNumber.foreground#D0C8B0
  • editorRuler.foreground#EEE8D0
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.foreground#2A3040
  • editorSuggestWidget.highlightForeground#C09820
  • editorSuggestWidget.selectedBackground#FDFADC
  • editorWidget.background#FFFCFA
  • editorWidget.border#E0D8C0
  • editorWidget.foreground#2A3040
  • errorForeground#C05050
  • focusBorder#E4B84080
  • gitDecoration.addedResourceForeground#609060
  • gitDecoration.conflictingResourceForeground#C05050
  • gitDecoration.deletedResourceForeground#C05050
  • gitDecoration.ignoredResourceForeground#A09890
  • gitDecoration.modifiedResourceForeground#D4A830
  • gitDecoration.untrackedResourceForeground#E4B840
  • icon.foreground#2A3040
  • input.background#ffffff
  • input.border#E0D8C0
  • input.foreground#2A3040
  • input.placeholderForeground#A09890
  • inputOption.activeBackground#E4B840
  • inputOption.activeForeground#2A3040
  • inputValidation.errorBackground#C05050
  • inputValidation.errorBorder#C05050
  • inputValidation.warningBackground#D4A830
  • inputValidation.warningBorder#D4A830
  • list.activeSelectionBackground#E4B840
  • list.activeSelectionForeground#2A3040
  • list.activeSelectionIconForeground#2A3040
  • list.focusBackground#FDFADC
  • list.hoverBackground#FFFEF8
  • list.inactiveSelectionBackground#FDFADC
  • list.inactiveSelectionForeground#2A3040
  • minimap.background#FFFCFA
  • minimap.findMatchHighlight#E4B84080
  • minimap.selectionHighlight#E4B84050
  • minimapGutter.addedBackground#609060
  • minimapGutter.deletedBackground#C05050
  • minimapGutter.modifiedBackground#D4A830
  • notificationCenter.border#E0D8C0
  • notifications.background#ffffff
  • notifications.border#E0D8C0
  • notifications.foreground#2A3040
  • notificationsErrorIcon.foreground#C05050
  • notificationsInfoIcon.foreground#4A6890
  • notificationsWarningIcon.foreground#D4A830
  • panel.background#FFFCFA
  • panel.border#E0D8C0
  • panelTitle.activeBorder#E4B840
  • panelTitle.activeForeground#2A3040
  • panelTitle.inactiveForeground#A09890
  • peekView.border#E4B840
  • peekViewEditor.background#FFFCFA
  • peekViewEditorGutter.background#FDFADC
  • peekViewResult.background#FDFADC
  • peekViewResult.fileForeground#2A3040
  • peekViewResult.lineForeground#2A3040
  • peekViewResult.matchHighlightBackground#E4B84050
  • peekViewResult.selectionBackground#E4B84030
  • peekViewResult.selectionForeground#2A3040
  • peekViewTitle.background#2A3040
  • peekViewTitleDescription.foreground#9098B0
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#E4B840
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#E4B840
  • scrollbarSlider.background#D0B88050
  • scrollbarSlider.hoverBackground#D0B88080
  • selection.background#E4B84040
  • sideBar.background#FFFCFA
  • sideBar.foreground#2A3040
  • sideBarSectionHeader.background#FDFADC
  • sideBarSectionHeader.foreground#2A3040
  • sideBarTitle.foreground#C09820
  • statusBar.background#D4A830
  • statusBar.debuggingBackground#4A6890
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#3A4050
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#E4B840
  • tab.activeForeground#2A3040
  • tab.border#EEE8D0
  • tab.hoverBackground#ffffff
  • tab.hoverForeground#C09820
  • tab.inactiveBackground#FFFCFA
  • tab.inactiveForeground#606880
  • terminal.ansiBlack#2A3040
  • terminal.ansiBlue#4A6890
  • terminal.ansiBrightBlack#606880
  • terminal.ansiBrightBlue#5A78A0
  • terminal.ansiBrightCyan#5090A0
  • terminal.ansiBrightGreen#70A070
  • terminal.ansiBrightMagenta#A07090
  • terminal.ansiBrightRed#D06060
  • terminal.ansiBrightWhite#FFFCFA
  • terminal.ansiBrightYellow#E4B840
  • terminal.ansiCyan#408090
  • terminal.ansiGreen#609060
  • terminal.ansiMagenta#906080
  • terminal.ansiRed#C05050
  • terminal.ansiWhite#FDFADC
  • terminal.ansiYellow#D4A830
  • terminal.background#ffffff
  • terminal.foreground#2A3040
  • textLink.activeForeground#C09820
  • textLink.foreground#D4A830
  • titleBar.activeBackground#2A3040
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#384050
  • titleBar.inactiveForeground#9098B0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9098AFitalic
comment.block.preprocessor#9098AF
comment.documentation, comment.block.documentation#708090
invalid.illegal#ffffff
keyword.operator#606880
keyword, storage#D4A830
storage.type, support.type#4A6890
constant.language, support.constant, variable.language#B88820
variable, support.variable#2A3040
entity.name.function, support.function#C09820bold
entity.name.type, entity.other.inherited-class, support.class#4A6890bold
entity.name.exception#C05050
entity.name.section#2A3040bold
constant.numeric, constant.character, constant#E4B840
string#508090
constant.character.escape#D4A830
string.regexp#B88820
constant.other.symbol#E4B840
punctuation#708090
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#9098AF
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#B0B8C8
entity.name.tag#D4A830
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#4A6890italic
constant.character.entity, punctuation.definition.entity#E4B840
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#4A6890
meta.property-name, support.type.property-name#D4A830
meta.property-value, meta.property-value constant.other, support.constant.property-value#508090
keyword.other.important#D4A830bold
markup.changed#D4A830
markup.deleted#C05050
markup.italic#2A3040italic
markup.error#C05050
markup.inserted#609060
meta.link#D4A830
markup.output, markup.raw#606880
markup.prompt#606880
markup.heading#D4A830bold
markup.bold#2A3040bold
markup.traceback#C05050
markup.underlineunderline
markup.quote#606880italic
markup.list#D4A830
markup.bold, markup.italic#2A3040
markup.inline.raw#E4B840
meta.diff.range, meta.diff.index, meta.separator#4A6890
meta.diff.header.from-file#C05050
meta.diff.header.to-file#609060

Shiki preview

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

Loading...