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#151515
  • activityBar.border#15151500
  • activityBar.foreground#EEEEEE
  • activityBar.inactiveForeground#EEEEEE50
  • activityBarBadge.background#C73659
  • activityBarBadge.foreground#EEEEEE
  • badge.background#C73659
  • badge.foreground#EEEEEE
  • button.background#A91D3A
  • button.foreground#EEEEEE
  • button.hoverBackground#C73659
  • dropdown.background#151515
  • dropdown.border#15151500
  • dropdown.foreground#EEEEEE
  • editor.background#151515
  • editor.foreground#EEEEEE
  • editor.inactiveSelectionBackground#A91D3A30
  • editor.selectionBackground#A91D3A60
  • editorBracketHighlight.foreground1#c5bdbf
  • editorBracketHighlight.foreground2#D37EB1
  • editorBracketHighlight.foreground3#166a77
  • editorBracketHighlight.foreground4#D37EB1
  • editorCursor.foreground#C73659
  • editorGroup.border#15151500
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#15151500
  • editorLineNumber.activeForeground#C73659
  • editorLineNumber.foreground#EEEEEE30
  • editorWhitespace.foreground#EEEEEE10
  • editorWidget.background#151515
  • editorWidget.border#15151500
  • errorForeground#C73659
  • focusBorder#15151500
  • foreground#EEEEEE
  • gitDecoration.addedResourceForeground#166a77
  • gitDecoration.deletedResourceForeground#A91D3A
  • gitDecoration.modifiedResourceForeground#D37EB1
  • icon.foreground#EEEEEE
  • input.background#151515
  • input.border#15151500
  • input.foreground#EEEEEE
  • inputOption.activeBorder#C73659
  • list.activeSelectionBackground#A91D3A50
  • list.activeSelectionForeground#EEEEEE
  • list.hoverBackground#EEEEEE08
  • list.inactiveSelectionBackground#EEEEEE05
  • panel.background#151515
  • panel.border#15151500
  • panelTitle.activeBorder#C73659
  • panelTitle.activeForeground#EEEEEE
  • panelTitle.inactiveForeground#EEEEEE60
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#EEEEEE30
  • scrollbarSlider.background#EEEEEE10
  • scrollbarSlider.hoverBackground#EEEEEE20
  • selection.background#A91D3A
  • sideBar.background#151515
  • sideBar.border#15151500
  • sideBar.foreground#EEEEEE
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#15151500
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#751427
  • statusBar.border#15151500
  • statusBar.debuggingBackground#A91D3A
  • statusBar.foreground#EEEEEE
  • statusBar.noFolderBackground#151515
  • statusBarItem.hoverBackground#EEEEEE10
  • tab.activeBackground#151515
  • tab.activeBorder#C73659
  • tab.activeForeground#EEEEEE
  • tab.border#15151500
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#EEEEEE60
  • terminal.background#151515
  • terminal.foreground#EEEEEE
  • terminalCursor.foreground#C73659
  • textLink.activeForeground#D37EB1
  • textLink.foreground#166a77
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#EEEEEE
  • titleBar.border#15151500
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#EEEEEE50
  • widget.shadow#00000040
  • window.activeBorder#15151500
  • window.inactiveBorder#15151500

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#EEEEEE40italic
keyword, storage.type, storage.modifier, control#C73659—
entity.name.function, entity.name.class, support.function, entity.name.type#9574e0—
string, punctuation.definition.string#6bd1c9—
variable, support.variable#EEEEEE—
variable.other.property, meta.object-literal.key, support.type.property-name#166a77—
constant.numeric, constant.language, constant.character, constant.other#9B8EB5—
entity.name.tag, punctuation.definition.tag#C73659—
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, punctuation.definition.tag.begin.html, meta.tag.structure.div.end.html, punctuation.definition.tag.end.html, meta.tag.inline.span.start.html#868181—
meta.function-call.generic.python, meta.function-call.python, meta.member.access.python, source.python#C73659—
keyword.control.import.python#9B8EB5—
entity.other.attribute-name#166a77italic
Death Code by Júlia Favero - VS Code Theme