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#0f0b04
  • activityBar.border#2a1f0e
  • activityBar.foreground#f0a830
  • activityBar.inactiveForeground#6a5030
  • activityBarBadge.background#c47a15
  • activityBarBadge.foreground#1a1408
  • badge.background#c47a15
  • badge.foreground#1a1408
  • button.background#c47a15
  • button.foreground#1a1408
  • button.hoverBackground#d48a25
  • dropdown.background#1e1709
  • dropdown.border#4a3520
  • dropdown.foreground#e0c88a
  • editor.background#1a1408
  • editor.findMatchBackground#c47a1580
  • editor.findMatchHighlightBackground#c47a1540
  • editor.foreground#e0c88a
  • editor.hoverHighlightBackground#5a3d1a40
  • editor.inactiveSelectionBackground#5a3d1a40
  • editor.lineHighlightBackground#2a1f0e
  • editor.selectionBackground#5a3d1a80
  • editor.selectionHighlightBackground#5a3d1a40
  • editor.wordHighlightBackground#7a5a2040
  • editor.wordHighlightStrongBackground#7a5a2060
  • editorBracketMatch.background#7a5a2040
  • editorBracketMatch.border#c4922a
  • editorCursor.foreground#f0a830
  • editorGroupHeader.tabsBackground#110d05
  • editorIndentGuide.activeBackground#6a4a20
  • editorIndentGuide.background#2e2010
  • editorLineNumber.activeForeground#c4922a
  • editorLineNumber.foreground#5a4a28
  • editorOverviewRuler.border#2a1f0e
  • editorRuler.foreground#2e2010
  • editorWhitespace.foreground#3a2a14
  • focusBorder#c47a15
  • input.background#1e1709
  • input.border#4a3520
  • input.foreground#e0c88a
  • input.placeholderForeground#6a5030
  • inputOption.activeBackground#3a2a14
  • inputOption.activeBorder#c47a15
  • list.activeSelectionBackground#3a2a14
  • list.activeSelectionForeground#f0c050
  • list.focusBackground#3a2a14
  • list.highlightForeground#f0a830
  • list.hoverBackground#2a1f0e
  • list.inactiveSelectionBackground#2a1f0e
  • notifications.background#1e1709
  • notifications.border#4a3520
  • notifications.foreground#e0c88a
  • notificationToast.border#c47a15
  • panel.background#130f06
  • panel.border#2a1f0e
  • panelTitle.activeBorder#c47a15
  • panelTitle.activeForeground#f0a830
  • panelTitle.inactiveForeground#6a5030
  • progressBar.background#c47a15
  • scrollbar.shadow#0f0b04
  • scrollbarSlider.activeBackground#7a5a20a0
  • scrollbarSlider.background#3a2a1460
  • scrollbarSlider.hoverBackground#5a3d1a80
  • selection.background#5a3d1a80
  • sideBar.background#130f06
  • sideBar.border#2a1f0e
  • sideBar.foreground#c4a870
  • sideBarSectionHeader.background#1e1709
  • sideBarSectionHeader.foreground#d4b060
  • sideBarTitle.foreground#e0a030
  • statusBar.background#c47a15
  • statusBar.debuggingBackground#9a3a10
  • statusBar.foreground#1a1408
  • statusBar.noFolderBackground#8a5a10
  • statusBarItem.hoverBackground#a06010
  • statusBarItem.remoteBackground#8a5010
  • statusBarItem.remoteForeground#f0e0b0
  • tab.activeBackground#1a1408
  • tab.activeBorderTop#c47a15
  • tab.activeForeground#f0c050
  • tab.border#2a1f0e
  • tab.inactiveBackground#110d05
  • tab.inactiveForeground#7a6040
  • terminal.ansiBlack#1a1408
  • terminal.ansiBlue#7a8aaa
  • terminal.ansiCyan#7aaa9a
  • terminal.ansiGreen#8a9040
  • terminal.ansiMagenta#9a6a8a
  • terminal.ansiRed#cc4400
  • terminal.ansiWhite#e0c88a
  • terminal.ansiYellow#c47a15
  • terminal.background#130f06
  • terminal.foreground#e0c88a
  • titleBar.activeBackground#0f0b04
  • titleBar.activeForeground#e0c88a
  • titleBar.border#2a1f0e
  • titleBar.inactiveBackground#0f0b04

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a8060italic
keyword, storage.type, storage.modifier#f0a830bold
keyword.control#ffcc44bold
string, string.quoted#e07840
constant.character.escape, string.regexp#f09050
constant.numeric, constant.language, constant.other#f8e080
entity.name.function, meta.function-call entity.name.function#f8d070
variable.parameter#d4b060italic
variable, variable.other#e8c888
entity.name.type, entity.name.class, support.class#ffb030bold
entity.name.interface, entity.other.inherited-class#e8a020italic
variable.other.property, support.type.property-name#d8c898
keyword.operator#e89830
punctuation#b09868
entity.name.tag#e08830
entity.other.attribute-name#f8d060
invalid#ff4444underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#f0a830bold
meta.structure.dictionary.value.json string.quoted, string.value.json#e07840
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f8f0b0bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#f8d870
Star Wars: Planets Theme Pack by Robert Schnable - VS Code Theme