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#FFD700
  • activityBar.activeFocusBorder#FFD700
  • activityBar.activeItemBackground#3E445E
  • activityBar.background#1B1D2B
  • activityBar.border#2F3244
  • activityBar.foreground#C0CAF5
  • activityBar.hoverBackground#2C2F41
  • activityBar.inactiveForeground#C0CAF5
  • activityBar.selectionBackground#3E445E
  • activityBar.selectionForeground#C0CAF5
  • badge.background#FFD700
  • badge.foreground#1B1D2B
  • banner.background#FFFFFF
  • button.background#050517
  • button.border#FFFFFF
  • button.foreground#FFFFFF
  • editor.background#000d1a
  • editor.foreground#D9E0EE
  • editor.inactiveSelectionBackground#343A40
  • editor.lineHighlightBackground#2A2A37
  • editor.selectionBackground#FFD70040
  • editorCursor.foreground#faeb69
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground#CBA6F7
  • editorIndentGuide.background#b3b3ff
  • editorLineNumber.foreground#4da6ff
  • list.activeSelectionBackground#3E445E
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#2C2F41
  • list.inactiveSelectionBackground#2B2D3A
  • list.inactiveSelectionForeground#C0CAF5
  • notifications.background#2C2F41AA
  • notifications.border#3E445E
  • notifications.errorBackground#FF6E6EAA
  • notifications.errorForeground#1B1D2B
  • notifications.foreground#C0CAF5
  • notifications.infoBackground#3E445EAA
  • notifications.infoForeground#FFFFFF
  • notifications.successBackground#B9F27C88
  • notifications.successForeground#1B1D2B
  • notifications.warningBackground#FFD700AA
  • notifications.warningForeground#1B1D2B
  • sideBar.background#1B1D2B
  • sideBar.foreground#C0CAF5
  • sideBarSectionHeader.background#1F2233
  • sideBarSectionHeader.foreground#82AAFF
  • statusBar.background#2C2F41
  • statusBar.border#3E445E
  • statusBar.foreground#C0CAF5
  • statusBar.noFolderBackground#3E445E
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#FFD700
  • statusBarItem.hoverBackground#FFEB95
  • statusBarItem.hoverForeground#000000
  • statusBarItem.prominentBackground#FFD700
  • statusBarItem.prominentHoverBackground#FFEB95
  • tab.activeBackground#1E1E2E
  • tab.activeForeground#FFFFFF
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6E738D
  • tab.selectedBorderTop#ccf2ff
  • terminal.ansiBlack#1A1B26
  • terminal.ansiBlue#89DDFF
  • terminal.ansiBrightBlack#5A5A5A
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#A3F7FF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#FF9CEB
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFEB95
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#B9F27C
  • terminal.ansiMagenta#D67AD2
  • terminal.ansiRed#FF6E6E
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FFD700
  • terminal.background#0F111A
  • terminal.foreground#C0CAF5
  • terminal.selectionBackground#44475A88
  • terminalCursor.foreground#FAD000
  • textLink.foreground#faeb69
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#D9E0EE
  • tree.indentGuidesStroke#2F3244

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7086italic
keyword, storage.type#ffb3ffitalic
string, constant.other.symbol#A6E3A1
variable, identifier#FFCB6B
function, entity.name.function#89B4FA
constant.numeric, constant.language#F9E2AF
type, entity.name.type, support.type#00fff799bold italic
invalid, invalid.deprecated#FFFFFF
meta, meta.embedded#94E2D5
entity.name.tag.html#ff99ccbold
entity.other.attribute-name.html#7DDFFF
string.quoted.double.html, string.quoted.single.html#C3E88D
comment.block.html#5C6370italic
entity.name.tag.css#FFD700
support.type.property-name.css#7FDBCA
constant.numeric.css, constant.other.color.rgb-value.css#FFCB6B
keyword.other.unit.css#F78C6C
punctuation.definition.block.css#A6ACCD
keyword.control.js#C792EAbold
entity.name.function.js#82AAFF
variable.other.readwrite.js#F78C6C
string.quoted.double.js, string.quoted.single.js#C3E88D
constant.numeric.js, constant.language.boolean.js#FF5370
punctuation.definition.block.js, keyword.operator.js#89DDFF
🎨 Bhoot Theme by Bhoot Studio - VS Code Theme