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#4285F4
  • activityBar.background#F1F3F4
  • activityBar.foreground#5F6368
  • activityBarBadge.background#EA4335
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EA4335
  • badge.foreground#FFFFFF
  • button.background#4285F4
  • button.foreground#FFFFFF
  • button.hoverBackground#3367D6
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#202124
  • editor.background#FFFFFF
  • editor.findMatchBackground#F28B82
  • editor.findMatchHighlightBackground#F8ABAB
  • editor.foreground#202124
  • editor.lineHighlightBackground#E8F0FF
  • editor.lineHighlightBorder#B3D4FC
  • editor.selectionBackground#4285F44D
  • editor.selectionHighlightBackground#E8F0FE
  • editorBracketMatch.background#E8F0FE
  • editorBracketMatch.border#4285F4
  • editorCursor.foreground#4285F4
  • editorGroupHeader.tabsBackground#F8F9FA
  • editorIndentGuide.activeBackground#4285F4
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#202124
  • editorLineNumber.foreground#5F6368
  • editorWhitespace.foreground#E0E0E0
  • focusBorder#4285F4
  • gitDecoration.conflictingResourceForeground#C5221F
  • gitDecoration.deletedResourceForeground#EA4335
  • gitDecoration.modifiedResourceForeground#34A853
  • gitDecoration.untrackedResourceForeground#FBBC05
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#202124
  • input.placeholderForeground#5F6368
  • inputOption.activeBorder#4285F4
  • list.activeSelectionBackground#E8F0FE
  • list.activeSelectionForeground#202124
  • list.focusBackground#E8F0FE
  • list.highlightForeground#4285F4
  • list.hoverBackground#F1F3F4
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#808080
  • minimapSlider.background#C0C0C0
  • minimapSlider.hoverBackground#A0A0A0
  • panel.background#F1F3F4
  • panel.border#E0E0E0
  • panelTitle.activeBorder#4285F4
  • panelTitle.activeForeground#202124
  • panelTitle.inactiveForeground#5F6368
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#F8F9FA
  • sideBar.foreground#202124
  • sideBarSectionHeader.background#F1F3F4
  • sideBarSectionHeader.foreground#5F6368
  • sideBarTitle.foreground#202124
  • statusBar.background#F1F3F4
  • statusBar.debuggingBackground#34A853
  • statusBar.foreground#202124
  • statusBar.noFolderBackground#F1F3F4
  • statusBarItem.hoverBackground#E8EAED
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#4285F4
  • tab.activeForeground#202124
  • tab.border#E0E0E0
  • tab.inactiveBackground#F8F9FA
  • tab.inactiveForeground#5F6368
  • terminal.ansiBlue#4285F4
  • terminal.ansiBrightBlue#8AB4F8
  • terminal.ansiBrightCyan#5E97F6
  • terminal.ansiBrightGreen#81C995
  • terminal.ansiBrightMagenta#D179FF
  • terminal.ansiBrightRed#F28B82
  • terminal.ansiBrightYellow#FDD663
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#34A853
  • terminal.ansiMagenta#C233FF
  • terminal.ansiRed#EA4335
  • terminal.ansiYellow#FBBC05
  • terminal.background#FFFFFF
  • terminal.foreground#202124
  • titleBar.activeBackground#F1F3F4
  • titleBar.activeForeground#202124
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#5F6368

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5F6368italic
string, string.quoted, string.template#34A853—
keyword, storage.type, storage.modifier#4285F4bold
keyword.operator, punctuation.accessor#EA4335—
variable, variable.other#202124—
variable.parameter#5F6368italic
entity.name.function, support.function#EA4335—
meta.function-call#FBBC05—
entity.name.class, entity.name.type.class, support.class#4285F4bold
entity.name.type, support.type#34A853—
entity.name.type.interface#4285F4italic
constant.numeric#FBBC05—
constant, constant.language, constant.character#EA4335—
constant.language.boolean#4285F4bold
variable.other.property, support.variable.property#34A853—
meta.object-literal.key#EA4335—
entity.name.tag, punctuation.definition.tag#4285F4—
entity.other.attribute-name#34A853italic
punctuation, meta.brace#5F6368—
string.regexp#EA4335—
constant.character.escape#EA4335—
meta.decorator, punctuation.decorator#34A853—
invalid, invalid.illegal#EA4335strikethrough
markup.heading, entity.name.section#4285F4bold
markup.bold#4285F4bold
markup.italic#34A853italic
markup.underline.link#4285F4—
markup.inline.raw, markup.fenced_code#34A853—
support.type.property-name.json#4285F4—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#EA4335—
support.type.property-name.css#34A853—
support.constant.property-value.css#FBBC05—