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#3A7BD5
  • activityBar.background#E8F1FF
  • activityBar.foreground#3A7BD5
  • activityBarBadge.background#3A7BD5
  • activityBarBadge.foreground#F5F9FF
  • badge.background#3A7BD5
  • badge.foreground#FFFFFF
  • button.background#3A7BD5
  • button.foreground#FFFFFF
  • button.hoverBackground#3378C4
  • dropdown.background#E0EEFF
  • dropdown.border#C8E1FF
  • dropdown.foreground#2B3B4F
  • editor.background#F5F9FF
  • editor.findMatchBackground#3A7BD544
  • editor.findMatchHighlightBackground#3A7BD522
  • editor.foreground#2B3B4F
  • editor.lineHighlightBackground#C8E1FF30
  • editor.lineHighlightBorder#C8E1FF80
  • editor.selectionBackground#3A7BD540
  • editor.selectionHighlightBackground#3A7BD520
  • editorBracketMatch.background#3A7BD533
  • editorBracketMatch.border#3A7BD5
  • editorCursor.foreground#3A7BD5
  • editorGroupHeader.tabsBackground#E8F1FF
  • editorIndentGuide.activeBackground#A6B0C3
  • editorIndentGuide.background#A6B0C380
  • editorLineNumber.activeForeground#3A7BD5
  • editorLineNumber.foreground#A6B0C3
  • editorWhitespace.foreground#A6B0C3
  • focusBorder#3A7BD5
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#3A7BD5
  • gitDecoration.untrackedResourceForeground#00BFA5
  • input.background#E0EEFF
  • input.border#C8E1FF
  • input.foreground#2B3B4F
  • input.placeholderForeground#A6B0C3
  • inputOption.activeBorder#3A7BD5
  • list.activeSelectionBackground#C8E1FF
  • list.activeSelectionForeground#2B3B4F
  • list.focusBackground#C8E1FF
  • list.highlightForeground#3A7BD5
  • list.hoverBackground#C8E1FF80
  • minimap.background#F5F9FF
  • minimapSlider.activeBackground#3A7BD566
  • minimapSlider.background#3A7BD522
  • minimapSlider.hoverBackground#3A7BD544
  • panel.background#F5F9FF
  • panel.border#C8E1FF
  • panelTitle.activeBorder#3A7BD5
  • panelTitle.activeForeground#3A7BD5
  • panelTitle.inactiveForeground#8A96A8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A7BD588
  • scrollbarSlider.background#A6B0C444
  • scrollbarSlider.hoverBackground#A6B0C488
  • sideBar.background#E0EEFF
  • sideBar.foreground#2B3B4F
  • sideBarSectionHeader.background#D4E5FF
  • sideBarSectionHeader.foreground#3A7BD5
  • sideBarTitle.foreground#3A7BD5
  • statusBar.background#C8E1FF
  • statusBar.debuggingBackground#3A7BD5
  • statusBar.foreground#2B3B4F
  • statusBar.noFolderBackground#C8E1FF
  • statusBarItem.hoverBackground#C8E1FF80
  • tab.activeBackground#C8E1FF
  • tab.activeBorder#3A7BD5
  • tab.activeForeground#2B3B4F
  • tab.border#F5F9FF
  • tab.inactiveBackground#E8F1FF
  • tab.inactiveForeground#8A96A8
  • terminal.ansiBlue#3A7BD5
  • terminal.ansiBrightBlue#5B9EFF
  • terminal.ansiBrightCyan#8DD9E6
  • terminal.ansiBrightGreen#33E0C0
  • terminal.ansiBrightMagenta#FF88FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#6FC3D6
  • terminal.ansiGreen#00BFA5
  • terminal.ansiMagenta#C094FF
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFB300
  • terminal.background#F5F9FF
  • terminal.foreground#2B3B4F
  • titleBar.activeBackground#D4E5FF
  • titleBar.activeForeground#2B3B4F
  • titleBar.inactiveBackground#E0EEFF
  • titleBar.inactiveForeground#8A96A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A6B0C3italic
string, string.quoted, string.template#00BFA5
keyword, storage.type, storage.modifier#3A7BD5bold
keyword.operator, punctuation.accessor#6FC3D6
variable, variable.other#2B3B4F
variable.parameter#00BFA5italic
entity.name.function, support.function#6FC3D6
meta.function-call#3A7BD5
entity.name.class, entity.name.type.class, support.class#3A7BD5bold
entity.name.type, support.type#6FC3D6
entity.name.type.interface#00BFA5italic
constant.numeric#C094FF
constant, constant.language, constant.character#C094FF
constant.language.boolean#FF6F61bold
variable.other.property, support.variable.property#6FC3D6
meta.object-literal.key#3A7BD5
entity.name.tag, punctuation.definition.tag#3A7BD5
entity.other.attribute-name#C094FFitalic
punctuation, meta.brace#6FC3D6
string.regexp#FF6F61
constant.character.escape#C094FF
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#3A7BD5bold
markup.bold#C094FFbold
markup.italic#6FC3D6italic
markup.underline.link#00BFA5
markup.inline.raw, markup.fenced_code#00BFA5
support.type.property-name.json#3A7BD5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C094FF
support.type.property-name.css#3A7BD5
support.constant.property-value.css#00BFA5