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.activeBackground#f7f5ee
  • activityBar.activeBorder#ee5a6e
  • activityBar.activeFocusBorder#ee5a6e
  • activityBar.background#f2f0e8
  • activityBar.border#ecebe4
  • activityBar.foreground#2f4f66
  • activityBar.inactiveForeground#2f4f6683
  • activityBarBadge.background#ee5a6e
  • activityBarBadge.foreground#ffe7ea
  • badge.background#58616f1e
  • badge.foreground#de566a
  • breadcrumb.activeSelectionForeground#ee5a6e
  • breadcrumb.background#fbfaf3
  • breadcrumb.focusForeground#ee5a6e
  • breadcrumb.foreground#5f6b7bef
  • button.background#f2546b
  • button.foreground#ffecef
  • button.hoverBackground#e04d63
  • button.secondaryBackground#e4e1d5
  • button.secondaryForeground#454e5c
  • button.secondaryHoverBackground#dddacf
  • checkbox.background#efeee6
  • checkbox.border#ebe9e0
  • checkbox.foreground#454e5c
  • debugExceptionWidget.background#ee5a6e
  • debugExceptionWidget.border#d14a5c
  • debugToolBar.background#ee5a6e
  • debugToolBar.border#d14a5c
  • diffEditor.border#debac1
  • diffEditor.insertedTextBackground#55b9b922
  • diffEditor.insertedTextBorder#55b9b90c
  • diffEditor.removedTextBackground#ea06c612
  • diffEditor.removedTextBorder#ea06c604
  • dropdown.background#efeee6
  • dropdown.border#ebe9e0
  • dropdown.foreground#454e5c
  • editor.background#fbfaf3
  • editor.findMatchBackground#ee5a6e0e
  • editor.findMatchBorder#c92b4014
  • editor.findMatchHighlightBackground#d598240e
  • editor.findMatchHighlightBorder#d598243c
  • editor.findRangeHighlightBackground#e82c450a
  • editor.findRangeHighlightBorder#902b3804
  • editor.foldBackground#eccb4710
  • editor.foreground#454f5e
  • editor.hoverHighlightBackground#293cd70e
  • editor.inactiveSelectionBackground#4f4a3716
  • editor.lineHighlightBackground#5c594606
  • editor.lineHighlightBorder#5c594603
  • editor.rangeHighlightBackground#f03a3a12
  • editor.rangeHighlightBorder#f03a3a06
  • editor.selectionBackground#db304716
  • editor.selectionHighlightBackground#242ec710
  • editor.selectionHighlightBorder#2d3d804e
  • editor.wordHighlightBackground#cd223916
  • editor.wordHighlightBorder#cd223954
  • editor.wordHighlightStrongBackground#cd223914
  • editor.wordHighlightStrongBorder#cd223914
  • editorBracketMatch.background#ee5a6e0c
  • editorBracketMatch.border#ee5a6e3c
  • editorCodeLens.foreground#e0949e
  • editorCursor.background#fbfaf3
  • editorCursor.foreground#ee5a6e
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f76984
  • editorGroup.border#c7c3aa
  • editorGroup.emptyBackground#fbfaf3
  • editorGroupHeader.border#f7f5ee
  • editorGroupHeader.tabsBackground#f7f5ee
  • editorGroupHeader.tabsBorder#fbfaf3
  • editorGutter.addedBackground#90d1b3
  • editorGutter.background#fbfaf3
  • editorGutter.commentRangeForeground#ee5a6e
  • editorGutter.deletedBackground#ea7888
  • editorGutter.foldingControlForeground#ee5a6e
  • editorGutter.modifiedBackground#91b8f5
  • editorHoverWidget.background#f2f0e8
  • editorHoverWidget.border#d1cfc7
  • editorHoverWidget.foreground#58616f
  • editorIndentGuide.activeBackground#ee5a6e
  • editorIndentGuide.background#bebdb383
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#5198f5
  • editorLineNumber.activeForeground#ee5a6e
  • editorLineNumber.foreground#bebdb3
  • editorLink.activeForeground#5450e4
  • editorMarkerNavigation.background#efeee6
  • editorMarkerNavigationError.background#ec7680
  • editorMarkerNavigationInfo.background#87b6f2
  • editorMarkerNavigationWarning.background#ecba24
  • editorOverviewRuler.background#7b763e1a
  • editorOverviewRuler.border#7b763e34
  • editorRuler.foreground#cfcfc4
  • editorSuggestWidget.background#f2f0e8
  • editorSuggestWidget.border#d1cfc7
  • editorSuggestWidget.foreground#58616f
  • editorSuggestWidget.highlightForeground#de566a
  • editorSuggestWidget.selectedBackground#faf9f4
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#e28f25
  • editorWhitespace.foreground#54513930
  • editorWidget.background#f2f0e8
  • editorWidget.foreground#58616f
  • editorWidget.resizeBorder#ee5a6e
  • focusBorder#d05d72
  • foreground#415f79
  • gitDecoration.addedResourceForeground#587c0c
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#ad0707
  • gitDecoration.ignoredResourceForeground#9d977b
  • gitDecoration.modifiedResourceForeground#895503
  • gitDecoration.stageDeletedResourceForeground#ad0707
  • gitDecoration.stageModifiedResourceForeground#895503
  • gitDecoration.submoduleResourceForeground#1258a7
  • gitDecoration.untrackedResourceForeground#007100
  • icon.foreground#415f79
  • input.background#efeee6
  • input.border#ebe9e0
  • input.foreground#454e5c
  • input.placeholderForeground#7e848e
  • inputOption.activeBackground#de566a22
  • inputOption.activeBorder#de566a
  • inputOption.activeForeground#de566a
  • list.activeSelectionBackground#de566a
  • list.activeSelectionForeground#f9dce0
  • list.dropBackground#efece1
  • list.focusBackground#fdfdf6
  • list.focusForeground#39414d
  • list.highlightForeground#de566a
  • list.hoverBackground#fbfaf3
  • list.hoverForeground#de566a
  • list.inactiveSelectionBackground#fdfcf7
  • list.inactiveSelectionForeground#39414d
  • listFilterWidget.background#e8e7e2
  • listFilterWidget.noMatchesOutline#de566a
  • listFilterWidget.outline#7c8a9b
  • menu.background#f2f0e8
  • menu.border#c9c5b5
  • menu.foreground#454f5e
  • menu.selectionBackground#f7f5ee
  • menu.selectionBorder#00000000
  • menu.selectionForeground#de566a
  • menu.separatorBackground#e3decf
  • menubar.selectionBackground#e5e4dc
  • menubar.selectionBorder#fbfaf3
  • menubar.selectionForeground#de566a
  • merge.commonContentBackground#f0eedfe3
  • merge.commonHeaderBackground#e2dcbbaf
  • merge.currentContentBackground#dcf0c8e3
  • merge.currentHeaderBackground#bede9eb3
  • merge.incomingContentBackground#c6e9ffdd
  • merge.incomingHeaderBackground#9cd2f5ad
  • minimap.background#fbfaf3
  • minimap.errorHighlight#f76984
  • minimap.findMatchHighlight#ee5a6e0e
  • minimap.selectionHighlight#db304716
  • minimap.warningHighlight#e28f25
  • minimapGutter.addedBackground#90d1b3
  • minimapGutter.deletedBackground#ea7888
  • minimapGutter.modifiedBackground#91b8f5
  • minimapSlider.activeBackground#ee5a6e44
  • minimapSlider.background#ee5a6e21
  • minimapSlider.hoverBackground#ee5a6e30
  • notificationCenter.border#dfddd3
  • notificationCenterHeader.background#efeee6
  • notificationCenterHeader.foreground#6d6c6a
  • notifications.background#f7f5ee
  • notifications.border#ebe9e0
  • notifications.foreground#6d6c6a
  • notificationsErrorIcon.foreground#c94558
  • notificationsInfoIcon.foreground#287eb2
  • notificationsWarningIcon.foreground#cba138
  • notificationToast.border#dfddd3
  • panel.background#f7f6ed
  • panel.border#e8e7de
  • panelSection.border#d7d6ce
  • panelTitle.activeBorder#de566a
  • panelTitle.activeForeground#39414d
  • panelTitle.inactiveForeground#58616fb5
  • peekView.border#d1cfc7
  • peekViewEditor.background#efeee6
  • peekViewEditor.matchHighlightBackground#de566a1a
  • peekViewEditor.matchHighlightBorder#de566a14
  • peekViewEditorGutter.background#efeee6
  • peekViewResult.background#ebe9e0
  • peekViewResult.fileForeground#58616f
  • peekViewResult.lineForeground#d05d72
  • peekViewResult.matchHighlightBackground#fbfaf3c1
  • peekViewResult.selectionBackground#fbfaf3dd
  • peekViewResult.selectionForeground#d05d72
  • peekViewTitle.background#ebe9e0
  • peekViewTitleDescription.foreground#58616f
  • peekViewTitleLabel.foreground#454f5e
  • pickerGroup.border#dbd9d0
  • pickerGroup.foreground#d14a5c
  • progressBar.background#d05d72
  • scrollbar.shadow#943d4d5a
  • scrollbarSlider.activeBackground#ee5a6e2c
  • scrollbarSlider.background#6d62420a
  • scrollbarSlider.hoverBackground#6d624212
  • selection.background#3375b068
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#415f79
  • sideBar.background#f7f5ee
  • sideBar.border#f7f5ee
  • sideBar.dropBackground#efece1
  • sideBar.foreground#58616f
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#58616f06
  • sideBarSectionHeader.foreground#58616f
  • sideBarTitle.foreground#58616f
  • statusBar.background#efeee6
  • statusBar.border#efeee600
  • statusBar.debuggingBackground#f9ede2
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#d38259
  • statusBar.foreground#7a8596
  • statusBar.noFolderBackground#e8e8f2
  • statusBar.noFolderBorder#ff000000
  • statusBar.noFolderForeground#af69c0
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#48607920
  • statusBarItem.remoteBackground#ebeae5
  • statusBarItem.remoteForeground#de566a
  • tab.activeBackground#fbfaf3
  • tab.activeBorder#e0373700
  • tab.activeBorderTop#ee5a6e
  • tab.activeForeground#3f4a5c
  • tab.border#fbfaf3
  • tab.hoverBackground#f7f5ee
  • tab.hoverBorder#fbfaf3
  • tab.hoverForeground#ee5a6e
  • tab.inactiveBackground#f7f5ee
  • tab.inactiveForeground#5f6b7b
  • terminal.ansiBlack#66655d
  • terminal.ansiBlue#366fb8
  • terminal.ansiBrightBlack#807f79
  • terminal.ansiBrightBlue#498be0
  • terminal.ansiBrightCyan#1dabba
  • terminal.ansiBrightGreen#45bc69
  • terminal.ansiBrightMagenta#c973e8
  • terminal.ansiBrightRed#f76e81
  • terminal.ansiBrightWhite#9ca5b4
  • terminal.ansiBrightYellow#bab01e
  • terminal.ansiCyan#108b99
  • terminal.ansiGreen#1e9943
  • terminal.ansiMagenta#b059cf
  • terminal.ansiRed#cd4b5d
  • terminal.ansiWhite#8791a3
  • terminal.ansiYellow#9b920b
  • terminal.border#d7d6ce
  • terminal.foreground#58616f
  • terminal.selectionBackground#39414d16
  • terminalCursor.background#de566a
  • terminalCursor.foreground#f7f6ed
  • textLink.activeForeground#ff4d67
  • textLink.foreground#ff4d67
  • titleBar.activeBackground#efeee6
  • titleBar.activeForeground#38526d
  • titleBar.border#00000000
  • titleBar.inactiveBackground#efeee6f9
  • titleBar.inactiveForeground#9d9c97
  • tree.indentGuidesStroke#dec4c7
  • walkThrough.embeddedEditorBackground#00000050
  • welcomePage.tileHoverBackground#ee5a6e14
  • widget.shadow#5c563f3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#68707e
comment, string.comment#a6a295italic
string#9b920b
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ee5a6e
meta.string.template#d18a47
meta#737d8c
constant.numeric#b059cf
string.embedded.begin, string.embedded.end#b059cf
string.embedded#45bc69
constant.language#b059cf
constant.character, constant.other#b059cf
variable.language#ee5a6eitalic
variable.readwrite, variable.readwrite.other.block#366fb8
keyword, keyword.operator.logical, keyword.operator.constructor#ee5a6e
keyword.operator#ee5a6e
storage#ee5a6eitalic
storage.type#108b99
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#366fb8
meta.block.switch.c, variable.other.object#366fb8
variable.other.property, variable.other.block#737d8c
entity.other.inherited-class#1e9943
entity.name.function, support.function#1e9943
support.function#108b99
variable.parameter#d18143italic
entity.name.function-call#737d8c
function.support.builtin, function.support.core#1e9943
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#ee5a6e
entity.name.tag.class, entity.name.tag.id#108b99
entity.other.attribute-name#1e9943
support.constant#108b99
support.type, support.variable#108b99
support.dictionary.json#108b99
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#128996
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#45bc69
variable.css, variable.scss, variable.less, variable.sass#139187
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#b87d25
unit.css, unit.scss, unit.less, unit.sass#c26dde
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#b059cf
function.css, function.scss, function.less, function.sass#139187
support.other.variable
invalid#737d8c
invalid.deprecated#737d8c
structure.dictionary.property-name.json#139187
string.detected-link#366fb8
meta.diff, meta.diff.header#9fa17a
markup.deleted#996a94
markup.inserted#b87d25
markup.changed#b87d25
constant.numeric.line-number.find-in-files - match#139187A0
entity.name.filename.find-in-files#b87d25
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#aba182
markup.underline.link.markdown#366fb8
markup.bold.markdownbold
punctuation.definition.bold.markdown#7e8f4a
markup.heading.markdown#ee5a6ebold
punctuation.definition.heading.markdown#7e8f4a
markup.quote.markdown#61a315
meta.separator.markdown#996a94bold
markup.raw.inline.markdown, markup.raw.block.markdown#139187
punctuation.definition.list_item.markdown#767e8cbold
variable.other.jsdoc#779689