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#5FD7FF
  • activityBar.background#141C22
  • activityBar.foreground#5FD7FF
  • activityBarBadge.background#5FD7FF
  • activityBarBadge.foreground#0F151B
  • badge.background#5FD7FF
  • badge.foreground#0F151B
  • button.background#5FD7FF
  • button.foreground#FFFFFF
  • button.hoverBackground#87EFFF
  • dropdown.background#141C22
  • dropdown.border#171F27
  • dropdown.foreground#CBD2D9
  • editor.background#0F151B
  • editor.findMatchBackground#87EFFF44
  • editor.findMatchHighlightBackground#87EFFF22
  • editor.foreground#CBD2D9
  • editor.lineHighlightBackground#5FD7FF10
  • editor.lineHighlightBorder#5FD7FF20
  • editor.selectionBackground#5FD7FF33
  • editor.selectionHighlightBackground#5FD7FF22
  • editorBracketMatch.background#5FD7FF33
  • editorBracketMatch.border#5FD7FF
  • editorCursor.foreground#87EFFF
  • editorGroupHeader.tabsBackground#10181F
  • editorIndentGuide.activeBackground#87EFFF
  • editorIndentGuide.background#4A5A68
  • editorLineNumber.activeForeground#5FD7FF
  • editorLineNumber.foreground#4A5A68
  • editorWhitespace.foreground#4A5A68
  • focusBorder#5FD7FF
  • gitDecoration.conflictingResourceForeground#FFD75F
  • gitDecoration.deletedResourceForeground#FF6B6B
  • gitDecoration.modifiedResourceForeground#87EFFF
  • gitDecoration.untrackedResourceForeground#87EFFF
  • input.background#141C22
  • input.border#171F27
  • input.foreground#CBD2D9
  • input.placeholderForeground#4A5A68
  • inputOption.activeBorder#5FD7FF
  • list.activeSelectionBackground#5FD7FF33
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5FD7FF33
  • list.highlightForeground#87EFFF
  • list.hoverBackground#5FD7FF22
  • minimap.background#0F151B
  • minimapSlider.activeBackground#5FD7FF66
  • minimapSlider.background#5FD7FF22
  • minimapSlider.hoverBackground#5FD7FF44
  • panel.background#10181F
  • panel.border#171F27
  • panelTitle.activeBorder#5FD7FF
  • panelTitle.activeForeground#5FD7FF
  • panelTitle.inactiveForeground#7A8690
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5FD7FF88
  • scrollbarSlider.background#4A5A6844
  • scrollbarSlider.hoverBackground#4A5A6866
  • sideBar.background#10181F
  • sideBar.foreground#CBD2D9
  • sideBarSectionHeader.background#0C1218
  • sideBarSectionHeader.foreground#5FD7FF
  • sideBarTitle.foreground#5FD7FF
  • statusBar.background#171F27
  • statusBar.debuggingBackground#5FD7FF
  • statusBar.foreground#CBD2D9
  • statusBar.noFolderBackground#10181F
  • statusBarItem.hoverBackground#5FD7FF33
  • tab.activeBackground#171F27
  • tab.activeBorder#5FD7FF
  • tab.activeForeground#CBD2D9
  • tab.border#0F151B
  • tab.inactiveBackground#10181F
  • tab.inactiveForeground#7A8690
  • terminal.ansiBlue#5FD7FF
  • terminal.ansiBrightBlue#90E0FF
  • terminal.ansiBrightCyan#B0FFFF
  • terminal.ansiBrightGreen#8FFFCC
  • terminal.ansiBrightMagenta#C0A0FF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFE680
  • terminal.ansiCyan#87EFFF
  • terminal.ansiGreen#6FFFAB
  • terminal.ansiMagenta#A280FF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFD75F
  • terminal.background#0F151B
  • terminal.foreground#CBD2D9
  • titleBar.activeBackground#0C1218
  • titleBar.activeForeground#CBD2D9
  • titleBar.inactiveBackground#10181F
  • titleBar.inactiveForeground#7A8690

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A5A68italic
string, string.quoted, string.template#87EFFF
keyword, storage.type, storage.modifier#5FD7FFbold
keyword.operator, punctuation.accessor#4A5A68
variable, variable.other#CBD2D9
variable.parameter#4A5A68italic
entity.name.function, support.function#87EFFF
meta.function-call#87EFFF
entity.name.class, entity.name.type.class, support.class#A280FFbold
entity.name.type, support.type#CBD2D9
entity.name.type.interface#C0A0FFitalic
constant.numeric#FFD75F
constant, constant.language, constant.character#FFD75F
constant.language.boolean#FFD75Fbold
variable.other.property, support.variable.property#87EFFF
meta.object-literal.key#87EFFF
entity.name.tag, punctuation.definition.tag#5FD7FF
entity.other.attribute-name#4A5A68italic
punctuation, meta.brace#4A5A68
string.regexp#87EFFF
constant.character.escape#4A5A68
meta.decorator, punctuation.decorator#87EFFF
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#5FD7FFbold
markup.bold#87EFFFbold
markup.italic#4A5A68italic
markup.underline.link#87EFFF
markup.inline.raw, markup.fenced_code#87EFFF
support.type.property-name.json#5FD7FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#87EFFF
support.type.property-name.css#4A5A68
support.constant.property-value.css#87EFFF