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#0066FF
  • activityBar.background#E6EEFF
  • activityBar.foreground#0066FF
  • activityBarBadge.background#0066FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0066FF
  • badge.foreground#FFFFFF
  • button.background#0066FF
  • button.foreground#FFFFFF
  • button.hoverBackground#3399FF
  • dropdown.background#FFFFFF
  • dropdown.border#0066FF
  • dropdown.foreground#21252B
  • editor.background#FAFCFF
  • editor.findMatchBackground#0066FF44
  • editor.findMatchHighlightBackground#0066FF22
  • editor.foreground#21252B
  • editor.lineHighlightBackground#0066FF10
  • editor.lineHighlightBorder#0066FF30
  • editor.selectionBackground#0066FF33
  • editor.selectionHighlightBackground#0066FF20
  • editorBracketMatch.background#0066FF22
  • editorBracketMatch.border#0066FF
  • editorCursor.foreground#0066FF
  • editorGroupHeader.tabsBackground#FAFCFF
  • editorIndentGuide.activeBackground#0066FF
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#21252B
  • editorLineNumber.foreground#8A8A8A
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#0066FF
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#0066FF
  • gitDecoration.untrackedResourceForeground#00E676
  • input.background#FFFFFF
  • input.border#0066FF
  • input.foreground#21252B
  • input.placeholderForeground#8A8A8A
  • inputOption.activeBorder#0066FF
  • list.activeSelectionBackground#0066FF33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0066FF26
  • list.highlightForeground#0066FF
  • list.hoverBackground#0066FF1A
  • minimap.background#FAFCFF
  • minimapSlider.activeBackground#0066FF66
  • minimapSlider.background#0066FF22
  • minimapSlider.hoverBackground#0066FF44
  • panel.background#FAFCFF
  • panel.border#E6EEFF
  • panelTitle.activeBorder#0066FF
  • panelTitle.activeForeground#0066FF
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#F0F4FF
  • sideBar.foreground#21252B
  • sideBarSectionHeader.background#E6EEFF
  • sideBarSectionHeader.foreground#0066FF
  • sideBarTitle.foreground#0066FF
  • statusBar.background#4B0082
  • statusBar.debuggingBackground#0066FF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E6EEFF
  • statusBarItem.hoverBackground#0066FF44
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0066FF
  • tab.activeForeground#21252B
  • tab.border#E6EEFF
  • tab.inactiveBackground#F0F4FF
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#33D4FF
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#FF66B2
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00B0FF
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFB300
  • terminal.background#FAFCFF
  • terminal.foreground#21252B
  • titleBar.activeBackground#E6EEFF
  • titleBar.activeForeground#21252B
  • titleBar.inactiveBackground#FAFCFF
  • titleBar.inactiveForeground#8A8A8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#00E676
keyword, storage.type, storage.modifier#0066FFbold
keyword.operator, punctuation.accessor#5A5FF0
variable, variable.other#21252B
variable.parameter#00E676italic
entity.name.function, support.function#0066FF
meta.function-call#5A5FF0
entity.name.class, entity.name.type.class, support.class#0066FFbold
entity.name.type, support.type#5A5FF0
entity.name.type.interface#5A5FF0italic
constant.numeric#00B0FF
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#5A5FF0
meta.object-literal.key#0066FF
entity.name.tag, punctuation.definition.tag#0066FF
entity.other.attribute-name#E91E63italic
punctuation, meta.brace#21252B
string.regexp#00E676
constant.character.escape#E91E63
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#0066FFbold
markup.bold#FFB300bold
markup.italic#E91E63italic
markup.underline.link#0066FF
markup.inline.raw, markup.fenced_code#00E676
support.type.property-name.json#0066FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5A5FF0
support.type.property-name.css#0066FF
support.constant.property-value.css#00E676