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