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#9CADFF
  • activityBar.activeFocusBorder#9CADFF
  • activityBar.background#1C253B
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8F8496
  • activityBarBadge.background#9CADFF
  • activityBarBadge.foreground#1C253B
  • badge.background#9CADFF
  • badge.foreground#1C253B
  • breadcrumb.background#2D3852
  • breadcrumb.focusForeground#F2F4FF
  • breadcrumb.foreground#CDC4D5
  • button.background#7587DB
  • button.foreground#FFFFFF
  • button.hoverBackground#9CADFF
  • button.secondaryBackground#516083
  • button.secondaryForeground#FFFFFF
  • checkbox.background#1C253B
  • checkbox.border#516083
  • checkbox.foreground#F4EEF8
  • commandCenter.background#2A3854
  • commandCenter.border#516083
  • commandCenter.foreground#F4EEF8
  • descriptionForeground#A89EAE
  • dropdown.background#2A3854
  • dropdown.border#516083
  • dropdown.foreground#F4EEF8
  • editor.background#2D3852
  • editor.foreground#F2F4FF
  • editor.inactiveSelectionBackground#9CADFF2B
  • editor.lineHighlightBackground#9CADFF0E
  • editor.selectionBackground#9CADFF42
  • editor.selectionHighlightBackground#9CADFF24
  • editor.wordHighlightBackground#8FD7FF20
  • editor.wordHighlightStrongBackground#FFADCF24
  • editorBracketHighlight.foreground1#DAB9FF
  • editorBracketHighlight.foreground2#8FD7FF
  • editorBracketHighlight.foreground3#A9E6C7
  • editorBracketHighlight.foreground4#FFC48F
  • editorBracketHighlight.foreground5#FFADCF
  • editorBracketHighlight.foreground6#FFE08A
  • editorBracketMatch.background#9CADFF25
  • editorBracketMatch.border#9CADFF
  • editorCursor.foreground#9CADFF
  • editorError.foreground#E94362
  • editorGroup.border#516083
  • editorGroupHeader.noTabsBackground#1C253B
  • editorGroupHeader.tabsBackground#1C253B
  • editorGutter.addedBackground#66D39A
  • editorGutter.deletedBackground#FF7892
  • editorGutter.modifiedBackground#62C7F2
  • editorHint.foreground#76E4AD
  • editorHoverWidget.background#2A3854
  • editorHoverWidget.border#516083
  • editorHoverWidget.foreground#F4EEF8
  • editorIndentGuide.activeBackground1#9CADFF88
  • editorIndentGuide.background1#9CADFF25
  • editorInfo.foreground#68D5FF
  • editorLineNumber.activeForeground#CDC4D5
  • editorLineNumber.foreground#81758D
  • editorSuggestWidget.background#2A3854
  • editorSuggestWidget.foreground#F4EEF8
  • editorSuggestWidget.highlightForeground#9CADFF
  • editorSuggestWidget.selectedBackground#9CADFF35
  • editorWarning.foreground#D78B00
  • editorWhitespace.foreground#9CADFF25
  • editorWidget.background#2A3854
  • editorWidget.border#516083
  • editorWidget.foreground#F4EEF8
  • errorForeground#FF8FA3
  • focusBorder#9CADFF
  • foreground#F4EEF8
  • gitDecoration.addedResourceForeground#73D99F
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#827889
  • gitDecoration.modifiedResourceForeground#61BEEA
  • gitDecoration.untrackedResourceForeground#93E7B7
  • icon.foreground#D7CEDD
  • input.background#1C253B
  • input.border#516083
  • input.foreground#F4EEF8
  • input.placeholderForeground#958A9D
  • inputOption.activeBackground#9CADFF28
  • inputOption.activeBorder#9CADFF
  • list.activeSelectionBackground#9CADFF32
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#9CADFF
  • list.highlightForeground#9CADFF
  • list.hoverBackground#9CADFF15
  • list.inactiveSelectionBackground#9CADFF20
  • list.inactiveSelectionForeground#F4EEF8
  • menu.background#2A3854
  • menu.border#516083
  • menu.foreground#F4EEF8
  • menu.selectionBackground#9CADFF35
  • menu.selectionForeground#FFFFFF
  • minimap.background#2D3852
  • notificationCenter.border#516083
  • notifications.background#2A3854
  • notifications.border#516083
  • notifications.foreground#F4EEF8
  • panel.background#2A3854
  • panel.border#516083
  • panel.foreground#F4EEF8
  • panelTitle.activeBorder#9CADFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A89EAE
  • peekView.border#9CADFF
  • peekViewEditor.background#2D3852
  • peekViewEditor.matchHighlightBackground#9CADFF45
  • peekViewResult.background#24304A
  • peekViewResult.foreground#F4EEF8
  • peekViewResult.matchHighlightBackground#9CADFF3D
  • progressBar.background#9CADFF
  • quickInput.background#2A3854
  • quickInput.foreground#F4EEF8
  • quickInputList.focusBackground#9CADFF35
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#9CADFF
  • scrollbarSlider.activeBackground#9CADFF75
  • scrollbarSlider.background#9CADFF30
  • scrollbarSlider.hoverBackground#9CADFF55
  • selection.background#9CADFF45
  • sideBar.background#24304A
  • sideBar.border#516083
  • sideBar.foreground#F4EEF8
  • sideBarSectionHeader.background#2A3854
  • sideBarSectionHeader.border#516083
  • sideBarSectionHeader.foreground#F7F1FA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#7587DB
  • statusBar.border#9CADFF
  • statusBar.debuggingBackground#A4375E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#1C253B
  • statusBarItem.hoverBackground#FFFFFF18
  • statusBarItem.remoteBackground#9CADFF
  • statusBarItem.remoteForeground#1C253B
  • tab.activeBackground#2D3852
  • tab.activeBorderTop#9CADFF
  • tab.activeForeground#F2F4FF
  • tab.border#516083
  • tab.hoverBackground#2A3854
  • tab.inactiveBackground#1C253B
  • tab.inactiveForeground#A89EAE
  • tab.unfocusedActiveBorderTop#9CADFF99
  • terminal.ansiBlack#302A36
  • terminal.ansiBlue#79CEFF
  • terminal.ansiBrightBlack#766D7C
  • terminal.ansiBrightBlue#A9DFFF
  • terminal.ansiBrightCyan#A2EEE3
  • terminal.ansiBrightGreen#A5F1C7
  • terminal.ansiBrightMagenta#E5C5FF
  • terminal.ansiBrightRed#FFB0BD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE2A0
  • terminal.ansiCyan#72E2D2
  • terminal.ansiGreen#84E6B1
  • terminal.ansiMagenta#D6A6FF
  • terminal.ansiRed#FF8FA3
  • terminal.ansiWhite#EDE6F1
  • terminal.ansiYellow#FFD477
  • terminal.background#2A3854
  • terminal.foreground#F4EEF8
  • terminal.selectionBackground#9CADFF42
  • terminalCursor.foreground#9CADFF
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#9CADFF
  • titleBar.activeBackground#1C253B
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1C253B
  • titleBar.inactiveForeground#8F8496
  • tree.indentGuidesStroke#516083

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C1B7C9italic
string, string.quoted, constant.other.symbol#A9E6C7—
constant.character.escape, constant.other.placeholder#7FE0D2bold
constant.numeric, constant.language, constant.character#FFC48F—
keyword, keyword.control, storage.type, storage.modifier#DAB9FFbold
entity.name.function, support.function, meta.function-call, variable.function#8FD7FF—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class, support.type.primitive#FFE08A—
variable, variable.other.readwrite, variable.other.constant, variable.language#F5F0FA—
variable.other.property, support.variable.property, meta.object-literal.key, meta.mapping.key, entity.name.tag.yaml#FFADCF—
variable.parameter, meta.function.parameters variable, meta.parameters variable#FFB792italic
entity.name.tag, support.class.component, punctuation.definition.tag#FF91AD—
entity.other.attribute-name, support.type.property-name#F7CC74—
meta.decorator, meta.annotation, punctuation.decorator, entity.name.function.decorator#F3A6C4—
string.regexp, constant.other.character-class, keyword.operator.quantifier.regexp#7FE0D2—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#C7B6FF—
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#D3CAD8—
support.type.property-name.json, string.json support.type.property-name#FFADCF—
markup.heading, entity.name.section.markdown#DAB9FFbold
markup.underline.link, string.other.link, meta.link.inline.markdown#8FD7FFunderline
markup.inserted, meta.diff.header.to-file#A9E6C7—
markup.deleted, meta.diff.header.from-file#FF91AD—
invalid, invalid.illegal, invalid.deprecated#2D3852bold