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#FF4081
  • activityBar.background#E0E7FF
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#FF4081
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4081
  • badge.foreground#FFFFFF
  • button.background#FF4081
  • button.foreground#FFFFFF
  • button.hoverBackground#FF66A1
  • dropdown.background#E0E7FF
  • dropdown.border#C0C8FF
  • dropdown.foreground#2B2B2B
  • editor.background#F5F8FF
  • editor.findMatchBackground#0066FF44
  • editor.findMatchHighlightBackground#0066FF22
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#DDE4FF30
  • editor.lineHighlightBorder#FF408180
  • editor.selectionBackground#FF408133
  • editor.selectionHighlightBackground#FF408122
  • editorBracketMatch.background#39C5FF44
  • editorBracketMatch.border#39C5FF88
  • editorCursor.foreground#FF4081
  • editorGroupHeader.tabsBackground#E0E7FF
  • editorIndentGuide.activeBackground#AAAAAA88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#0066FF
  • editorLineNumber.foreground#AAAAAA
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF4081
  • gitDecoration.conflictingResourceForeground#FFAA00
  • gitDecoration.deletedResourceForeground#FF5544
  • gitDecoration.modifiedResourceForeground#0066FF
  • gitDecoration.untrackedResourceForeground#39C5AB
  • input.background#E0E7FF
  • input.border#C0C8FF
  • input.foreground#2B2B2B
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF4081
  • list.activeSelectionBackground#C0C8FF
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#C0C8FF
  • list.highlightForeground#0066FF
  • list.hoverBackground#C0C8FF66
  • minimap.background#F5F8FF
  • minimapSlider.activeBackground#FF408166
  • minimapSlider.background#FF408122
  • minimapSlider.hoverBackground#FF408144
  • panel.background#F5F8FF
  • panel.border#C0C8FF
  • panelTitle.activeBorder#FF4081
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#FF408188
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#E8EDFF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#D0D8FF
  • sideBarSectionHeader.foreground#2B2B2B
  • sideBarTitle.foreground#0066FF
  • statusBar.background#C0C8FF
  • statusBar.debuggingBackground#FF4081
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E0E7FF
  • statusBarItem.hoverBackground#B0B8FF
  • tab.activeBackground#C0C8FF
  • tab.activeBorder#FF4081
  • tab.activeForeground#2B2B2B
  • tab.border#A0A8FF
  • tab.inactiveBackground#E0E7FF
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0066FF
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#66FF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#39C5AB
  • terminal.ansiMagenta#FF4081
  • terminal.ansiRed#FF5544
  • terminal.ansiYellow#FFAA00
  • terminal.background#F5F8FF
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E0E7FF
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#D0D8FF
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888888italic
string, string.quoted, string.template#39FF14
keyword, storage.type, storage.modifier#FF00AAbold
keyword.operator, punctuation.accessor#0066FF
variable, variable.other#A0A0FF
variable.parameter#0066FFitalic
entity.name.function, support.function#FFAA00
meta.function-call#FFAA00
entity.name.class, entity.name.type.class, support.class#FF00AAbold
entity.name.type, support.type#FFCCFF
entity.name.type.interface#FFCCFFitalic
constant.numeric#FFAA00
constant, constant.language, constant.character#FFCC00
constant.language.boolean#FFAA00bold
variable.other.property, support.variable.property#66FFAA
meta.object-literal.key#FF66FF
entity.name.tag, punctuation.definition.tag#0066FF
entity.other.attribute-name#FF66CCitalic
punctuation, meta.brace#AAAAAA
string.regexp#FFAA00
constant.character.escape#FF66FF
meta.decorator, punctuation.decorator#FFCC00
invalid, invalid.illegal#FF5555strikethrough
markup.heading, entity.name.section#FF00AAbold
markup.bold#FFAA00bold
markup.italic#FF66CCitalic
markup.underline.link#0066FF
markup.inline.raw, markup.fenced_code#39FF14
support.type.property-name.json#0066FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCC00
support.type.property-name.css#66FF66
support.constant.property-value.css#FFAA00