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—