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#00C853
  • activityBar.background#E0E0E0
  • activityBar.foreground#00C853
  • activityBarBadge.background#00C853
  • activityBarBadge.foreground#FAFAFA
  • badge.background#00C853
  • badge.foreground#FAFAFA
  • button.background#00C853
  • button.foreground#FAFAFA
  • button.hoverBackground#66BB6A
  • dropdown.background#FFFFFF
  • dropdown.border#A5D6A7
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF176
  • editor.foreground#212121
  • editor.lineHighlightBackground#E8F5E9
  • editor.lineHighlightBorder#C8E6C9
  • editor.selectionBackground#A5D6A7
  • editor.selectionHighlightBackground#C8E6C9
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#00C853
  • editorCursor.foreground#00C853
  • editorGroupHeader.tabsBackground#E0E0E0
  • editorIndentGuide.activeBackground#A5D6A7
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#00C853
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#00C853
  • gitDecoration.conflictingResourceForeground#FF5722
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#00C853
  • gitDecoration.untrackedResourceForeground#FFEB3B
  • input.background#FFFFFF
  • input.border#A5D6A7
  • input.foreground#212121
  • input.placeholderForeground#BDBDBD
  • inputOption.activeBorder#00C853
  • list.activeSelectionBackground#C8E6C9
  • list.activeSelectionForeground#00C853
  • list.focusBackground#C8E6C9
  • list.highlightForeground#00C853
  • list.hoverBackground#E0F2F1
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#75757544
  • minimapSlider.background#BDBDBD44
  • minimapSlider.hoverBackground#9E9E9E44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#00C853
  • panelTitle.activeForeground#00C853
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#75757599
  • scrollbarSlider.background#BDBDBD33
  • scrollbarSlider.hoverBackground#9E9E9E66
  • sideBar.background#EEEEEE
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#00C853
  • sideBarTitle.foreground#00C853
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#FFD600
  • statusBar.foreground#00C853
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#B2FF59
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#00C853
  • tab.activeForeground#00C853
  • tab.border#CCCCCC
  • tab.inactiveBackground#EEEEEE
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF59D
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#00C853
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#00C853
  • titleBar.inactiveBackground#D0D0D0
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E8Eitalic
string, string.quoted, string.template#00C853
keyword, storage.type, storage.modifier#00695Cbold
keyword.operator, punctuation.accessor#004D40
variable, variable.other#00796B
variable.parameter#00796Bitalic
entity.name.function, support.function#00897B
meta.function-call#00C853
entity.name.class, entity.name.type.class, support.class#00695Cbold
entity.name.type, support.type#00796B
entity.name.type.interface#00796Bitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FFB300
constant.language.boolean#FFB300bold
variable.other.property, support.variable.property#00796B
meta.object-literal.key#00796B
entity.name.tag, punctuation.definition.tag#00695C
entity.other.attribute-name#00C853italic
punctuation, meta.brace#00C853
string.regexp#FFB300
constant.character.escape#00C853
meta.decorator, punctuation.decorator#00C853
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#00C853bold
markup.bold#00C853bold
markup.italic#00C853italic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#00C853
support.type.property-name.json#00C853
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2196F3
support.type.property-name.css#00C853
support.constant.property-value.css#00C853