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#0B111C
  • activityBar.foreground#E4EEFF
  • activityBarBadge.background#5B7CFF
  • activityBarBadge.foreground#0B111C
  • badge.background#2A4E6D
  • badge.foreground#F7FAFF
  • button.background#2A4E6D
  • button.foreground#F7FAFF
  • button.hoverBackground#33648C
  • editor.background#0D1220
  • editor.foreground#E4EEFF
  • editor.inactiveSelectionBackground#1A2A43
  • editor.lineHighlightBackground#151D30
  • editor.selectionBackground#213455
  • editor.selectionHighlightBackground#203858
  • editor.wordHighlightBackground#144A7088
  • editor.wordHighlightStrongBackground#266A9259
  • editorBracketMatch.background#25486A55
  • editorBracketMatch.border#45E0FFAA
  • editorCursor.foreground#45E0FF
  • editorError.foreground#FF6F98
  • editorGroup.border#192236
  • editorGroup.dropBackground#2A4E6D44
  • editorGroupHeader.tabsBackground#0D1626
  • editorGutter.addedBackground#47D988
  • editorGutter.deletedBackground#FF6F98
  • editorGutter.modifiedBackground#5B7CFF
  • editorIndentGuide.activeBackground#314562
  • editorIndentGuide.background#1D283B
  • editorInfo.foreground#45E0FF
  • editorLineNumber.foreground#4B5972
  • editorWarning.foreground#F3C955
  • editorWhitespace.foreground#1E293C
  • list.activeSelectionBackground#1E2F47
  • list.activeSelectionForeground#F3F8FF
  • list.focusBackground#1A2A41
  • list.hoverBackground#121C2C
  • list.hoverForeground#E4EEFF
  • panel.background#0D1220
  • panel.border#1C263A
  • scrollbarSlider.activeBackground#26354AAA
  • scrollbarSlider.background#26354A55
  • scrollbarSlider.hoverBackground#26354A88
  • sideBar.background#0D1626
  • sideBar.foreground#C3D1EA
  • sideBarSectionHeader.background#121C30
  • sideBarSectionHeader.foreground#D5DFF5
  • sideBarTitle.foreground#95AAC6
  • statusBar.background#0B111C
  • statusBar.debuggingBackground#2A4E6D
  • statusBar.debuggingForeground#E4EEFF
  • statusBar.foreground#95AAC6
  • tab.activeBackground#151D30
  • tab.activeForeground#F7FAFF
  • tab.hoverBackground#19233A
  • tab.inactiveBackground#0B111C
  • tab.inactiveForeground#727F99
  • terminal.ansiBlack#0D1220
  • terminal.ansiBlue#5B7CFF
  • terminal.ansiBrightBlack#1E273A
  • terminal.ansiBrightBlue#7690FF
  • terminal.ansiBrightCyan#62EAFF
  • terminal.ansiBrightGreen#64E79B
  • terminal.ansiBrightMagenta#C9A3FF
  • terminal.ansiBrightRed#FF8BAF
  • terminal.ansiBrightWhite#F7FAFF
  • terminal.ansiBrightYellow#F7D86F
  • terminal.ansiCyan#45E0FF
  • terminal.ansiGreen#47D988
  • terminal.ansiMagenta#B985FF
  • terminal.ansiRed#FF6F98
  • terminal.ansiWhite#E4EEFF
  • terminal.ansiYellow#F3C955
  • terminal.background#0D1220
  • terminal.foreground#E4EEFF
  • terminalCursor.foreground#45E0FF
  • titleBar.activeBackground#090E18
  • titleBar.activeForeground#D8E3F9
  • titleBar.inactiveBackground#090E18
  • titleBar.inactiveForeground#818DA6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E6D85italic
string, constant.other.symbol#64E79B
string.regexp#62EAFF
keyword, storage.type, storage.modifier#7C94FF
entity.name.function, support.function#45E0FF
entity.name.type, support.type, support.class#8BB4FF
variable, meta.object-literal.key, support.variable#E4EEFF
constant.numeric#F4BB6A
constant.language, support.constant#B985FF
entity.name.tag, support.class.component#45E0FF
support.constant.dom#F08E6A
support.function.dom#47D988
punctuation, meta.brace, meta.delimiter#A8B6D0
invalid, invalid.illegal#FFFFFF
markup.bold#7C94FFbold
markup.italic#64E79Bitalic
markup.heading#45E0FF
markup.quote#5E6D85
markup.inline.raw#62EAFF