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#EEF2FC
  • activityBar.border#DCE2F2
  • activityBar.foreground#1E7FD6
  • activityBar.inactiveForeground#9099C2
  • activityBarBadge.background#7A45C9
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7A45C9
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#0C1A50
  • breadcrumb.foreground#6B75A3
  • button.background#1E7FD6
  • button.foreground#FFFFFF
  • button.hoverBackground#1A6EBC
  • button.secondaryBackground#7A45C9
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#6A3BB2
  • descriptionForeground#5A6494
  • dropdown.background#FFFFFF
  • dropdown.border#CdD5EC
  • dropdown.foreground#0C1A50
  • editor.background#FBFCFF
  • editor.findMatchBackground#E1C63188
  • editor.findMatchHighlightBackground#E1C63144
  • editor.foreground#0C1A50
  • editor.lineHighlightBackground#EEF2FC
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#5DB1FF40
  • editor.selectionHighlightBackground#5DB1FF26
  • editor.wordHighlightBackground#9F72E126
  • editor.wordHighlightStrongBackground#9F72E133
  • editorBracketHighlight.foreground1#1E7FD6
  • editorBracketHighlight.foreground2#7A45C9
  • editorBracketHighlight.foreground3#D2348A
  • editorBracketHighlight.foreground4#A8870F
  • editorBracketHighlight.foreground5#3E94E0
  • editorBracketHighlight.foreground6#9460D6
  • editorBracketMatch.background#9F72E126
  • editorBracketMatch.border#7A45C9
  • editorCursor.foreground#1E7FD6
  • editorError.foreground#D2348A
  • editorGroup.border#DCE2F2
  • editorGroupHeader.tabsBackground#EEF2FC
  • editorGutter.addedBackground#1E7FD6
  • editorGutter.deletedBackground#D2348A
  • editorGutter.modifiedBackground#A8870F
  • editorHoverWidget.background#F2F5FC
  • editorHoverWidget.border#D4DAEE
  • editorIndentGuide.activeBackground1#B6BFE0
  • editorIndentGuide.background1#E2E7F5
  • editorInfo.foreground#1E7FD6
  • editorLineNumber.activeForeground#1E7FD6
  • editorLineNumber.foreground#A9B2D6
  • editorRuler.foreground#E2E7F5
  • editorSuggestWidget.background#F2F5FC
  • editorSuggestWidget.border#D4DAEE
  • editorSuggestWidget.highlightForeground#1E7FD6
  • editorSuggestWidget.selectedBackground#5DB1FF2E
  • editorWarning.foreground#A8870F
  • editorWhitespace.foreground#D4DAEE
  • editorWidget.background#F2F5FC
  • editorWidget.border#D4DAEE
  • errorForeground#D2348A
  • focusBorder#1E7FD666
  • foreground#0C1A50
  • gitDecoration.conflictingResourceForeground#7A45C9
  • gitDecoration.deletedResourceForeground#D2348A
  • gitDecoration.ignoredResourceForeground#9099C2
  • gitDecoration.modifiedResourceForeground#A8870F
  • gitDecoration.untrackedResourceForeground#0C8A5E
  • icon.foreground#7A45C9
  • input.background#FFFFFF
  • input.border#CdD5EC
  • input.foreground#0C1A50
  • input.placeholderForeground#9099C2
  • inputOption.activeBackground#5DB1FF33
  • inputOption.activeBorder#1E7FD6
  • inputValidation.errorBackground#FBE3EF
  • inputValidation.errorBorder#D2348A
  • list.activeSelectionBackground#5DB1FF33
  • list.activeSelectionForeground#0C1A50
  • list.focusBackground#5DB1FF33
  • list.highlightForeground#1E7FD6
  • list.hoverBackground#E8EEFA
  • list.inactiveSelectionBackground#5DB1FF1F
  • minimap.findMatchHighlight#A8870F
  • panel.background#F2F5FC
  • panel.border#DCE2F2
  • panelTitle.activeBorder#1E7FD6
  • panelTitle.activeForeground#0C1A50
  • panelTitle.inactiveForeground#6B75A3
  • peekView.border#1E7FD6
  • peekViewEditor.background#F2F5FC
  • peekViewResult.background#EEF2FC
  • peekViewTitle.background#F2F5FC
  • progressBar.background#1E7FD6
  • scrollbarSlider.activeBackground#0C1A5055
  • scrollbarSlider.background#0C1A5022
  • scrollbarSlider.hoverBackground#0C1A5033
  • selection.background#5DB1FF55
  • sideBar.background#F2F5FC
  • sideBar.border#DCE2F2
  • sideBar.foreground#2C3666
  • sideBarSectionHeader.background#EEF2FC
  • sideBarSectionHeader.foreground#2C3666
  • sideBarTitle.foreground#5A6494
  • statusBar.background#EEF2FC
  • statusBar.border#DCE2F2
  • statusBar.debuggingBackground#7A45C9
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#2C3666
  • statusBar.noFolderBackground#EEF2FC
  • statusBarItem.remoteBackground#7A45C9
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FBFCFF
  • tab.activeBorder#1E7FD600
  • tab.activeBorderTop#1E7FD6
  • tab.activeForeground#0C1A50
  • tab.border#DCE2F2
  • tab.hoverBackground#F2F5FC
  • tab.inactiveBackground#EEF2FC
  • tab.inactiveForeground#6B75A3
  • terminal.ansiBlack#0C1A50
  • terminal.ansiBlue#1E7FD6
  • terminal.ansiBrightBlack#6B75A3
  • terminal.ansiBrightBlue#3E94E0
  • terminal.ansiBrightCyan#0E9FBF
  • terminal.ansiBrightGreen#0F9A6A
  • terminal.ansiBrightMagenta#9460D6
  • terminal.ansiBrightRed#E04C97
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C2A220
  • terminal.ansiCyan#0C8FAE
  • terminal.ansiGreen#0C8A5E
  • terminal.ansiMagenta#7A45C9
  • terminal.ansiRed#D2348A
  • terminal.ansiWhite#2C3666
  • terminal.ansiYellow#A8870F
  • terminal.background#F2F5FC
  • terminal.foreground#0C1A50
  • textLink.activeForeground#1A6EBC
  • textLink.foreground#1E7FD6
  • textPreformat.foreground#A8870F
  • titleBar.activeBackground#EEF2FC
  • titleBar.activeForeground#0C1A50
  • titleBar.border#DCE2F2
  • titleBar.inactiveBackground#EEF2FC
  • titleBar.inactiveForeground#6B75A3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C86ACitalic
string, string.quoted, string.template#8A6A0C
constant.character.escape, punctuation.definition.template-expression#D2348A
constant.numeric, constant.language, constant.character#D2348A
keyword, keyword.control, storage.type, storage.modifier#7A45C9
keyword.operator#1E7FD6
entity.name.function, support.function, meta.function-call entity.name.function#1E7FD6
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#9460D6
variable, variable.other, meta.definition.variable#0C1A50
variable.parameter#7A45C9
variable.language, variable.language.this#D2348Aitalic
entity.name.tag, punctuation.definition.tag#D2348A
entity.other.attribute-name#A8870Fitalic
support.type.property-name, meta.object-literal.key, variable.object.property#1E7FD6
constant.other.color, support.constant#1E7FD6
markup.heading, entity.name.section#1E7FD6bold
markup.bold#D2348Abold
markup.italic#7A45C9italic
markup.inline.raw, markup.fenced_code#8A6A0C
markup.underline.link, string.other.link#1E7FD6underline
invalid, invalid.illegal#D2348A
punctuation, meta.brace#5A6494