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#070c10
  • activityBar.border#1a2530
  • activityBar.foreground#60a0d0
  • activityBar.inactiveForeground#3a5060
  • activityBarBadge.background#3a7ab0
  • activityBarBadge.foreground#0d1117
  • badge.background#3a7ab0
  • badge.foreground#0d1117
  • button.background#2a5a8a
  • button.foreground#e0f0ff
  • button.hoverBackground#3a6a9a
  • editor.background#0d1117
  • editor.findMatchBackground#3a6a9a80
  • editor.findMatchHighlightBackground#3a6a9a40
  • editor.foreground#b0c4d8
  • editor.inactiveSelectionBackground#2a4a6a40
  • editor.lineHighlightBackground#161d26
  • editor.selectionBackground#2a4a6a80
  • editor.selectionHighlightBackground#2a4a6a40
  • editor.wordHighlightBackground#2a4a6a40
  • editor.wordHighlightStrongBackground#2a4a6a60
  • editorBracketMatch.background#2a4a6a40
  • editorBracketMatch.border#5a8ab0
  • editorCursor.foreground#60a0d0
  • editorGroupHeader.tabsBackground#090e13
  • editorIndentGuide.activeBackground#3a5a7a
  • editorIndentGuide.background#1e2830
  • editorLineNumber.activeForeground#6a8aaa
  • editorLineNumber.foreground#3a4a5a
  • editorWhitespace.foreground#1e2830
  • focusBorder#3a7ab0
  • input.background#111820
  • input.border#2a3a4a
  • input.foreground#b0c4d8
  • input.placeholderForeground#3a5060
  • inputOption.activeBackground#1e3048
  • inputOption.activeBorder#3a7ab0
  • list.activeSelectionBackground#1e3048
  • list.activeSelectionForeground#80c0e8
  • list.focusBackground#1e3048
  • list.highlightForeground#60a0d0
  • list.hoverBackground#161d26
  • list.inactiveSelectionBackground#161d26
  • panel.background#090e13
  • panel.border#1a2530
  • panelTitle.activeBorder#3a7ab0
  • panelTitle.activeForeground#60a0d0
  • panelTitle.inactiveForeground#3a5060
  • scrollbarSlider.activeBackground#4a7ab0a0
  • scrollbarSlider.background#2a4a6a60
  • scrollbarSlider.hoverBackground#3a6a9a80
  • sideBar.background#090e13
  • sideBar.border#1a2530
  • sideBar.foreground#8aa0b8
  • sideBarSectionHeader.background#111820
  • sideBarSectionHeader.foreground#90b0c8
  • sideBarTitle.foreground#70a0c8
  • statusBar.background#1a3a5a
  • statusBar.foreground#b0c4d8
  • statusBarItem.hoverBackground#2a4a6a
  • statusBarItem.remoteBackground#0a2a4a
  • statusBarItem.remoteForeground#90c0e0
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#3a7ab0
  • tab.activeForeground#80c0e8
  • tab.border#1a2530
  • tab.inactiveBackground#090e13
  • tab.inactiveForeground#4a6070
  • terminal.ansiBlue#5090cc
  • terminal.ansiCyan#40b0c0
  • terminal.ansiGreen#50a080
  • terminal.ansiMagenta#9070b0
  • terminal.ansiRed#cc4455
  • terminal.ansiWhite#b0c4d8
  • terminal.ansiYellow#aaa040
  • terminal.background#090e13
  • terminal.foreground#b0c4d8
  • titleBar.activeBackground#070c10
  • titleBar.activeForeground#b0c4d8
  • titleBar.border#1a2530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8898italic
keyword, storage.type, storage.modifier#60b0e8bold
keyword.control#80d0ffbold
string, string.quoted#60d8d0
constant.character.escape, string.regexp#80f0e8
constant.numeric, constant.language, constant.other#b0a8f8
entity.name.function, meta.function-call entity.name.function#a0d8f8
variable.parameter#80b8d8italic
variable, variable.other#b0c8e0
entity.name.type, entity.name.class, support.class#e8d080bold
entity.name.interface, entity.other.inherited-class#d8c060italic
variable.other.property, support.type.property-name#c8d8e8
keyword.operator#5090c8
punctuation#7090a8
entity.name.tag#60a8d8
entity.other.attribute-name#60d0c8
invalid#ff4466underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#80d0ffbold
meta.structure.dictionary.value.json string.quoted, string.value.json#60d8d0
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f0b060bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#a0d8f8
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme