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