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#0A84FF
  • activityBar.background#EDEDED
  • activityBar.foreground#0A84FF
  • activityBarBadge.background#0A84FF
  • activityBarBadge.foreground#FAFAFA
  • badge.background#0A84FF
  • badge.foreground#FAFAFA
  • button.background#0A84FF
  • button.foreground#FAFAFA
  • button.hoverBackground#0066CC
  • dropdown.background#FFFFFF
  • dropdown.border#A0A0A0
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFAB0033
  • editor.findMatchHighlightBackground#FFAB0022
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#D0EFFF33
  • editor.lineHighlightBorder#0A84FF20
  • editor.selectionBackground#0A84FF44
  • editor.selectionHighlightBackground#0A84FF22
  • editorBracketMatch.background#0A84FF33
  • editorBracketMatch.border#0A84FF
  • editorCursor.foreground#0A84FF
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#0A84FF
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#0A84FF
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#C41A16
  • gitDecoration.modifiedResourceForeground#0A84FF
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#A0A0A0
  • input.foreground#2B2B2B
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#0A84FF
  • list.activeSelectionBackground#D0E8FF
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#C0D8FF
  • list.highlightForeground#0A84FF
  • list.hoverBackground#E0F0FF66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#0A84FF66
  • minimapSlider.background#A0A0A022
  • minimapSlider.hoverBackground#A0A0A044
  • panel.background#FAFAFA
  • panel.border#A0A0A0
  • panelTitle.activeBorder#0A84FF
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#8A8A8A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0A84FF88
  • scrollbarSlider.background#A0A0A0AA
  • scrollbarSlider.hoverBackground#A0A0A0CC
  • sideBar.background#F3F3F3
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#0A84FF
  • sideBarTitle.foreground#0A84FF
  • statusBar.background#D9D9D9
  • statusBar.debuggingBackground#0A84FF
  • statusBar.foreground#2B2B2B
  • statusBar.noFolderBackground#CCCCCC
  • statusBarItem.hoverBackground#C0C0C0
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#0A84FF
  • tab.activeForeground#0A84FF
  • tab.border#CCCCCC
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#0A84FF
  • terminal.ansiBrightBlue#5C9EFF
  • terminal.ansiBrightCyan#69F0F0
  • terminal.ansiBrightGreen#80E27E
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#00C7D4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#C41A16
  • terminal.ansiYellow#FFB300
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#EDEDED
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#00C7D4
keyword, storage.type, storage.modifier#0A84FFbold
keyword.operator, punctuation.accessor#0A84FF
variable, variable.other#2B2B2B
variable.parameter#0A84FFitalic
entity.name.function, support.function#0A84FF
meta.function-call#A0A0A0
entity.name.class, entity.name.type.class, support.class#0A84FFbold
entity.name.type, support.type#A0A0A0
entity.name.type.interface#A0A0A0italic
constant.numeric#C6420F
constant, constant.language, constant.character#0A84FF
constant.language.boolean#0A84FFbold
variable.other.property, support.variable.property#2B2B2B
meta.object-literal.key#2B2B2B
entity.name.tag, punctuation.definition.tag#0A84FF
entity.other.attribute-name#C6420Fitalic
punctuation, meta.brace#2B2B2B
string.regexp#C6420F
constant.character.escape#C6420F
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#0A84FFbold
markup.bold#0A84FFbold
markup.italic#0A84FFitalic
markup.underline.link#0A84FF
markup.inline.raw, markup.fenced_code#2B2B2B
support.type.property-name.json#0A84FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#2B2B2B
support.constant.property-value.css#0A84FF