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.background#381828
  • activityBar.border#583048
  • activityBar.foreground#FFD8F0
  • activityBar.inactiveForeground#C8A0C8
  • activityBarBadge.background#A090F0
  • activityBarBadge.foreground#1A1020
  • badge.background#8E6A8A
  • badge.foreground#FFFAFC
  • breadcrumb.activeSelectionForeground#D8C8FF
  • breadcrumb.focusForeground#FFFAFC
  • breadcrumb.foreground#B898B8
  • breadcrumbPicker.background#2A2230
  • button.background#B84888
  • button.foreground#FFFAFC
  • button.hoverBackground#D060A0
  • button.secondaryBackground#362A44
  • button.secondaryBorder#F0A8E888
  • button.secondaryForeground#E8D8FF
  • button.secondaryHoverBackground#483860
  • debugExceptionWidget.background#2E2434
  • debugExceptionWidget.border#8B78E8
  • debugToolBar.background#2A2230
  • descriptionForeground#C4B8E8
  • diffEditor.insertedTextBackground#B8F0D022
  • diffEditor.removedTextBackground#F0A0C022
  • disabledForeground#9A8AA8
  • editor.background#2A1828
  • editor.findMatchBackground#FF60D099
  • editor.findMatchBorder#FF88FF
  • editor.findMatchHighlightBackground#C070FF88
  • editor.findMatchHighlightBorder#E870FFAA
  • editor.foreground#F5E8F0
  • editor.hoverHighlightBackground#F8A8F066
  • editor.inactiveLineHighlightBackground#38182888
  • editor.inactiveSelectionBackground#8068A844
  • editor.lineHighlightBackground#482838AA
  • editor.lineHighlightBorder#78FFFF33
  • editor.rangeHighlightBackground#9068B866
  • editor.rangeHighlightBorder#78FFFF22
  • editor.selectionBackground#E060A099
  • editor.selectionHighlightBackground#F090FF66
  • editor.selectionHighlightBorder#FF70B0AA
  • editor.wordHighlightBackground#E8A0FF55
  • editor.wordHighlightBorder#78FFFF44
  • editor.wordHighlightStrongBackground#FF80D866
  • editor.wordHighlightStrongBorder#FF40F088
  • editor.wordHighlightTextBackground#D8B8FF44
  • editorBracketHighlight.foreground1#FFA8D8
  • editorBracketHighlight.foreground2#78FFFF
  • editorBracketHighlight.foreground3#FF78C8
  • editorBracketHighlight.foreground4#A8FFD8
  • editorBracketHighlight.foreground5#D8B8FF
  • editorBracketHighlight.foreground6#FFB8FF
  • editorBracketHighlight.unexpectedBracket.foreground#FF50F0
  • editorBracketMatch.background#E070FF44
  • editorBracketMatch.border#FF88CC
  • editorBracketPairGuide.activeBackground1#F0A8FF66
  • editorBracketPairGuide.activeBackground2#78FFFF66
  • editorBracketPairGuide.activeBackground3#FF98F066
  • editorBracketPairGuide.activeBackground4#A8FFD866
  • editorBracketPairGuide.activeBackground5#D8B8FF66
  • editorBracketPairGuide.activeBackground6#FFB8FF66
  • editorCodeLens.foreground#8A7A90
  • editorCursor.foreground#FF78D0
  • editorError.foreground#F8A8C8
  • editorGroup.border#2E2434
  • editorGroupHeader.noTabsBackground#201E28
  • editorGroupHeader.tabsBackground#1E141C
  • editorGutter.addedBackground#B8F0D0aa
  • editorGutter.deletedBackground#E8A8C8aa
  • editorGutter.modifiedBackground#FFE56699
  • editorIndentGuide.activeBackground#FF60A0DD
  • editorIndentGuide.background#3A3448
  • editorInfo.foreground#D0C8F8
  • editorLightBulb.foreground#FF98CC
  • editorLineNumber.activeForeground#FF88C8
  • editorLineNumber.foreground#6A5A70
  • editorMultiCursor.primary.foreground#FF78D0
  • editorMultiCursor.secondary.foreground#78FFFF
  • editorRuler.foreground#3A3448
  • editorStickyScroll.background#362A48EE
  • editorStickyScroll.border#F0B8F0AA
  • editorStickyScroll.shadow#00000044
  • editorStickyScrollGutter.background#32283A
  • editorWarning.foreground#FFE566
  • editorWhitespace.foreground#4A415866
  • errorForeground#F8A8C8
  • focusBorder#FF88CC88
  • foreground#F8E0F0
  • gitDecoration.conflictingResourceForeground#F0C0D8
  • gitDecoration.deletedResourceForeground#F0B0C8
  • gitDecoration.ignoredResourceForeground#6A5A70
  • gitDecoration.modifiedResourceForeground#FFE566
  • gitDecoration.stageModifiedResourceForeground#FFE566
  • gitDecoration.untrackedResourceForeground#B8F0D0
  • input.background#261E2C
  • input.border#3A3048
  • input.foreground#FFFAFC
  • input.placeholderForeground#8A7A90
  • inputOption.activeBorder#70F8FF
  • list.activeSelectionBackground#A04068CC
  • list.activeSelectionForeground#F8F4FF
  • list.activeSelectionIconForeground#FFB8D8
  • list.deemphasizedForeground#B0A8D8
  • list.focusBackground#8A3858BB
  • list.focusForeground#FFFAFC
  • list.foreground#E8E0F0
  • list.highlightForeground#FF98CC
  • list.hoverBackground#7A284888
  • list.hoverForeground#FFFAFC
  • list.inactiveSelectionBackground#6A2840AA
  • list.inactiveSelectionForeground#F0D8E8
  • list.inactiveSelectionIconForeground#D898B8
  • list.warningForeground#FFE566
  • menu.background#2A2230
  • menu.border#3A3048
  • menu.foreground#F5E8F0
  • menu.selectionBackground#A04068AA
  • menu.selectionForeground#F8F4FF
  • menu.separatorBackground#3A3048
  • notificationCenterHeader.background#201E28
  • notificationLink.foreground#D8C8FF
  • notifications.background#2A2230
  • notifications.border#3A3048
  • panel.background#1E141C
  • panel.border#2E2434
  • panelInput.border#3A3048
  • panelSection.border#2E2434
  • panelSectionHeader.background#48283866
  • panelSectionHeader.border#FF78B8
  • panelSectionHeader.foreground#FF98CC
  • panelTitle.activeForeground#F5D8E8
  • panelTitle.inactiveForeground#6E6278
  • peekView.border#B090F866
  • peekViewEditor.background#201E28
  • peekViewResult.background#201A28
  • peekViewTitle.background#2E2434
  • peekViewTitleLabel.foreground#FCE8F0
  • pickerGroup.border#483860
  • pickerGroup.foreground#B0A8D8
  • progressBar.background#C85098
  • quickInput.background#261F2C
  • quickInput.foreground#F0E8F8
  • quickInputList.focusBackground#A04068CC
  • quickInputList.focusForeground#F8F4FF
  • quickInputList.focusIconForeground#FFB8D8
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9888F077
  • scrollbarSlider.background#9888F033
  • scrollbarSlider.hoverBackground#9888F055
  • selection.background#B8A0F066
  • sideBar.background#221420
  • sideBar.border#3A2838
  • sideBar.foreground#E4DCF0
  • sideBarSectionHeader.background#48283866
  • sideBarSectionHeader.border#FF78B8
  • sideBarSectionHeader.foreground#FF98CC
  • sideBarTitle.foreground#F4ECFF
  • statusBar.background#341828
  • statusBar.border#483058
  • statusBar.debuggingBackground#8E6A8A
  • statusBar.foreground#F8D8F0
  • statusBar.noFolderBackground#2C2436
  • statusBarItem.hoverBackground#9888F055
  • statusBarItem.prominentBackground#9888F044
  • tab.activeBackground#2A1828
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FF70B8
  • tab.activeForeground#F4ECFF
  • tab.activeModifiedBorder#FFE566
  • tab.border#2E2434
  • tab.hoverBackground#362A44
  • tab.hoverForeground#FFFAFC
  • tab.inactiveBackground#1E141C
  • tab.inactiveForeground#B8B0D8
  • tab.inactiveModifiedBorder#FFF176AA
  • tab.selectedBackground#3A3050
  • tab.selectedForeground#F8F4FF
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#FF70B8BB
  • tab.unfocusedActiveForeground#E8E0F8
  • tab.unfocusedActiveModifiedBorder#FFE566CC
  • tab.unfocusedHoverBackground#30243A
  • tab.unfocusedHoverForeground#F0E8FF
  • tab.unfocusedInactiveForeground#A898D0
  • terminal.ansiBlack#2A2635
  • terminal.ansiBlue#B8C8FF
  • terminal.ansiBrightBlack#6A5A70
  • terminal.ansiBrightBlue#D0D8FF
  • terminal.ansiBrightCyan#A8FFFF
  • terminal.ansiBrightGreen#B8F0C8
  • terminal.ansiBrightMagenta#FFB8FF
  • terminal.ansiBrightRed#F8C0D8
  • terminal.ansiBrightWhite#FFFAFC
  • terminal.ansiBrightYellow#FFF9C4
  • terminal.ansiCyan#78F8FF
  • terminal.ansiGreen#9CD9B0
  • terminal.ansiMagenta#F8A8FF
  • terminal.ansiRed#F0A0B8
  • terminal.ansiWhite#E8DCE8
  • terminal.ansiYellow#FFE082
  • terminal.background#1E141C
  • terminal.foreground#F5E8F0
  • terminal.selectionBackground#E070F099
  • terminalCursor.foreground#FF78D0
  • textBlockQuote.background#2E2430
  • textBlockQuote.border#B090F888
  • textCodeBlock.background#241E2A
  • textLink.activeForeground#FDF4F8
  • textLink.foreground#D8C8FF
  • textPreformat.foreground#F0B0D0
  • textSeparator.foreground#6E5678
  • titleBar.activeBackground#341828
  • titleBar.activeForeground#FFC8E8
  • titleBar.border#483058
  • titleBar.inactiveBackground#2C2436
  • titleBar.inactiveForeground#B898C8
  • tree.indentGuidesStroke#4A3E50
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B8B0E8italic
string, string.quoted, string.template#FF98C8—
constant.numeric, constant.language#E8A8F0—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#FFB0D8—
keyword.operator#C8B8E0—
entity.name.function, support.function, meta.function-call#FFFAFC—
entity.name.type, entity.name.class, support.type, support.class#F8D8F0—
variable, variable.other, variable.parameter#D8D0E8—
variable.language#E8D0FFitalic
entity.name.tag#E8B8FF—
entity.other.attribute-name#D8C8FF—
support.type.property-name.css, support.type.property-name.scss#90D8F8—
support.type.property-name.json#B8C8FF—
invalid, invalid.illegal#F8A8C8—
markup.heading#F5D8E8bold
markup.underline.link, string.other.link#D8C8FFunderline
markup.bold#A080FFbold
markup.italic—italic
markup.inserted, meta.diff.header.to-file#A8E8C8—
markup.deleted, meta.diff.header.from-file#F0B0C8—