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#4A6EFF
  • activityBar.background#E0E5F0
  • activityBar.foreground#4A6EFF
  • activityBarBadge.background#4A6EFF
  • activityBarBadge.foreground#FAFAFA
  • badge.background#FFB800
  • badge.foreground#FAFAFA
  • button.background#4A6EFF
  • button.foreground#FAFAFA
  • button.hoverBackground#4A6EFF55
  • dropdown.background#F0F4FF
  • dropdown.border#4A6EFF
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFB80030
  • editor.findMatchHighlightBackground#FFB80020
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#E8EEFF80
  • editor.lineHighlightBorder#4A6EFF40
  • editor.selectionBackground#4A6EFF30
  • editor.selectionHighlightBackground#4A6EFF20
  • editorBracketMatch.background#FFB80020
  • editorBracketMatch.border#FFB800
  • editorCursor.foreground#4A6EFF
  • editorGroupHeader.tabsBackground#F5F7FF
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#4A6EFF
  • editorLineNumber.foreground#B0B0B0
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#4A6EFF
  • gitDecoration.conflictingResourceForeground#FFEA00
  • gitDecoration.deletedResourceForeground#FF1744
  • gitDecoration.modifiedResourceForeground#4A6EFF
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#F0F4FF
  • input.border#4A6EFF
  • input.foreground#2E2E2E
  • input.placeholderForeground#A8A8A8
  • inputOption.activeBorder#4A6EFF
  • list.activeSelectionBackground#4A6EFF
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#4A6EFF30
  • list.highlightForeground#FFB800
  • list.hoverBackground#4A6EFF20
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#4A6EFF66
  • minimapSlider.background#4A6EFF22
  • minimapSlider.hoverBackground#4A6EFF44
  • panel.background#FAFAFA
  • panel.border#4A6EFF
  • panelTitle.activeBorder#4A6EFF
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#A8A8A8
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#4A6EFF88
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F0F4FF
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F0F4FF
  • sideBarSectionHeader.foreground#4A6EFF
  • sideBarTitle.foreground#4A6EFF
  • statusBar.background#4A6EFF
  • statusBar.debuggingBackground#FFB800
  • statusBar.foreground#FAFAFA
  • statusBar.noFolderBackground#DDE3F5
  • statusBarItem.hoverBackground#4A6EFF44
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#4A6EFF
  • tab.activeForeground#2E2E2E
  • tab.border#C0C0C0
  • tab.inactiveBackground#F5F7FF
  • tab.inactiveForeground#4A6EFF
  • terminal.ansiBlue#4A6EFF
  • terminal.ansiBrightBlue#7BA9FF
  • terminal.ansiBrightCyan#66FFEF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFFF8D
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D500F9
  • terminal.ansiRed#FF1744
  • terminal.ansiYellow#FFEA00
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#DDE3F5
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#4A6EFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#4A6EFFbold
keyword.operator, punctuation.accessor#5A7FFF
variable, variable.other#2E2E2E
variable.parameter#4A6EFFitalic
entity.name.function, support.function#5FD9EF
meta.function-call#4A6EFF
entity.name.class, entity.name.type.class, support.class#FFB800bold
entity.name.type, support.type#FF9800
entity.name.type.interface#FFB800italic
constant.numeric#FF5722
constant, constant.language, constant.character#FF9800
constant.language.boolean#FF5722bold
variable.other.property, support.variable.property#4A6EFF
meta.object-literal.key#4A6EFF
entity.name.tag, punctuation.definition.tag#4A6EFF
entity.other.attribute-name#D500F9italic
punctuation, meta.brace#4A6EFF
string.regexp#00C853
constant.character.escape#D500F9
meta.decorator, punctuation.decorator#FFEA00
invalid, invalid.illegal#FF1744strikethrough
markup.heading, entity.name.section#4A6EFFbold
markup.bold#FFB800bold
markup.italic#D500F9italic
markup.underline.link#5FD9EF
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#5FD9EF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D500F9
support.type.property-name.css#5FD9EF
support.constant.property-value.css#009688