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#B7A2FF
  • activityBar.background#08090B
  • activityBar.border#1A1E23
  • activityBar.foreground#9CA0A6
  • activityBar.inactiveForeground#4E5660
  • activityBarBadge.background#B7A2FF
  • activityBarBadge.foreground#08090B
  • badge.background#B7A2FF
  • badge.foreground#08090B
  • breadcrumb.activeSelectionForeground#B7A2FF
  • breadcrumb.focusForeground#F2F4F6
  • breadcrumb.foreground#6E737A
  • breadcrumbPicker.background#14171B
  • button.background#B7A2FF
  • button.foreground#08090B
  • button.hoverBackground#ED8EF3
  • button.secondaryBackground#1A1E23
  • button.secondaryForeground#F2F4F6
  • button.secondaryHoverBackground#22272D
  • checkbox.background#1A1E23
  • checkbox.border#22272D
  • checkbox.foreground#F2F4F6
  • descriptionForeground#9CA0A6
  • diffEditor.insertedLineBackground#4BDE7F11
  • diffEditor.insertedTextBackground#4BDE7F22
  • diffEditor.removedLineBackground#FF5C5911
  • diffEditor.removedTextBackground#FF5C5922
  • disabledForeground#4E5660
  • dropdown.background#14171B
  • dropdown.border#22272D
  • dropdown.foreground#F2F4F6
  • dropdown.listBackground#14171B
  • editor.background#14171B
  • editor.findMatchBackground#ED8EF340
  • editor.findMatchHighlightBackground#B7A2FF55
  • editor.findRangeHighlightBackground#B7A2FF18
  • editor.foreground#F2F4F6
  • editor.inactiveSelectionBackground#B7A2FF18
  • editor.lineHighlightBackground#F2F4F608
  • editor.selectionBackground#B7A2FF28
  • editor.selectionHighlightBackground#9CA0A620
  • editor.wordHighlightBackground#9CA0A620
  • editor.wordHighlightStrongBackground#9CA0A630
  • editorBracketMatch.background#B7A2FF18
  • editorBracketMatch.border#B7A2FF40
  • editorCodeLens.foreground#6E737A
  • editorCursor.background#08090B
  • editorCursor.foreground#B7A2FF
  • editorError.foreground#FF5C59
  • editorGroup.border#1A1E23
  • editorGroup.dropBackground#1A1E2366
  • editorGroupHeader.tabsBackground#08090B
  • editorGroupHeader.tabsBorder#1A1E23
  • editorGutter.addedBackground#4BDE7F
  • editorGutter.background#14171B
  • editorGutter.deletedBackground#FF5C59
  • editorGutter.modifiedBackground#78AFFF
  • editorHint.foreground#4E5660
  • editorHoverWidget.background#14171B
  • editorHoverWidget.border#1A1E23
  • editorHoverWidget.foreground#F2F4F6
  • editorIndentGuide.activeBackground1#22272D
  • editorIndentGuide.background1#1A1E2399
  • editorInfo.foreground#78AFFF
  • editorLineNumber.activeForeground#B7A2FF
  • editorLineNumber.foreground#4E5660
  • editorLink.activeForeground#78AFFF
  • editorOverviewRuler.addedForeground#4BDE7F
  • editorOverviewRuler.border#F2F4F612
  • editorOverviewRuler.deletedForeground#FF5C59
  • editorOverviewRuler.errorForeground#FF5C59
  • editorOverviewRuler.findMatchForeground#B7A2FF55
  • editorOverviewRuler.infoForeground#78AFFF
  • editorOverviewRuler.modifiedForeground#78AFFF
  • editorOverviewRuler.warningForeground#FFA85E
  • editorRuler.foreground#1A1E23
  • editorSuggestWidget.background#14171B
  • editorSuggestWidget.border#1A1E23
  • editorSuggestWidget.focusHighlightForeground#B7A2FF
  • editorSuggestWidget.foreground#F2F4F6
  • editorSuggestWidget.highlightForeground#B7A2FF
  • editorSuggestWidget.selectedBackground#1A1E23
  • editorWarning.foreground#FFA85E
  • editorWhitespace.foreground#5B606855
  • errorForeground#FF5C59
  • extensionButton.prominentBackground#B7A2FF
  • extensionButton.prominentForeground#08090B
  • extensionButton.prominentHoverBackground#ED8EF3
  • focusBorder#B7A2FF
  • foreground#F2F4F6
  • gitDecoration.addedResourceForeground#4BDE7F
  • gitDecoration.conflictingResourceForeground#FFA85E
  • gitDecoration.deletedResourceForeground#FF5C59
  • gitDecoration.ignoredResourceForeground#4E5660
  • gitDecoration.modifiedResourceForeground#78AFFF
  • gitDecoration.renamedResourceForeground#B7A2FF
  • gitDecoration.untrackedResourceForeground#4BDE7F
  • icon.foreground#9CA0A6
  • input.background#1A1E23
  • input.border#22272D
  • input.foreground#F2F4F6
  • input.placeholderForeground#6E737A
  • inputOption.activeBackground#B7A2FF18
  • inputOption.activeBorder#B7A2FF
  • inputOption.activeForeground#B7A2FF
  • inputValidation.errorBackground#FF5C591a
  • inputValidation.errorBorder#FF5C59
  • inputValidation.infoBackground#9CA0A622
  • inputValidation.infoBorder#78AFFF
  • inputValidation.warningBackground#FFA85E1a
  • inputValidation.warningBorder#FFA85E
  • list.activeSelectionBackground#1A1E23
  • list.activeSelectionForeground#F2F4F6
  • list.dropBackground#1A1E2366
  • list.errorForeground#FF5C59
  • list.focusBackground#1A1E23
  • list.focusForeground#F2F4F6
  • list.highlightForeground#B7A2FF
  • list.hoverBackground#1A1E234d
  • list.hoverForeground#F2F4F6
  • list.inactiveSelectionBackground#1A1E234d
  • list.inactiveSelectionForeground#9CA0A6
  • list.warningForeground#FFA85E
  • listFilterWidget.background#14171B
  • listFilterWidget.noMatchesOutline#FF5C59
  • listFilterWidget.outline#B7A2FF
  • menu.background#14171B
  • menu.border#1A1E23
  • menu.foreground#F2F4F6
  • menu.selectionBackground#1A1E23
  • menu.selectionForeground#F2F4F6
  • menu.separatorBackground#22272D
  • menubar.selectionBackground#1A1E23
  • menubar.selectionForeground#F2F4F6
  • minimap.background#14171B
  • minimap.errorHighlight#FF5C59
  • minimap.findMatchHighlight#B7A2FF55
  • minimap.warningHighlight#FFA85E
  • minimapSlider.activeBackground#B7A2FF88
  • minimapSlider.background#B7A2FF28
  • minimapSlider.hoverBackground#B7A2FF55
  • notificationCenter.border#1A1E23
  • notificationLink.foreground#78AFFF
  • notifications.background#14171B
  • notifications.border#1A1E23
  • notificationsErrorIcon.foreground#FF5C59
  • notificationsInfoIcon.foreground#78AFFF
  • notificationsWarningIcon.foreground#FFA85E
  • panel.background#0E1012
  • panel.border#1A1E23
  • panelSectionHeader.background#08090B
  • panelTitle.activeBorder#B7A2FF
  • panelTitle.activeForeground#B7A2FF
  • panelTitle.inactiveForeground#6E737A
  • peekView.border#B7A2FF
  • peekViewEditor.background#14171B
  • peekViewEditor.matchHighlightBackground#B7A2FF55
  • peekViewResult.background#0E1012
  • peekViewResult.matchHighlightBackground#B7A2FF40
  • peekViewResult.selectionBackground#1A1E23
  • peekViewResult.selectionForeground#F2F4F6
  • peekViewTitle.background#08090B
  • peekViewTitleDescription.foreground#9CA0A6
  • peekViewTitleLabel.foreground#F2F4F6
  • progressBar.background#B7A2FF
  • quickInput.background#14171B
  • quickInput.foreground#F2F4F6
  • quickInputList.focusBackground#1A1E23
  • quickInputList.focusForeground#F2F4F6
  • quickInputList.focusIconForeground#B7A2FF
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B7A2FF40
  • scrollbarSlider.background#22272D80
  • scrollbarSlider.hoverBackground#4E5660
  • selection.background#B7A2FF28
  • sideBar.background#0E1012
  • sideBar.border#1A1E23
  • sideBar.foreground#9CA0A6
  • sideBarSectionHeader.background#0E1012
  • sideBarSectionHeader.border#1A1E23
  • sideBarSectionHeader.foreground#9CA0A6
  • sideBarTitle.foreground#9CA0A6
  • statusBar.background#08090B
  • statusBar.border#1A1E23
  • statusBar.debuggingBackground#FF5C59
  • statusBar.debuggingForeground#08090B
  • statusBar.foreground#9CA0A6
  • statusBar.noFolderBackground#08090B
  • statusBarItem.activeBackground#22272D80
  • statusBarItem.hoverBackground#1A1E23
  • statusBarItem.remoteBackground#B7A2FF
  • statusBarItem.remoteForeground#08090B
  • tab.activeBackground#14171B
  • tab.activeBorderTop#B7A2FF
  • tab.activeForeground#F2F4F6
  • tab.border#1A1E23
  • tab.hoverBackground#1A1E234d
  • tab.inactiveBackground#0E1012
  • tab.inactiveForeground#6E737A
  • tab.lastPinnedBorder#22272D
  • tab.unfocusedActiveForeground#9CA0A6
  • tab.unfocusedInactiveForeground#4E5660
  • terminal.ansiBlack#4E5660
  • terminal.ansiBlue#78AFFF
  • terminal.ansiBrightBlack#6E737A
  • terminal.ansiBrightBlue#78AFFF
  • terminal.ansiBrightCyan#B7A2FF
  • terminal.ansiBrightGreen#4BDE7F
  • terminal.ansiBrightMagenta#ED8EF3
  • terminal.ansiBrightRed#FF5C59
  • terminal.ansiBrightWhite#F2F4F6
  • terminal.ansiBrightYellow#FFA85E
  • terminal.ansiCyan#B7A2FF
  • terminal.ansiGreen#4BDE7F
  • terminal.ansiMagenta#ED8EF3
  • terminal.ansiRed#FF5C59
  • terminal.ansiWhite#9CA0A6
  • terminal.ansiYellow#FFA85E
  • terminal.background#14171B
  • terminal.foreground#F2F4F6
  • terminal.selectionBackground#B7A2FF28
  • terminalCursor.foreground#B7A2FF
  • textLink.activeForeground#78AFFF
  • textLink.foreground#78AFFF
  • textPreformat.foreground#4BDE7F
  • textSeparator.foreground#1A1E23
  • titleBar.activeBackground#08090B
  • titleBar.activeForeground#F2F4F6
  • titleBar.border#1A1E23
  • titleBar.inactiveBackground#0E1012
  • titleBar.inactiveForeground#6E737A
  • widget.border#22272D
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E737Aitalic
comment.block.documentation, comment.line.documentation#9CA0A6italic
comment.line.todo, keyword.codetag.notation#B7A2FFitalic
string, string.quoted#4BDE7F
string.quoted.docstring#4BDE7Fitalic
constant.character.escape, string.escape#ED8EF3
string.regexp#FFA85E
string.other.link, markup.underline.link#78AFFFitalic
constant.numeric#FFA85E
constant.language.boolean, constant.language.null, constant.language.undefined#FFA85Eitalic
constant, constant.other#FFA85E
keyword, keyword.control, keyword.other, storage.modifier#ED8EF3
keyword.control.return, keyword.control.yield, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.async, keyword.control.await, keyword.control.trycatch#B7A2FF
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#9CA0A6italic
keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.throw, keyword.control.debug#FF5C59
keyword.control.directive, keyword.preprocessor, meta.preprocessor, meta.preprocessor.string, meta.preprocessor.numeric#FFA85E
storage.type, keyword.declaration#ED8EF3
entity.name.function, support.function, meta.function-call entity.name.function#B7A2FF
meta.function-call.generic#B7A2FF
support.function.builtin, entity.name.function.builtin#FF5C59
support.function.macro, entity.name.function.macro#ED8EF3
entity.name.function.constructor, support.function.constructor#ED8EF3
entity.name.type, entity.name.class, entity.name.interface, support.type, support.class#78AFFF
support.type.builtin, support.type.primitive, keyword.type#78AFFFitalic
entity.name.enum#78AFFFbold
variable, variable.other#F2F4F6
variable.language#FF5C59italic
variable.other.member, variable.other.property, variable.other.object.property, support.variable.property#78AFFF
variable.parameter#F2F4F6
support.type.property-name, entity.name.variable.field, variable.other.readwrite.member#9CA0A6
keyword.operator#9CA0A6
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.bracket#6E737A
punctuation.definition.interpolation, punctuation.section.interpolation#9CA0A6
entity.name.namespace, entity.name.module, entity.name.type.namespace, support.module#9CA0A6italic
entity.name.tag, support.class.component#78AFFF
entity.other.attribute-name#9CA0A6italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6E737A
entity.name.function.decorator, storage.type.annotation, meta.decorator punctuation.decorator, punctuation.definition.annotation#FFA85E
entity.name.label#78AFFF
markup.inserted, diff.inserted#4BDE7F
markup.deleted, diff.deleted#FF5C59
markup.heading, entity.name.section#F2F4F6bold
markup.bold, punctuation.definition.bold#B7A2FFbold
markup.italic, punctuation.definition.italic#9CA0A6italic
markup.inline.raw, markup.raw.inline#4BDE7F
string.other.link.title.markdown#B7A2FF
markup.underline.link, meta.link.inline.markdown markup.underline.link#78AFFFitalic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#4BDE7F
support.type.property-name.css, meta.property-name#9CA0A6
support.constant.property-value, constant.other.unit#4BDE7F
entity.other.attribute-name.class, entity.other.attribute-name.id#B7A2FF
invalid, invalid.deprecated#FF5C59
Version 14 Theme by mathieusouflis - VS Code Theme