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#5F3BBB
  • activityBar.background#F4F5F6
  • activityBar.border#D2D4D7
  • activityBar.foreground#535960
  • activityBar.inactiveForeground#767B82
  • activityBarBadge.background#5F3BBB
  • activityBarBadge.foreground#F4F5F6
  • badge.background#5F3BBB
  • badge.foreground#F4F5F6
  • breadcrumb.activeSelectionForeground#5F3BBB
  • breadcrumb.focusForeground#0D0F11
  • breadcrumb.foreground#636870
  • breadcrumbPicker.background#E3E5E6
  • button.background#5F3BBB
  • button.foreground#F4F5F6
  • button.hoverBackground#8C2293
  • button.secondaryBackground#E0E3E7
  • button.secondaryForeground#0D0F11
  • button.secondaryHoverBackground#D2D4D7
  • checkbox.background#F4F5F6
  • checkbox.border#C5C7CA
  • checkbox.foreground#0D0F11
  • descriptionForeground#535960
  • diffEditor.insertedLineBackground#16653411
  • diffEditor.insertedTextBackground#16653422
  • diffEditor.removedLineBackground#B91A2511
  • diffEditor.removedTextBackground#B91A2522
  • disabledForeground#767B82
  • dropdown.background#E3E5E6
  • dropdown.border#C5C7CA
  • dropdown.foreground#0D0F11
  • dropdown.listBackground#E3E5E6
  • editor.background#EBEDEF
  • editor.findMatchBackground#5F3BBB40
  • editor.findMatchHighlightBackground#5F3BBB55
  • editor.findRangeHighlightBackground#5F3BBB18
  • editor.foreground#0D0F11
  • editor.inactiveSelectionBackground#5F3BBB18
  • editor.lineHighlightBackground#E0E3E7cc
  • editor.selectionBackground#5F3BBB28
  • editor.selectionHighlightBackground#53596022
  • editor.wordHighlightBackground#53596022
  • editor.wordHighlightStrongBackground#53596033
  • editorBracketMatch.background#5F3BBB22
  • editorBracketMatch.border#5F3BBB40
  • editorCodeLens.foreground#767B82
  • editorCursor.background#F4F5F6
  • editorCursor.foreground#5F3BBB
  • editorError.foreground#B91A25
  • editorGroup.border#D2D4D7
  • editorGroup.dropBackground#D2D4D788
  • editorGroupHeader.tabsBackground#F4F5F6
  • editorGroupHeader.tabsBorder#D2D4D7
  • editorGutter.addedBackground#166534
  • editorGutter.background#EBEDEF
  • editorGutter.deletedBackground#B91A25
  • editorGutter.modifiedBackground#0054CB
  • editorHint.foreground#767B82
  • editorHoverWidget.background#E3E5E6
  • editorHoverWidget.border#D2D4D7
  • editorHoverWidget.foreground#0D0F11
  • editorIndentGuide.activeBackground1#636870
  • editorIndentGuide.background1#C5C7CAaa
  • editorInfo.foreground#0054CB
  • editorLineNumber.activeForeground#5F3BBB
  • editorLineNumber.foreground#767B82
  • editorLink.activeForeground#0054CB
  • editorOverviewRuler.addedForeground#166534
  • editorOverviewRuler.border#0D0F1110
  • editorOverviewRuler.deletedForeground#B91A25
  • editorOverviewRuler.errorForeground#B91A25
  • editorOverviewRuler.findMatchForeground#5F3BBB55
  • editorOverviewRuler.infoForeground#0054CB
  • editorOverviewRuler.modifiedForeground#0054CB
  • editorOverviewRuler.warningForeground#8F4400
  • editorRuler.foreground#D2D4D7
  • editorSuggestWidget.background#E3E5E6
  • editorSuggestWidget.border#D2D4D7
  • editorSuggestWidget.focusHighlightForeground#5F3BBB
  • editorSuggestWidget.foreground#0D0F11
  • editorSuggestWidget.highlightForeground#5F3BBB
  • editorSuggestWidget.selectedBackground#E0E3E7
  • editorWarning.foreground#8F4400
  • editorWhitespace.foreground#9CA0A788
  • errorForeground#B91A25
  • extensionButton.prominentBackground#5F3BBB
  • extensionButton.prominentForeground#F4F5F6
  • extensionButton.prominentHoverBackground#8C2293
  • focusBorder#5F3BBB
  • foreground#0D0F11
  • gitDecoration.addedResourceForeground#166534
  • gitDecoration.conflictingResourceForeground#8F4400
  • gitDecoration.deletedResourceForeground#B91A25
  • gitDecoration.ignoredResourceForeground#767B82
  • gitDecoration.modifiedResourceForeground#0054CB
  • gitDecoration.renamedResourceForeground#5F3BBB
  • gitDecoration.untrackedResourceForeground#166534
  • icon.foreground#535960
  • input.background#F4F5F6
  • input.border#C5C7CA
  • input.foreground#0D0F11
  • input.placeholderForeground#767B82
  • inputOption.activeBackground#5F3BBB18
  • inputOption.activeBorder#5F3BBB
  • inputOption.activeForeground#5F3BBB
  • inputValidation.errorBackground#B91A2518
  • inputValidation.errorBorder#B91A25
  • inputValidation.infoBackground#0054CB18
  • inputValidation.infoBorder#0054CB
  • inputValidation.warningBackground#8F440018
  • inputValidation.warningBorder#8F4400
  • list.activeSelectionBackground#E0E3E7
  • list.activeSelectionForeground#0D0F11
  • list.dropBackground#D2D4D788
  • list.errorForeground#B91A25
  • list.focusBackground#E0E3E7
  • list.focusForeground#0D0F11
  • list.highlightForeground#5F3BBB
  • list.hoverBackground#D2D4D766
  • list.hoverForeground#0D0F11
  • list.inactiveSelectionBackground#D2D4D788
  • list.inactiveSelectionForeground#535960
  • list.warningForeground#8F4400
  • listFilterWidget.background#E3E5E6
  • listFilterWidget.noMatchesOutline#B91A25
  • listFilterWidget.outline#5F3BBB
  • menu.background#E3E5E6
  • menu.border#D2D4D7
  • menu.foreground#0D0F11
  • menu.selectionBackground#E0E3E7
  • menu.selectionForeground#0D0F11
  • menu.separatorBackground#C5C7CA
  • menubar.selectionBackground#E0E3E7
  • menubar.selectionForeground#0D0F11
  • minimap.background#EBEDEF
  • minimap.errorHighlight#B91A25
  • minimap.findMatchHighlight#5F3BBB55
  • minimap.warningHighlight#8F4400
  • minimapSlider.activeBackground#5F3BBB99
  • minimapSlider.background#5F3BBB33
  • minimapSlider.hoverBackground#5F3BBB66
  • notificationCenter.border#D2D4D7
  • notificationLink.foreground#0054CB
  • notifications.background#E3E5E6
  • notifications.border#D2D4D7
  • notificationsErrorIcon.foreground#B91A25
  • notificationsInfoIcon.foreground#0054CB
  • notificationsWarningIcon.foreground#8F4400
  • panel.background#E3E5E6
  • panel.border#D2D4D7
  • panelSectionHeader.background#F4F5F6
  • panelTitle.activeBorder#5F3BBB
  • panelTitle.activeForeground#5F3BBB
  • panelTitle.inactiveForeground#636870
  • peekView.border#5F3BBB
  • peekViewEditor.background#EBEDEF
  • peekViewEditor.matchHighlightBackground#5F3BBB40
  • peekViewResult.background#E3E5E6
  • peekViewResult.matchHighlightBackground#5F3BBB33
  • peekViewResult.selectionBackground#E0E3E7
  • peekViewResult.selectionForeground#0D0F11
  • peekViewTitle.background#F4F5F6
  • peekViewTitleDescription.foreground#535960
  • peekViewTitleLabel.foreground#0D0F11
  • progressBar.background#5F3BBB
  • quickInput.background#E3E5E6
  • quickInput.foreground#0D0F11
  • quickInputList.focusBackground#E0E3E7
  • quickInputList.focusForeground#0D0F11
  • quickInputList.focusIconForeground#5F3BBB
  • scrollbar.shadow#0D0F1122
  • scrollbarSlider.activeBackground#5F3BBB40
  • scrollbarSlider.background#C5C7CAcc
  • scrollbarSlider.hoverBackground#767B82
  • selection.background#5F3BBB28
  • sideBar.background#E3E5E6
  • sideBar.border#D2D4D7
  • sideBar.foreground#535960
  • sideBarSectionHeader.background#E3E5E6
  • sideBarSectionHeader.border#D2D4D7
  • sideBarSectionHeader.foreground#535960
  • sideBarTitle.foreground#535960
  • statusBar.background#F4F5F6
  • statusBar.border#D2D4D7
  • statusBar.debuggingBackground#B91A25
  • statusBar.debuggingForeground#F4F5F6
  • statusBar.foreground#535960
  • statusBar.noFolderBackground#F4F5F6
  • statusBarItem.activeBackground#C5C7CA66
  • statusBarItem.hoverBackground#E0E3E7
  • statusBarItem.remoteBackground#5F3BBB
  • statusBarItem.remoteForeground#F4F5F6
  • tab.activeBackground#EBEDEF
  • tab.activeBorderTop#5F3BBB
  • tab.activeForeground#0D0F11
  • tab.border#D2D4D7
  • tab.hoverBackground#D2D4D766
  • tab.inactiveBackground#E3E5E6
  • tab.inactiveForeground#636870
  • tab.lastPinnedBorder#C5C7CA
  • tab.unfocusedActiveForeground#535960
  • tab.unfocusedInactiveForeground#767B82
  • terminal.ansiBlack#999FA7
  • terminal.ansiBlue#0054CB
  • terminal.ansiBrightBlack#636870
  • terminal.ansiBrightBlue#0054CB
  • terminal.ansiBrightCyan#5F3BBB
  • terminal.ansiBrightGreen#166534
  • terminal.ansiBrightMagenta#8C2293
  • terminal.ansiBrightRed#B91A25
  • terminal.ansiBrightWhite#0D0F11
  • terminal.ansiBrightYellow#8F4400
  • terminal.ansiCyan#5F3BBB
  • terminal.ansiGreen#166534
  • terminal.ansiMagenta#8C2293
  • terminal.ansiRed#B91A25
  • terminal.ansiWhite#535960
  • terminal.ansiYellow#8F4400
  • terminal.background#EBEDEF
  • terminal.foreground#0D0F11
  • terminal.selectionBackground#5F3BBB28
  • terminalCursor.foreground#5F3BBB
  • textLink.activeForeground#0054CB
  • textLink.foreground#0054CB
  • textPreformat.foreground#166534
  • textSeparator.foreground#D2D4D7
  • titleBar.activeBackground#F4F5F6
  • titleBar.activeForeground#0D0F11
  • titleBar.border#D2D4D7
  • titleBar.inactiveBackground#E3E5E6
  • titleBar.inactiveForeground#636870
  • widget.border#C5C7CA
  • widget.shadow#0D0F1122

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#636870italic
comment.block.documentation, comment.line.documentation#535960italic
comment.line.todo, keyword.codetag.notation#5F3BBBitalic
string, string.quoted#166534
string.quoted.docstring#166534italic
constant.character.escape, string.escape#8C2293
string.regexp#8F4400
string.other.link, markup.underline.link#0054CBitalic
constant.numeric#8F4400
constant.language.boolean, constant.language.null, constant.language.undefined#8F4400italic
constant, constant.other#8F4400
keyword, keyword.control, keyword.other, storage.modifier#8C2293
keyword.control.return, keyword.control.yield, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.async, keyword.control.await, keyword.control.trycatch#5F3BBBbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#535960italic
keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.throw, keyword.control.debug#B91A25
keyword.control.directive, keyword.preprocessor, meta.preprocessor, meta.preprocessor.string, meta.preprocessor.numeric#8F4400
storage.type, keyword.declaration#8C2293
entity.name.function, support.function, meta.function-call entity.name.function#5F3BBBbold
meta.function-call.generic#5F3BBBbold
support.function.builtin, entity.name.function.builtin#B91A25
support.function.macro, entity.name.function.macro#8C2293
entity.name.function.constructor, support.function.constructor#8C2293
entity.name.type, entity.name.class, entity.name.interface, support.type, support.class#0054CB
support.type.builtin, support.type.primitive, keyword.type#0054CBitalic
entity.name.enum#0054CBbold
variable, variable.other#0D0F11
variable.language#B91A25italic
variable.other.member, variable.other.property, variable.other.object.property, support.variable.property#0054CB
variable.parameter#0D0F11
support.type.property-name, entity.name.variable.field, variable.other.readwrite.member#535960
keyword.operator#535960
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.bracket#636870
punctuation.definition.interpolation, punctuation.section.interpolation#535960
entity.name.namespace, entity.name.module, entity.name.type.namespace, support.module#535960italic
entity.name.tag, support.class.component#0054CB
entity.other.attribute-name#535960italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#636870
entity.name.function.decorator, storage.type.annotation, meta.decorator punctuation.decorator, punctuation.definition.annotation#8F4400
entity.name.label#0054CB
markup.inserted, diff.inserted#166534
markup.deleted, diff.deleted#B91A25
markup.heading, entity.name.section#0D0F11bold
markup.bold, punctuation.definition.bold#5F3BBBbold
markup.italic, punctuation.definition.italic#535960italic
markup.inline.raw, markup.raw.inline#166534
string.other.link.title.markdown#5F3BBBbold
markup.underline.link, meta.link.inline.markdown markup.underline.link#0054CBitalic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#166534
support.type.property-name.css, meta.property-name#535960
support.constant.property-value, constant.other.unit#166534
entity.other.attribute-name.class, entity.other.attribute-name.id#5F3BBB
invalid, invalid.deprecated#B91A25
Version 14 Theme by mathieusouflis - VS Code Theme