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