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#00A2FF
  • activityBar.background#E8F4FF
  • activityBar.foreground#005A9E
  • activityBarBadge.background#FF4B4B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4B4B
  • badge.foreground#FFFFFF
  • button.background#00A2FF
  • button.foreground#FFFFFF
  • button.hoverBackground#0099FF
  • dropdown.background#FFFFFF
  • dropdown.border#A0C8FF
  • dropdown.foreground#2B2B2B
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFB900
  • editor.findMatchHighlightBackground#FFD966
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#F0F8FF
  • editor.lineHighlightBorder#A0C8FF
  • editor.selectionBackground#B2D7FF
  • editor.selectionHighlightBackground#D0E8FF
  • editorBracketMatch.background#7ED321
  • editorBracketMatch.border#5FAF3C
  • editorCursor.foreground#00A2FF
  • editorGroupHeader.tabsBackground#E8F4FF
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#005A9E
  • editorLineNumber.foreground#707070
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#00A2FF
  • gitDecoration.conflictingResourceForeground#FF66CC
  • gitDecoration.deletedResourceForeground#FF4B4B
  • gitDecoration.modifiedResourceForeground#FFB900
  • gitDecoration.untrackedResourceForeground#7ED321
  • input.background#FFFFFF
  • input.border#A0C8FF
  • input.foreground#2B2B2B
  • input.placeholderForeground#909090
  • inputOption.activeBorder#00A2FF
  • list.activeSelectionBackground#B2D7FF
  • list.activeSelectionForeground#005A9E
  • list.focusBackground#D0E8FF
  • list.highlightForeground#FF4B4B
  • list.hoverBackground#E8F4FF
  • minimap.background#F0F0F0
  • minimapSlider.activeBackground#606060
  • minimapSlider.background#A0A0A0
  • minimapSlider.hoverBackground#808080
  • panel.background#F5F5F5
  • panel.border#C0C0C0
  • panelTitle.activeBorder#00A2FF
  • panelTitle.activeForeground#005A9E
  • panelTitle.inactiveForeground#707070
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#F9FBFF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E8F4FF
  • sideBarSectionHeader.foreground#005A9E
  • sideBarTitle.foreground#005A9E
  • statusBar.background#00A2FF
  • statusBar.debuggingBackground#FF4B4B
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#7ED321
  • statusBarItem.hoverBackground#0099FF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00A2FF
  • tab.activeForeground#005A9E
  • tab.border#C0C0C0
  • tab.inactiveBackground#E8F4FF
  • tab.inactiveForeground#707070
  • terminal.ansiBlue#00A2FF
  • terminal.ansiBrightBlue#5BC0EB
  • terminal.ansiBrightCyan#33C7D6
  • terminal.ansiBrightGreen#A2E272
  • terminal.ansiBrightMagenta#FF99DD
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFD966
  • terminal.ansiCyan#00B7C2
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#FF66CC
  • terminal.ansiRed#FF4B4B
  • terminal.ansiYellow#FFB900
  • terminal.background#FFFFFF
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#00A2FF
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#A0C8FF
  • titleBar.inactiveForeground#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7ED321italic
string, string.quoted, string.template#FFB900
keyword, storage.type, storage.modifier#00A2FFbold
keyword.operator, punctuation.accessor#FF4B4B
variable, variable.other#2B2B2B
variable.parameter#5BC0EBitalic
entity.name.function, support.function#FF4B4B
meta.function-call#FF4B4B
entity.name.class, entity.name.type.class, support.class#00A2FFbold
entity.name.type, support.type#7ED321
entity.name.type.interface#00B7C2italic
constant.numeric#FFB900
constant, constant.language, constant.character#FF4B4B
constant.language.boolean#00A2FFbold
variable.other.property, support.variable.property#005A9E
meta.object-literal.key#FFB900
entity.name.tag, punctuation.definition.tag#FF4B4B
entity.other.attribute-name#7ED321italic
punctuation, meta.brace#707070
string.regexp#FF66CC
constant.character.escape#FF4B4B
meta.decorator, punctuation.decorator#00B7C2
invalid, invalid.illegal#FF4B4Bstrikethrough
markup.heading, entity.name.section#00A2FFbold
markup.bold#00A2FFbold
markup.italic#00A2FFitalic
markup.underline.link#FF66CC
markup.inline.raw, markup.fenced_code#7ED321
support.type.property-name.json#5BC0EB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00A2FF
support.type.property-name.css#7ED321
support.constant.property-value.css#FFB900