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#2a7cbf15
  • activityBar.activeBorder#2a7cbf
  • activityBar.background#e8eef5
  • activityBar.border#c0d0e0
  • activityBar.foreground#2a3d55
  • activityBar.inactiveForeground#90a8c0
  • activityBarBadge.background#2a7cbf
  • activityBarBadge.foreground#f0f5fa
  • badge.background#2a7cbf
  • badge.foreground#f0f5fa
  • breadcrumb.activeSelectionForeground#2a3d55
  • breadcrumb.background#eaf0f7
  • breadcrumb.focusForeground#2a3d55
  • breadcrumb.foreground#6080a0
  • breadcrumbPicker.background#dce8f2
  • button.background#2a7cbf
  • button.foreground#f0f5fa
  • button.hoverBackground#1564c0
  • button.secondaryBackground#c0d0e0
  • button.secondaryForeground#2a3d55
  • button.secondaryHoverBackground#a8bcd0
  • checkbox.background#dce8f2
  • checkbox.border#c0d0e0
  • checkbox.foreground#2a3d55
  • debugExceptionWidget.background#fadcdc
  • debugExceptionWidget.border#c82020
  • debugToolBar.background#dce8f2
  • debugToolBar.border#c0d0e0
  • descriptionForeground#6080a0
  • diffEditor.diagonalFill#c0d0e060
  • diffEditor.insertedLineBackground#20781820
  • diffEditor.insertedTextBackground#20784020
  • diffEditor.removedLineBackground#c8181520
  • diffEditor.removedTextBackground#c8202020
  • dropdown.background#dce8f2
  • dropdown.border#c0d0e0
  • dropdown.foreground#2a3d55
  • dropdown.listBackground#eaf0f7
  • editor.background#f0f5fa
  • editor.findMatchBackground#2a7cbf30
  • editor.findMatchHighlightBackground#2a7cbf20
  • editor.findRangeHighlightBackground#2a7cbf15
  • editor.foldBackground#2a7cbf18
  • editor.foreground#2a3d55
  • editor.hoverHighlightBackground#2a7cbf12
  • editor.inactiveSelectionBackground#2a7cbf18
  • editor.lineHighlightBackground#2a3d5508
  • editor.lineHighlightBorder#2a3d550a
  • editor.rangeHighlightBackground#2a7cbf12
  • editor.selectionBackground#2a7cbf28
  • editor.selectionHighlightBackground#2a7cbf18
  • editor.wordHighlightBackground#2a7cbf18
  • editor.wordHighlightStrongBackground#9a700025
  • editorBracketHighlight.foreground1#1564c0
  • editorBracketHighlight.foreground2#9a7000
  • editorBracketHighlight.foreground3#6030c8
  • editorBracketHighlight.foreground4#2a7cbf
  • editorBracketHighlight.foreground5#207840
  • editorBracketHighlight.foreground6#0e6b8a
  • editorBracketHighlight.unexpectedBracket.foreground#c82020
  • editorBracketMatch.background#2a7cbf30
  • editorBracketMatch.border#2a7cbf60
  • editorCursor.foreground#2a7cbf
  • editorError.foreground#c82020
  • editorGroup.border#c0d0e0
  • editorGroupHeader.noTabsBackground#eaf0f7
  • editorGroupHeader.tabsBackground#e8eef5
  • editorGroupHeader.tabsBorder#c0d0e0
  • editorGutter.addedBackground#20784080
  • editorGutter.background#f0f5fa
  • editorGutter.commentRangeForeground#90a8c0
  • editorGutter.deletedBackground#c8202080
  • editorGutter.foldingControlForeground#90a8c0
  • editorGutter.modifiedBackground#9a700080
  • editorHint.foreground#909090
  • editorHoverWidget.background#dce8f2
  • editorHoverWidget.border#c0d0e0
  • editorIndentGuide.activeBackground1#b0c4d8
  • editorIndentGuide.background1#d0dce8
  • editorInfo.foreground#2a7cbf
  • editorLineNumber.activeForeground#2a3d55
  • editorLineNumber.foreground#90a8c0
  • editorLink.activeForeground#1564c0
  • editorOverviewRuler.border#c0d0e0
  • editorRuler.foreground#2a3d5510
  • editorStickyScroll.border#c0d0e0
  • editorStickyScrollHover.background#2a7cbf12
  • editorSuggestWidget.background#dce8f2
  • editorSuggestWidget.border#c0d0e0
  • editorSuggestWidget.foreground#2a3d55
  • editorSuggestWidget.highlightForeground#9a7000
  • editorSuggestWidget.selectedBackground#2a7cbf35
  • editorWarning.foreground#9a7000
  • editorWhitespace.foreground#c0d0e0
  • editorWidget.background#dce8f2
  • editorWidget.border#c0d0e0
  • editorWidget.foreground#2a3d55
  • errorForeground#c82020
  • focusBorder#2a7cbf
  • foreground#2a3d55
  • gitDecoration.addedResourceForeground#207840
  • gitDecoration.conflictingResourceForeground#9a7000
  • gitDecoration.deletedResourceForeground#c82020
  • gitDecoration.ignoredResourceForeground#a8bcd0
  • gitDecoration.modifiedResourceForeground#9a7000
  • gitDecoration.renamedResourceForeground#2a7cbf
  • gitDecoration.untrackedResourceForeground#207840
  • icon.foreground#2a3d55
  • input.background#dce8f2
  • input.border#c0d0e0
  • input.foreground#2a3d55
  • input.placeholderForeground#90a8c0
  • inputOption.activeBackground#2a7cbf25
  • inputOption.activeBorder#2a7cbf
  • inputOption.activeForeground#2a3d55
  • inputValidation.errorBackground#fadcdc
  • inputValidation.errorBorder#c82020
  • inputValidation.infoBackground#d8eaf8
  • inputValidation.infoBorder#2a7cbf
  • inputValidation.warningBackground#f5ecd0
  • inputValidation.warningBorder#9a7000
  • list.activeSelectionBackground#2a7cbf35
  • list.activeSelectionForeground#2a3d55
  • list.dropBackground#2a7cbf30
  • list.errorForeground#c82020
  • list.focusBackground#2a7cbf25
  • list.focusForeground#2a3d55
  • list.highlightForeground#9a7000
  • list.hoverBackground#2a7cbf15
  • list.hoverForeground#2a3d55
  • list.inactiveSelectionBackground#2a7cbf25
  • list.inactiveSelectionForeground#2a3d55
  • list.warningForeground#9a7000
  • listFilterWidget.background#dce8f2
  • listFilterWidget.noMatchesOutline#c82020
  • listFilterWidget.outline#2a7cbf
  • menu.background#dce8f2
  • menu.foreground#2a3d55
  • menu.selectionBackground#2a7cbf35
  • menu.selectionForeground#2a3d55
  • menu.separatorBackground#c0d0e0
  • menubar.selectionBackground#2a7cbf25
  • menubar.selectionForeground#2a3d55
  • merge.border#c0d0e0
  • merge.commonContentBackground#dce8f220
  • merge.commonHeaderBackground#90a8c030
  • merge.currentContentBackground#20781820
  • merge.currentHeaderBackground#20784030
  • merge.incomingContentBackground#d8eaf820
  • merge.incomingHeaderBackground#2a7cbf30
  • minimap.background#f0f5fa
  • minimap.errorHighlight#c8202080
  • minimap.findMatchHighlight#2a7cbf30
  • minimap.selectionHighlight#2a7cbf30
  • minimap.warningHighlight#9a700080
  • minimapSlider.activeBackground#2a7cbf45
  • minimapSlider.background#2a7cbf18
  • minimapSlider.hoverBackground#2a7cbf30
  • notificationCenter.border#c0d0e0
  • notificationCenterHeader.background#dce8f2
  • notificationCenterHeader.foreground#2a3d55
  • notificationLink.foreground#2a7cbf
  • notifications.background#dce8f2
  • notifications.border#c0d0e0
  • notifications.foreground#2a3d55
  • notificationsErrorIcon.foreground#c82020
  • notificationsInfoIcon.foreground#2a7cbf
  • notificationsWarningIcon.foreground#9a7000
  • panel.background#eaf0f7
  • panel.border#c0d0e0
  • panelInput.border#c0d0e0
  • panelSection.border#c0d0e0
  • panelSection.dropBackground#2a7cbf30
  • panelSectionHeader.background#dce8f2
  • panelSectionHeader.foreground#2a3d55
  • panelTitle.activeBorder#2a7cbf
  • panelTitle.activeForeground#2a3d55
  • panelTitle.inactiveForeground#90a8c0
  • peekView.border#c0d0e0
  • peekViewEditor.background#dce8f2
  • peekViewEditor.matchHighlightBackground#9a700030
  • peekViewEditorGutter.background#dce8f2
  • peekViewResult.background#eaf0f7
  • peekViewResult.fileForeground#2a3d55
  • peekViewResult.lineForeground#6080a0
  • peekViewResult.matchHighlightBackground#9a700030
  • peekViewResult.selectionBackground#2a7cbf35
  • peekViewResult.selectionForeground#2a3d55
  • peekViewTitle.background#e8eef5
  • peekViewTitleDescription.foreground#6080a0
  • peekViewTitleLabel.foreground#2a3d55
  • progressBar.background#2a7cbf
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#2a3d5560
  • scrollbarSlider.background#2a3d5525
  • scrollbarSlider.hoverBackground#2a3d5540
  • selection.background#2a7cbf40
  • settings.checkboxBackground#dce8f2
  • settings.checkboxBorder#c0d0e0
  • settings.checkboxForeground#2a3d55
  • settings.dropdownBackground#dce8f2
  • settings.dropdownBorder#c0d0e0
  • settings.dropdownForeground#2a3d55
  • settings.headerForeground#2a3d55
  • settings.modifiedItemIndicator#9a7000
  • settings.numberInputBackground#dce8f2
  • settings.numberInputBorder#c0d0e0
  • settings.numberInputForeground#2a3d55
  • settings.textInputBackground#dce8f2
  • settings.textInputBorder#c0d0e0
  • settings.textInputForeground#2a3d55
  • sideBar.background#eaf0f7
  • sideBar.border#c0d0e0
  • sideBar.foreground#2a3d55
  • sideBarSectionHeader.background#dce8f2
  • sideBarSectionHeader.border#c0d0e0
  • sideBarSectionHeader.foreground#2a3d55
  • sideBarTitle.foreground#2a3d55
  • statusBar.background#eaf0f7
  • statusBar.border#c0d0e0
  • statusBar.debuggingBackground#c82020
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2a3d55
  • statusBar.noFolderBackground#dce8f2
  • statusBarItem.activeBackground#2a7cbf35
  • statusBarItem.errorBackground#c82020
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#2a7cbf25
  • statusBarItem.prominentBackground#2a7cbf
  • statusBarItem.prominentForeground#f0f5fa
  • statusBarItem.prominentHoverBackground#1564c0
  • statusBarItem.warningBackground#9a7000
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f0f5fa
  • tab.activeBorder#00000000
  • tab.activeBorderTop#2a7cbf
  • tab.activeForeground#2a3d55
  • tab.border#c0d0e0
  • tab.hoverBackground#f0f5fa
  • tab.hoverForeground#2a3d55
  • tab.inactiveBackground#e8eef5
  • tab.inactiveForeground#90a8c0
  • tab.lastPinnedBorder#c0d0e0
  • tab.unfocusedActiveForeground#6080a0
  • tab.unfocusedInactiveForeground#90a8c0
  • terminal.ansiBlack#2a3d55
  • terminal.ansiBlue#1564c0
  • terminal.ansiBrightBlack#405878
  • terminal.ansiBrightBlue#0050c0
  • terminal.ansiBrightCyan#1a6aaa
  • terminal.ansiBrightGreen#187038
  • terminal.ansiBrightMagenta#5028b0
  • terminal.ansiBrightRed#e02020
  • terminal.ansiBrightWhite#505870
  • terminal.ansiBrightYellow#a87800
  • terminal.ansiCyan#2a7cbf
  • terminal.ansiGreen#207840
  • terminal.ansiMagenta#6030c8
  • terminal.ansiRed#c82020
  • terminal.ansiWhite#6080a0
  • terminal.ansiYellow#9a7000
  • terminal.background#f0f5fa
  • terminal.border#c0d0e0
  • terminal.foreground#2a3d55
  • terminal.selectionBackground#2a7cbf28
  • terminalCursor.foreground#2a7cbf
  • titleBar.activeBackground#e8eef5
  • titleBar.activeForeground#2a3d55
  • titleBar.border#c0d0e0
  • titleBar.inactiveBackground#f0f5fa
  • titleBar.inactiveForeground#909090
  • tree.indentGuidesStroke#d0dce8
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7090a8italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object#502888
variable.parameter, meta.function.parameter#7050b0
variable.language, variable.other.constant#c82020
variable.other.property, variable.other.object.property, meta.object-literal.key#405878
constant.other.color#c82020
invalid, invalid.illegal, invalid.deprecated#c82020
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#6030c8
storage.type, storage.type.function, storage.type.class#6030c8
storage.modifier, keyword.other.special-method#6030c8italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#2a7cbf
keyword.control.return#6030c8
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#2080a0
punctuation, meta.brace, punctuation.section.embedded#2a3d55
punctuation.definition.bracket, punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, meta.brace.square, meta.brace.curly#405878
punctuation.separator, punctuation.delimiter, punctuation.terminator#304868
entity.name.tag, meta.tag.sgml#6030c8
entity.other.attribute-name#1564c0italic
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#1a8070
entity.name.function, meta.function.declaration entity.name.function#1564c0
meta.function-call, variable.function, entity.name.function-call#1564c0
support.function, support.function.builtin#c82020
entity.name.method, entity.name.method-call#1564c0
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#c73030
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c73030
support.constant, support.constant.builtin#c82020
constant.character.escape, constant.escape#c82020
string, string.quoted, string.quoted.double, string.quoted.single, string.template#1a8070
punctuation.definition.template-expression, meta.template.expression#1a8070
string.regexp#9a7000
constant.other.symbol, constant.other.key#1a8070
entity.name.class, entity.name.type.class, support.class#0e6b8a
meta.class entity.name.class, meta.class.declaration entity.name.type#0a5878
entity.name.type, support.type#0e6b8a
support.type.primitive, support.type.builtin#1a8070italic
entity.name.type.interface#0a5878italic
entity.name.namespace, support.other.namespace, support.other.namespace.use.php, support.other.namespace.php, meta.use.php#1564c0italic
entity.other.inherited-class#0e6b8aitalic
support.type.property-name, 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#405878
support.constant.property-value, meta.property-value#502888
entity.name.module, entity.name.module.js, variable.import.parameter.js#1564c0italic
entity.name.function.constructor, variable.function.constructor, support.function.construct#2a7cbf
entity.other.attribute-name.class, entity.other.attribute-name.class.css#1564c0
entity.other.attribute-name.id, entity.other.attribute-name.id.css#2a7cbf
markup.inserted, markup.inserted.git_gutter#207840
markup.deleted, markup.deleted.git_gutter#c82020
markup.changed, markup.changed.git_gutter#9a7000
*url*, *link*, *uri*#2a7cbfunderline
meta.decorator, tag.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator#c82020italic
source.json meta.structure.dictionary.json support.type.property-name.json#2a7cbf
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1564c0
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#502888
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#1a8070
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#0e6b8a
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#6030c8
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 support.type.property-name.json#c82020
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 support.type.property-name.json#2a7cbf
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 support.type.property-name.json#1a8070
text.html.markdown, punctuation.definition.list_item.markdown#2a3d55
text.html.markdown markup.inline.raw.markdown, markup.inline.raw#1a8070
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#90a8c0
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1564c0bold
markup.italic#2a3d55italic
markup.bold, markup.bold string#1a2a40bold
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#1a2a40bold italic
markup.underline#2a7cbfunderline
markup.quote punctuation.definition.blockquote.markdown#90a8c0
markup.quote#6080a0italic
string.other.link.title.markdown, markup.underline.link#2a7cbf
string.other.link.description.title.markdown#1a8070italic
constant.other.reference.link.markdown#502888
markup.raw.block, markup.fenced_code.block.markdown#1a8070
markup.raw.block.fenced.markdown#2a3d55
punctuation.definition.fenced.markdown, punctuation.definition.markdown#90a8c0
variable.language.fenced.markdown, fenced_code.block.language#2a7cbf
meta.separator, meta.separator.markdown#90a8c0bold
markup.table#2a3d55
punctuation.definition.list.begin.markdown#1564c0bold