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#050a05
  • activityBar.border#121c12
  • activityBar.foreground#60c840
  • activityBar.inactiveForeground#2a4020
  • activityBarBadge.background#3a7820
  • activityBarBadge.foreground#0a120a
  • badge.background#3a7820
  • badge.foreground#0a120a
  • button.background#2a6818
  • button.foreground#c8f0c0
  • button.hoverBackground#387828
  • editor.background#0a120a
  • editor.findMatchBackground#4a7a2080
  • editor.findMatchHighlightBackground#4a7a2040
  • editor.foreground#9ac890
  • editor.inactiveSelectionBackground#2a5a1840
  • editor.lineHighlightBackground#121c12
  • editor.selectionBackground#2a5a1880
  • editor.selectionHighlightBackground#2a5a1840
  • editor.wordHighlightBackground#2a5a1840
  • editor.wordHighlightStrongBackground#2a5a1860
  • editorBracketMatch.background#2a5a1840
  • editorBracketMatch.border#50a030
  • editorCursor.foreground#60c840
  • editorGroupHeader.tabsBackground#070d07
  • editorIndentGuide.activeBackground#305820
  • editorIndentGuide.background#121c12
  • editorLineNumber.activeForeground#508040
  • editorLineNumber.foreground#2a4020
  • editorWhitespace.foreground#121c12
  • focusBorder#3a7820
  • input.background#0d170d
  • input.border#1c3018
  • input.foreground#9ac890
  • input.placeholderForeground#2a4020
  • inputOption.activeBackground#162416
  • inputOption.activeBorder#3a7820
  • list.activeSelectionBackground#162416
  • list.activeSelectionForeground#70e040
  • list.focusBackground#162416
  • list.highlightForeground#60c840
  • list.hoverBackground#121c12
  • list.inactiveSelectionBackground#121c12
  • panel.background#070d07
  • panel.border#121c12
  • panelTitle.activeBorder#3a7820
  • panelTitle.activeForeground#60c840
  • panelTitle.inactiveForeground#2a4020
  • scrollbarSlider.activeBackground#5a8a30a0
  • scrollbarSlider.background#2a5a1860
  • scrollbarSlider.hoverBackground#4a7a2080
  • sideBar.background#070d07
  • sideBar.border#121c12
  • sideBar.foreground#709870
  • sideBarSectionHeader.background#0d170d
  • sideBarSectionHeader.foreground#80a878
  • sideBarTitle.foreground#60c840
  • statusBar.background#224a12
  • statusBar.foreground#9ac890
  • statusBarItem.hoverBackground#2c5a18
  • statusBarItem.remoteBackground#143008
  • statusBarItem.remoteForeground#70c060
  • tab.activeBackground#0a120a
  • tab.activeBorderTop#3a7820
  • tab.activeForeground#70e040
  • tab.border#121c12
  • tab.inactiveBackground#070d07
  • tab.inactiveForeground#2a4820
  • terminal.ansiBlue#408080
  • terminal.ansiCyan#409870
  • terminal.ansiGreen#50a840
  • terminal.ansiMagenta#708050
  • terminal.ansiRed#aa4444
  • terminal.ansiWhite#9ac890
  • terminal.ansiYellow#98a040
  • terminal.background#070d07
  • terminal.foreground#9ac890
  • titleBar.activeBackground#050a05
  • titleBar.activeForeground#9ac890
  • titleBar.border#121c12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8858italic
keyword, storage.type, storage.modifier#78d858bold
keyword.control#98f870bold
string, string.quoted#c8c860
constant.character.escape, string.regexp#e0e078
constant.numeric, constant.language, constant.other#b8f098
entity.name.function, meta.function-call entity.name.function#a8e890
variable.parameter#88c870italic
variable, variable.other#a8d898
entity.name.type, entity.name.class, support.class#80e860bold
entity.name.interface, entity.other.inherited-class#70d850italic
variable.other.property, support.type.property-name#c8e8b8
keyword.operator#60b848
punctuation#7aa868
entity.name.tag#70b858
entity.other.attribute-name#c8c858
invalid#ff4444underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#98f870bold
meta.structure.dictionary.value.json string.quoted, string.value.json#c8c860
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f8e078bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#a8e890
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme