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#0A4FB1
  • activityBar.background#E5E5E5
  • activityBar.foreground#0A4FB1
  • activityBarBadge.background#0A4FB1
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D10404
  • badge.foreground#FFFFFF
  • button.background#0A4FB1
  • button.foreground#FFFFFF
  • button.hoverBackground#0051A2
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFE58F
  • editor.findMatchHighlightBackground#FFF1B5
  • editor.foreground#212121
  • editor.lineHighlightBackground#E6F2FF
  • editor.lineHighlightBorder#B0D4FF
  • editor.selectionBackground#B3D4FF
  • editor.selectionHighlightBackground#CDE6FF
  • editorBracketMatch.background#D0E7FF
  • editorBracketMatch.border#0A4FB1
  • editorCursor.foreground#0A4FB1
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#0A4FB1
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#0A4FB1
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#D10404
  • gitDecoration.modifiedResourceForeground#0051A2
  • gitDecoration.untrackedResourceForeground#00A8B5
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#212121
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#0A4FB1
  • list.activeSelectionBackground#B3D4FF
  • list.activeSelectionForeground#212121
  • list.focusBackground#D0E8FF
  • list.highlightForeground#0A4FB1
  • list.hoverBackground#E6F2FF
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#AAAAAAAA
  • minimapSlider.background#CCCCCC80
  • minimapSlider.hoverBackground#BBBBBB99
  • panel.background#FAFAFA
  • panel.border#D0D0D0
  • panelTitle.activeBorder#0A4FB1
  • panelTitle.activeForeground#0A4FB1
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#AAAAAAAA
  • scrollbarSlider.background#CCCCCC80
  • scrollbarSlider.hoverBackground#BBBBBB99
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E5E5E5
  • sideBarSectionHeader.foreground#0A4FB1
  • sideBarTitle.foreground#0A4FB1
  • statusBar.background#0A4FB1
  • statusBar.debuggingBackground#D10404
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E5E5E5
  • statusBarItem.hoverBackground#0070FF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0A4FB1
  • tab.activeForeground#0A4FB1
  • tab.border#D0D0D0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0A4FB1
  • terminal.ansiBrightBlue#0051A2
  • terminal.ansiBrightCyan#008D9E
  • terminal.ansiBrightGreen#6FBF74
  • terminal.ansiBrightMagenta#C800C8
  • terminal.ansiBrightRed#FF3B30
  • terminal.ansiBrightYellow#FFDC00
  • terminal.ansiCyan#00A8B5
  • terminal.ansiGreen#5AAA4E
  • terminal.ansiMagenta#A800A8
  • terminal.ansiRed#D10404
  • terminal.ansiYellow#C5A800
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#E5E5E5
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#5AAA4E
keyword, storage.type, storage.modifier#0A4FB1bold
keyword.operator, punctuation.accessor#A800A8
variable, variable.other#212121
variable.parameter#212121italic
entity.name.function, support.function#00A8B5
meta.function-call#00A8B5
entity.name.class, entity.name.type.class, support.class#C5862Bbold
entity.name.type, support.type#A800A8
entity.name.type.interface#A800A8italic
constant.numeric#D10404
constant, constant.language, constant.character#A800A8
constant.language.boolean#D10404bold
variable.other.property, support.variable.property#00A8B5
meta.object-literal.key#0A4FB1
entity.name.tag, punctuation.definition.tag#D10404
entity.other.attribute-name#0051A2italic
punctuation, meta.brace#212121
string.regexp#5AAA4E
constant.character.escape#C5862B
meta.decorator, punctuation.decorator#A800A8
invalid, invalid.illegal#D10404strikethrough
markup.heading, entity.name.section#0A4FB1bold
markup.bold#0A4FB1bold
markup.italic#0A4FB1italic
markup.underline.link#00A8B5
markup.inline.raw, markup.fenced_code#828282
support.type.property-name.json#0A4FB1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A800A8
support.type.property-name.css#0A4FB1
support.constant.property-value.css#5AAA4E