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.background#1E1622
  • activityBar.foreground#FF4242
  • activityBar.inactiveForeground#6E5C82
  • activityBarBadge.background#8B1F1F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#8B1F1F
  • badge.foreground#FFFFFF
  • button.background#8B1F1F
  • button.foreground#FFFFFF
  • button.hoverBackground#A52727
  • dropdown.background#2C2235
  • dropdown.border#3D2E4D
  • dropdown.foreground#D8D2E3
  • editor.background#1A1420
  • editor.foreground#E6E1EA
  • editor.lineHighlightBackground#251B2F
  • editor.selectionBackground#4D3E5D55
  • editor.wordHighlightBackground#392B47AA
  • editorCursor.foreground#9F87FF
  • editorGroup.border#8B1F1F
  • editorGroup.dropBackground#6E5C82
  • editorGroupHeader.tabsBackground#2C2235
  • focusBorder#8B1F1F
  • input.background#2C2235
  • input.border#3D2E4D
  • input.foreground#D8D2E3
  • list.activeSelectionBackground#392B47
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#3D2E4D
  • list.hoverForeground#D8D2E3
  • list.inactiveSelectionBackground#2C2235
  • list.inactiveSelectionForeground#D8D2E3
  • menu.background#2C2235
  • menu.border#3D2E4D
  • menu.foreground#D8D2E3
  • menu.selectionBackground#8B1F1F
  • menu.selectionForeground#FFFFFF
  • notifications.background#2C2235
  • peekView.border#8B1F1F
  • peekViewEditor.background#1A1420
  • peekViewResult.background#2C2235
  • pickerGroup.border#3D2E4D
  • pickerGroup.foreground#FFFFFF
  • scrollbar.shadow#1E1622
  • scrollbarSlider.activeBackground#6E5C82
  • scrollbarSlider.background#4D3E5D
  • scrollbarSlider.hoverBackground#8B1F1F
  • sideBar.background#1E1622
  • sideBar.border#8B1F1F
  • sideBar.foreground#D8D2E3
  • sideBarSectionHeader.background#2C2235
  • sideBarSectionHeader.foreground#D8D2E3
  • sideBarTitle.foreground#A374E7
  • statusBar.background#2C2235
  • statusBar.border#8B1F1F
  • statusBar.debuggingBackground#3D2E4D
  • statusBar.foreground#D8D2E3
  • statusBar.noFolderBackground#2C2235
  • statusBarItem.activeBackground#2C2235
  • statusBarItem.hoverBackground#4D3E5D
  • statusBarItem.prominentBackground#3D2E4D
  • statusBarItem.prominentForeground#D8D2E3
  • tab.activeBackground#392B47
  • tab.activeForeground#FFFFFF
  • tab.border#8B1F1F
  • tab.hoverBackground#2C2235
  • tab.inactiveBackground#1E1622
  • tab.inactiveForeground#6E5C82
  • tab.lastPinnedBorder#A374E7
  • tab.unfocusedActiveForeground#6E5C82
  • tab.unfocusedHoverForeground#6E5C82
  • tab.unfocusedInactiveForeground#4D3E5D
  • terminal.ansiBlack#2C2235
  • terminal.ansiBlue#7F54F6
  • terminal.ansiBrightBlack#6E5C82
  • terminal.ansiBrightBlue#9574FF
  • terminal.ansiBrightCyan#74C4FF
  • terminal.ansiBrightGreen#B5A3FF
  • terminal.ansiBrightMagenta#CA5BF7
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#EBD194
  • terminal.ansiCyan#8B1F1F
  • terminal.ansiGreen#9F87FF
  • terminal.ansiMagenta#BA3BE7
  • terminal.ansiRed#FF4242
  • terminal.ansiWhite#E6E1EA
  • terminal.ansiYellow#E7C374
  • terminal.background#1A1420
  • terminal.foreground#D8D2E3
  • terminal.selectionBackground#392B47
  • terminal.selectionForeground#FFFFFF
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#9F87FF
  • titleBar.activeBackground#2C2235
  • titleBar.activeForeground#D8D2E3
  • titleBar.border#8B1F1F
  • titleBar.inactiveBackground#1E1622
  • titleBar.inactiveForeground#6E5C82
  • walkThrough.embeddedEditorBackground#1A1420

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#BA3BE7bold
storage.type#9F54F6italic
constant.numeric#E7C374bold
entity.name.class#54B4F6italic bold
entity.name.function#FF4242—
variable, variable.parameter#C4B6E3—
variable.other#D8C6FF—
keyword.operator#CF1F1Fbold
storage.modifier#FF7EE3italic
comment#6E5C82italic
string#7EDEFF—
string.quoted.double.json#E7C374—
punctuation#D63030—
invalid, invalid.illegal#FF2D2D—
entity.name.tag#54B4F6bold
meta.tag.attributes#C4B6E3—
entity.name.section.markdown#E7C374—
heading.markdown#FF4242bold
markup.bold.markdown, markup.bold#7EDEFFbold
markup.italic.markdown, markup.italic#7EDEFFitalic
variable.language#FF6B6Bitalic
meta.property-value#E7C374—
entity.other.attribute-name.pseudo-class#FF92DF—
meta.function-call.generic#B71C1Cbold
entity.other.inherited-class#9F87FFitalic
constant.language#FF7EE3bold
support.function#54B4F6—
support.type#FF4D4Ditalic
support.type.property-name#9F87FF—
support.type.property-name.json#7EDEFF—
meta.object-literal.key#FF6B6B—
entity.name.namespace#54B4F6italic
keyword.control#CF1F1Fbold
support.class#E7C374bold