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#3A7DFF
  • activityBar.background#09131D
  • activityBar.foreground#3A7DFF
  • activityBarBadge.background#3A7DFF
  • activityBarBadge.foreground#0A0F20
  • badge.background#3A7DFF
  • badge.foreground#0A0F20
  • button.background#15273F
  • button.foreground#FFFFFF
  • button.hoverBackground#26446D
  • dropdown.background#09131D
  • dropdown.border#15273F
  • dropdown.foreground#B0C4D9
  • editor.background#0A0F20
  • editor.findMatchBackground#2F9C9F44
  • editor.findMatchHighlightBackground#2F9C9F22
  • editor.foreground#B0C4D9
  • editor.lineHighlightBackground#15273F80
  • editor.lineHighlightBorder#15273F40
  • editor.selectionBackground#3A7DFF55
  • editor.selectionHighlightBackground#3A7DFF33
  • editorBracketMatch.background#3A7DFF33
  • editorBracketMatch.border#3A7DFF
  • editorCursor.foreground#3A7DFF
  • editorGroupHeader.tabsBackground#0A0F20
  • editorIndentGuide.activeBackground#26446D88
  • editorIndentGuide.background#26446D44
  • editorLineNumber.activeForeground#3A7DFF
  • editorLineNumber.foreground#2F3E5A
  • editorWhitespace.foreground#26446D
  • focusBorder#3A7DFF
  • gitDecoration.conflictingResourceForeground#E5C96C
  • gitDecoration.deletedResourceForeground#D96C6C
  • gitDecoration.modifiedResourceForeground#3A7DFF
  • gitDecoration.untrackedResourceForeground#6CE0B5
  • input.background#09131D
  • input.border#15273F
  • input.foreground#B0C4D9
  • input.placeholderForeground#2F3E5A
  • inputOption.activeBorder#3A7DFF
  • list.activeSelectionBackground#15273F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#15273F
  • list.highlightForeground#3A7DFF
  • list.hoverBackground#15273F66
  • minimap.background#0A0F20
  • minimapSlider.activeBackground#3A7DFF66
  • minimapSlider.background#3A7DFF22
  • minimapSlider.hoverBackground#3A7DFF44
  • panel.background#0A0F20
  • panel.border#15273F
  • panelTitle.activeBorder#3A7DFF
  • panelTitle.activeForeground#3A7DFF
  • panelTitle.inactiveForeground#A0B3C8
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A7DFF88
  • scrollbarSlider.background#2F3E5A44
  • scrollbarSlider.hoverBackground#2F3E5A88
  • sideBar.background#09131D
  • sideBar.foreground#A0B3C8
  • sideBarSectionHeader.background#09131D
  • sideBarSectionHeader.foreground#3A7DFF
  • sideBarTitle.foreground#3A7DFF
  • statusBar.background#15273F
  • statusBar.debuggingBackground#3A7DFF
  • statusBar.foreground#B0C4D9
  • statusBar.noFolderBackground#09131D
  • statusBarItem.hoverBackground#26446D
  • tab.activeBackground#15273F
  • tab.activeBorder#3A7DFF
  • tab.activeForeground#FFFFFF
  • tab.border#0A0F20
  • tab.inactiveBackground#09131D
  • tab.inactiveForeground#A0B3C8
  • terminal.ansiBlue#3A7DFF
  • terminal.ansiBrightBlue#659FFF
  • terminal.ansiBrightCyan#5EE5D9
  • terminal.ansiBrightGreen#84F7B2
  • terminal.ansiBrightMagenta#E5A9FF
  • terminal.ansiBrightRed#FF9A9A
  • terminal.ansiBrightYellow#FFEA9A
  • terminal.ansiCyan#2F9C9F
  • terminal.ansiGreen#6CE0B5
  • terminal.ansiMagenta#C58BF2
  • terminal.ansiRed#D96C6C
  • terminal.ansiYellow#E5C96C
  • terminal.background#0A0F20
  • terminal.foreground#B0C4D9
  • titleBar.activeBackground#09131D
  • titleBar.activeForeground#B0C4D9
  • titleBar.inactiveBackground#0A0F20
  • titleBar.inactiveForeground#A0B3C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6574italic
string, string.quoted, string.template#A1C96A
keyword, storage.type, storage.modifier#5A9BD8bold
keyword.operator, punctuation.accessor#7AB8FF
variable, variable.other#C0D0E0
variable.parameter#D8C96Aitalic
entity.name.function, support.function#7AB8FF
meta.function-call#A8B8C8
entity.name.class, entity.name.type.class, support.class#8FB8FFbold
entity.name.type, support.type#8FB8FF
entity.name.type.interface#6EC8D8italic
constant.numeric#D89B6A
constant, constant.language, constant.character#D8C96A
constant.language.boolean#D89B6Abold
variable.other.property, support.variable.property#A8B8C8
meta.object-literal.key#7AB8FF
entity.name.tag, punctuation.definition.tag#5A9BD8
entity.other.attribute-name#C89BD8italic
punctuation, meta.brace#7AB8FF
string.regexp#D89B6A
constant.character.escape#C89BD8
meta.decorator, punctuation.decorator#D8C96A
invalid, invalid.illegal#D86A6Astrikethrough
markup.heading, entity.name.section#5A9BD8bold
markup.bold#D8C96Abold
markup.italic#C89BD8italic
markup.underline.link#6EC8D8
markup.inline.raw, markup.fenced_code#A1C96A
support.type.property-name.json#5A9BD8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D8C96A
support.type.property-name.css#7AB8FF
support.constant.property-value.css#6EC8D8