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#F5ECEF
  • activityBar.border#00000000
  • activityBar.foreground#2F2428
  • activityBar.inactiveForeground#2F242866
  • activityBarBadge.background#C73659
  • activityBarBadge.foreground#FFF8FA
  • badge.background#C73659
  • badge.foreground#FFF8FA
  • button.background#A91D3A
  • button.foreground#FFF8FA
  • button.hoverBackground#C73659
  • dropdown.background#FFF8FA
  • dropdown.border#D6C8CD
  • dropdown.foreground#2F2428
  • editor.background#FFF8FA
  • editor.foreground#2F2428
  • editor.inactiveSelectionBackground#A91D3A1C
  • editor.selectionBackground#A91D3A2E
  • editorBracketHighlight.foreground1#7A6E73
  • editorBracketHighlight.foreground2#D37EB1
  • editorBracketHighlight.foreground3#166A77
  • editorBracketHighlight.foreground4#A91D3A
  • editorCursor.foreground#C73659
  • editorGroup.border#E5D7DC
  • editorGroupHeader.tabsBackground#F5ECEF
  • editorGroupHeader.tabsBorder#00000000
  • editorLineNumber.activeForeground#C73659
  • editorLineNumber.foreground#2F242866
  • editorWhitespace.foreground#2F242820
  • editorWidget.background#FFF8FA
  • editorWidget.border#D6C8CD
  • errorForeground#C73659
  • focusBorder#A91D3A55
  • foreground#2F2428
  • gitDecoration.addedResourceForeground#166A77
  • gitDecoration.deletedResourceForeground#A91D3A
  • gitDecoration.modifiedResourceForeground#D37EB1
  • icon.foreground#2F2428
  • input.background#FFF8FA
  • input.border#D6C8CD
  • input.foreground#2F2428
  • inputOption.activeBorder#C73659
  • list.activeSelectionBackground#A91D3A22
  • list.activeSelectionForeground#2F2428
  • list.hoverBackground#2F24280D
  • list.inactiveSelectionBackground#2F242808
  • panel.background#FFF8FA
  • panel.border#E5D7DC
  • panelTitle.activeBorder#C73659
  • panelTitle.activeForeground#2F2428
  • panelTitle.inactiveForeground#2F242888
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#2F24284D
  • scrollbarSlider.background#2F24281A
  • scrollbarSlider.hoverBackground#2F242833
  • selection.background#A91D3A33
  • sideBar.background#F9F2F5
  • sideBar.border#E5D7DC
  • sideBar.foreground#2F2428
  • sideBarSectionHeader.background#F5ECEF
  • sideBarSectionHeader.border#E5D7DC
  • sideBarTitle.foreground#2F2428
  • statusBar.background#A91D3A
  • statusBar.border#00000000
  • statusBar.debuggingBackground#C73659
  • statusBar.foreground#FFF8FA
  • statusBar.noFolderBackground#F5ECEF
  • statusBarItem.hoverBackground#FFFFFF2A
  • tab.activeBackground#FFF8FA
  • tab.activeBorder#C73659
  • tab.activeForeground#2F2428
  • tab.border#E5D7DC
  • tab.inactiveBackground#F5ECEF
  • tab.inactiveForeground#2F242888
  • terminal.background#FFF8FA
  • terminal.foreground#2F2428
  • terminalCursor.foreground#C73659
  • textLink.activeForeground#A91D3A
  • textLink.foreground#166A77
  • titleBar.activeBackground#F5ECEF
  • titleBar.activeForeground#2F2428
  • titleBar.border#00000000
  • titleBar.inactiveBackground#F5ECEF
  • titleBar.inactiveForeground#2F242888
  • widget.shadow#00000024
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A81italic
keyword, storage.type, storage.modifier, control#C73659—
entity.name.function, entity.name.class, support.function, entity.name.type#9574E0—
string, punctuation.definition.string#166A77—
variable, support.variable#2F2428—
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#8A7A81—
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