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#FFB300
  • activityBar.background#AED581
  • activityBar.foreground#FFB300
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#2E3D32
  • badge.background#FFB300
  • badge.foreground#2E3D32
  • button.background#1976D2
  • button.foreground#FFFFFF
  • button.hoverBackground#1976D2CC
  • dropdown.background#E8F5E9
  • dropdown.border#81C784
  • dropdown.foreground#2E3D32
  • editor.background#F0F9F0
  • editor.findMatchBackground#81C78440
  • editor.findMatchHighlightBackground#81C78420
  • editor.foreground#2E3D32
  • editor.lineHighlightBackground#81C78420
  • editor.lineHighlightBorder#81C78440
  • editor.selectionBackground#FFB30040
  • editor.selectionHighlightBackground#FFB30020
  • editorBracketMatch.background#81C78433
  • editorBracketMatch.border#81C784
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#A5D6A7
  • editorIndentGuide.activeBackground#BCAAA488
  • editorIndentGuide.background#BCAAA444
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#BCAAA4
  • editorWhitespace.foreground#BCAAA4
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#E8F5E9
  • input.border#81C784
  • input.foreground#2E3D32
  • input.placeholderForeground#A1887F
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#81C78440
  • list.activeSelectionForeground#2E3D32
  • list.focusBackground#81C78440
  • list.highlightForeground#FFB300
  • list.hoverBackground#81C78420
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#81C78466
  • minimapSlider.background#81C78422
  • minimapSlider.hoverBackground#81C78444
  • panel.background#FFFFFF
  • panel.border#AED581
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#607D8B
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#BCAAA444
  • scrollbarSlider.hoverBackground#BCAAA488
  • sideBar.background#C8E6C9
  • sideBar.foreground#2E3D32
  • sideBarSectionHeader.background#C8E6C9
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#AED581
  • statusBar.debuggingBackground#81D4FA
  • statusBar.foreground#2E3D32
  • statusBar.noFolderBackground#AED581
  • statusBarItem.hoverBackground#81D4FA40
  • tab.activeBackground#C8E6C9
  • tab.activeBorder#FFB300
  • tab.activeForeground#2E3D32
  • tab.border#8D6E63
  • tab.inactiveBackground#A5D6A7
  • tab.inactiveForeground#78909C
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#42A5F5
  • terminal.ansiBrightCyan#26A69A
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#EC407A
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFC107
  • terminal.ansiCyan#009688
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFB300
  • terminal.background#FFFFFF
  • terminal.foreground#2E3D32
  • titleBar.activeBackground#AED581
  • titleBar.activeForeground#2E3D32
  • titleBar.inactiveBackground#9E9D24
  • titleBar.inactiveForeground#B0BEC5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8D6E63italic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#5C6BC0
variable, variable.other#4E342E
variable.parameter#5D4037italic
entity.name.function, support.function#1976D2
meta.function-call#FFB300
entity.name.class, entity.name.type.class, support.class#0D47A1bold
entity.name.type, support.type#7E57C2
entity.name.type.interface#9575CDitalic
constant.numeric#F57C00
constant, constant.language, constant.character#E91E63
constant.language.boolean#F57C00bold
variable.other.property, support.variable.property#4E342E
meta.object-literal.key#1976D2
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#E91E63italic
punctuation, meta.brace#7E57C2
string.regexp#E91E63
constant.character.escape#7E57C2
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#E91E63italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#1976D2
support.constant.property-value.css#009688