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#1DA1F2
  • activityBar.background#F5F8FA
  • activityBar.foreground#1DA1F2
  • activityBarBadge.background#1DA1F2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1DA1F2
  • badge.foreground#FFFFFF
  • button.background#1DA1F2
  • button.foreground#FFFFFF
  • button.hoverBackground#0C85D0
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212529
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF9C4
  • editor.foreground#212529
  • editor.lineHighlightBackground#E8F5FF
  • editor.lineHighlightBorder#B2E3FF
  • editor.selectionBackground#CDEFFF
  • editor.selectionHighlightBackground#E0F7FF
  • editorBracketMatch.background#B2E3FF
  • editorBracketMatch.border#1DA1F2
  • editorCursor.foreground#1DA1F2
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#1DA1F2
  • editorIndentGuide.background#E9ECEF
  • editorLineNumber.activeForeground#1DA1F2
  • editorLineNumber.foreground#6C757D
  • editorWhitespace.foreground#CED4DA
  • focusBorder#1DA1F2
  • gitDecoration.conflictingResourceForeground#C036D6
  • gitDecoration.deletedResourceForeground#E0245E
  • gitDecoration.modifiedResourceForeground#FFAD1F
  • gitDecoration.untrackedResourceForeground#17BF63
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212529
  • input.placeholderForeground#6C757D
  • inputOption.activeBorder#1DA1F2
  • list.activeSelectionBackground#B2E3FF
  • list.activeSelectionForeground#212529
  • list.focusBackground#B2E3FF
  • list.highlightForeground#1DA1F2
  • list.hoverBackground#E8F5FF
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#808080
  • minimapSlider.background#C0C0C0
  • minimapSlider.hoverBackground#A0A0A0
  • panel.background#F9FAFB
  • panel.border#E0E0E0
  • panelTitle.activeBorder#1DA1F2
  • panelTitle.activeForeground#212529
  • panelTitle.inactiveForeground#6C757D
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#F9FAFB
  • sideBar.foreground#212529
  • sideBarSectionHeader.background#F5F8FA
  • sideBarSectionHeader.foreground#212529
  • sideBarTitle.foreground#1DA1F2
  • statusBar.background#E8F5FF
  • statusBar.debuggingBackground#FFAD1F
  • statusBar.foreground#212529
  • statusBar.noFolderBackground#E8F5FF
  • statusBarItem.hoverBackground#B2E3FF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#1DA1F2
  • tab.activeForeground#212529
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#6C757D
  • terminal.ansiBlue#1DA1F2
  • terminal.ansiBrightBlue#53B8FF
  • terminal.ansiBrightCyan#48D0FF
  • terminal.ansiBrightGreen#2CE69B
  • terminal.ansiBrightMagenta#E160FF
  • terminal.ansiBrightRed#FF6384
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#00C4FF
  • terminal.ansiGreen#17BF63
  • terminal.ansiMagenta#C036D6
  • terminal.ansiRed#E0245E
  • terminal.ansiYellow#FFAD1F
  • terminal.background#FFFFFF
  • terminal.foreground#212529
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212529
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#6C757D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C757Ditalic
string, string.quoted, string.template#17BF63
keyword, storage.type, storage.modifier#1DA1F2bold
keyword.operator, punctuation.accessor#FFAD1F
variable, variable.other#212529
variable.parameter#FFAD1Fitalic
entity.name.function, support.function#C036D6
meta.function-call#00C4FF
entity.name.class, entity.name.type.class, support.class#FFAD1Fbold
entity.name.type, support.type#00C4FF
entity.name.type.interface#48D0FFitalic
constant.numeric#FFEB3B
constant, constant.language, constant.character#C036D6
constant.language.boolean#FFAD1Fbold
variable.other.property, support.variable.property#1DA1F2
meta.object-literal.key#48D0FF
entity.name.tag, punctuation.definition.tag#E0245E
entity.other.attribute-name#E0245Eitalic
punctuation, meta.brace#212529
string.regexp#2CE69B
constant.character.escape#FFAD1F
meta.decorator, punctuation.decorator#E160FF
invalid, invalid.illegal#FF6384strikethrough
markup.heading, entity.name.section#1DA1F2bold
markup.bold#1DA1F2bold
markup.italic#6C757Ditalic
markup.underline.link#00C4FF
markup.inline.raw, markup.fenced_code#17BF63
support.type.property-name.json#00C4FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C036D6
support.type.property-name.css#1DA1F2
support.constant.property-value.css#FFAD1F