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#FF46B0
  • activityBar.background#191A21
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#8692B9
  • activityBarBadge.background#FF46B0
  • activityBarBadge.foreground#191A21
  • badge.background#AD73FF
  • badge.foreground#191A21
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#8692B9
  • breadcrumbPicker.background#21222C
  • button.background#AD73FF
  • button.foreground#191A21
  • button.secondaryBackground#44475A
  • button.secondaryForeground#F8F8F2
  • checkbox.background#282A36
  • checkbox.border#191A21
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#00F83F20
  • diffEditor.removedTextBackground#FF555526
  • disabledForeground#8692B9
  • dropdown.background#21222C
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • editor.background#282A36
  • editor.findMatchBackground#FF911A59
  • editor.findMatchHighlightBackground#FF911A33
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#44475A99
  • editor.lineHighlightBackground#44475A4D
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#44475A80
  • editor.wordHighlightBackground#37DBFF33
  • editor.wordHighlightStrongBackground#00F83F33
  • editorBracketHighlight.foreground1#F8F8F2
  • editorBracketHighlight.foreground2#FF46B0
  • editorBracketHighlight.foreground3#37DBFF
  • editorBracketHighlight.foreground4#00F83F
  • editorBracketHighlight.foreground5#AD73FF
  • editorBracketHighlight.foreground6#FF911A
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorBracketMatch.background#8692B933
  • editorBracketMatch.border#AD73FF
  • editorCodeLens.foreground#8692B9
  • editorCursor.foreground#F8F8F2
  • editorError.foreground#FF5555
  • editorGroup.border#191A21
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#00F83F99
  • editorGutter.deletedBackground#FF555599
  • editorGutter.modifiedBackground#FF911A99
  • editorHint.foreground#00F83F
  • editorHoverWidget.background#21222C
  • editorHoverWidget.border#8692B9
  • editorIndentGuide.activeBackground1#8692B98C
  • editorIndentGuide.background1#8692B933
  • editorInfo.foreground#37DBFF
  • editorLineNumber.activeForeground#F8F8F2
  • editorLineNumber.foreground#8692B9
  • editorLink.activeForeground#37DBFF
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.errorForeground#FF5555
  • editorOverviewRuler.infoForeground#37DBFF
  • editorOverviewRuler.warningForeground#FF911A
  • editorRuler.foreground#8692B933
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.highlightForeground#37DBFF
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#FF911A
  • editorWhitespace.foreground#8692B966
  • editorWidget.background#21222C
  • editorWidget.border#191A21
  • errorForeground#FF5555
  • focusBorder#AD73FF
  • foreground#F8F8F2
  • gitDecoration.addedResourceForeground#00F83F
  • gitDecoration.conflictingResourceForeground#EEFF35
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#8692B9
  • gitDecoration.modifiedResourceForeground#FF911A
  • gitDecoration.untrackedResourceForeground#00F83F
  • icon.foreground#F8F8F2
  • input.background#282A36
  • input.border#191A21
  • input.foreground#F8F8F2
  • input.placeholderForeground#8692B9
  • inputOption.activeBorder#AD73FF
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#37DBFF
  • inputValidation.warningBorder#FF911A
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#AD73FF4D
  • list.errorForeground#FF5555
  • list.focusBackground#44475A
  • list.highlightForeground#37DBFF
  • list.hoverBackground#44475A59
  • list.inactiveSelectionBackground#44475A99
  • list.warningForeground#FF911A
  • minimap.findMatchHighlight#FF911A80
  • minimap.selectionHighlight#44475ACC
  • minimapGutter.addedBackground#00F83F
  • minimapGutter.deletedBackground#FF5555
  • minimapGutter.modifiedBackground#FF911A
  • notificationLink.foreground#37DBFF
  • notifications.background#21222C
  • notifications.border#191A21
  • notifications.foreground#F8F8F2
  • notificationsErrorIcon.foreground#FF5555
  • notificationsInfoIcon.foreground#37DBFF
  • notificationsWarningIcon.foreground#FF911A
  • panel.background#282A36
  • panel.border#AD73FF
  • panelTitle.activeBorder#FF46B0
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#8692B9
  • peekView.border#AD73FF
  • peekViewEditor.background#282A36
  • peekViewResult.background#21222C
  • peekViewResult.selectionBackground#44475A
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#8692B9
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#AD73FF
  • pickerGroup.foreground#37DBFF
  • progressBar.background#FF46B0
  • scrollbar.shadow#191A2199
  • scrollbarSlider.activeBackground#44475AE6
  • scrollbarSlider.background#44475A80
  • scrollbarSlider.hoverBackground#44475AB3
  • selection.background#AD73FF66
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#FF911A
  • sideBar.background#21222C
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#21222C
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#191A21
  • statusBarItem.prominentBackground#44475A
  • statusBarItem.remoteBackground#AD73FF
  • statusBarItem.remoteForeground#191A21
  • tab.activeBackground#282A36
  • tab.activeBorderTop#FF46B0
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#191A21
  • tab.inactiveForeground#8692B9
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#AD73FF
  • terminal.ansiBrightBlack#8692B9
  • terminal.ansiBrightBlue#CBA6FF
  • terminal.ansiBrightCyan#6AE4FF
  • terminal.ansiBrightGreen#2CFF62
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF8888
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F2FF68
  • terminal.ansiCyan#37DBFF
  • terminal.ansiGreen#00F83F
  • terminal.ansiMagenta#FF46B0
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#EEFF35
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • textBlockQuote.background#21222C
  • textBlockQuote.border#AD73FF
  • textCodeBlock.background#21222C
  • textLink.activeForeground#51E0FF
  • textLink.foreground#37DBFF
  • textPreformat.foreground#EEFF35
  • 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#EEFF35
punctuation.definition.template-expression, punctuation.section.embedded#FF46B0
constant.numeric, constant.language, constant.character, constant.other#AD73FF
keyword, keyword.operator, storage.type, storage.modifier#FF46B0
entity.name.function, support.function, meta.function-call.generic#00F83F
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#37DBFF
variable.parameter#FF911Aitalic
variable, variable.other.object.property#F8F8F2
variable.language#AD73FFitalic
entity.name.tag#FF46B0
entity.other.attribute-name#00F83Fitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00F83F
support.type.property-name.css, support.type.vendored.property-name#37DBFF
keyword.other.unit#AD73FF
support.type.property-name.json#37DBFF
markup.heading, entity.name.section#AD73FFbold
markup.bold#FF911Abold
markup.italic#EEFF35italic
markup.underline.link#37DBFF
markup.inline.raw, markup.fenced_code.block#00F83F
markup.quote#8692B9italic
string.regexp#FF5555
constant.character.escape#FF46B0
meta.decorator, punctuation.decorator#00F83F
invalid, invalid.illegal#FF5555