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#C5A200
  • activityBar.background#1A0B3F
  • activityBar.foreground#FFD700
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#0F0528
  • badge.background#FFD700
  • badge.foreground#0F0528
  • button.background#260E4F
  • button.foreground#FFFFFF
  • button.hoverBackground#331E6B
  • dropdown.background#150C35
  • dropdown.border#260E4F
  • dropdown.foreground#E5E0F7
  • editor.background#0F0528
  • editor.findMatchBackground#FFD70044
  • editor.findMatchHighlightBackground#FFD70022
  • editor.foreground#E5E0F7
  • editor.lineHighlightBackground#260E4F80
  • editor.lineHighlightBorder#260E4FA0
  • editor.selectionBackground#9A6BFF55
  • editor.selectionHighlightBackground#9A6BFF33
  • editorBracketMatch.background#FFD70033
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#0F0528
  • editorIndentGuide.activeBackground#331E6B88
  • editorIndentGuide.background#331E6B44
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#5A5575
  • editorWhitespace.foreground#331E6B
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF8A8A
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#A8E986
  • input.background#150C35
  • input.border#260E4F
  • input.foreground#E5E0F7
  • input.placeholderForeground#5A5575
  • inputOption.activeBorder#FFD700
  • list.activeSelectionBackground#260E4F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#260E4F
  • list.highlightForeground#FFD700
  • list.hoverBackground#260E4F66
  • minimap.background#0F0528
  • minimapSlider.activeBackground#FFD70066
  • minimapSlider.background#FFD70022
  • minimapSlider.hoverBackground#FFD70044
  • panel.background#0F0528
  • panel.border#260E4F
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#FFD700
  • panelTitle.inactiveForeground#C8BFE7
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFD70088
  • scrollbarSlider.background#9A6BFF44
  • scrollbarSlider.hoverBackground#9A6BFF88
  • sideBar.background#150C35
  • sideBar.foreground#C8BFE7
  • sideBarSectionHeader.background#1A0B3F
  • sideBarSectionHeader.foreground#FFD700
  • sideBarTitle.foreground#FFD700
  • statusBar.background#260E4F
  • statusBar.debuggingBackground#FFD700
  • statusBar.foreground#E5E0F7
  • statusBar.noFolderBackground#1A0B3F
  • statusBarItem.hoverBackground#331E6B
  • tab.activeBackground#260E4F
  • tab.activeBorder#FFD700
  • tab.activeForeground#FFFFFF
  • tab.border#0F0528
  • tab.inactiveBackground#150C35
  • tab.inactiveForeground#C8BFE7
  • terminal.ansiBlue#7A5FFF
  • terminal.ansiBrightBlue#9A8CFF
  • terminal.ansiBrightCyan#B0F7FF
  • terminal.ansiBrightGreen#D4FFAA
  • terminal.ansiBrightMagenta#FF9FFB
  • terminal.ansiBrightRed#FFAAAA
  • terminal.ansiBrightYellow#FFE87C
  • terminal.ansiCyan#6AD4FF
  • terminal.ansiGreen#A8E986
  • terminal.ansiMagenta#FF6FCF
  • terminal.ansiRed#FF8A8A
  • terminal.ansiYellow#FFD700
  • terminal.background#0F0528
  • terminal.foreground#E5E0F7
  • titleBar.activeBackground#1A0B3F
  • titleBar.activeForeground#E5E0F7
  • titleBar.inactiveBackground#0F0528
  • titleBar.inactiveForeground#C8BFE7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5575italic
string, string.quoted, string.template#FF6FCF
keyword, storage.type, storage.modifier#FFD700bold
keyword.operator, punctuation.accessor#9A6BFF
variable, variable.other#C8BFE7
variable.parameter#FF6FCFitalic
entity.name.function, support.function#7A5FFF
meta.function-call#9A8CFF
entity.name.class, entity.name.type.class, support.class#FFD700bold
entity.name.type, support.type#7A5FFF
entity.name.type.interface#6AD4FFitalic
constant.numeric#FFD700
constant, constant.language, constant.character#9A6BFF
constant.language.boolean#9A6BFFbold
variable.other.property, support.variable.property#C8BFE7
meta.object-literal.key#7A5FFF
entity.name.tag, punctuation.definition.tag#FFD700
entity.other.attribute-name#FF6FCFitalic
punctuation, meta.brace#9A6BFF
string.regexp#FF8A8A
constant.character.escape#6AD4FF
meta.decorator, punctuation.decorator#FFD700
invalid, invalid.illegal#FF8A8Astrikethrough
markup.heading, entity.name.section#FFD700bold
markup.bold#FFD700bold
markup.italic#FF6FCFitalic
markup.underline.link#6AD4FF
markup.inline.raw, markup.fenced_code#A8E986
support.type.property-name.json#7A5FFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD700
support.type.property-name.css#7A5FFF
support.constant.property-value.css#FF6FCF