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#9dff00
  • activityBar.background#00070b
  • activityBar.border#9dff00
  • activityBar.foreground#f8fff4
  • activityBarBadge.background#ff5ac6
  • activityBarBadge.foreground#00070b
  • badge.background#ff5ac6
  • badge.foreground#021013
  • button.background#9dff00
  • button.foreground#021013
  • button.hoverBackground#c0ff4f
  • chat.requestBackground#6aac0033
  • chat.slashCommandBackground#10311f
  • dropdown.background#06211a
  • dropdown.border#9dff0088
  • editor.background#01080d
  • editor.foreground#f8fff4
  • editor.inactiveSelectionBackground#0c240d2a
  • editor.lineHighlightBackground#071720
  • editor.selectionBackground#12320f
  • editorCursor.foreground#9dff00
  • editorGroup.border#9dff00
  • editorGroupHeader.noTabsBackground#01080d
  • editorGroupHeader.tabsBackground#01080d
  • editorLineNumber.activeForeground#9dff00
  • editorLineNumber.foreground#58705a
  • editorWhitespace.foreground#314438
  • focusBorder#9dff0088
  • input.background#06211a
  • input.border#9dff0088
  • input.foreground#f8fff4
  • input.placeholderForeground#c9f0cd
  • list.activeSelectionBackground#6aac0033
  • list.activeSelectionForeground#f8fff4
  • list.dropBackground#9dff0044
  • list.focusBackground#18422d
  • list.hoverBackground#134434
  • list.inactiveSelectionBackground#071f16
  • menu.background#02171f
  • menu.foreground#f8fff4
  • menu.selectionBackground#10311f
  • menubar.selectionBackground#10311faa
  • panel.background#02171f
  • panel.border#9dff00
  • panelTitle.activeForeground#f2ff39
  • panelTitle.inactiveForeground#bde3c4
  • peekView.border#9dff00
  • peekViewEditor.background#01080d
  • peekViewResult.background#021013
  • selection.background#12320f
  • sideBar.background#021013
  • sideBar.border#9dff00
  • sideBar.foreground#f8fff4
  • sideBarSectionHeader.background#04171c
  • sideBarSectionHeader.border#9dff00
  • sideBarSectionHeader.foreground#44ffe9
  • sideBarTitle.foreground#f2ff39
  • statusBar.background#021013
  • statusBar.border#9dff00
  • statusBar.debuggingBackground#ff5ac6
  • statusBar.debuggingForeground#021013
  • statusBar.foreground#f8fff4
  • tab.activeBackground#04171c
  • tab.activeBorder#f2ff39
  • tab.activeForeground#f8fff4
  • tab.border#9dff00
  • tab.inactiveBackground#00070b
  • tab.inactiveForeground#bde3c4
  • terminal.ansiBlack#010a0f
  • terminal.ansiBlue#38c1ff
  • terminal.ansiBrightBlack#071720
  • terminal.ansiBrightBlue#7ad7ff
  • terminal.ansiBrightCyan#8cfff3
  • terminal.ansiBrightGreen#c8ff6d
  • terminal.ansiBrightMagenta#ff91dd
  • terminal.ansiBrightRed#ff8891
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff5a3
  • terminal.ansiCyan#44ffe9
  • terminal.ansiGreen#9dff00
  • terminal.ansiMagenta#ff5ac6
  • terminal.ansiRed#ff5c66
  • terminal.ansiWhite#f8fff4
  • terminal.ansiYellow#f2ff39
  • terminal.background#010a0f
  • terminal.foreground#f8fff4
  • terminalCursor.foreground#f2ff39
  • titleBar.activeBackground#021013
  • titleBar.activeForeground#f8fff4
  • titleBar.border#9dff00
  • titleBar.inactiveBackground#021013
  • titleBar.inactiveForeground#c9f0cd
  • tree.indentGuidesStroke#3a6044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d9271italic
keyword, storage, storage.type, storage.modifier#ff5ac6—
string, constant.other.symbol#9dff00—
variable, entity.name.variable#f8fff4—
entity.name.function, support.function#44ffe9—
entity.name.type, support.type, storage.type.class#f2ff39—
constant.numeric, constant.language#ff8891—
punctuation, meta.brace, meta.delimiter#f8fff4—
markup.heading, markup.heading entity.name.section, markup.heading.markdown#9dff00bold
markup.bold, markup.bold.markdown#f2ff39bold
markup.italic, markup.italic.markdown#44ffe9italic
markup.quote, markup.quote.markdown#bde3c4—
markup.inline.raw, markup.fenced_code.block, markup.raw.block#38c1ff—
punctuation.definition.heading, punctuation.definition.list.begin, markup.list.numbered, markup.list.unnumbered#ff5ac6—