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#000000
  • activityBar.border#1c1c1c
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#3B82F6
  • activityBarBadge.foreground#ffffff
  • button.background#3B82F6
  • button.foreground#ffffff
  • button.hoverBackground#60A5FA
  • editor.background#000000
  • editor.foreground#dfdfe0
  • editor.inactiveSelectionBackground#ffffff11
  • editor.lineHighlightBackground#0d0d0d
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#2a3a5c
  • editorCursor.foreground#dfdfe0
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#1c1c1c
  • editorLineNumber.activeForeground#3B82F6
  • editorLineNumber.foreground#5a6577
  • focusBorder#3B82F6
  • foreground#dfdfe0
  • input.background#121212
  • input.border#1c1c1c
  • input.foreground#dfdfe0
  • list.activeSelectionBackground#505050
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#353535
  • list.inactiveSelectionBackground#353535
  • list.inactiveSelectionForeground#dfdfe0
  • menu.background#000000
  • menu.foreground#dfdfe0
  • menu.separatorBackground#1c1c1c
  • panel.background#000000
  • panel.border#1c1c1c
  • panelTitle.activeForeground#3B82F6
  • panelTitle.inactiveForeground#ffffff66
  • scrollbarSlider.activeBackground#3B82F680
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#000000
  • sideBar.border#1c1c1c
  • sideBar.foreground#dfdfe0
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1c1c1c
  • sideBarSectionHeader.foreground#dfdfe0
  • sideBarTitle.foreground#dfdfe0
  • statusBar.background#000000
  • statusBar.border#1c1c1c
  • statusBar.foreground#dfdfe0
  • tab.activeBackground#000000
  • tab.activeBorder#3B82F6
  • tab.activeForeground#ffffff
  • tab.border#1c1c1c
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff66
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#dfdfe0
  • titleBar.border#1c1c1c
  • titleBar.inactiveBackground#000000
  • widget.border#1c1c1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused.comment#7f8c98
keyword, storage.type, storage.modifier, keyword.control#ff7ab2bold
string, punctuation.definition.string#ff8170
constant.numeric, keyword.other.unit#d9c97c
constant.language, constant.character, support.constant, variable.other.constant#b281eb
constant.character.escape, constant.escape#acf2e4
entity.name.function, support.function#5ac8db
meta.function-call, variable.function#78c2b3
entity.name.type.class, entity.name.class, support.class#6bdfff
entity.name.type.interface, support.type#dabaff
entity.name.namespace, entity.name.package#78c2b3
variable.other.property, support.type.property-name, variable.other.object.property#5ac8db
meta.annotation, entity.name.type.annotation, entity.other.attribute-name, meta.decorator#dabaff
entity.name.tag, punctuation.definition.tag#ff7ab2
Nyx Theme Suite by Pratik Ranjan - VS Code Theme