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#FF46D1
  • activityBar.background#191A21
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#8692B9
  • activityBarBadge.background#FF46D1
  • activityBarBadge.foreground#191A21
  • badge.background#FF73FF
  • badge.foreground#191A21
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#8692B9
  • breadcrumbPicker.background#21222C
  • button.background#FF73FF
  • button.foreground#191A21
  • button.secondaryBackground#44475A
  • button.secondaryForeground#F8F8F2
  • checkbox.background#282A36
  • checkbox.border#191A21
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#53F80020
  • diffEditor.removedTextBackground#FF559C26
  • disabledForeground#8692B9
  • dropdown.background#21222C
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • editor.background#282A36
  • editor.findMatchBackground#FFFF1A59
  • editor.findMatchHighlightBackground#FFFF1A33
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#44475A99
  • editor.lineHighlightBackground#44475A4D
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#44475A80
  • editor.wordHighlightBackground#37FFAC33
  • editor.wordHighlightStrongBackground#53F80033
  • editorBracketHighlight.foreground1#F8F8F2
  • editorBracketHighlight.foreground2#FF46D1
  • editorBracketHighlight.foreground3#37FFAC
  • editorBracketHighlight.foreground4#53F800
  • editorBracketHighlight.foreground5#FF73FF
  • editorBracketHighlight.foreground6#FFFF1A
  • editorBracketHighlight.unexpectedBracket.foreground#FF559C
  • editorBracketMatch.background#8692B933
  • editorBracketMatch.border#FF73FF
  • editorCodeLens.foreground#8692B9
  • editorCursor.foreground#F8F8F2
  • editorError.foreground#FF559C
  • editorGroup.border#191A21
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#53F80099
  • editorGutter.deletedBackground#FF559C99
  • editorGutter.modifiedBackground#FFFF1A99
  • editorHint.foreground#53F800
  • editorHoverWidget.background#21222C
  • editorHoverWidget.border#8692B9
  • editorIndentGuide.activeBackground1#8692B98C
  • editorIndentGuide.background1#8692B933
  • editorInfo.foreground#37FFAC
  • editorLineNumber.activeForeground#F8F8F2
  • editorLineNumber.foreground#8692B9
  • editorLink.activeForeground#37FFAC
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.errorForeground#FF559C
  • editorOverviewRuler.infoForeground#37FFAC
  • editorOverviewRuler.warningForeground#FFFF1A
  • editorRuler.foreground#8692B933
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.highlightForeground#37FFAC
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#FFFF1A
  • editorWhitespace.foreground#8692B966
  • editorWidget.background#21222C
  • editorWidget.border#191A21
  • errorForeground#FF559C
  • focusBorder#FF73FF
  • foreground#F8F8F2
  • gitDecoration.addedResourceForeground#53F800
  • gitDecoration.conflictingResourceForeground#CDFF35
  • gitDecoration.deletedResourceForeground#FF559C
  • gitDecoration.ignoredResourceForeground#8692B9
  • gitDecoration.modifiedResourceForeground#FFFF1A
  • gitDecoration.untrackedResourceForeground#53F800
  • icon.foreground#F8F8F2
  • input.background#282A36
  • input.border#191A21
  • input.foreground#F8F8F2
  • input.placeholderForeground#8692B9
  • inputOption.activeBorder#FF73FF
  • inputValidation.errorBorder#FF559C
  • inputValidation.infoBorder#37FFAC
  • inputValidation.warningBorder#FFFF1A
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#FF73FF4D
  • list.errorForeground#FF559C
  • list.focusBackground#44475A
  • list.highlightForeground#37FFAC
  • list.hoverBackground#44475A59
  • list.inactiveSelectionBackground#44475A99
  • list.warningForeground#FFFF1A
  • minimap.findMatchHighlight#FFFF1A80
  • minimap.selectionHighlight#44475ACC
  • minimapGutter.addedBackground#53F800
  • minimapGutter.deletedBackground#FF559C
  • minimapGutter.modifiedBackground#FFFF1A
  • notificationLink.foreground#37FFAC
  • notifications.background#21222C
  • notifications.border#191A21
  • notifications.foreground#F8F8F2
  • notificationsErrorIcon.foreground#FF559C
  • notificationsInfoIcon.foreground#37FFAC
  • notificationsWarningIcon.foreground#FFFF1A
  • panel.background#282A36
  • panel.border#FF73FF
  • panelTitle.activeBorder#FF46D1
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#8692B9
  • peekView.border#FF73FF
  • peekViewEditor.background#282A36
  • peekViewResult.background#21222C
  • peekViewResult.selectionBackground#44475A
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#8692B9
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#FF73FF
  • pickerGroup.foreground#37FFAC
  • progressBar.background#FF46D1
  • scrollbar.shadow#191A2199
  • scrollbarSlider.activeBackground#44475AE6
  • scrollbarSlider.background#44475A80
  • scrollbarSlider.hoverBackground#44475AB3
  • selection.background#FF73FF66
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#FFFF1A
  • sideBar.background#21222C
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#21222C
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF559C
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#191A21
  • statusBarItem.prominentBackground#44475A
  • statusBarItem.remoteBackground#FF73FF
  • statusBarItem.remoteForeground#191A21
  • tab.activeBackground#282A36
  • tab.activeBorderTop#FF46D1
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#191A21
  • tab.inactiveForeground#8692B9
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#FF73FF
  • terminal.ansiBrightBlack#8692B9
  • terminal.ansiBrightBlue#FFA6FF
  • terminal.ansiBrightCyan#6AFFC1
  • terminal.ansiBrightGreen#73FF2C
  • terminal.ansiBrightMagenta#FF79DE
  • terminal.ansiBrightRed#FF88BA
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#DAFF68
  • terminal.ansiCyan#37FFAC
  • terminal.ansiGreen#53F800
  • terminal.ansiMagenta#FF46D1
  • terminal.ansiRed#FF559C
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#CDFF35
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • textBlockQuote.background#21222C
  • textBlockQuote.border#FF73FF
  • textCodeBlock.background#21222C
  • textLink.activeForeground#51FFB7
  • textLink.foreground#37FFAC
  • textPreformat.foreground#CDFF35
  • titleBar.activeBackground#191A21
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#8692B9
  • walkThrough.embeddedEditorBackground#21222C
  • widget.shadow#191A2199

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8692B9italic
string, punctuation.definition.string.begin, punctuation.definition.string.end#CDFF35
punctuation.definition.template-expression, punctuation.section.embedded#FF46D1
constant.numeric, constant.language, constant.character, constant.other#FF73FF
keyword, keyword.operator, storage.type, storage.modifier#FF46D1
entity.name.function, support.function, meta.function-call.generic#53F800
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#37FFAC
variable.parameter#FFFF1Aitalic
variable, variable.other.object.property#F8F8F2
variable.language#FF73FFitalic
entity.name.tag#FF46D1
entity.other.attribute-name#53F800italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#53F800
support.type.property-name.css, support.type.vendored.property-name#37FFAC
keyword.other.unit#FF73FF
support.type.property-name.json#37FFAC
markup.heading, entity.name.section#FF73FFbold
markup.bold#FFFF1Abold
markup.italic#CDFF35italic
markup.underline.link#37FFAC
markup.inline.raw, markup.fenced_code.block#53F800
markup.quote#8692B9italic
string.regexp#FF559C
constant.character.escape#FF46D1
meta.decorator, punctuation.decorator#53F800
invalid, invalid.illegal#FF559C