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#4A90E2
  • activityBar.background#E8F0FF
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#4A90E2
  • activityBarBadge.foreground#FAFCFF
  • badge.background#4A90E2
  • badge.foreground#FAFCFF
  • button.background#4A90E2
  • button.foreground#FAFCFF
  • button.hoverBackground#4A90E2CC
  • dropdown.background#FFFFFF
  • dropdown.border#C4D6F0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFCFF
  • editor.findMatchBackground#F5C24244
  • editor.findMatchHighlightBackground#F5C24222
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#E0F0FF80
  • editor.lineHighlightBorder#4A90E2
  • editor.selectionBackground#C2DAFF
  • editor.selectionHighlightBackground#C2DAFF55
  • editorBracketMatch.background#4A90E233
  • editorBracketMatch.border#4A90E2
  • editorCursor.foreground#4A90E2
  • editorGroupHeader.tabsBackground#FAFCFF
  • editorIndentGuide.activeBackground#4A90E2
  • editorIndentGuide.background#C4D6F0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#B0C4DE
  • focusBorder#4A90E2
  • gitDecoration.conflictingResourceForeground#F2C94C
  • gitDecoration.deletedResourceForeground#EB5757
  • gitDecoration.modifiedResourceForeground#4A90E2
  • gitDecoration.untrackedResourceForeground#27AE60
  • input.background#FFFFFF
  • input.border#C4D6F0
  • input.foreground#2B2B2B
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#4A90E2
  • list.activeSelectionBackground#C2DAFF
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#C2DAFF
  • list.highlightForeground#4A90E2
  • list.hoverBackground#C2DAFF66
  • minimap.background#FAFCFF
  • minimapSlider.activeBackground#4A90E266
  • minimapSlider.background#4A90E222
  • minimapSlider.hoverBackground#4A90E244
  • panel.background#FAFCFF
  • panel.border#C4D6F0
  • panelTitle.activeBorder#4A90E2
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4A90E288
  • scrollbarSlider.background#B0C4DE44
  • scrollbarSlider.hoverBackground#B0C4DE88
  • sideBar.background#F5F9FF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E8F0FF
  • sideBarSectionHeader.foreground#2B2B2B
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#E8F0FF
  • statusBar.debuggingBackground#B3E5FC
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#E8F0FF
  • statusBarItem.hoverBackground#4A90E233
  • tab.activeBackground#FAFCFF
  • tab.activeBorder#4A90E2
  • tab.activeForeground#2B2B2B
  • tab.border#C4D6F0
  • tab.inactiveBackground#E8F0FF
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#4A90E2
  • terminal.ansiBrightCyan#00B8D4
  • terminal.ansiBrightGreen#27AE60
  • terminal.ansiBrightMagenta#9B51E0
  • terminal.ansiBrightRed#EB5757
  • terminal.ansiBrightYellow#F2C94C
  • terminal.ansiCyan#00B8D4
  • terminal.ansiGreen#27AE60
  • terminal.ansiMagenta#9B51E0
  • terminal.ansiRed#EB5757
  • terminal.ansiYellow#F2C94C
  • terminal.background#FAFCFF
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#E8F0FF
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#FAFCFF
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#00B8D4
keyword, storage.type, storage.modifier#4A90E2bold
keyword.operator, punctuation.accessor#4A90E2
variable, variable.other#2B2B2B
variable.parameter#7A7A7Aitalic
entity.name.function, support.function#27AE60
meta.function-call#27AE60
entity.name.class, entity.name.type.class, support.class#4A90E2bold
entity.name.type, support.type#2D9CDB
entity.name.type.interface#9B51E0italic
constant.numeric#F2C94C
constant, constant.language, constant.character#27AE60
constant.language.boolean#F2C94Cbold
variable.other.property, support.variable.property#4A90E2
meta.object-literal.key#2D9CDB
entity.name.tag, punctuation.definition.tag#F2C94C
entity.other.attribute-name#27AE60italic
punctuation, meta.brace#7A7A7A
string.regexp#F2994A
constant.character.escape#9B51E0
meta.decorator, punctuation.decorator#F2C94C
invalid, invalid.illegal#EB5757strikethrough
markup.heading, entity.name.section#4A90E2bold
markup.bold#F2C94Cbold
markup.italic#9B51E0italic
markup.underline.link#2D9CDB
markup.inline.raw, markup.fenced_code#00B8D4
support.type.property-name.json#2D9CDB
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F2C94C
support.type.property-name.css#2D9CDB
support.constant.property-value.css#27AE60