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#4a7fa015
  • activityBar.activeBorder#4a7fa0
  • activityBar.background#f2ede3
  • activityBar.border#c8c4bc
  • activityBar.foreground#2a2828
  • activityBar.inactiveForeground#908c88
  • activityBarBadge.background#4a7fa0
  • activityBarBadge.foreground#f5f0e8
  • badge.background#4a7fa0
  • badge.foreground#f5f0e8
  • breadcrumb.activeSelectionForeground#2a2828
  • breadcrumb.background#f0ebe0
  • breadcrumb.focusForeground#2a2828
  • breadcrumb.foreground#706c68
  • breadcrumbPicker.background#eae5da
  • button.background#4a7fa0
  • button.foreground#f5f0e8
  • button.hoverBackground#286888
  • button.secondaryBackground#c8c4bc
  • button.secondaryForeground#2a2828
  • button.secondaryHoverBackground#b0aca4
  • checkbox.background#eae5da
  • checkbox.border#c8c4bc
  • checkbox.foreground#2a2828
  • debugExceptionWidget.background#f5e0dc
  • debugExceptionWidget.border#a03828
  • debugToolBar.background#eae5da
  • debugToolBar.border#c8c4bc
  • descriptionForeground#706c68
  • diffEditor.diagonalFill#c8c4bc60
  • diffEditor.insertedLineBackground#48781820
  • diffEditor.insertedTextBackground#48782820
  • diffEditor.removedLineBackground#a0281520
  • diffEditor.removedTextBackground#a0382820
  • dropdown.background#eae5da
  • dropdown.border#c8c4bc
  • dropdown.foreground#2a2828
  • dropdown.listBackground#f0ebe0
  • editor.background#f5f0e8
  • editor.findMatchBackground#4a7fa030
  • editor.findMatchHighlightBackground#4a7fa020
  • editor.findRangeHighlightBackground#4a7fa015
  • editor.foldBackground#4a7fa018
  • editor.foreground#2a2828
  • editor.hoverHighlightBackground#4a7fa012
  • editor.inactiveSelectionBackground#4a7fa018
  • editor.lineHighlightBackground#2a282808
  • editor.lineHighlightBorder#2a28280a
  • editor.rangeHighlightBackground#4a7fa012
  • editor.selectionBackground#4a7fa028
  • editor.selectionHighlightBackground#4a7fa018
  • editor.wordHighlightBackground#4a7fa018
  • editor.wordHighlightStrongBackground#8a681825
  • editorBracketHighlight.foreground1#345f90
  • editorBracketHighlight.foreground2#8a6818
  • editorBracketHighlight.foreground3#6a4898
  • editorBracketHighlight.foreground4#4a7fa0
  • editorBracketHighlight.foreground5#487828
  • editorBracketHighlight.foreground6#9a6018
  • editorBracketHighlight.unexpectedBracket.foreground#a03828
  • editorBracketMatch.background#345f9030
  • editorBracketMatch.border#345f9060
  • editorCursor.foreground#4a7fa0
  • editorError.foreground#a03828
  • editorGroup.border#c8c4bc
  • editorGroupHeader.noTabsBackground#f0ebe0
  • editorGroupHeader.tabsBackground#f2ede3
  • editorGroupHeader.tabsBorder#c8c4bc
  • editorGutter.addedBackground#48782880
  • editorGutter.background#f5f0e8
  • editorGutter.commentRangeForeground#a8a49c
  • editorGutter.deletedBackground#a0382880
  • editorGutter.foldingControlForeground#a8a49c
  • editorGutter.modifiedBackground#8a681880
  • editorHint.foreground#909090
  • editorHoverWidget.background#eae5da
  • editorHoverWidget.border#c8c4bc
  • editorIndentGuide.activeBackground1#b8b4ac
  • editorIndentGuide.background1#d8d4cc
  • editorInfo.foreground#4a7fa0
  • editorLineNumber.activeForeground#3a3830
  • editorLineNumber.foreground#a8a49c
  • editorLink.activeForeground#286888
  • editorOverviewRuler.border#c8c4bc
  • editorRuler.foreground#2a282810
  • editorStickyScroll.border#c8c4bc
  • editorStickyScrollHover.background#4a7fa012
  • editorSuggestWidget.background#eae5da
  • editorSuggestWidget.border#c8c4bc
  • editorSuggestWidget.foreground#2a2828
  • editorSuggestWidget.highlightForeground#8a6818
  • editorSuggestWidget.selectedBackground#4a7fa035
  • editorWarning.foreground#8a6818
  • editorWhitespace.foreground#c8c4bc
  • editorWidget.background#eae5da
  • editorWidget.border#c8c4bc
  • editorWidget.foreground#2a2828
  • errorForeground#a03828
  • focusBorder#4a7fa0
  • foreground#2a2828
  • gitDecoration.addedResourceForeground#487828
  • gitDecoration.conflictingResourceForeground#8a6818
  • gitDecoration.deletedResourceForeground#a03828
  • gitDecoration.ignoredResourceForeground#b0aca4
  • gitDecoration.modifiedResourceForeground#8a6818
  • gitDecoration.renamedResourceForeground#4a7fa0
  • gitDecoration.untrackedResourceForeground#487828
  • icon.foreground#2a2828
  • input.background#eae5da
  • input.border#c8c4bc
  • input.foreground#2a2828
  • input.placeholderForeground#a8a49c
  • inputOption.activeBackground#4a7fa025
  • inputOption.activeBorder#4a7fa0
  • inputOption.activeForeground#2a2828
  • inputValidation.errorBackground#f5e0dc
  • inputValidation.errorBorder#a03828
  • inputValidation.infoBackground#dceaf0
  • inputValidation.infoBorder#4a7fa0
  • inputValidation.warningBackground#f5ecd8
  • inputValidation.warningBorder#8a6818
  • list.activeSelectionBackground#4a7fa035
  • list.activeSelectionForeground#2a2828
  • list.dropBackground#4a7fa030
  • list.errorForeground#a03828
  • list.focusBackground#4a7fa025
  • list.focusForeground#2a2828
  • list.highlightForeground#8a6818
  • list.hoverBackground#4a7fa015
  • list.hoverForeground#2a2828
  • list.inactiveSelectionBackground#4a7fa025
  • list.inactiveSelectionForeground#2a2828
  • list.warningForeground#8a6818
  • listFilterWidget.background#eae5da
  • listFilterWidget.noMatchesOutline#a03828
  • listFilterWidget.outline#4a7fa0
  • menu.background#eae5da
  • menu.foreground#2a2828
  • menu.selectionBackground#4a7fa035
  • menu.selectionForeground#2a2828
  • menu.separatorBackground#c8c4bc
  • menubar.selectionBackground#4a7fa025
  • menubar.selectionForeground#2a2828
  • merge.border#c8c4bc
  • merge.commonContentBackground#e5e0d520
  • merge.commonHeaderBackground#a8a49c30
  • merge.currentContentBackground#48781820
  • merge.currentHeaderBackground#48782830
  • merge.incomingContentBackground#dceaf020
  • merge.incomingHeaderBackground#345f9030
  • minimap.background#f5f0e8
  • minimap.errorHighlight#a0382880
  • minimap.findMatchHighlight#4a7fa030
  • minimap.selectionHighlight#4a7fa030
  • minimap.warningHighlight#8a681880
  • minimapSlider.activeBackground#4a7fa045
  • minimapSlider.background#4a7fa018
  • minimapSlider.hoverBackground#4a7fa030
  • notificationCenter.border#c8c4bc
  • notificationCenterHeader.background#e5e0d5
  • notificationCenterHeader.foreground#2a2828
  • notificationLink.foreground#4a7fa0
  • notifications.background#eae5da
  • notifications.border#c8c4bc
  • notifications.foreground#2a2828
  • notificationsErrorIcon.foreground#a03828
  • notificationsInfoIcon.foreground#4a7fa0
  • notificationsWarningIcon.foreground#8a6818
  • panel.background#f0ebe0
  • panel.border#c8c4bc
  • panelInput.border#c8c4bc
  • panelSection.border#c8c4bc
  • panelSection.dropBackground#4a7fa030
  • panelSectionHeader.background#e5e0d5
  • panelSectionHeader.foreground#2a2828
  • panelTitle.activeBorder#4a7fa0
  • panelTitle.activeForeground#2a2828
  • panelTitle.inactiveForeground#908c88
  • peekView.border#c8c4bc
  • peekViewEditor.background#eae5da
  • peekViewEditor.matchHighlightBackground#8a681830
  • peekViewEditorGutter.background#eae5da
  • peekViewResult.background#f0ebe0
  • peekViewResult.fileForeground#2a2828
  • peekViewResult.lineForeground#706c68
  • peekViewResult.matchHighlightBackground#8a681830
  • peekViewResult.selectionBackground#4a7fa035
  • peekViewResult.selectionForeground#2a2828
  • peekViewTitle.background#f2ede3
  • peekViewTitleDescription.foreground#706c68
  • peekViewTitleLabel.foreground#2a2828
  • progressBar.background#4a7fa0
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#2a282860
  • scrollbarSlider.background#2a282825
  • scrollbarSlider.hoverBackground#2a282840
  • selection.background#4a7fa040
  • settings.checkboxBackground#eae5da
  • settings.checkboxBorder#c8c4bc
  • settings.checkboxForeground#2a2828
  • settings.dropdownBackground#eae5da
  • settings.dropdownBorder#c8c4bc
  • settings.dropdownForeground#2a2828
  • settings.headerForeground#2a2828
  • settings.modifiedItemIndicator#8a6818
  • settings.numberInputBackground#eae5da
  • settings.numberInputBorder#c8c4bc
  • settings.numberInputForeground#2a2828
  • settings.textInputBackground#eae5da
  • settings.textInputBorder#c8c4bc
  • settings.textInputForeground#2a2828
  • sideBar.background#f0ebe0
  • sideBar.border#c8c4bc
  • sideBar.foreground#2a2828
  • sideBarSectionHeader.background#e5e0d5
  • sideBarSectionHeader.border#c8c4bc
  • sideBarSectionHeader.foreground#2a2828
  • sideBarTitle.foreground#2a2828
  • statusBar.background#f0ebe0
  • statusBar.border#c8c4bc
  • statusBar.debuggingBackground#a03828
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2a2828
  • statusBar.noFolderBackground#e5e0d5
  • statusBarItem.activeBackground#4a7fa035
  • statusBarItem.errorBackground#a03828
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#4a7fa025
  • statusBarItem.prominentBackground#4a7fa0
  • statusBarItem.prominentForeground#f5f0e8
  • statusBarItem.prominentHoverBackground#286888
  • statusBarItem.warningBackground#8a6818
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f5f0e8
  • tab.activeBorder#00000000
  • tab.activeBorderTop#4a7fa0
  • tab.activeForeground#2a2828
  • tab.border#c8c4bc
  • tab.hoverBackground#f5f0e8
  • tab.hoverForeground#2a2828
  • tab.inactiveBackground#ede8de
  • tab.inactiveForeground#908c88
  • tab.lastPinnedBorder#c8c4bc
  • tab.unfocusedActiveForeground#706c68
  • tab.unfocusedInactiveForeground#a8a49c
  • terminal.ansiBlack#2a2828
  • terminal.ansiBlue#345f90
  • terminal.ansiBrightBlack#5a5850
  • terminal.ansiBrightBlue#345090
  • terminal.ansiBrightCyan#1a6888
  • terminal.ansiBrightGreen#4a7020
  • terminal.ansiBrightMagenta#6040a0
  • terminal.ansiBrightRed#c04030
  • terminal.ansiBrightWhite#606058
  • terminal.ansiBrightYellow#9a7010
  • terminal.ansiCyan#286888
  • terminal.ansiGreen#487828
  • terminal.ansiMagenta#6a4898
  • terminal.ansiRed#a03828
  • terminal.ansiWhite#707068
  • terminal.ansiYellow#8a6818
  • terminal.background#f5f0e8
  • terminal.border#c8c4bc
  • terminal.foreground#2a2828
  • terminal.selectionBackground#4a7fa028
  • terminalCursor.foreground#4a7fa0
  • titleBar.activeBackground#f2ede3
  • titleBar.activeForeground#2a2828
  • titleBar.border#c8c4bc
  • titleBar.inactiveBackground#f5f0e8
  • titleBar.inactiveForeground#909090
  • tree.indentGuidesStroke#d8d4cc
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8480italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object#6a4898
variable.parameter, meta.function.parameter#5a4080
variable.language, variable.other.constant#a03828
variable.other.property, variable.other.object.property, meta.object-literal.key#3a3830
constant.other.color#a03828
invalid, invalid.illegal, invalid.deprecated#a03828
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#345f90
storage.type, storage.type.function, storage.type.class#345f90
storage.modifier, keyword.other.special-method#345f90italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#4a7fa0
keyword.control.return#345f90
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#286888
punctuation, meta.brace, punctuation.section.embedded#3a3830
punctuation.definition.bracket, punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, meta.brace.square, meta.brace.curly#5a5850
punctuation.separator, punctuation.delimiter, punctuation.terminator#4a4840
entity.name.tag, meta.tag.sgml#345f90
entity.other.attribute-name#8a6818italic
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#487828
entity.name.function, meta.function.declaration entity.name.function#8a6818
meta.function-call, variable.function, entity.name.function-call#8a6818
support.function, support.function.builtin#a03828
entity.name.method, entity.name.method-call#8a6818
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#a03828
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#a03828
support.constant, support.constant.builtin#a03828
constant.character.escape, constant.escape#a03828
string, string.quoted, string.quoted.double, string.quoted.single, string.template#487828
punctuation.definition.template-expression, meta.template.expression#487828
string.regexp#9a6018
constant.other.symbol, constant.other.key#487828
entity.name.class, entity.name.type.class, support.class#9a6018
meta.class entity.name.class, meta.class.declaration entity.name.type#8a5010
entity.name.type, support.type#9a6018
support.type.primitive, support.type.builtin#487828italic
entity.name.type.interface#8a5010italic
entity.name.namespace, support.other.namespace, support.other.namespace.use.php, support.other.namespace.php, meta.use.php#8a6818italic
entity.other.inherited-class#9a6018italic
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#3a3830
support.constant.property-value, meta.property-value#6a4898
entity.name.module, entity.name.module.js, variable.import.parameter.js#8a6818italic
entity.name.function.constructor, variable.function.constructor, support.function.construct#286888
entity.other.attribute-name.class, entity.other.attribute-name.class.css#8a6818
entity.other.attribute-name.id, entity.other.attribute-name.id.css#4a7fa0
markup.inserted, markup.inserted.git_gutter#487828
markup.deleted, markup.deleted.git_gutter#a03828
markup.changed, markup.changed.git_gutter#8a6818
*url*, *link*, *uri*#4a7fa0underline
meta.decorator, tag.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator#a03828italic
source.json meta.structure.dictionary.json support.type.property-name.json#4a7fa0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a6818
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#6a4898
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#487828
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#9a6018
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#345f90
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#a03828
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#4a7fa0
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#487828
text.html.markdown, punctuation.definition.list_item.markdown#2a2828
text.html.markdown markup.inline.raw.markdown, markup.inline.raw#487828
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#a8a49c
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8a6818bold
markup.italic#2a2828italic
markup.bold, markup.bold string#1a1818bold
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#1a1818bold italic
markup.underline#4a7fa0underline
markup.quote punctuation.definition.blockquote.markdown#a8a49c
markup.quote#706c68italic
string.other.link.title.markdown, markup.underline.link#4a7fa0
string.other.link.description.title.markdown#487828italic
constant.other.reference.link.markdown#6a4898
markup.raw.block, markup.fenced_code.block.markdown#487828
markup.raw.block.fenced.markdown#2a2828
punctuation.definition.fenced.markdown, punctuation.definition.markdown#a8a49c
variable.language.fenced.markdown, fenced_code.block.language#4a7fa0
meta.separator, meta.separator.markdown#a8a49cbold
markup.table#2a2828
punctuation.definition.list.begin.markdown#8a6818bold