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#000000
  • activityBar.foreground#E8F1FF
  • activityBarBadge.background#3F77F0
  • activityBarBadge.foreground#000000
  • badge.background#1A4D64
  • badge.foreground#F9FBFF
  • button.background#1A4D64
  • button.foreground#F9FBFF
  • button.hoverBackground#21627F
  • editor.background#000000
  • editor.foreground#E8F1FF
  • editor.inactiveSelectionBackground#112A3A
  • editor.lineHighlightBackground#0A1018
  • editor.selectionBackground#133547
  • editor.selectionHighlightBackground#14344A
  • editor.wordHighlightBackground#0F3A5288
  • editor.wordHighlightStrongBackground#1A5D7E66
  • editorBracketMatch.background#1F3F5666
  • editorBracketMatch.border#3EE6FFAA
  • editorCursor.foreground#3EE6FF
  • editorError.foreground#FF4F73
  • editorGroup.border#101A2B
  • editorGroup.dropBackground#1A4D6444
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#33D876
  • editorGutter.deletedBackground#FF4F73
  • editorGutter.modifiedBackground#3F77F0
  • editorIndentGuide.activeBackground#1F3C52
  • editorIndentGuide.background#111C2A
  • editorInfo.foreground#3EE6FF
  • editorLineNumber.foreground#505C70
  • editorWarning.foreground#F0C54A
  • editorWhitespace.foreground#0F1A28
  • list.activeSelectionBackground#12243A
  • list.activeSelectionForeground#F3F8FF
  • list.focusBackground#101F33
  • list.hoverBackground#08131E
  • list.hoverForeground#E8F1FF
  • panel.background#03070D
  • panel.border#101A2B
  • scrollbarSlider.activeBackground#233242AA
  • scrollbarSlider.background#23324255
  • scrollbarSlider.hoverBackground#23324288
  • sideBar.background#02070D
  • sideBar.foreground#B5C4DC
  • sideBarSectionHeader.background#050C14
  • sideBarSectionHeader.foreground#C7D4E9
  • sideBarTitle.foreground#91A5C2
  • statusBar.background#000000
  • statusBar.debuggingBackground#17485F
  • statusBar.debuggingForeground#E8F1FF
  • statusBar.foreground#91A5C2
  • tab.activeBackground#050C14
  • tab.activeForeground#F9FBFF
  • tab.hoverBackground#091422
  • tab.inactiveBackground#02070D
  • tab.inactiveForeground#6E7C92
  • terminal.ansiBlack#02070D
  • terminal.ansiBlue#3F77F0
  • terminal.ansiBrightBlack#172030
  • terminal.ansiBrightBlue#5C8FF3
  • terminal.ansiBrightCyan#3BE9F7
  • terminal.ansiBrightGreen#53E38A
  • terminal.ansiBrightMagenta#A897FF
  • terminal.ansiBrightRed#FF6A8A
  • terminal.ansiBrightWhite#F9FBFF
  • terminal.ansiBrightYellow#F5D562
  • terminal.ansiCyan#16D5EE
  • terminal.ansiGreen#33D876
  • terminal.ansiMagenta#8B7CFF
  • terminal.ansiRed#FF4F73
  • terminal.ansiWhite#E8F1FF
  • terminal.ansiYellow#F0C54A
  • terminal.background#000000
  • terminal.foreground#E8F1FF
  • terminalCursor.foreground#3EE6FF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#D7E2F7
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#7F8B9F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#58667Aitalic
string, constant.other.symbol#6FE8AF
string.regexp#3BE9F7
keyword, storage.type, storage.modifier#5C8FF3
entity.name.function, support.function#33D4FF
entity.name.type, support.type, support.class#77A2FF
variable, meta.object-literal.key, support.variable#E8F1FF
constant.numeric#F3B16A
constant.language, support.constant#8F7CFF
entity.name.tag, support.class.component#3EE6FF
punctuation, meta.brace, meta.delimiter#A4B2CC
invalid, invalid.illegal#FFFFFF
markup.bold#5C8FF3bold
markup.italic#6FE8AFitalic
markup.heading#3EE6FF
markup.quote#58667A
markup.inline.raw#3BE9F7