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#a6b8ff
  • activityBar.background#151735
  • activityBar.foreground#a6b8ff
  • activityBarBadge.background#a6b8ff
  • activityBarBadge.foreground#1a1c3e
  • badge.background#a6b8ff
  • badge.foreground#1a1c3e
  • button.background#21244f
  • button.foreground#ffffff
  • button.hoverBackground#2f335f
  • dropdown.background#151735
  • dropdown.border#21244f
  • dropdown.foreground#e0e2f1
  • editor.background#1a1c3e
  • editor.findMatchBackground#a6b8ff44
  • editor.findMatchHighlightBackground#a6b8ff22
  • editor.foreground#e0e2f1
  • editor.lineHighlightBackground#21244f40
  • editor.lineHighlightBorder#21244f80
  • editor.selectionBackground#2f335f55
  • editor.selectionHighlightBackground#2f335f33
  • editorBracketMatch.background#a6b8ff33
  • editorBracketMatch.border#a6b8ff
  • editorCursor.foreground#a6b8ff
  • editorGroupHeader.tabsBackground#1a1c3e
  • editorIndentGuide.activeBackground#2f335f88
  • editorIndentGuide.background#2f335f44
  • editorLineNumber.activeForeground#a6b8ff
  • editorLineNumber.foreground#4a527a
  • editorWhitespace.foreground#2f335f
  • focusBorder#a6b8ff
  • gitDecoration.conflictingResourceForeground#ead877
  • gitDecoration.deletedResourceForeground#d57171
  • gitDecoration.modifiedResourceForeground#a6b8ff
  • gitDecoration.untrackedResourceForeground#90c695
  • input.background#151735
  • input.border#21244f
  • input.foreground#e0e2f1
  • input.placeholderForeground#4a527a
  • inputOption.activeBorder#a6b8ff
  • list.activeSelectionBackground#21244f
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#21244f
  • list.highlightForeground#a6b8ff
  • list.hoverBackground#21244f66
  • minimap.background#1a1c3e
  • minimapSlider.activeBackground#a6b8ff66
  • minimapSlider.background#a6b8ff22
  • minimapSlider.hoverBackground#a6b8ff44
  • panel.background#1a1c3e
  • panel.border#21244f
  • panelTitle.activeBorder#a6b8ff
  • panelTitle.activeForeground#a6b8ff
  • panelTitle.inactiveForeground#c5c9e0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#a6b8ff88
  • scrollbarSlider.background#4a527a44
  • scrollbarSlider.hoverBackground#4a527a88
  • sideBar.background#151735
  • sideBar.foreground#c5c9e0
  • sideBarSectionHeader.background#151735
  • sideBarSectionHeader.foreground#a6b8ff
  • sideBarTitle.foreground#a6b8ff
  • statusBar.background#272a55
  • statusBar.debuggingBackground#5a8faf
  • statusBar.foreground#e0e2f1
  • statusBar.noFolderBackground#151735
  • statusBarItem.hoverBackground#2f335f
  • tab.activeBackground#21244f
  • tab.activeBorder#a6b8ff
  • tab.activeForeground#ffffff
  • tab.border#1a1c3e
  • tab.inactiveBackground#151735
  • tab.inactiveForeground#c5c9e0
  • terminal.ansiBlue#a6b8ff
  • terminal.ansiBrightBlue#b0c4ff
  • terminal.ansiBrightCyan#8ff0e0
  • terminal.ansiBrightGreen#a0d6a5
  • terminal.ansiBrightMagenta#d8b2d8
  • terminal.ansiBrightRed#e48a8a
  • terminal.ansiBrightYellow#f0e4b8
  • terminal.ansiCyan#6ee9d0
  • terminal.ansiGreen#90c695
  • terminal.ansiMagenta#c6a0d8
  • terminal.ansiRed#d57171
  • terminal.ansiYellow#ead877
  • terminal.background#1a1c3e
  • terminal.foreground#e0e2f1
  • titleBar.activeBackground#151735
  • titleBar.activeForeground#e0e2f1
  • titleBar.inactiveBackground#1a1c3e
  • titleBar.inactiveForeground#c5c9e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7BA0italic
string, string.quoted, string.template#7FE0D4
keyword, storage.type, storage.modifier#B3C0FFbold
keyword.operator, punctuation.accessor#C3D0FF
variable, variable.other#D0D4E5
variable.parameter#C8A2C8italic
entity.name.function, support.function#A8B2D4
meta.function-call#B3C0FF
entity.name.class, entity.name.type.class, support.class#C3D0FFbold
entity.name.type, support.type#C3D0FF
entity.name.type.interface#7FE0D4italic
constant.numeric#E0D4A8
constant, constant.language, constant.character#C8A2C8
constant.language.boolean#E0D4A8bold
variable.other.property, support.variable.property#A8B2D4
meta.object-literal.key#B3C0FF
entity.name.tag, punctuation.definition.tag#B3C0FF
entity.other.attribute-name#C8A2C8italic
punctuation, meta.brace#C3D0FF
string.regexp#D47A7A
constant.character.escape#C8A2C8
meta.decorator, punctuation.decorator#E0D4A8
invalid, invalid.illegal#D47A7Astrikethrough
markup.heading, entity.name.section#B3C0FFbold
markup.bold#E0D4A8bold
markup.italic#C8A2C8italic
markup.underline.link#7FE0D4
markup.inline.raw, markup.fenced_code#90C695
support.type.property-name.json#B3C0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E0D4A8
support.type.property-name.css#B3C0FF
support.constant.property-value.css#7FE0D4