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#EF4135
  • activityBar.background#E8F0FA
  • activityBar.foreground#003366
  • activityBarBadge.background#EF4135
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EF4135
  • badge.foreground#FFFFFF
  • button.background#0055A4
  • button.foreground#FFFFFF
  • button.hoverBackground#003366
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#F5F5F5
  • editor.findMatchBackground#F9D5D3
  • editor.findMatchHighlightBackground#FBC1BF
  • editor.foreground#333333
  • editor.lineHighlightBackground#E6F0FF
  • editor.lineHighlightBorder#B3D4FF
  • editor.selectionBackground#B0C4DE
  • editor.selectionHighlightBackground#DDE9F5
  • editorBracketMatch.background#F0E68C
  • editorBracketMatch.border#CFAE4B
  • editorCursor.foreground#0055A4
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorIndentGuide.activeBackground#B0C4DE
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#0055A4
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#CFAE4B
  • gitDecoration.conflictingResourceForeground#C792EA
  • gitDecoration.deletedResourceForeground#EF4135
  • gitDecoration.modifiedResourceForeground#6CB4EE
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#0055A4
  • list.activeSelectionBackground#DDE9F5
  • list.activeSelectionForeground#0055A4
  • list.focusBackground#DDE9F5
  • list.highlightForeground#EF4135
  • list.hoverBackground#EAEAEA
  • minimap.background#F5F5F5
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#CCCCCC
  • minimapSlider.hoverBackground#B3B3B3
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#EF4135
  • panelTitle.activeForeground#0055A4
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#AAAAAA
  • scrollbarSlider.activeBackground#999999
  • scrollbarSlider.background#CCCCCC
  • scrollbarSlider.hoverBackground#B3B3B3
  • sideBar.background#FFFFFF
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#0055A4
  • sideBarTitle.foreground#0055A4
  • statusBar.background#EF4135
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0055A4
  • statusBarItem.hoverBackground#C0413C
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#EF4135
  • tab.activeForeground#0055A4
  • tab.border#CCCCCC
  • tab.inactiveBackground#EAEAEA
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0055A4
  • terminal.ansiBrightBlue#3F51B5
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#E1BEE7
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#6CB4EE
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF4135
  • terminal.ansiYellow#FBC02D
  • terminal.background#F5F5F5
  • terminal.foreground#333333
  • titleBar.activeBackground#0055A4
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#C0D7F2
  • titleBar.inactiveForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#4CAF50
keyword, storage.type, storage.modifier#0055A4bold
keyword.operator, punctuation.accessor#C792EA
variable, variable.other#333333
variable.parameter#8ABEB7italic
entity.name.function, support.function#3F51B5
meta.function-call#283593
entity.name.class, entity.name.type.class, support.class#F57C00bold
entity.name.type, support.type#26A69A
entity.name.type.interface#795548italic
constant.numeric#EF5350
constant, constant.language, constant.character#0097A7
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#795548
meta.object-literal.key#26A69A
entity.name.tag, punctuation.definition.tag#EF4135
entity.other.attribute-name#C792EAitalic
punctuation, meta.brace#999999
string.regexp#81C784
constant.character.escape#FF9800
meta.decorator, punctuation.decorator#80DEEA
invalid, invalid.illegal#FF5370strikethrough
markup.heading, entity.name.section#0055A4bold
markup.bold#0055A4bold
markup.italic#6A737Ditalic
markup.underline.link#EF4135
markup.inline.raw, markup.fenced_code#4CAF50
support.type.property-name.json#26A69A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3F51B5
support.type.property-name.css#4CAF50
support.constant.property-value.css#F57C00