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#01a2d7
  • activityBar.background#faf7f4
  • activityBar.border#efece9
  • activityBar.dropBackground#32101580
  • activityBar.foreground#586e75
  • activityBarBadge.background#01a2d7
  • activityBarBadge.foreground#ffffff
  • badge.background#00000025
  • badge.foreground#586e75cc
  • breadcrumb.activeSelectionForeground#01a2d7
  • breadcrumb.background#faf7f4
  • breadcrumb.focusForeground#586e75
  • breadcrumb.foreground#586e75cc
  • breadcrumbPicker.background#faf7f4
  • button.background#e5e5e5
  • button.foreground#586e75
  • button.hoverBackground#efece9
  • button.secondaryBackground#e5e5e5
  • button.secondaryBorder#faf7f400
  • button.secondaryForeground#586e75
  • button.secondaryHoverBackground#efece9
  • checkbox.border#586e75cc
  • checkbox.foreground#01a2d7
  • debugConsole.errorForeground#586e75
  • debugConsole.infoForeground#999
  • debugConsole.warningForeground#01a2d7
  • debugToolBar.background#faf7f4
  • diffEditor.insertedLineBackground#16f70215
  • diffEditor.insertedTextBackground#16f70207
  • diffEditor.removedLineBackground#f7020212
  • diffEditor.removedTextBackground#f7020220
  • diffEditorGutter.insertedLineBackground#16f70215
  • diffEditorGutter.removedLineBackground#f7020212
  • dropdown.background#faf7f4
  • dropdown.border#000000
  • editor.background#faf7f4
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#01a2d7
  • editor.findMatchHighlight#586e75
  • editor.findMatchHighlightBackground#00000015
  • editor.findMatchHighlightBorder#586e7550
  • editor.findRangeHighlightBackground#01a2d7
  • editor.foreground#586e75
  • editor.hoverHighlightBackground#efece9
  • editor.lineHighlightBackground#00000008
  • editor.lineHighlightBorder#00000000
  • editor.placeholderForeground#586e75cc
  • editor.rangeHighlightBackground#00000015
  • editor.selectionBackground#00000025
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#efece9
  • editor.wordHighlightStrongBackground#efece9
  • editor.wordHighlightTextBackground#586e7550
  • editorBracketMatch.background#faf7f4
  • editorBracketMatch.border#2aa198
  • editorCursor.foreground#999
  • editorError.foreground#f70202dd
  • editorGroup.border#00000008
  • editorGroup.dropBackground#32101580
  • editorGroup.focusedEmptyBorder#321015
  • editorGroupHeader.tabsBackground#faf7f4
  • editorGutter.addedBackground#2aa19860
  • editorGutter.deletedBackground#f70202dd
  • editorGutter.modifiedBackground#999
  • editorHoverWidget.background#faf7f4
  • editorHoverWidget.border#efece9
  • editorIndentGuide.activeBackground#00000015
  • editorIndentGuide.background1#00000015
  • editorInfo.foreground#0ba8a8dd
  • editorLineNumber.activeForeground#586e75cc
  • editorLineNumber.foreground#586e7530
  • editorLink.activeForeground#586e75
  • editorMarkerNavigation.background#586e7530
  • editorOverviewRuler.border#faf7f4
  • editorOverviewRuler.errorForeground#32101540
  • editorOverviewRuler.findMatchForeground#01a2d7
  • editorOverviewRuler.infoForeground#0ba8a8dd
  • editorOverviewRuler.warningForeground#01a2d7
  • editorRuler.foreground#00000025
  • editorStickyScrollHover.background#00000015
  • editorSuggestWidget.background#faf7f4
  • editorSuggestWidget.border#e5e5e5
  • editorSuggestWidget.foreground#586e75
  • editorSuggestWidget.highlightForeground#01a2d7
  • editorSuggestWidget.selectedBackground#00000015
  • editorWarning.foreground#01a2d7
  • editorWhitespace.foreground#586e7550
  • editorWidget.background#faf7f4
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#01a2d7
  • extensionBadge.remoteForeground#586e75
  • extensionButton.prominentBackground#dadada
  • extensionButton.prominentForeground#586e75
  • extensionButton.prominentHoverBackground#999
  • focusBorder#efece9
  • foreground#586e75
  • gitDecoration.conflictingResourceForeground#01a2d7
  • gitDecoration.deletedResourceForeground#321015
  • gitDecoration.ignoredResourceForeground#586e7580
  • gitDecoration.modifiedResourceForeground#01a2d7
  • gitDecoration.untrackedResourceForeground#2aa198
  • input.background#fdfbf9
  • input.border#e5e5e5
  • input.foreground#586e75
  • input.placeholderForeground#586e7580
  • inputOption.activeBackground#586e7550
  • inputOption.activeBorder#586e7550
  • inputValidation.errorBorder#321015
  • inputValidation.infoBorder#0ba8a8
  • inputValidation.warningBorder#01a2d7
  • keybindingLabel.background#efece9
  • keybindingLabel.border#efece9
  • keybindingLabel.bottomBorder#efece9
  • keybindingLabel.foreground#586e75
  • list.activeSelectionBackground#faf7f4
  • list.activeSelectionForeground#01a2d7
  • list.dropBackground#32101540
  • list.focusBackground#586e7550
  • list.focusForeground#586e75
  • list.highlightForeground#01a2d7
  • list.hoverBackground#faf7f4
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#00000008
  • list.inactiveSelectionForeground#01a2d7
  • listFilterWidget.background#00000008
  • listFilterWidget.noMatchesOutline#00000008
  • listFilterWidget.outline#00000008
  • menu.background#faf7f4
  • menu.foreground#586e75
  • menu.selectionBackground#00000015
  • menu.selectionBorder#00000008
  • menu.selectionForeground#01a2d7
  • menu.separatorBackground#586e75
  • menubar.selectionBackground#00000008
  • menubar.selectionBorder#00000008
  • menubar.selectionForeground#01a2d7
  • minimapSlider.activeBackground#586e7550
  • minimapSlider.background#586e7530
  • minimapSlider.hoverBackground#586e7530
  • notebook.focusedCellBorder#01a2d7
  • notebook.inactiveFocusedCellBorder#321015
  • notificationCenterHeader.background#faf7f4
  • notificationLink.foreground#01a2d7
  • notifications.background#faf7f4
  • notifications.foreground#586e75
  • panel.background#faf7f4
  • panel.border#efece9
  • panel.dropBackground#586e75
  • panelTitle.activeBorder#01a2d7
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#586e75
  • peekView.border#dddbd9
  • peekViewEditor.background#faf7f4
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#fdfbf9
  • peekViewResult.background#faf7f4
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#00000008
  • peekViewTitle.background#fdfbf9
  • peekViewTitleDescription.foreground#586e7580
  • pickerGroup.border#00000015
  • pickerGroup.foreground#01a2d7
  • progressBar.background#01a2d7
  • quickInput.background#faf7f4
  • quickInput.foreground#586e75cc
  • quickInput.list.focusBackground#586e7550
  • quickInputList.focusBackground#00000008
  • quickInputList.focusForeground#586e75
  • sash.hoverBorder#dadada
  • scrollbar.shadow#00000008
  • scrollbarSlider.activeBackground#01a2d7
  • scrollbarSlider.background#586e7550
  • scrollbarSlider.hoverBackground#586e7530
  • selection.background#e5e5e5
  • settings.checkboxBackground#faf7f4
  • settings.checkboxForeground#586e75
  • settings.dropdownBackground#faf7f4
  • settings.dropdownForeground#586e75
  • settings.headerForeground#01a2d7
  • settings.modifiedItemIndicator#01a2d7
  • settings.numberInputBackground#faf7f4
  • settings.numberInputForeground#586e75
  • settings.textInputBackground#faf7f4
  • settings.textInputForeground#586e75
  • sideBar.background#faf7f4
  • sideBar.border#efece9
  • sideBar.foreground#586e75cc
  • sideBarSectionHeader.background#faf7f4
  • sideBarSectionHeader.border#efece9
  • sideBarTitle.foreground#586e75
  • statusBar.background#faf7f4
  • statusBar.debuggingBackground#e5e5e5
  • statusBar.debuggingForeground#586e7580
  • statusBar.foreground#586e7580
  • statusBar.noFolderBackground#faf7f4
  • statusBarItem.activeBackground#faf7f4
  • statusBarItem.hoverBackground#faf7f4
  • statusBarItem.hoverForeground#586e75
  • statusBarItem.prominentBackground#faf7f4
  • statusBarItem.prominentForeground#586e75
  • statusBarItem.remoteBackground#01a2d7
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#faf7f4
  • tab.activeBorder#01a2d7
  • tab.activeForeground#586e75
  • tab.activeModifiedBorder#586e75cc
  • tab.border#faf7f4
  • tab.inactiveBackground#faf7f4
  • tab.inactiveForeground#586e75cc
  • tab.inactiveModifiedBorder#dadada
  • tab.unfocusedActiveBorder#685E79
  • tab.unfocusedActiveForeground#586e75
  • tab.unfocusedActiveModifiedBorder#dadada
  • tab.unfocusedInactiveModifiedBorder#dadada
  • terminal.foreground#586e75
  • terminalCommandGuide.foreground#dddbd9
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#586e75
  • textBlockQuote.background#00000008
  • textBlockQuote.border#dddbd9
  • textCodeBlock.background#00000008
  • textLink.activeForeground#586e75
  • textLink.foreground#01a2d7
  • titleBar.activeBackground#faf7f4
  • titleBar.activeForeground#586e75
  • titleBar.border#efece9
  • titleBar.inactiveBackground#faf7f4
  • titleBar.inactiveForeground#586e75cc
  • tree.indentGuidesStroke#00000015
  • welcomePage.background#faf7f4
  • welcomePage.tileBackground#fdfbf9
  • welcomePage.tileBorder#000000
  • welcomePage.tileHoverBackground#dddbd9
  • widget.shadow#00000008

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Main#586e75
string#2aa198
punctuation, constant.other.symbol#999
constant.character.escape, text.html constant.character.entity.named#586e75
constant.language.boolean#586e75
constant.numeric#999
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#586e75
keyword.other#999
keyword, modifier, variable.language.this, support.type.object, constant.language#999
entity.name.function, support.function#0ba8a8
meta.function entity.name.function#0ba8a8
storage.type, storage.modifier, storage.control#268bd2
support.module, support.node#321015italic
support.type, constant.other.key#01a2d7
entity.name.type, entity.other.inherited-class, entity.other#01a2d7
comment#586e7580italic
comment punctuation.definition.comment, string.quoted.docstring#586e7580italic
punctuation#999
entity.name, entity.name.type.class, support.type, support.class, meta.use#01a2d7
variable.object.property, meta.field.declaration entity.name.function#586e75
meta.definition.method entity.name.function#586e75
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#999
meta.embedded, source.groovy.embedded, meta.template.expression#586e75
entity.name.tag.yaml#586e75cc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#586e75
constant.language.json#999
entity.other.attribute-name.class#01a2d7
entity.other.attribute-name.id#999
source.css entity.name.tag#01a2d7
support.type.property-name.css#586e75
meta.tag, punctuation.definition.tag#999
entity.name.tag#999
entity.other.attribute-name#268bd2
punctuation.definition.entity.html#586e75
markup.heading#999
text.html.markdown meta.link.inline, meta.link.reference#586e75
text.html.markdown beginning.punctuation.definition.list#999
markup.italic#586e75italic
markup.bold#586e75bold
markup.bold markup.italic, markup.italic markup.bold#586e75italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#2aa198
markup.inline.raw.string.markdown#2aa198
keyword.other.definition.ini#586e75
entity.name.section.group-title.ini#999
source.cs meta.class.identifier storage.type#01a2d7
source.cs meta.method.identifier entity.name.function#586e75
source.cs meta.method-call meta.method, source.cs entity.name.function#0ba8a8
source.cs storage.type#01a2d7
source.cs meta.method.return-type#01a2d7
source.cs meta.preprocessor#685E79
source.cs entity.name.type.namespace#586e75
meta.jsx.children, SXNested#586e75
support.class.component#01a2d7
source.cpp meta.block variable.other#586e75
source.python meta.member.access.python#586e75
source.python meta.function-call.python, meta.function-call.arguments#0ba8a8
meta.block#586e75
entity.name.function.call#0ba8a8
source.php support.other.namespace, source.php meta.use support.class#586e75
constant.keyword#999italic
entity.name.function#0ba8a8
Global settings#586e75
constant.other.placeholder#586e75
markup.deleted#321015
markup.inserted#2aa198
markup.underlineunderline
keyword.control#999regular
variable.parameterregular
variable.parameter.function.language.special.self.python#586e75italic
constant.character.format.placeholder.other.python#999
markup.quote#586e75italic
markup.fenced_code.block#586e75
punctuation.definition.quote#586e75