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#5EBD3C
  • activityBar.background#EFEFEF
  • activityBar.foreground#333333
  • activityBarBadge.background#5EBD3C
  • activityBarBadge.foreground#FAFAFA
  • badge.background#5EBD3C
  • badge.foreground#FAFAFA
  • button.background#E0E0E0
  • button.foreground#333333
  • button.hoverBackground#CCCCCC
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFCC8A44
  • editor.findMatchHighlightBackground#FFCC8A22
  • editor.foreground#333333
  • editor.lineHighlightBackground#FFF9C4
  • editor.lineHighlightBorder#FFF59D
  • editor.selectionBackground#B3E5FC80
  • editor.selectionHighlightBackground#B3E5FC40
  • editorBracketMatch.background#E0F7FA33
  • editorBracketMatch.border#5EBD3C
  • editorCursor.foreground#5EBD3C
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#5EBD3C
  • editorLineNumber.foreground#BBBBBB
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#5EBD3C
  • gitDecoration.conflictingResourceForeground#FFCA28
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.modifiedResourceForeground#5EBD3C
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#BBBBBB
  • inputOption.activeBorder#5EBD3C
  • list.activeSelectionBackground#B3E5FC
  • list.activeSelectionForeground#333333
  • list.focusBackground#B3E5FC
  • list.highlightForeground#5EBD3C
  • list.hoverBackground#E3F2FD66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#5EBD3C66
  • minimapSlider.background#5EBD3C22
  • minimapSlider.hoverBackground#5EBD3C44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#5EBD3C
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#5EBD3C88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F2F2F2
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#5EBD3C
  • sideBarTitle.foreground#5EBD3C
  • statusBar.background#E0E0E0
  • statusBar.debuggingBackground#5EBD3C
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#E5E5E5
  • statusBarItem.hoverBackground#D4D4D4
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#5EBD3C
  • tab.activeForeground#333333
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#80D8FF
  • terminal.ansiBrightCyan#84FFFF
  • terminal.ansiBrightGreen#B2FF59
  • terminal.ansiBrightMagenta#EA80FC
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#EF5350
  • terminal.ansiYellow#FFCA28
  • terminal.background#FAFAFA
  • terminal.foreground#333333
  • titleBar.activeBackground#F0F0F0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#E5E5E5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#5EBD3C
keyword, storage.type, storage.modifier#C4622Fbold
keyword.operator, punctuation.accessor#B05627
variable, variable.other#555555
variable.parameter#5EBD3Citalic
entity.name.function, support.function#D9824F
meta.function-call#C97040
entity.name.class, entity.name.type.class, support.class#E59457bold
entity.name.type, support.type#555555
entity.name.type.interface#C4622Fitalic
constant.numeric#D4A017
constant, constant.language, constant.character#D4A017
constant.language.boolean#C4622Fbold
variable.other.property, support.variable.property#555555
meta.object-literal.key#D9824F
entity.name.tag, punctuation.definition.tag#C4622F
entity.other.attribute-name#D4A017italic
punctuation, meta.brace#999999
string.regexp#5EBD3C
constant.character.escape#AB47BC
meta.decorator, punctuation.decorator#42A5F5
invalid, invalid.illegal#EF5350strikethrough
markup.heading, entity.name.section#C4622Fbold
markup.bold#C4622Fbold
markup.italic#D4A017italic
markup.underline.link#42A5F5
markup.inline.raw, markup.fenced_code#5EBD3C
support.type.property-name.json#C4622F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A017
support.type.property-name.css#E59457
support.constant.property-value.css#5EBD3C