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.underline—underline
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—
wuthering waves color themes by ⏾ frostmoon - VS Code Theme