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#060704
  • activityBar.border#161810
  • activityBar.foreground#a0b840
  • activityBar.inactiveForeground#2a2c18
  • activityBarBadge.background#607830
  • activityBarBadge.foreground#0c0f08
  • badge.background#607830
  • badge.foreground#0c0f08
  • button.background#4a6028
  • button.foreground#d8d0a8
  • button.hoverBackground#5a7030
  • editor.background#0c0f08
  • editor.findMatchBackground#6a7a3080
  • editor.findMatchHighlightBackground#6a7a3040
  • editor.foreground#b0a888
  • editor.inactiveSelectionBackground#4a5a2040
  • editor.lineHighlightBackground#161810
  • editor.selectionBackground#4a5a2080
  • editor.selectionHighlightBackground#4a5a2040
  • editor.wordHighlightBackground#4a5a2040
  • editor.wordHighlightStrongBackground#4a5a2060
  • editorBracketMatch.background#4a5a2040
  • editorBracketMatch.border#7a8838
  • editorCursor.foreground#a0b840
  • editorGroupHeader.tabsBackground#090b06
  • editorIndentGuide.activeBackground#4a5030
  • editorIndentGuide.background#181a10
  • editorLineNumber.activeForeground#7a7840
  • editorLineNumber.foreground#3a3820
  • editorWhitespace.foreground#181a10
  • focusBorder#607830
  • input.background#121408
  • input.border#2a2c18
  • input.foreground#b0a888
  • input.placeholderForeground#3a3820
  • list.activeSelectionBackground#1a1e10
  • list.activeSelectionForeground#c0c858
  • list.highlightForeground#a0b840
  • list.hoverBackground#161810
  • panel.background#090b06
  • panel.border#161810
  • panelTitle.activeBorder#607830
  • panelTitle.activeForeground#a0b840
  • scrollbarSlider.activeBackground#7a8838a0
  • scrollbarSlider.background#4a5a2060
  • scrollbarSlider.hoverBackground#6a7a3080
  • sideBar.background#090b06
  • sideBar.border#161810
  • sideBar.foreground#908870
  • sideBarSectionHeader.background#121408
  • sideBarSectionHeader.foreground#a09878
  • sideBarTitle.foreground#a0b840
  • statusBar.background#3a4820
  • statusBar.foreground#c0b890
  • statusBarItem.hoverBackground#4a5828
  • statusBarItem.remoteBackground#283010
  • statusBarItem.remoteForeground#b0a870
  • tab.activeBackground#0c0f08
  • tab.activeBorderTop#607830
  • tab.activeForeground#c0c858
  • tab.border#161810
  • tab.inactiveBackground#090b06
  • tab.inactiveForeground#4a4830
  • terminal.ansiBlue#507080
  • terminal.ansiCyan#508870
  • terminal.ansiGreen#608040
  • terminal.ansiRed#aa4433
  • terminal.ansiWhite#b0a888
  • terminal.ansiYellow#a09040
  • terminal.background#090b06
  • terminal.foreground#b0a888
  • titleBar.activeBackground#060704
  • titleBar.activeForeground#b0a888
  • titleBar.border#161810

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#787858italic
keyword, storage.type, storage.modifier#b8cc48bold
keyword.control#d8e860bold
string, string.quoted#c89860
constant.character.escape, string.regexp#e0b878
constant.numeric, constant.language, constant.other#e8e890
entity.name.function, meta.function-call entity.name.function#d8d080
variable.parameter#b8a868italic
variable, variable.other#c8b888
entity.name.type, entity.name.class, support.class#d8e060bold
entity.name.interface, entity.other.inherited-class#c8d050italic
variable.other.property, support.type.property-name#d8c8a0
keyword.operator#a0a838
punctuation#888858
entity.name.tag#a8a840
entity.other.attribute-name#d8c858
invalid#ff4433underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#d8e860bold
meta.structure.dictionary.value.json string.quoted, string.value.json#c89860
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#a0e8d8bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#d8d080
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme