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.activeBorder#80cbc4
  • activityBar.background#1e2a3a
  • activityBar.border#00000000
  • activityBar.foreground#f0f0f0
  • activityBar.inactiveForeground#a0a0a0
  • activityBarBadge.background#80cbc4
  • activityBarBadge.foreground#ffffff
  • badge.background#80cbc4
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#80cbc4
  • breadcrumb.background#1e6e6e
  • breadcrumb.focusForeground#80cbc4
  • breadcrumb.foreground#e0f0f0
  • breadcrumbPicker.background#226666
  • button.background#80cbc4
  • button.border#00000000
  • button.foreground#ffffff
  • button.hoverBackground#57b1a8
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#80cbc4
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#80cbc4
  • debugToolBar.background#333333
  • debugToolBar.border#80cbc4
  • descriptionForeground#80cbc4
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#a3be8c33
  • diffEditor.removedTextBackground#80cbc433
  • dropdown.background#253444
  • dropdown.border#253444
  • dropdown.foreground#80cbc4
  • editor.background#2e3d51
  • editor.findMatchBackground#70b0a094
  • editor.findMatchBorder#70b0a0
  • editor.findMatchHighlightBackground#70b0a071
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#70b0a01c
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#70b0a04d
  • editor.foreground#b0c0d0
  • editor.hoverHighlightBackground#70b0a040
  • editor.inactiveSelectionBackground#B6D7FF10
  • editor.lineHighlightBackground#ffffff12
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#B6D7FF40
  • editor.selectionHighlightBackground#B6D7FF40
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#B6D7FF20
  • editor.wordHighlightStrongBackground#B6D7FF30
  • editorBracketMatch.background#ffffff38
  • editorBracketMatch.border#ffffff00
  • editorCodeLens.foreground#999999
  • editorCursor.background#0d0a0a
  • editorCursor.foreground#aeafad
  • editorError.background#80cbc433
  • editorError.border#ffffff00
  • editorError.foreground#80cbc4
  • editorGroup.border#80cbc43f
  • editorGroup.emptyBackground#1e1e1e
  • editorGroupHeader.tabsBackground#1abc9c
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#88b480
  • editorGutter.background#c2185b
  • editorGutter.commentRangeForeground#ffffff
  • editorGutter.deletedBackground#70b0a0
  • editorGutter.foldingControlForeground#ffffff
  • editorGutter.modifiedBackground#90a0c0
  • editorHoverWidget.background#253444
  • editorHoverWidget.border#2e3d51
  • editorHoverWidget.foreground#b0c0d0
  • editorHoverWidget.highlightForeground#e0e0e0
  • editorHoverWidget.statusBarBackground#c2185b
  • editorIndentGuide.activeBackground1#6a7a8a
  • editorIndentGuide.background1#5a6a7a88
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#f0f0f0
  • editorLineNumber.foreground#a0a0a0
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.background#170303
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.bracketMatchForeground#ffffff88
  • editorOverviewRuler.deletedForeground#80cbc4
  • editorOverviewRuler.errorForeground#80cbc4
  • editorOverviewRuler.findMatchForeground#1abc9c88
  • editorOverviewRuler.infoForeground#5dbad1
  • editorOverviewRuler.modifiedForeground#80cbc4
  • editorOverviewRuler.selectionHighlightForeground#80cbc488
  • editorOverviewRuler.warningForeground#b09040
  • editorOverviewRuler.wordHighlightForeground#80cbc488
  • editorOverviewRuler.wordHighlightStrongForeground#80cbc488
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#253444
  • editorSuggestWidget.border#2e3d51
  • editorSuggestWidget.foreground#b0c0d0
  • editorSuggestWidget.highlightForeground#e0e0e0
  • editorSuggestWidget.selectedBackground#c2185b
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#b09040
  • editorWhitespace.foreground#b0c0d029
  • editorWidget.background#2e3d51
  • editorWidget.border#2e3d51
  • editorWidget.foreground#b0c0d0
  • errorForeground#f48771
  • focusBorder#1abc9c
  • foreground#1abc9c
  • gitDecoration.addedResourceForeground#a3be8c
  • gitDecoration.conflictingResourceForeground#80cbc4
  • gitDecoration.deletedResourceForeground#80cbc4
  • gitDecoration.ignoredResourceForeground#cfcfcf
  • gitDecoration.modifiedResourceForeground#80cbc4
  • gitDecoration.stageDeletedResourceForeground#80cbc4
  • gitDecoration.stageModifiedResourceForeground#80cbc4
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#a3be8c
  • icon.foreground#fff
  • input.background#283846
  • input.border#4a4a4a
  • input.foreground#e0e0e0
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#1abc9c
  • inputOption.activeForeground#ecf0f1
  • inputValidation.errorBackground#57b1a8
  • inputValidation.errorBorder#57b1a8
  • inputValidation.infoBackground#5dbad1
  • inputValidation.infoBorder#5dbad1
  • inputValidation.warningBackground#dd9b21
  • inputValidation.warningBorder#dd9b21
  • list.activeSelectionBackground#70b0a099
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#5599ff2d
  • list.errorForeground#e0d060
  • list.focusBackground#70b0a052
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#00000010
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#70b0a040
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#d0b040
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#5599ff
  • listFilterWidget.outline#00000000
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#094771
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#28282800
  • merge.commonHeaderBackground#38383800
  • merge.currentContentBackground#27403B00
  • merge.currentHeaderBackground#36736600
  • merge.incomingContentBackground#28384B00
  • merge.incomingHeaderBackground#395F8F00
  • minimap.background#1e1e1e
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#515c6a00
  • minimap.selectionHighlight#264f7800
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#1abc9c
  • notificationCenterHeader.foreground#2c3e50
  • notificationLink.foreground#283948
  • notifications.background#253444
  • notifications.border#303031
  • notifications.foreground#ecf0f1
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#283948
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#253444
  • panel.dropBorder#1abc9c3f
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#80cbc4
  • peekViewEditor.background#202d3a
  • peekViewEditor.matchHighlightBackground#1abc9c94
  • peekViewEditor.matchHighlightBorder#80cbc4
  • peekViewEditorGutter.background#202d3a
  • peekViewResult.background#202d3a
  • peekViewResult.fileForeground#ecf0f1
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#1abc9c71
  • peekViewResult.selectionBackground#ffffff22
  • peekViewResult.selectionForeground#ecf0f1
  • peekViewTitle.background#80cbc4
  • peekViewTitleDescription.foreground#ecf0f1bb
  • peekViewTitleLabel.foreground#ecf0f1
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#3794ff
  • progressBar.background#1abc9c
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#1abc9cd2
  • scrollbarSlider.background#1abc9c3f
  • scrollbarSlider.hoverBackground#1abc9cd2
  • selection.background#1abc9c
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#80cbc4
  • sideBar.background#253444
  • sideBar.border#cccccc33
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#b0c0c0
  • sideBarSectionHeader.background#253444
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#b0c0c0
  • sideBarTitle.foreground#1abc9c
  • statusBar.background#1abc9c
  • statusBar.debuggingBackground#80cbc4
  • statusBar.debuggingForeground#2c3e50
  • statusBar.foreground#2c3e50
  • statusBar.noFolderBackground#1abc9c
  • statusBar.noFolderForeground#2c3e50
  • statusBarItem.activeBackground#00000022
  • statusBarItem.hoverBackground#00000011
  • statusBarItem.prominentBackground#1abc9c71
  • statusBarItem.prominentHoverBackground#1abc9c94
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#253444
  • tab.activeBorder#00000000
  • tab.activeBorderTop#80cbc4
  • tab.activeForeground#d0e0f0
  • tab.activeModifiedBorder#80cbc4
  • tab.border#808080
  • tab.inactiveBackground#1a5c5c
  • tab.inactiveForeground#b0c0d0
  • tab.inactiveModifiedBorder#00000000
  • tab.unfocusedActiveForeground#b0c0d0
  • tab.unfocusedActiveModifiedBorder#80cbc4
  • tab.unfocusedInactiveForeground#b0c0d0
  • tab.unfocusedInactiveModifiedBorder#00000000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.foreground#3794ff
  • titleBar.activeBackground#3c3c3c
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b0c0d0
comment, punctuation.definition.comment#70b0a0
variable, string constant.other.placeholder#90b090
constant.other.color#a080c0
invalid, invalid.illegal#c06060
keyword.control#a080c0
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#70a0c0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#509080
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6080c0
meta.block variable.other#90b090
support.other.variable, string.other.link#90b090
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a0c080
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#90b090
entity.name, support.type, support.class, markup.changed.git_gutter, support.type.sys-types#d0b060
support.orther.namespace.use.php, meta.use.php, support.other.namespace.php#b0c0d0
support.type#b0c0d0
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#b0c0d0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a0c080
variable.language#a0c080italic
entity.name.method.js#6080c0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6080c0
entity.other.attribute-name#6080c0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6080c0italic
entity.other.attribute-name.class#b0c0d0
source.sass keyword.control#a0c080
markup.inserted#90b090
markup.deleted#509080
markup.changed#90b090
string.regexp#a0c080
constant.character.escape#70a0c0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a0c080italic
source.js constant.other.object.key.js string.unquoted.label.js#a0c080italic
source.json meta.structure.dictionary.json support.type.property-name.json#b0c0d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a0c080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#90b090
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6080c0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#509080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a0c080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a0c080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a0c080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a0c080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6080c0
text.html.markdown, punctuation.definition.list_item.markdown#90b090
markup.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#d0b060
markup.italic#a0c080italic
markup.bold, markup.bold string#d0b060bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d0b060bold
markup.underline#a0c080underline
markup.strike#70b0a0strikethrough
markup.quote punctuation.definition.blockquote.markdown#70b0a0
markup.quote#70b0a0italic
string.other.link.title.markdown#70a0c0
string.other.link.description.title.markdown#a0c080
constant.other.reference.link.markdown#a0c080
markup.raw.block#a0c080
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#90b090
variable.language.fenced.markdown#70b0a0
meta.separator#d0b060bold
markup.table#90b090
token.info-token#70a0c0
token.warn-token#d0b060
token.error-token#c06060
token.debug-token#a0c080