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#1877F2
  • activityBar.background#001F3F
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#1877F2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1877F2
  • badge.foreground#FFFFFF
  • button.background#1877F2
  • button.foreground#FFFFFF
  • button.hoverBackground#166FE5
  • dropdown.background#21262D
  • dropdown.border#30363D
  • dropdown.foreground#C9D1D9
  • editor.background#0D1117
  • editor.findMatchBackground#8AB4F8
  • editor.findMatchHighlightBackground#5B97F6
  • editor.foreground#C9D1D9
  • editor.lineHighlightBackground#112240
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#3A618F
  • editorBracketMatch.background#264F78
  • editorBracketMatch.border#1877F2
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#001F3F
  • editorIndentGuide.activeBackground#5B5B5B
  • editorIndentGuide.background#3B3B3B
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#6A737D
  • editorWhitespace.foreground#3B3B3B
  • focusBorder#1877F2
  • gitDecoration.conflictingResourceForeground#FF79C6
  • gitDecoration.deletedResourceForeground#E74C3C
  • gitDecoration.modifiedResourceForeground#E2B93D
  • gitDecoration.untrackedResourceForeground#28A745
  • input.background#21262D
  • input.border#30363D
  • input.foreground#C9D1D9
  • input.placeholderForeground#6A737D
  • inputOption.activeBorder#1877F2
  • list.activeSelectionBackground#264F78
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#112240
  • list.highlightForeground#1877F2
  • list.hoverBackground#112240
  • minimap.background#0D1117
  • minimapSlider.activeBackground#787878CC
  • minimapSlider.background#48484866
  • minimapSlider.hoverBackground#64646499
  • panel.background#0D1117
  • panel.border#001F3F
  • panelTitle.activeBorder#1877F2
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8B949E
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#787878CC
  • scrollbarSlider.background#48484866
  • scrollbarSlider.hoverBackground#64646499
  • sideBar.background#0D1117
  • sideBar.foreground#C9D1D9
  • sideBarSectionHeader.background#001F3F
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#001F3F
  • statusBar.debuggingBackground#FF5733
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#333333
  • statusBarItem.hoverBackground#2A3B5C
  • tab.activeBackground#001F3F
  • tab.activeBorder#1877F2
  • tab.activeForeground#FFFFFF
  • tab.border#001F3F
  • tab.inactiveBackground#0D1117
  • tab.inactiveForeground#8B949E
  • terminal.ansiBlue#1877F2
  • terminal.ansiBrightBlue#5B9EFF
  • terminal.ansiBrightCyan#61D6D6
  • terminal.ansiBrightGreen#6BCB5A
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFDF5D
  • terminal.ansiCyan#3AB0FF
  • terminal.ansiGreen#28A745
  • terminal.ansiMagenta#D362A4
  • terminal.ansiRed#E74C3C
  • terminal.ansiYellow#E2B93D
  • terminal.background#0D1117
  • terminal.foreground#C9D1D9
  • titleBar.activeBackground#001F3F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#8B949E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#A5D6FF
keyword, storage.type, storage.modifier#1877F2bold
keyword.operator, punctuation.accessor#FFB86C
variable, variable.other#C9D1D9
variable.parameter#C9D1D9italic
entity.name.function, support.function#FF79C6
meta.function-call#FF79C6
entity.name.class, entity.name.type.class, support.class#FFB86Cbold
entity.name.type, support.type#FFB86C
entity.name.type.interface#FFB86Citalic
constant.numeric#E2B93D
constant, constant.language, constant.character#FF79C6
constant.language.boolean#FF79C6bold
variable.other.property, support.variable.property#A5D6FF
meta.object-literal.key#FF79C6
entity.name.tag, punctuation.definition.tag#1877F2
entity.other.attribute-name#FFB86Citalic
punctuation, meta.brace#8B949E
string.regexp#FF79C6
constant.character.escape#FF79C6
meta.decorator, punctuation.decorator#FFB86C
invalid, invalid.illegal#E74C3Cstrikethrough
markup.heading, entity.name.section#FFFFFFbold
markup.bold#FFFFFFbold
markup.italic#C9D1D9italic
markup.underline.link#1877F2
markup.inline.raw, markup.fenced_code#A5D6FF
support.type.property-name.json#FF79C6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF79C6
support.type.property-name.css#1877F2
support.constant.property-value.css#28A745