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#FF6B6B
  • activityBar.background#151C2B
  • activityBar.foreground#FF6B6B
  • activityBarBadge.background#FF6B6B
  • activityBarBadge.foreground#0B111F
  • badge.background#FF6B6B
  • badge.foreground#0B111F
  • button.background#1A2430
  • button.foreground#FFFFFF
  • button.hoverBackground#2A3545
  • dropdown.background#151C2B
  • dropdown.border#1A2430
  • dropdown.foreground#C7D0E0
  • editor.background#0B111F
  • editor.findMatchBackground#4DC1FF44
  • editor.findMatchHighlightBackground#4DC1FF22
  • editor.foreground#C7D0E0
  • editor.lineHighlightBackground#1A243060
  • editor.lineHighlightBorder#1A2430AA
  • editor.selectionBackground#FF6B6B55
  • editor.selectionHighlightBackground#FF6B6B33
  • editorBracketMatch.background#FF6B6B33
  • editorBracketMatch.border#FF6B6B
  • editorCursor.foreground#FF6B6B
  • editorGroupHeader.tabsBackground#0B111F
  • editorIndentGuide.activeBackground#3A3A3A88
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#FF6B6B
  • editorLineNumber.foreground#5A6374
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#FF6B6B
  • gitDecoration.conflictingResourceForeground#FFD166
  • gitDecoration.deletedResourceForeground#B22222
  • gitDecoration.modifiedResourceForeground#FF6B6B
  • gitDecoration.untrackedResourceForeground#9AE6B4
  • input.background#151C2B
  • input.border#1A2430
  • input.foreground#C7D0E0
  • input.placeholderForeground#5A6374
  • inputOption.activeBorder#FF6B6B
  • list.activeSelectionBackground#1A2430
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A2430
  • list.highlightForeground#FF6B6B
  • list.hoverBackground#1A2430AA
  • minimap.background#0B111F
  • minimapSlider.activeBackground#FF6B6B66
  • minimapSlider.background#FF6B6B22
  • minimapSlider.hoverBackground#FF6B6B44
  • panel.background#0B111F
  • panel.border#1A2430
  • panelTitle.activeBorder#FF6B6B
  • panelTitle.activeForeground#FF6B6B
  • panelTitle.inactiveForeground#A8B2C8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF6B6B88
  • scrollbarSlider.background#5A637444
  • scrollbarSlider.hoverBackground#5A637488
  • sideBar.background#151C2B
  • sideBar.foreground#A8B2C8
  • sideBarSectionHeader.background#1A2430
  • sideBarSectionHeader.foreground#FF6B6B
  • sideBarTitle.foreground#FF6B6B
  • statusBar.background#1A2430
  • statusBar.debuggingBackground#B22222
  • statusBar.foreground#C7D0E0
  • statusBar.noFolderBackground#151C2B
  • statusBarItem.hoverBackground#2A3545
  • tab.activeBackground#1A2430
  • tab.activeBorder#FF6B6B
  • tab.activeForeground#FFFFFF
  • tab.border#0B111F
  • tab.inactiveBackground#151C2B
  • tab.inactiveForeground#A8B2C8
  • terminal.ansiBlue#4DC1FF
  • terminal.ansiBrightBlue#7ED8FF
  • terminal.ansiBrightCyan#B4F4F4
  • terminal.ansiBrightGreen#C1F7C8
  • terminal.ansiBrightMagenta#E1C9FF
  • terminal.ansiBrightRed#FF8F8F
  • terminal.ansiBrightYellow#FFE98B
  • terminal.ansiCyan#A0E7E5
  • terminal.ansiGreen#9AE6B4
  • terminal.ansiMagenta#D6A4FF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiYellow#FFD166
  • terminal.background#0B111F
  • terminal.foreground#C7D0E0
  • titleBar.activeBackground#151C2B
  • titleBar.activeForeground#C7D0E0
  • titleBar.inactiveBackground#0B111F
  • titleBar.inactiveForeground#A8B2C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6374italic
string, string.quoted, string.template#A0E7E5
keyword, storage.type, storage.modifier#FF6B6Bbold
keyword.operator, punctuation.accessor#C7D0E0
variable, variable.other#4DC1FF
variable.parameter#A0E7E5italic
entity.name.function, support.function#9AE6B4
meta.function-call#A8B2C8
entity.name.class, entity.name.type.class, support.class#D6A4FFbold
entity.name.type, support.type#9AE6B4
entity.name.type.interface#FFD166italic
constant.numeric#F4C074
constant, constant.language, constant.character#FF6B6B
constant.language.boolean#FF6B6Bbold
variable.other.property, support.variable.property#A8B2C8
meta.object-literal.key#9AE6B4
entity.name.tag, punctuation.definition.tag#FF6B6B
entity.other.attribute-name#D6A4FFitalic
punctuation, meta.brace#C7D0E0
string.regexp#F4C074
constant.character.escape#A0E7E5
meta.decorator, punctuation.decorator#D6A4FF
invalid, invalid.illegal#B22222strikethrough
markup.heading, entity.name.section#FF6B6Bbold
markup.bold#A0E7E5bold
markup.italic#D6A4FFitalic
markup.underline.link#4DC1FF
markup.inline.raw, markup.fenced_code#9AE6B4
support.type.property-name.json#9AE6B4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D6A4FF
support.type.property-name.css#9AE6B4
support.constant.property-value.css#A0E7E5