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#4abfff
  • activityBar.background#0f1028
  • activityBar.foreground#71c7ff
  • activityBarBadge.background#4abfff
  • activityBarBadge.foreground#0b0c1a
  • badge.background#4abfff
  • badge.foreground#0b0c1a
  • button.background#1c274c
  • button.foreground#ffffff
  • button.hoverBackground#28395e
  • dropdown.background#101231
  • dropdown.border#1c274c
  • dropdown.foreground#d0d7de
  • editor.background#0b0c1a
  • editor.findMatchBackground#4abfff44
  • editor.findMatchHighlightBackground#4abfff22
  • editor.foreground#c5c7d1
  • editor.lineHighlightBackground#1c274c80
  • editor.lineHighlightBorder#1c274cc0
  • editor.selectionBackground#1c274caa
  • editor.selectionHighlightBackground#1c274c66
  • editorBracketMatch.background#4abfff33
  • editorBracketMatch.border#4abfff
  • editorCursor.foreground#4abfff
  • editorGroupHeader.tabsBackground#0b0c1a
  • editorIndentGuide.activeBackground#2c3b5a88
  • editorIndentGuide.background#2c3b5a44
  • editorLineNumber.activeForeground#4abfff
  • editorLineNumber.foreground#42537a
  • editorWhitespace.foreground#2c3b5a
  • focusBorder#4abfff
  • gitDecoration.conflictingResourceForeground#ffe66b
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.modifiedResourceForeground#4abfff
  • gitDecoration.untrackedResourceForeground#00ffa5
  • input.background#101231
  • input.border#1c274c
  • input.foreground#d0d7de
  • input.placeholderForeground#42537a
  • inputOption.activeBorder#4abfff
  • list.activeSelectionBackground#1c274c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1c274c
  • list.highlightForeground#4abfff
  • list.hoverBackground#1c274c66
  • minimap.background#0b0c1a
  • minimapSlider.activeBackground#4abfff66
  • minimapSlider.background#4abfff22
  • minimapSlider.hoverBackground#4abfff44
  • panel.background#0b0c1a
  • panel.border#1c274c
  • panelTitle.activeBorder#4abfff
  • panelTitle.activeForeground#4abfff
  • panelTitle.inactiveForeground#a8b8c8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4abfff88
  • scrollbarSlider.background#42537a44
  • scrollbarSlider.hoverBackground#42537a88
  • sideBar.background#101231
  • sideBar.foreground#a8b8c8
  • sideBarSectionHeader.background#0f1028
  • sideBarSectionHeader.foreground#4abfff
  • sideBarTitle.foreground#71c7ff
  • statusBar.background#14173f
  • statusBar.debuggingBackground#4abfff
  • statusBar.foreground#d0d7de
  • statusBar.noFolderBackground#0f1028
  • statusBarItem.hoverBackground#212656
  • tab.activeBackground#14173f
  • tab.activeBorder#4abfff
  • tab.activeForeground#ffffff
  • tab.border#0b0c1a
  • tab.inactiveBackground#101231
  • tab.inactiveForeground#a8b8c8
  • terminal.ansiBlue#4abfff
  • terminal.ansiBrightBlue#7abfff
  • terminal.ansiBrightCyan#8fdfff
  • terminal.ansiBrightGreen#9ef8c3
  • terminal.ansiBrightMagenta#c8afff
  • terminal.ansiBrightRed#ff8b8b
  • terminal.ansiBrightYellow#fff68b
  • terminal.ansiCyan#71c7ff
  • terminal.ansiGreen#00ffa5
  • terminal.ansiMagenta#a88fff
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#ffe66b
  • terminal.background#0b0c1a
  • terminal.foreground#d0d7de
  • titleBar.activeBackground#0f1028
  • titleBar.activeForeground#d0d7de
  • titleBar.inactiveBackground#0b0c1a
  • titleBar.inactiveForeground#a8b8c8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template#00FFCC
keyword, storage.type, storage.modifier#00B0FFbold
keyword.operator, punctuation.accessor#66D9EF
variable, variable.other#E0E0E0
variable.parameter#A88FFFitalic
entity.name.function, support.function#66D9EF
meta.function-call#A8B8C8
entity.name.class, entity.name.type.class, support.class#8FB8FFbold
entity.name.type, support.type#8FB8FF
entity.name.type.interface#66D9EFitalic
constant.numeric#FF9B6B
constant, constant.language, constant.character#FFB86B
constant.language.boolean#FF9B6Bbold
variable.other.property, support.variable.property#A8B8C8
meta.object-literal.key#66D9EF
entity.name.tag, punctuation.definition.tag#00B0FF
entity.other.attribute-name#A88FFFitalic
punctuation, meta.brace#66D9EF
string.regexp#FF9B6B
constant.character.escape#A88FFF
meta.decorator, punctuation.decorator#FFE66B
invalid, invalid.illegal#FF6B6Bstrikethrough
markup.heading, entity.name.section#00B0FFbold
markup.bold#FFB86Bbold
markup.italic#A88FFFitalic
markup.underline.link#66D9EF
markup.inline.raw, markup.fenced_code#00FFCC
support.type.property-name.json#00B0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE66B
support.type.property-name.css#66D9EF
support.constant.property-value.css#00FFCC