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#040810
  • activityBar.border#101828
  • activityBar.foreground#f0c040
  • activityBar.inactiveForeground#1a2e48
  • activityBarBadge.background#c89a20
  • activityBarBadge.foreground#040810
  • badge.background#c89a20
  • badge.foreground#040810
  • button.background#1a4888
  • button.foreground#e0f0ff
  • button.hoverBackground#2a58a0
  • editor.background#080d18
  • editor.findMatchBackground#c89a2080
  • editor.findMatchHighlightBackground#c89a2040
  • editor.foreground#b8cce8
  • editor.inactiveSelectionBackground#1a4a8840
  • editor.lineHighlightBackground#101828
  • editor.selectionBackground#1a4a8880
  • editor.selectionHighlightBackground#1a4a8840
  • editor.wordHighlightBackground#1a4a8840
  • editor.wordHighlightStrongBackground#1a4a8860
  • editorBracketMatch.background#1a4a8840
  • editorBracketMatch.border#4888d0
  • editorCursor.foreground#f0c040
  • editorGroupHeader.tabsBackground#060b12
  • editorIndentGuide.activeBackground#2a5080
  • editorIndentGuide.background#121e30
  • editorLineNumber.activeForeground#5888c0
  • editorLineNumber.foreground#223048
  • editorWhitespace.foreground#121e30
  • focusBorder#c89a20
  • input.background#0c1420
  • input.border#1e3858
  • input.foreground#b8cce8
  • input.placeholderForeground#2a4060
  • list.activeSelectionBackground#102038
  • list.activeSelectionForeground#f0c040
  • list.highlightForeground#f0c040
  • list.hoverBackground#101828
  • panel.background#060b12
  • panel.border#101828
  • panelTitle.activeBorder#c89a20
  • panelTitle.activeForeground#f0c040
  • scrollbarSlider.activeBackground#3a80c8a0
  • scrollbarSlider.background#1a4a8860
  • scrollbarSlider.hoverBackground#2a6ab080
  • sideBar.background#060b12
  • sideBar.border#101828
  • sideBar.foreground#7898c0
  • sideBarSectionHeader.background#0c1420
  • sideBarSectionHeader.foreground#90b0d0
  • sideBarTitle.foreground#f0c040
  • statusBar.background#0d2a58
  • statusBar.foreground#d0e4ff
  • statusBarItem.hoverBackground#153468
  • statusBarItem.remoteBackground#c89a20
  • statusBarItem.remoteForeground#040810
  • tab.activeBackground#080d18
  • tab.activeBorderTop#c89a20
  • tab.activeForeground#f0c040
  • tab.border#101828
  • tab.inactiveBackground#060b12
  • tab.inactiveForeground#2a4060
  • terminal.ansiBlue#3878d0
  • terminal.ansiCyan#40b8d8
  • terminal.ansiGreen#40a880
  • terminal.ansiMagenta#9060c0
  • terminal.ansiRed#cc3344
  • terminal.ansiWhite#b8cce8
  • terminal.ansiYellow#d0a030
  • terminal.background#060b12
  • terminal.foreground#b8cce8
  • titleBar.activeBackground#040810
  • titleBar.activeForeground#b8cce8
  • titleBar.border#101828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2a4868italic
keyword, storage.type, storage.modifier#5898e0bold
keyword.control#60b0f8bold
string, string.quoted#d0a030—
constant.character.escape, string.regexp#e8b840—
constant.numeric, constant.language, constant.other#f0c040—
entity.name.function, meta.function-call entity.name.function#90c8f0—
variable.parameter#70a8d8italic
variable, variable.other#a0c0e0—
entity.name.type, entity.name.class, support.class#e8c040bold
entity.name.interface, entity.other.inherited-class#d0b030italic
variable.other.property, support.type.property-name#88a8cc—
keyword.operator#4880c8—
punctuation#385870—
entity.name.tag#5888cc—
entity.other.attribute-name#d0a030—
invalid#ff3344underline
Star Trek: Factions Theme Pack by Robert Schnable - VS Code Theme