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—