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#EEEAF6
  • activityBar.border#DED9EE
  • activityBar.foreground#5B8FCF
  • activityBar.inactiveForeground#A39FC4
  • activityBarBadge.background#9277C4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#9277C4
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#3D4468
  • breadcrumb.foreground#8088AD
  • button.background#5B8FCF
  • button.foreground#FFFFFF
  • button.hoverBackground#4F80BD
  • button.secondaryBackground#9277C4
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#8268B5
  • descriptionForeground#7E87AD
  • dropdown.background#FFFFFF
  • dropdown.border#D2CDE6
  • dropdown.foreground#3D4468
  • editor.background#F7F5FC
  • editor.findMatchBackground#D9C46688
  • editor.findMatchHighlightBackground#D9C46640
  • editor.foreground#3D4468
  • editor.lineHighlightBackground#EFEBF8
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#5B8FCF33
  • editor.selectionHighlightBackground#5B8FCF1F
  • editor.wordHighlightBackground#9277C422
  • editor.wordHighlightStrongBackground#9277C42E
  • editorBracketHighlight.foreground1#5B8FCF
  • editorBracketHighlight.foreground2#9277C4
  • editorBracketHighlight.foreground3#C76B9E
  • editorBracketHighlight.foreground4#9C8233
  • editorBracketHighlight.foreground5#75A2D9
  • editorBracketHighlight.foreground6#A78DD2
  • editorBracketMatch.background#9277C422
  • editorBracketMatch.border#9277C4
  • editorCursor.foreground#5B8FCF
  • editorError.foreground#C76B9E
  • editorGroup.border#DED9EE
  • editorGroupHeader.tabsBackground#EEEAF6
  • editorGutter.addedBackground#5B8FCF
  • editorGutter.deletedBackground#C76B9E
  • editorGutter.modifiedBackground#9C8233
  • editorHoverWidget.background#F0EDF8
  • editorHoverWidget.border#DAD6EA
  • editorIndentGuide.activeBackground1#C2C0DC
  • editorIndentGuide.background1#E4E0F0
  • editorInfo.foreground#5B8FCF
  • editorLineNumber.activeForeground#5B8FCF
  • editorLineNumber.foreground#BEC4DF
  • editorRuler.foreground#E4E0F0
  • editorSuggestWidget.background#F0EDF8
  • editorSuggestWidget.border#DAD6EA
  • editorSuggestWidget.highlightForeground#5B8FCF
  • editorSuggestWidget.selectedBackground#5B8FCF26
  • editorWarning.foreground#9C8233
  • editorWhitespace.foreground#DAD6EA
  • editorWidget.background#F0EDF8
  • editorWidget.border#DAD6EA
  • errorForeground#C76B9E
  • focusBorder#5B8FCF55
  • foreground#3D4468
  • gitDecoration.conflictingResourceForeground#9277C4
  • gitDecoration.deletedResourceForeground#C76B9E
  • gitDecoration.ignoredResourceForeground#A39FC4
  • gitDecoration.modifiedResourceForeground#9C8233
  • gitDecoration.untrackedResourceForeground#3A8F6E
  • icon.foreground#9277C4
  • input.background#FFFFFF
  • input.border#D2CDE6
  • input.foreground#3D4468
  • input.placeholderForeground#A39FC4
  • inputOption.activeBackground#5B8FCF2A
  • inputOption.activeBorder#5B8FCF
  • inputValidation.errorBackground#F7E5EF
  • inputValidation.errorBorder#C76B9E
  • list.activeSelectionBackground#5B8FCF2A
  • list.activeSelectionForeground#2A3052
  • list.focusBackground#5B8FCF2A
  • list.highlightForeground#5B8FCF
  • list.hoverBackground#E8E3F4
  • list.inactiveSelectionBackground#5B8FCF1A
  • minimap.findMatchHighlight#9C8233
  • panel.background#F0EDF8
  • panel.border#DED9EE
  • panelTitle.activeBorder#5B8FCF
  • panelTitle.activeForeground#2A3052
  • panelTitle.inactiveForeground#8088AD
  • peekView.border#5B8FCF
  • peekViewEditor.background#F0EDF8
  • peekViewResult.background#EEEAF6
  • peekViewTitle.background#F0EDF8
  • progressBar.background#5B8FCF
  • scrollbarSlider.activeBackground#3D446855
  • scrollbarSlider.background#3D446822
  • scrollbarSlider.hoverBackground#3D446833
  • selection.background#5B8FCF44
  • sideBar.background#F0EDF8
  • sideBar.border#DED9EE
  • sideBar.foreground#454C70
  • sideBarSectionHeader.background#EEEAF6
  • sideBarSectionHeader.foreground#454C70
  • sideBarTitle.foreground#7E87AD
  • statusBar.background#EEEAF6
  • statusBar.border#DED9EE
  • statusBar.debuggingBackground#9277C4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#454C70
  • statusBar.noFolderBackground#EEEAF6
  • statusBarItem.remoteBackground#9277C4
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F7F5FC
  • tab.activeBorder#5B8FCF00
  • tab.activeBorderTop#5B8FCF
  • tab.activeForeground#2A3052
  • tab.border#DED9EE
  • tab.hoverBackground#F0EDF8
  • tab.inactiveBackground#EEEAF6
  • tab.inactiveForeground#8088AD
  • terminal.ansiBlack#3D4468
  • terminal.ansiBlue#5B8FCF
  • terminal.ansiBrightBlack#8088AD
  • terminal.ansiBrightBlue#75A2D9
  • terminal.ansiBrightCyan#3F9AAE
  • terminal.ansiBrightGreen#3F9A78
  • terminal.ansiBrightMagenta#A78DD2
  • terminal.ansiBrightRed#D17FAC
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#B59A3D
  • terminal.ansiCyan#3A8FA3
  • terminal.ansiGreen#3A8F6E
  • terminal.ansiMagenta#9277C4
  • terminal.ansiRed#C76B9E
  • terminal.ansiWhite#454C70
  • terminal.ansiYellow#9C8233
  • terminal.background#F0EDF8
  • terminal.foreground#3D4468
  • textLink.activeForeground#4F80BD
  • textLink.foreground#5B8FCF
  • textPreformat.foreground#9C8233
  • titleBar.activeBackground#EEEAF6
  • titleBar.activeForeground#3D4468
  • titleBar.border#DED9EE
  • titleBar.inactiveBackground#EEEAF6
  • titleBar.inactiveForeground#8088AD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8CADitalic
string, string.quoted, string.template#7E6A1E
constant.character.escape, punctuation.definition.template-expression#C76B9E
constant.numeric, constant.language, constant.character#C76B9E
keyword, keyword.control, storage.type, storage.modifier#9277C4
keyword.operator#5B8FCF
entity.name.function, support.function, meta.function-call entity.name.function#5B8FCF
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#A78DD2
variable, variable.other, meta.definition.variable#3D4468
variable.parameter#9277C4
variable.language, variable.language.this#C76B9Eitalic
entity.name.tag, punctuation.definition.tag#C76B9E
entity.other.attribute-name#9C8233italic
support.type.property-name, meta.object-literal.key, variable.object.property#5B8FCF
constant.other.color, support.constant#5B8FCF
markup.heading, entity.name.section#5B8FCFbold
markup.bold#C76B9Ebold
markup.italic#9277C4italic
markup.inline.raw, markup.fenced_code#7E6A1E
markup.underline.link, string.other.link#5B8FCFunderline
invalid, invalid.illegal#C76B9E
punctuation, meta.brace#7E87AD