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#4FD1C5
  • activityBar.background#0E1B2E
  • activityBar.border#00000000
  • activityBar.foreground#E3F6FF
  • activityBar.inactiveForeground#7A8DAA
  • activityBarBadge.background#7F5CF5
  • activityBarBadge.foreground#050814
  • badge.background#50C4ED
  • badge.foreground#050814
  • button.background#4FD1C5
  • button.foreground#050814
  • button.hoverBackground#50C4ED
  • dropdown.background#0B1624
  • dropdown.border#132B45
  • dropdown.foreground#D7E6F5
  • editor.background#050814
  • editor.findMatchBackground#FFC15E55
  • editor.findMatchBorder#FFC15E90
  • editor.findMatchHighlightBackground#FFC15E33
  • editor.foreground#D7E6F5
  • editor.hoverHighlightBackground#132B4580
  • editor.inactiveSelectionBackground#4FD1C530
  • editor.lineHighlightBackground#132B4570
  • editor.selectionBackground#4FD1C560
  • editor.selectionHighlightBackground#7F5CF52E
  • editor.wordHighlightBackground#4FD1C52E
  • editor.wordHighlightStrongBackground#7F5CF53A
  • editorBracketMatch.background#50C4ED33
  • editorBracketMatch.border#50C4ED90
  • editorCursor.foreground#4FD1C5
  • editorIndentGuide.activeBackground1#4FD1C560
  • editorIndentGuide.background1#132B4550
  • editorLineNumber.activeForeground#9DB8D5
  • editorLineNumber.foreground#2C415D
  • editorRuler.foreground#1D3047
  • editorWhitespace.foreground#1D3047
  • input.background#0B1624
  • input.border#132B45
  • input.foreground#E3F6FF
  • list.activeSelectionBackground#132B45
  • list.activeSelectionForeground#E3F6FF
  • list.dropBackground#7F5CF533
  • list.errorForeground#F05D5E
  • list.focusBackground#0F2136
  • list.hoverBackground#132B45B0
  • list.inactiveSelectionBackground#0F2136
  • list.warningForeground#FFC15E
  • minimap.background#050814
  • panel.background#050814
  • panel.border#132B45
  • panelTitle.activeBorder#4FD1C5
  • panelTitle.activeForeground#E3F6FF
  • panelTitle.inactiveForeground#7A8DAA
  • sideBar.background#0B1624
  • sideBar.border#132B45
  • sideBar.dropBackground#7F5CF533
  • sideBar.foreground#D7E6F5
  • sideBarSectionHeader.background#0E1B2E
  • sideBarTitle.foreground#E3F6FF
  • statusBar.background#050814
  • statusBar.border#0E1B2E
  • statusBar.debuggingBackground#FFC15E
  • statusBar.debuggingForeground#050814
  • statusBar.foreground#D7E6F5
  • statusBar.noFolderBackground#0E1B2E
  • tab.activeBackground#0E1B2E
  • tab.activeBorderTop#4FD1C5
  • tab.activeForeground#E3F6FF
  • tab.border#00000000
  • tab.hoverBackground#0F2136
  • tab.hoverForeground#E3F6FF
  • tab.inactiveBackground#050F1C
  • tab.inactiveForeground#7A8DAA
  • tab.unfocusedActiveBorderTop#4FD1C533
  • terminal.ansiBlack#0B1624
  • terminal.ansiBlue#50C4ED
  • terminal.ansiBrightBlack#2C415D
  • terminal.ansiBrightBlue#82E1FF
  • terminal.ansiBrightCyan#B5FFFC
  • terminal.ansiBrightGreen#84FFD4
  • terminal.ansiBrightMagenta#B2A3FF
  • terminal.ansiBrightRed#FF6B81
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD88A
  • terminal.ansiCyan#8DEBFF
  • terminal.ansiGreen#4FD1C5
  • terminal.ansiMagenta#7F5CF5
  • terminal.ansiRed#F05D5E
  • terminal.ansiWhite#D7E6F5
  • terminal.ansiYellow#FFC15E
  • terminal.background#050814
  • terminal.foreground#D7E6F5
  • terminalCursor.foreground#4FD1C5
  • titleBar.activeBackground#0E1B2E
  • titleBar.activeForeground#E3F6FF
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0B1624
  • titleBar.inactiveForeground#7A8DAA
  • window.activeBorder#4FD1C5
  • window.inactiveBorder#132B45

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7B93italic
keyword, storage.type, storage.modifier#7F5CF5bold
keyword.control#50C4ED—
entity.name.function, meta.function-call#4FD1C5—
support.function#8DEBFF—
entity.name.class, support.class, entity.name.type#8BA4FF—
variable, variable.other#E3F6FF—
variable.parameter#9DB8D5—
constant, constant.language#FFC15E—
constant.numeric#50C4ED—
string, string.quoted, string.template#84FFD4—
constant.character.escape, punctuation.definition.string#7F5CF5—
support.constant, support.variable#9BD3FF—
meta.decorator, entity.name.section#FFC15E—
entity.other.attribute-name#4FD1C5—
entity.name.tag, entity.name.tag.html, meta.tag#7F5CF5bold
markup.heading, markup.heading.setext#50C4ED—
markup.bold#E3F6FFbold
markup.italic#7F5CF5italic
markup.inline.raw, markup.fenced_code#E3F6FF—
markup.list#FFC15E—
markup.quote#9DB8D5—
constant.character.entity#4FD1C5—
punctuation.section.embedded#F05D5E—