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#D96530
  • activityBar.background#E0E0E0
  • activityBar.foreground#0066CC
  • activityBarBadge.background#0066CC
  • activityBarBadge.foreground#F5F5F5
  • badge.background#0066CC
  • badge.foreground#F5F5F5
  • button.background#0066CC
  • button.foreground#FFFFFF
  • button.hoverBackground#0055AA
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#2B2B2B
  • editor.background#F5F5F5
  • editor.findMatchBackground#D9653060
  • editor.findMatchHighlightBackground#D9653030
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#F0F8FF80
  • editor.lineHighlightBorder#0066CC40
  • editor.selectionBackground#B3D4FC66
  • editor.selectionHighlightBackground#B3D4FC33
  • editorBracketMatch.background#B3D4FC33
  • editorBracketMatch.border#0066CC
  • editorCursor.foreground#0066CC
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#0066CC
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#0066CC
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#C0C0C0
  • focusBorder#0066CC
  • gitDecoration.conflictingResourceForeground#D96530
  • gitDecoration.deletedResourceForeground#CC3300
  • gitDecoration.modifiedResourceForeground#0066CC
  • gitDecoration.untrackedResourceForeground#669900
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#0066CC
  • list.activeSelectionBackground#D0E8FF
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#D0E8FF
  • list.highlightForeground#0066CC
  • list.hoverBackground#E8F2FF66
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#0066CC
  • minimapSlider.background#C0C0C0
  • minimapSlider.hoverBackground#A0A0A0
  • panel.background#FAFAFA
  • panel.border#D0D0D0
  • panelTitle.activeBorder#0066CC
  • panelTitle.activeForeground#0066CC
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#0066CC
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#ECECEC
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#0066CC
  • sideBarTitle.foreground#0066CC
  • statusBar.background#D0D0D0
  • statusBar.debuggingBackground#0066CC
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#C0C0C0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0066CC
  • tab.activeForeground#2B2B2B
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#3388FF
  • terminal.ansiBrightCyan#33CCCC
  • terminal.ansiBrightGreen#99CC33
  • terminal.ansiBrightMagenta#FF7744
  • terminal.ansiBrightRed#FF5533
  • terminal.ansiBrightYellow#FFEE66
  • terminal.ansiCyan#009999
  • terminal.ansiGreen#669900
  • terminal.ansiMagenta#D96530
  • terminal.ansiRed#CC3300
  • terminal.ansiYellow#D4B500
  • terminal.background#F5F5F5
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#DADADA
  • titleBar.inactiveForeground#5A5A5A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#669900
keyword, storage.type, storage.modifier#0066CCbold
keyword.operator, punctuation.accessor#D96530
variable, variable.other#2B2B2B
variable.parameter#669900italic
entity.name.function, support.function#0055AA
meta.function-call#0066CC
entity.name.class, entity.name.type.class, support.class#D4B500bold
entity.name.type, support.type#009999
entity.name.type.interface#33CCCCitalic
constant.numeric#CC3300
constant, constant.language, constant.character#FFEE66
constant.language.boolean#CC3300bold
variable.other.property, support.variable.property#009999
meta.object-literal.key#009999
entity.name.tag, punctuation.definition.tag#0066CC
entity.other.attribute-name#D96530italic
punctuation, meta.brace#A0A0A0
string.regexp#CC3300
constant.character.escape#D96530
meta.decorator, punctuation.decorator#D4B500
invalid, invalid.illegal#FF5533strikethrough
markup.heading, entity.name.section#0066CCbold
markup.bold#FFEE66bold
markup.italic#009999italic
markup.underline.link#0066CC
markup.inline.raw, markup.fenced_code#669900
support.type.property-name.json#0066CC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4B500
support.type.property-name.css#009999
support.constant.property-value.css#669900