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#9bff2d
  • activityBar.background#09001b
  • activityBar.border#1a0c37
  • activityBar.foreground#f9ff58
  • activityBarBadge.background#9bff2d
  • activityBarBadge.foreground#09001b
  • badge.background#9bff2d
  • badge.foreground#09001b
  • button.background#9bff2d
  • button.foreground#09001b
  • button.hoverBackground#c1ff66
  • chat.requestBackground#0f022a
  • chat.slashCommandBackground#1e0f3b
  • dropdown.background#0f022a
  • dropdown.border#9bff2d66
  • editor.background#0f022a
  • editor.foreground#f4f3f8
  • editor.inactiveSelectionBackground#1e0a2429
  • editor.lineHighlightBackground#0f022a
  • editor.selectionBackground#1a0a39
  • editorCursor.foreground#9bff2d
  • editorGroup.border#0f022a
  • editorGroupHeader.noTabsBackground#0f022a
  • editorGroupHeader.tabsBackground#0f022a
  • editorLineNumber.activeForeground#9bff2d
  • editorLineNumber.foreground#dd94ff
  • editorWhitespace.foreground#dd94ff
  • focusBorder#9bff2d66
  • input.background#0f022a
  • input.border#9bff2d66
  • input.foreground#f4f3f8
  • input.placeholderForeground#f9e7ff
  • list.activeSelectionBackground#1e0f3b
  • list.activeSelectionForeground#f4f3f8
  • list.dropBackground#9bff2d44
  • list.focusBackground#2e2049
  • list.hoverBackground#1e0f3b
  • list.inactiveSelectionBackground#0f022a
  • menu.background#0f022a
  • menu.foreground#f4f3f8
  • menu.selectionBackground#1e0f3b
  • menubar.selectionBackground#1e0f3baa
  • panel.background#0f022a
  • panel.border#0f022a
  • panelTitle.activeForeground#f4f3f8
  • panelTitle.inactiveForeground#dd94ff
  • peekView.border#9bff2d
  • peekViewEditor.background#0f022a
  • peekViewResult.background#0f022a
  • selection.background#0f022a
  • sideBar.background#09001b
  • sideBar.border#0f022a
  • sideBar.foreground#f4f3f8
  • sideBarSectionHeader.background#0f022a
  • sideBarSectionHeader.border#0f022a
  • sideBarSectionHeader.foreground#9bff2d
  • sideBarTitle.foreground#fe4ea9
  • statusBar.background#09001b
  • statusBar.border#0f022a
  • statusBar.debuggingBackground#4de5ff
  • statusBar.debuggingForeground#09001b
  • statusBar.foreground#f4f3f8
  • tab.activeBackground#0f022a
  • tab.activeBorder#fe4ea9
  • tab.activeForeground#f4f3f8
  • tab.border#0f022a
  • tab.inactiveBackground#09001b
  • tab.inactiveForeground#dd94ff
  • terminal.ansiBlack#09001b
  • terminal.ansiBlue#4de5ff
  • terminal.ansiBrightBlack#24022a
  • terminal.ansiBrightBlue#8ff1ff
  • terminal.ansiBrightCyan#97fff8
  • terminal.ansiBrightGreen#c4ff73
  • terminal.ansiBrightMagenta#ffa0ff
  • terminal.ansiBrightRed#ff7aad
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe892
  • terminal.ansiCyan#61fff0
  • terminal.ansiGreen#9bff2d
  • terminal.ansiMagenta#fe4ea9
  • terminal.ansiRed#ff4d85
  • terminal.ansiWhite#f4f3f8
  • terminal.ansiYellow#f9ff58
  • terminal.background#09001b
  • terminal.foreground#f4f3f8
  • terminalCursor.foreground#9bff2d
  • titleBar.activeBackground#0e0225
  • titleBar.activeForeground#f4f3f8
  • titleBar.border#0f022a
  • titleBar.inactiveBackground#09001b
  • titleBar.inactiveForeground#dd94ff
  • tree.indentGuidesStroke#43375b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#99ff2dd4italic
keyword, storage, storage.type, storage.modifier#fe4ea9—
string, constant.other.symbol#9bff2d—
variable, entity.name.variable#f4f3f8—
entity.name.function, support.function#4de5ff—
entity.name.type, support.type, storage.type.class#f9ff58—
constant.numeric, constant.language#ffc169—
punctuation, meta.brace, meta.delimiter#f4f3f8—
markup.heading, markup.heading entity.name.section, markup.heading.markdown#9bff2dbold
markup.bold, markup.bold.markdown#f9ff58bold
markup.italic, markup.italic.markdown#4de5ffitalic
markup.quote, markup.quote.markdown#dd94ff—
markup.inline.raw, markup.fenced_code.block, markup.raw.block#61fff0—
punctuation.definition.heading, punctuation.definition.list.begin, markup.list.numbered, markup.list.unnumbered#fe4ea9—