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#ff97bf
  • activityBar.background#0c0115
  • activityBar.border#4bdeff
  • activityBar.foreground#b5ff8a
  • activityBarBadge.background#d49efd
  • activityBarBadge.foreground#0c0115
  • badge.background#ff65b0
  • badge.foreground#0c0115
  • button.background#ff65b0
  • button.foreground#0c0115
  • button.hoverBackground#f67fba
  • chat.requestBackground#0c0115
  • chat.slashCommandBackground#0f0213
  • dropdown.background#0f0213
  • dropdown.border#4bdeffee
  • editor.background#0c0115
  • editor.foreground#fcffff
  • editor.inactiveSelectionBackground#151a2925
  • editor.lineHighlightBackground#27103cd9
  • editor.selectionBackground#1f2940
  • editorCursor.foreground#ff97bf
  • editorGroup.border#0c0115ce
  • editorGroupHeader.noTabsBackground#0c0115
  • editorGroupHeader.tabsBackground#0c0115
  • editorLineNumber.activeForeground#ff97bf
  • editorLineNumber.foreground#b5ff8a
  • editorWhitespace.foreground#272628bc
  • focusBorder#ff65b055
  • input.background#0c0115
  • input.border#4bdeffee
  • input.foreground#fcffff
  • input.placeholderForeground#ffffff
  • list.activeSelectionBackground#0c0115
  • list.activeSelectionForeground#fcffff
  • list.dropBackground#4bdeffee
  • list.focusBackground#0c0115
  • list.hoverBackground#0c0115
  • list.inactiveSelectionBackground#0c0115
  • menu.background#0f0213
  • menu.foreground#4bdeff
  • menu.selectionBackground#0c0115
  • menubar.selectionBackground#0c0115aa
  • panel.background#0c0115
  • panel.border#4bdeff
  • panelTitle.activeForeground#f67fba
  • panelTitle.inactiveForeground#d49efdf7
  • peekView.border#ff97bf
  • peekViewEditor.background#0c0115
  • peekViewResult.background#0f0213
  • selection.background#1e3c484d
  • sideBar.background#000214
  • sideBar.border#4bdeff
  • sideBar.foreground#fcffff
  • sideBarSectionHeader.background#0c0115
  • sideBarSectionHeader.border#4bdeff
  • sideBarSectionHeader.foreground#ff97bf
  • sideBarTitle.foreground#f6ff71
  • statusBar.background#0a000f
  • statusBar.border#4bdeff
  • statusBar.debuggingBackground#ff5dab
  • statusBar.debuggingForeground#0c0115
  • statusBar.foreground#ff97bf
  • tab.activeBackground#0c0115
  • tab.activeForeground#b5ff8a
  • tab.border#443152dd
  • tab.inactiveBackground#0a000f
  • tab.inactiveForeground#d49efdf7
  • terminal.ansiBlack#0c0115
  • terminal.ansiBlue#4bdeff
  • terminal.ansiBrightBlack#1a0d26
  • terminal.ansiBrightBlue#94e2ff
  • terminal.ansiBrightCyan#b0fff8
  • terminal.ansiBrightGreen#c2ff9f
  • terminal.ansiBrightMagenta#f67fba
  • terminal.ansiBrightRed#f67fba
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff185
  • terminal.ansiCyan#7efff5
  • terminal.ansiGreen#b5ff8a
  • terminal.ansiMagenta#ff65b0
  • terminal.ansiRed#ff65b0
  • terminal.ansiWhite#fcffff
  • terminal.ansiYellow#f6ff71
  • terminal.background#000214
  • terminal.foreground#fcffff
  • terminalCursor.foreground#ff65b0
  • titleBar.activeBackground#0a000f
  • titleBar.activeForeground#ff97bf
  • titleBar.border#4bdeff
  • titleBar.inactiveBackground#0c0115
  • titleBar.inactiveForeground#fcffff
  • tree.indentGuidesStroke#0c0115

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d49efditalic
keyword, storage, storage.type, storage.modifier#ff97bf
string, constant.other.symbol#4bdeff
variable, entity.name.variable#fcffff
entity.name.function, support.function#4bdeff
entity.name.type, support.type, storage.type.class#f6ff71
constant.numeric, constant.language#b5ff8a
punctuation, meta.brace, meta.delimiter#b5ff8a
markup.heading, markup.heading entity.name.section, markup.heading.markdown#ff97bfbold
markup.bold, markup.bold.markdown#f6ff71bold
markup.italic, markup.italic.markdown#b5ff8aitalic
markup.quote, markup.quote.markdown#d49efd
markup.inline.raw, markup.fenced_code.block, markup.raw.block#4bdeff
punctuation.definition.heading, punctuation.definition.list.begin, markup.list.numbered, markup.list.unnumbered#ff97bf