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#2C2F33
  • activityBar.foreground#E8EAED
  • activityBarBadge.background#34A853
  • activityBarBadge.foreground#FFFFFF
  • badge.background#34A853
  • badge.foreground#FFFFFF
  • button.background#4285F4
  • button.foreground#FFFFFF
  • button.hoverBackground#5A95F5
  • dropdown.background#2C2F33
  • dropdown.border#5A5D5F
  • dropdown.foreground#E8EAED
  • editor.background#202124
  • editor.findMatchBackground#EA4335
  • editor.findMatchHighlightBackground#FBBC05
  • editor.foreground#E8EAED
  • editor.lineHighlightBackground#3C4043
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#5A5D5F
  • editor.selectionHighlightBackground#4A4D4F
  • editorBracketMatch.background#34A85340
  • editorBracketMatch.border#34A853
  • editorCursor.foreground#E8EAED
  • editorGroupHeader.tabsBackground#202124
  • editorIndentGuide.activeBackground#E8EAED
  • editorIndentGuide.background#5A5D5F
  • editorLineNumber.activeForeground#E8EAED
  • editorLineNumber.foreground#5A5D5F
  • editorWhitespace.foreground#5A5D5F
  • focusBorder#4285F4
  • gitDecoration.conflictingResourceForeground#FBBC05
  • gitDecoration.deletedResourceForeground#EA4335
  • gitDecoration.modifiedResourceForeground#8AB4F8
  • gitDecoration.untrackedResourceForeground#34A853
  • input.background#2C2F33
  • input.border#5A5D5F
  • input.foreground#E8EAED
  • input.placeholderForeground#5A5D5F
  • inputOption.activeBorder#4285F4
  • list.activeSelectionBackground#4285F4
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3C4043
  • list.highlightForeground#34A853
  • list.hoverBackground#3C4043
  • minimap.background#202124
  • minimapSlider.activeBackground#5A5D5FF0
  • minimapSlider.background#5A5D5F80
  • minimapSlider.hoverBackground#5A5D5FBF
  • panel.background#202124
  • panel.border#000000
  • panelTitle.activeBorder#4285F4
  • panelTitle.activeForeground#E8EAED
  • panelTitle.inactiveForeground#BBBBBB
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5A5D5FF0
  • scrollbarSlider.background#5A5D5F80
  • scrollbarSlider.hoverBackground#5A5D5FBF
  • sideBar.background#2C2F33
  • sideBar.foreground#E8EAED
  • sideBarSectionHeader.background#202124
  • sideBarSectionHeader.foreground#E8EAED
  • sideBarTitle.foreground#E8EAED
  • statusBar.background#2C2F33
  • statusBar.debuggingBackground#EA4335
  • statusBar.foreground#E8EAED
  • statusBar.noFolderBackground#202124
  • statusBarItem.hoverBackground#3C4043
  • tab.activeBackground#202124
  • tab.activeBorder#4285F4
  • tab.activeForeground#E8EAED
  • tab.border#000000
  • tab.inactiveBackground#2C2F33
  • tab.inactiveForeground#BBBBBB
  • terminal.ansiBlue#4285F4
  • terminal.ansiBrightBlue#8AB4F8
  • terminal.ansiBrightCyan#62D6E8
  • terminal.ansiBrightGreen#81C995
  • terminal.ansiBrightMagenta#C58AF9
  • terminal.ansiBrightRed#F28B82
  • terminal.ansiBrightYellow#FDD663
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#34A853
  • terminal.ansiMagenta#A142F4
  • terminal.ansiRed#EA4335
  • terminal.ansiYellow#FBBC05
  • terminal.background#202124
  • terminal.foreground#E8EAED
  • titleBar.activeBackground#2C2F33
  • titleBar.activeForeground#E8EAED
  • titleBar.inactiveBackground#202124
  • titleBar.inactiveForeground#BBBBBB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5D5Fitalic
string, string.quoted, string.template#FBBC05
keyword, storage.type, storage.modifier#4285F4bold
keyword.operator, punctuation.accessor#00ACC1
variable, variable.other#E8EAED
variable.parameter#8AB4F8italic
entity.name.function, support.function#34A853
meta.function-call#34A853
entity.name.class, entity.name.type.class, support.class#A142F4bold
entity.name.type, support.type#00ACC1
entity.name.type.interface#00ACC1italic
constant.numeric#FDD663
constant, constant.language, constant.character#81C995
constant.language.boolean#EA4335bold
variable.other.property, support.variable.property#8AB4F8
meta.object-literal.key#8AB4F8
entity.name.tag, punctuation.definition.tag#EA4335
entity.other.attribute-name#4285F4italic
punctuation, meta.brace#5A5D5F
string.regexp#A142F4
constant.character.escape#C58AF9
meta.decorator, punctuation.decorator#FBBC05italic
invalid, invalid.illegal#F28B82strikethrough
markup.heading, entity.name.section#4285F4bold
markup.bold#4285F4bold
markup.italic#4285F4italic
markup.underline.link#00ACC1
markup.inline.raw, markup.fenced_code#34A853
support.type.property-name.json#8AB4F8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A142F4
support.type.property-name.css#00ACC1
support.constant.property-value.css#FBBC05