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#E0E5EB
  • activityBar.foreground#21252B
  • activityBarBadge.background#0A84FF
  • activityBarBadge.foreground#F5F7FA
  • badge.background#0A84FF
  • badge.foreground#F5F7FA
  • button.background#0A84FF
  • button.foreground#F5F7FA
  • button.hoverBackground#3399FF
  • dropdown.background#E8EDF2
  • dropdown.border#C0C0C0
  • dropdown.foreground#21252B
  • editor.background#F5F7FA
  • editor.findMatchBackground#0A84FF66
  • editor.findMatchHighlightBackground#0A84FF44
  • editor.foreground#2E383D
  • editor.lineHighlightBackground#D0D8E0
  • editor.lineHighlightBorder#0A84FF33
  • editor.selectionBackground#0A84FF44
  • editor.selectionHighlightBackground#0A84FF22
  • editorBracketMatch.background#0A84FF22
  • editorBracketMatch.border#0A84FF
  • editorCursor.foreground#0A84FF
  • editorGroupHeader.tabsBackground#E0E5EB
  • editorIndentGuide.activeBackground#A0A0A0
  • editorIndentGuide.background#C0C0C0
  • editorLineNumber.activeForeground#21252B
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#0A84FF
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#FF5252
  • gitDecoration.modifiedResourceForeground#0A84FF
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#E8EDF2
  • input.border#C0C0C0
  • input.foreground#21252B
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#0A84FF
  • list.activeSelectionBackground#0A84FF33
  • list.activeSelectionForeground#21252B
  • list.focusBackground#0A84FF44
  • list.highlightForeground#0A84FF
  • list.hoverBackground#0A84FF22
  • minimap.background#F5F7FA
  • minimapSlider.activeBackground#0A84FF66
  • minimapSlider.background#0A84FF22
  • minimapSlider.hoverBackground#0A84FF44
  • panel.background#F5F7FA
  • panel.border#0A84FF
  • panelTitle.activeBorder#0A84FF
  • panelTitle.activeForeground#21252B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#0A84FF88
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#E8EDF2
  • sideBar.foreground#21252B
  • sideBarSectionHeader.background#F0F4F9
  • sideBarSectionHeader.foreground#21252B
  • sideBarTitle.foreground#21252B
  • statusBar.background#E0E5EB
  • statusBar.debuggingBackground#0A84FF
  • statusBar.foreground#21252B
  • statusBar.noFolderBackground#E0E5EB
  • statusBarItem.hoverBackground#0A84FF33
  • tab.activeBackground#F5F7FA
  • tab.activeBorder#0A84FF
  • tab.activeForeground#21252B
  • tab.border#C0C0C0
  • tab.inactiveBackground#E0E5EB
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0A84FF
  • terminal.ansiBrightBlue#5AB4FF
  • terminal.ansiBrightCyan#5CFFE5
  • terminal.ansiBrightGreen#5EFF8A
  • terminal.ansiBrightMagenta#E673FF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00D1B2
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D062FF
  • terminal.ansiRed#FF5252
  • terminal.ansiYellow#FFB300
  • terminal.background#F5F7FA
  • terminal.foreground#21252B
  • titleBar.activeBackground#E0E5EB
  • titleBar.activeForeground#21252B
  • titleBar.inactiveBackground#F5F7FA
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#00C853
keyword, storage.type, storage.modifier#0A84FFbold
keyword.operator, punctuation.accessor#00D1B2
variable, variable.other#21252B
variable.parameter#555555italic
entity.name.function, support.function#3399FF
meta.function-call#5AB4FF
entity.name.class, entity.name.type.class, support.class#5CFFE5bold
entity.name.type, support.type#66D9EF
entity.name.type.interface#66FFCCitalic
constant.numeric#FFB300
constant, constant.language, constant.character#FF5252
constant.language.boolean#FF5252bold
variable.other.property, support.variable.property#00D1B2
meta.object-literal.key#5CFFE5
entity.name.tag, punctuation.definition.tag#D062FF
entity.other.attribute-name#E673FFitalic
punctuation, meta.brace#555555
string.regexp#FF8A80
constant.character.escape#FF5252
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#0A84FFbold
markup.bold#3399FFbold
markup.italic#5AB4FFitalic
markup.underline.link#5CFFE5
markup.inline.raw, markup.fenced_code#00C853
support.type.property-name.json#5CFFE5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D062FF
support.type.property-name.css#5CFFE5
support.constant.property-value.css#FFB300