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#5a80a015
  • activityBar.activeBorder#5a80a0
  • activityBar.background#e0e0e0
  • activityBar.border#bababa
  • activityBar.foreground#303030
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#5a80a0
  • activityBarBadge.foreground#e6e6e6
  • badge.background#5a80a0
  • badge.foreground#e6e6e6
  • breadcrumb.activeSelectionForeground#303030
  • breadcrumb.background#dedede
  • breadcrumb.focusForeground#303030
  • breadcrumb.foreground#707070
  • breadcrumbPicker.background#d9d9d9
  • button.background#5a80a0
  • button.foreground#e6e6e6
  • button.hoverBackground#3a6880
  • button.secondaryBackground#bababa
  • button.secondaryForeground#303030
  • button.secondaryHoverBackground#b8b8b8
  • checkbox.background#d9d9d9
  • checkbox.border#bababa
  • checkbox.foreground#303030
  • debugExceptionWidget.background#e3cece
  • debugExceptionWidget.border#883838
  • debugToolBar.background#d9d9d9
  • debugToolBar.border#bababa
  • descriptionForeground#707070
  • diffEditor.diagonalFill#bababa60
  • diffEditor.insertedLineBackground#3a681820
  • diffEditor.insertedTextBackground#3a683020
  • diffEditor.removedLineBackground#881a1820
  • diffEditor.removedTextBackground#88383820
  • dropdown.background#d9d9d9
  • dropdown.border#bababa
  • dropdown.foreground#303030
  • dropdown.listBackground#dedede
  • editor.background#e6e6e6
  • editor.findMatchBackground#5a80a030
  • editor.findMatchHighlightBackground#5a80a020
  • editor.findRangeHighlightBackground#5a80a015
  • editor.foldBackground#5a80a018
  • editor.foreground#303030
  • editor.hoverHighlightBackground#5a80a012
  • editor.inactiveSelectionBackground#5a80a018
  • editor.lineHighlightBackground#30303008
  • editor.lineHighlightBorder#3030300a
  • editor.rangeHighlightBackground#5a80a012
  • editor.selectionBackground#5a80a028
  • editor.selectionHighlightBackground#5a80a018
  • editor.wordHighlightBackground#5a80a018
  • editor.wordHighlightStrongBackground#70601025
  • editorBracketHighlight.foreground1#4a6898
  • editorBracketHighlight.foreground2#706010
  • editorBracketHighlight.foreground3#583888
  • editorBracketHighlight.foreground4#5a80a0
  • editorBracketHighlight.foreground5#3a6830
  • editorBracketHighlight.foreground6#6848a0
  • editorBracketHighlight.unexpectedBracket.foreground#883838
  • editorBracketMatch.background#4a689830
  • editorBracketMatch.border#4a689860
  • editorCursor.foreground#5a80a0
  • editorError.foreground#883838
  • editorGroup.border#bababa
  • editorGroupHeader.noTabsBackground#dedede
  • editorGroupHeader.tabsBackground#e0e0e0
  • editorGroupHeader.tabsBorder#bababa
  • editorGutter.addedBackground#3a683080
  • editorGutter.background#e6e6e6
  • editorGutter.commentRangeForeground#a0a0a0
  • editorGutter.deletedBackground#88383880
  • editorGutter.foldingControlForeground#a0a0a0
  • editorGutter.modifiedBackground#70601080
  • editorHint.foreground#a0a0a0
  • editorHoverWidget.background#d9d9d9
  • editorHoverWidget.border#bababa
  • editorIndentGuide.activeBackground1#b8b8b8
  • editorIndentGuide.background1#d5d5d5
  • editorInfo.foreground#5a80a0
  • editorLineNumber.activeForeground#404040
  • editorLineNumber.foreground#a0a0a0
  • editorLink.activeForeground#3a6880
  • editorOverviewRuler.border#bababa
  • editorRuler.foreground#30303010
  • editorStickyScroll.border#bababa
  • editorStickyScrollHover.background#5a80a012
  • editorSuggestWidget.background#d9d9d9
  • editorSuggestWidget.border#bababa
  • editorSuggestWidget.foreground#303030
  • editorSuggestWidget.highlightForeground#706010
  • editorSuggestWidget.selectedBackground#5a80a035
  • editorWarning.foreground#706010
  • editorWhitespace.foreground#bababa
  • editorWidget.background#d9d9d9
  • editorWidget.border#bababa
  • editorWidget.foreground#303030
  • errorForeground#883838
  • focusBorder#5a80a0
  • foreground#303030
  • gitDecoration.addedResourceForeground#3a6830
  • gitDecoration.conflictingResourceForeground#706010
  • gitDecoration.deletedResourceForeground#883838
  • gitDecoration.ignoredResourceForeground#b0b0b0
  • gitDecoration.modifiedResourceForeground#706010
  • gitDecoration.renamedResourceForeground#5a80a0
  • gitDecoration.untrackedResourceForeground#3a6830
  • icon.foreground#303030
  • input.background#d9d9d9
  • input.border#bababa
  • input.foreground#303030
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBackground#5a80a025
  • inputOption.activeBorder#5a80a0
  • inputOption.activeForeground#303030
  • inputValidation.errorBackground#e3cece
  • inputValidation.errorBorder#883838
  • inputValidation.infoBackground#cad6de
  • inputValidation.infoBorder#5a80a0
  • inputValidation.warningBackground#e0dbba
  • inputValidation.warningBorder#706010
  • list.activeSelectionBackground#5a80a035
  • list.activeSelectionForeground#303030
  • list.dropBackground#5a80a030
  • list.errorForeground#883838
  • list.focusBackground#5a80a025
  • list.focusForeground#303030
  • list.highlightForeground#706010
  • list.hoverBackground#5a80a015
  • list.hoverForeground#303030
  • list.inactiveSelectionBackground#5a80a025
  • list.inactiveSelectionForeground#303030
  • list.warningForeground#706010
  • listFilterWidget.background#d9d9d9
  • listFilterWidget.noMatchesOutline#883838
  • listFilterWidget.outline#5a80a0
  • menu.background#d9d9d9
  • menu.foreground#303030
  • menu.selectionBackground#5a80a035
  • menu.selectionForeground#303030
  • menu.separatorBackground#bababa
  • menubar.selectionBackground#5a80a025
  • menubar.selectionForeground#303030
  • merge.border#bababa
  • merge.commonContentBackground#d3d3d320
  • merge.commonHeaderBackground#a8a8a830
  • merge.currentContentBackground#3a681820
  • merge.currentHeaderBackground#3a683030
  • merge.incomingContentBackground#e0eaf820
  • merge.incomingHeaderBackground#4a689830
  • minimap.background#e6e6e6
  • minimap.errorHighlight#88383880
  • minimap.findMatchHighlight#5a80a030
  • minimap.selectionHighlight#5a80a030
  • minimap.warningHighlight#70601080
  • minimapSlider.activeBackground#5a80a045
  • minimapSlider.background#5a80a018
  • minimapSlider.hoverBackground#5a80a030
  • notificationCenter.border#bababa
  • notificationCenterHeader.background#d3d3d3
  • notificationCenterHeader.foreground#303030
  • notificationLink.foreground#5a80a0
  • notifications.background#d9d9d9
  • notifications.border#bababa
  • notifications.foreground#303030
  • notificationsErrorIcon.foreground#883838
  • notificationsInfoIcon.foreground#5a80a0
  • notificationsWarningIcon.foreground#706010
  • panel.background#dedede
  • panel.border#bababa
  • panelInput.border#bababa
  • panelSection.border#bababa
  • panelSection.dropBackground#5a80a030
  • panelSectionHeader.background#d3d3d3
  • panelSectionHeader.foreground#303030
  • panelTitle.activeBorder#5a80a0
  • panelTitle.activeForeground#303030
  • panelTitle.inactiveForeground#888888
  • peekView.border#bababa
  • peekViewEditor.background#d9d9d9
  • peekViewEditor.matchHighlightBackground#70601030
  • peekViewEditorGutter.background#d9d9d9
  • peekViewResult.background#dedede
  • peekViewResult.fileForeground#303030
  • peekViewResult.lineForeground#707070
  • peekViewResult.matchHighlightBackground#70601030
  • peekViewResult.selectionBackground#5a80a035
  • peekViewResult.selectionForeground#303030
  • peekViewTitle.background#e0e0e0
  • peekViewTitleDescription.foreground#707070
  • peekViewTitleLabel.foreground#303030
  • progressBar.background#5a80a0
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#30303060
  • scrollbarSlider.background#30303025
  • scrollbarSlider.hoverBackground#30303040
  • selection.background#5a80a040
  • settings.checkboxBackground#d9d9d9
  • settings.checkboxBorder#bababa
  • settings.checkboxForeground#303030
  • settings.dropdownBackground#d9d9d9
  • settings.dropdownBorder#bababa
  • settings.dropdownForeground#303030
  • settings.headerForeground#303030
  • settings.modifiedItemIndicator#706010
  • settings.numberInputBackground#d9d9d9
  • settings.numberInputBorder#bababa
  • settings.numberInputForeground#303030
  • settings.textInputBackground#d9d9d9
  • settings.textInputBorder#bababa
  • settings.textInputForeground#303030
  • sideBar.background#dedede
  • sideBar.border#bababa
  • sideBar.foreground#303030
  • sideBarSectionHeader.background#d3d3d3
  • sideBarSectionHeader.border#bababa
  • sideBarSectionHeader.foreground#303030
  • sideBarTitle.foreground#303030
  • statusBar.background#dedede
  • statusBar.border#bababa
  • statusBar.debuggingBackground#883838
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#303030
  • statusBar.noFolderBackground#d3d3d3
  • statusBarItem.activeBackground#5a80a035
  • statusBarItem.errorBackground#883838
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#5a80a025
  • statusBarItem.prominentBackground#5a80a0
  • statusBarItem.prominentForeground#e6e6e6
  • statusBarItem.prominentHoverBackground#3a6880
  • statusBarItem.warningBackground#706010
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#e6e6e6
  • tab.activeBorder#00000000
  • tab.activeBorderTop#5a80a0
  • tab.activeForeground#303030
  • tab.border#bababa
  • tab.hoverBackground#e6e6e6
  • tab.hoverForeground#303030
  • tab.inactiveBackground#d6d6d6
  • tab.inactiveForeground#888888
  • tab.lastPinnedBorder#bababa
  • tab.unfocusedActiveForeground#707070
  • tab.unfocusedInactiveForeground#a0a0a0
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#4a6898
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#4a5888
  • terminal.ansiBrightCyan#3a5878
  • terminal.ansiBrightGreen#406830
  • terminal.ansiBrightMagenta#503878
  • terminal.ansiBrightRed#a04040
  • terminal.ansiBrightWhite#686868
  • terminal.ansiBrightYellow#807010
  • terminal.ansiCyan#3a6880
  • terminal.ansiGreen#3a6830
  • terminal.ansiMagenta#583888
  • terminal.ansiRed#883838
  • terminal.ansiWhite#707070
  • terminal.ansiYellow#706010
  • terminal.background#e6e6e6
  • terminal.border#bababa
  • terminal.foreground#303030
  • terminal.selectionBackground#5a80a028
  • terminalCursor.foreground#5a80a0
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#303030
  • titleBar.border#bababa
  • titleBar.inactiveBackground#e3e3e3
  • titleBar.inactiveForeground#888888
  • tree.indentGuidesStroke#d5d5d5
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object#583888
variable.parameter, meta.function.parameter#604880
variable.language, variable.other.constant#883838
variable.other.property, variable.other.object.property, meta.object-literal.key#303030
constant.other.color#883838
invalid, invalid.illegal, invalid.deprecated#883838
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#4a6898
storage.type, storage.type.function, storage.type.class#4a6898
storage.modifier, keyword.other.special-method#4a6898italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#5a80a0
keyword.control.return#4a6898
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#3a6880
punctuation, meta.brace, punctuation.section.embedded#404040
punctuation.definition.bracket, punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, meta.brace.square, meta.brace.curly#606060
punctuation.separator, punctuation.delimiter, punctuation.terminator#505050
entity.name.tag, meta.tag.sgml#4a6898
entity.other.attribute-name#706010italic
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#3a6830
entity.name.function, meta.function.declaration entity.name.function#706010
meta.function-call, variable.function, entity.name.function-call#706010
support.function, support.function.builtin#883838
entity.name.method, entity.name.method-call#706010
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#883838
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#883838
support.constant, support.constant.builtin#883838
constant.character.escape, constant.escape#883838
string, string.quoted, string.quoted.double, string.quoted.single, string.template#3a6830
punctuation.definition.template-expression, meta.template.expression#3a6830
string.regexp#806030
constant.other.symbol, constant.other.key#3a6830
entity.name.class, entity.name.type.class, support.class#6848a0
meta.class entity.name.class, meta.class.declaration entity.name.type#604898
entity.name.type, support.type#6848a0
support.type.primitive, support.type.builtin#3a6830italic
entity.name.type.interface#604898italic
entity.name.namespace, support.other.namespace, support.other.namespace.use.php, support.other.namespace.php, meta.use.php#706010italic
entity.other.inherited-class#6848a0italic
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#303030
support.constant.property-value, meta.property-value#583888
entity.name.module, entity.name.module.js, variable.import.parameter.js#706010italic
entity.name.function.constructor, variable.function.constructor, support.function.construct#3a6880
entity.other.attribute-name.class, entity.other.attribute-name.class.css#706010
entity.other.attribute-name.id, entity.other.attribute-name.id.css#5a80a0
markup.inserted, markup.inserted.git_gutter#3a6830
markup.deleted, markup.deleted.git_gutter#883838
markup.changed, markup.changed.git_gutter#706010
*url*, *link*, *uri*#5a80a0underline
meta.decorator, tag.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator#883838italic
source.json meta.structure.dictionary.json support.type.property-name.json#5a80a0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#706010
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#583888
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#3a6830
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#6848a0
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#4a6898
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#883838
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#5a80a0
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#3a6830
text.html.markdown, punctuation.definition.list_item.markdown#303030
text.html.markdown markup.inline.raw.markdown, markup.inline.raw#3a6830
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#a0a0a0
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#706010bold
markup.italic#303030italic
markup.bold, markup.bold string#181818bold
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#181818bold italic
markup.underline#5a80a0underline
markup.quote punctuation.definition.blockquote.markdown#a0a0a0
markup.quote#707070italic
string.other.link.title.markdown, markup.underline.link#5a80a0
string.other.link.description.title.markdown#3a6830italic
constant.other.reference.link.markdown#583888
markup.raw.block, markup.fenced_code.block.markdown#3a6830
markup.raw.block.fenced.markdown#303030
punctuation.definition.fenced.markdown, punctuation.definition.markdown#a0a0a0
variable.language.fenced.markdown, fenced_code.block.language#5a80a0
meta.separator, meta.separator.markdown#a0a0a0bold
markup.table#303030
punctuation.definition.list.begin.markdown#706010bold