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#0099CC
  • activityBar.background#D0EBFF
  • activityBar.foreground#006699
  • activityBarBadge.background#0099CC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0099CC
  • badge.foreground#FFFFFF
  • button.background#0099CC
  • button.foreground#FFFFFF
  • button.hoverBackground#0099CC50
  • dropdown.background#D9F2FF
  • dropdown.border#D0EBFF
  • dropdown.foreground#003366
  • editor.background#E6F7FF
  • editor.findMatchBackground#FFCC3330
  • editor.findMatchHighlightBackground#FFCC3320
  • editor.foreground#003366
  • editor.lineHighlightBackground#BEEFFF80
  • editor.lineHighlightBorder#0099CC60
  • editor.selectionBackground#0099CC30
  • editor.selectionHighlightBackground#0099CC20
  • editorBracketMatch.background#FFCC3320
  • editorBracketMatch.border#FFCC33
  • editorCursor.foreground#0099CC
  • editorGroupHeader.tabsBackground#E6F7FF
  • editorIndentGuide.activeBackground#8899AAFF
  • editorIndentGuide.background#8899A655
  • editorLineNumber.activeForeground#003366
  • editorLineNumber.foreground#8899A6
  • editorWhitespace.foreground#8899A6
  • focusBorder#0099CC
  • gitDecoration.conflictingResourceForeground#FFCC66
  • gitDecoration.deletedResourceForeground#FF6666
  • gitDecoration.modifiedResourceForeground#0099CC
  • gitDecoration.untrackedResourceForeground#00CC99
  • input.background#D9F2FF
  • input.border#D0EBFF
  • input.foreground#003366
  • input.placeholderForeground#8899A6
  • inputOption.activeBorder#0099CC
  • list.activeSelectionBackground#D0EBFF
  • list.activeSelectionForeground#003366
  • list.focusBackground#D0EBFF
  • list.highlightForeground#0099CC
  • list.hoverBackground#D0EBFF70
  • minimap.background#E6F7FF
  • minimapSlider.activeBackground#0099CC60
  • minimapSlider.background#0099CC20
  • minimapSlider.hoverBackground#0099CC40
  • panel.background#E6F7FF
  • panel.border#D0EBFF
  • panelTitle.activeBorder#0099CC
  • panelTitle.activeForeground#003366
  • panelTitle.inactiveForeground#8899A6
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0099CCAA
  • scrollbarSlider.background#8899A666
  • scrollbarSlider.hoverBackground#8899AA99
  • sideBar.background#D9F2FF
  • sideBar.foreground#003366
  • sideBarSectionHeader.background#D0EBFF
  • sideBarSectionHeader.foreground#006699
  • sideBarTitle.foreground#006699
  • statusBar.background#D0EBFF
  • statusBar.debuggingBackground#0099CC
  • statusBar.foreground#003366
  • statusBar.noFolderBackground#D0EBFF
  • statusBarItem.hoverBackground#0099CC40
  • tab.activeBackground#D0EBFF
  • tab.activeBorder#0099CC
  • tab.activeForeground#003366
  • tab.border#E6F7FF
  • tab.inactiveBackground#E6F7FF
  • tab.inactiveForeground#8899A6
  • terminal.ansiBlue#0099CC
  • terminal.ansiBrightBlue#66D9FF
  • terminal.ansiBrightCyan#66E5CC
  • terminal.ansiBrightGreen#66FFB2
  • terminal.ansiBrightMagenta#D9B3FF
  • terminal.ansiBrightRed#FF9999
  • terminal.ansiBrightYellow#FFE099
  • terminal.ansiCyan#66B2AA
  • terminal.ansiGreen#00CC99
  • terminal.ansiMagenta#CC66FF
  • terminal.ansiRed#FF6666
  • terminal.ansiYellow#FFCC66
  • terminal.background#E6F7FF
  • terminal.foreground#003366
  • titleBar.activeBackground#D0EBFF
  • titleBar.activeForeground#003366
  • titleBar.inactiveBackground#E6F7FF
  • titleBar.inactiveForeground#8899A6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8899A6italic
string, string.quoted, string.template#00CC99
keyword, storage.type, storage.modifier#0099CCbold
keyword.operator, punctuation.accessor#66B2AA
variable, variable.other#003366
variable.parameter#003366italic
entity.name.function, support.function#66B2AA
meta.function-call#003366
entity.name.class, entity.name.type.class, support.class#006699bold
entity.name.type, support.type#006699
entity.name.type.interface#006699italic
constant.numeric#FFCC66
constant, constant.language, constant.character#FF6666
constant.language.boolean#FF6666bold
variable.other.property, support.variable.property#003366
meta.object-literal.key#006699
entity.name.tag, punctuation.definition.tag#0099CC
entity.other.attribute-name#66B2AAitalic
punctuation, meta.brace#003366
string.regexp#FFCC66
constant.character.escape#FF6666
meta.decorator, punctuation.decorator#66B2AA
invalid, invalid.illegal#FF6666strikethrough
markup.heading, entity.name.section#0099CCbold
markup.bold#FF6666bold
markup.italic#66B2AAitalic
markup.underline.link#006699
markup.inline.raw, markup.fenced_code#00CC99
support.type.property-name.json#0099CC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#66B2AA
support.type.property-name.css#006699
support.constant.property-value.css#00CC99