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#04080c
  • activityBar.border#101820
  • activityBar.foreground#50c8b0
  • activityBar.inactiveForeground#183040
  • activityBarBadge.background#186878
  • activityBarBadge.foreground#080e14
  • badge.background#186878
  • badge.foreground#080e14
  • button.background#0e5868
  • button.foreground#c8eef0
  • button.hoverBackground#186878
  • editor.background#080e14
  • editor.findMatchBackground#207a8880
  • editor.findMatchHighlightBackground#207a8840
  • editor.foreground#a8c8d8
  • editor.inactiveSelectionBackground#1a5a6840
  • editor.lineHighlightBackground#101820
  • editor.selectionBackground#1a5a6880
  • editor.selectionHighlightBackground#1a5a6840
  • editor.wordHighlightBackground#1a5a6840
  • editor.wordHighlightStrongBackground#1a5a6860
  • editorBracketMatch.background#1a5a6840
  • editorBracketMatch.border#409898
  • editorCursor.foreground#60d8c0
  • editorGroupHeader.tabsBackground#060b10
  • editorIndentGuide.activeBackground#206878
  • editorIndentGuide.background#10181e
  • editorLineNumber.activeForeground#408898
  • editorLineNumber.foreground#1e3848
  • editorWhitespace.foreground#10181e
  • focusBorder#186878
  • input.background#0c1620
  • input.border#183848
  • input.foreground#a8c8d8
  • input.placeholderForeground#204858
  • list.activeSelectionBackground#0e1e2e
  • list.activeSelectionForeground#70e8d0
  • list.highlightForeground#50c8b0
  • list.hoverBackground#101820
  • panel.background#060b10
  • panel.border#101820
  • panelTitle.activeBorder#186878
  • panelTitle.activeForeground#50c8b0
  • scrollbarSlider.activeBackground#308898a0
  • scrollbarSlider.background#1a5a6860
  • scrollbarSlider.hoverBackground#207a8880
  • sideBar.background#060b10
  • sideBar.border#101820
  • sideBar.foreground#7098a8
  • sideBarSectionHeader.background#0c1620
  • sideBarSectionHeader.foreground#88b8c8
  • sideBarTitle.foreground#50c8b0
  • statusBar.background#0e4858
  • statusBar.foreground#a0d0d8
  • statusBarItem.hoverBackground#185868
  • statusBarItem.remoteBackground#083040
  • statusBarItem.remoteForeground#80c0c8
  • tab.activeBackground#080e14
  • tab.activeBorderTop#186878
  • tab.activeForeground#70e8d0
  • tab.border#101820
  • tab.inactiveBackground#060b10
  • tab.inactiveForeground#204858
  • terminal.ansiBlue#3888c0
  • terminal.ansiCyan#40c8b8
  • terminal.ansiGreen#40b898
  • terminal.ansiMagenta#7880b8
  • terminal.ansiRed#cc4466
  • terminal.ansiWhite#a8c8d8
  • terminal.ansiYellow#88b878
  • terminal.background#060b10
  • terminal.foreground#a8c8d8
  • titleBar.activeBackground#04080c
  • titleBar.activeForeground#a8c8d8
  • titleBar.border#101820

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#508898italic
keyword, storage.type, storage.modifier#50d8c0bold
keyword.control#70f8d8bold
string, string.quoted#60b8e0
constant.character.escape, string.regexp#80d8f8
constant.numeric, constant.language, constant.other#a8f8e8
entity.name.function, meta.function-call entity.name.function#90e8d8
variable.parameter#70c0d0italic
variable, variable.other#a8d0e0
entity.name.type, entity.name.class, support.class#80f8e0bold
entity.name.interface, entity.other.inherited-class#60e8c8italic
variable.other.property, support.type.property-name#c0e0e8
keyword.operator#40b0c0
punctuation#609898
entity.name.tag#50a8c8
entity.other.attribute-name#60d8c8
invalid#ff4466underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#70f8d8bold
meta.structure.dictionary.value.json string.quoted, string.value.json#70b8e0
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f8e898bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#90e8d8
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme