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#131321
  • activityBar.foreground#ff3caf
  • activityBar.inactiveForeground#7a798c
  • activityBarBadge.background#ff3caf
  • activityBarBadge.foreground#ffffff
  • badge.background#ff3caf
  • badge.foreground#ffffff
  • button.background#ff3caf
  • button.foreground#ffffff
  • button.hoverBackground#ff53b9
  • dropdown.background#131321
  • editor.background#1a1a2e
  • editor.findMatchBackground#ff3caf66
  • editor.findMatchHighlightBackground#ff3caf38
  • editor.foreground#f0eeff
  • editor.lineHighlightBackground#28283b
  • editor.selectionBackground#ff3caf42
  • editorBracketMatch.border#ff3caf
  • editorCursor.foreground#ff3caf
  • editorGroupHeader.tabsBackground#171729
  • editorIndentGuide.activeBackground1#f0eeff38
  • editorIndentGuide.background1#f0eeff14
  • editorLineNumber.activeForeground#ff3caf
  • editorLineNumber.foreground#7a798c
  • editorSuggestWidget.selectedBackground#ff3caf42
  • editorWhitespace.foreground#f0eeff1a
  • editorWidget.background#131321
  • focusBorder#ff3caf
  • input.background#131321
  • input.foreground#f0eeff
  • input.placeholderForeground#7a798c
  • list.activeSelectionBackground#ff3caf42
  • list.activeSelectionForeground#f0eeff
  • list.hoverBackground#28283b
  • list.inactiveSelectionBackground#ff3caf24
  • panel.background#161628
  • panelTitle.activeForeground#ff3caf
  • scrollbarSlider.activeBackground#f0eeff5c
  • scrollbarSlider.background#f0eeff29
  • scrollbarSlider.hoverBackground#f0eeff42
  • selection.background#ff3caf4d
  • sideBar.background#161628
  • sideBar.foreground#f0eeff
  • sideBarSectionHeader.background#1a1a2e
  • sideBarTitle.foreground#ff3caf
  • statusBar.background#131321
  • statusBar.foreground#f0eeff
  • statusBar.noFolderBackground#131321
  • tab.activeBackground#1a1a2e
  • tab.activeBorderTop#ff3caf
  • tab.activeForeground#ff3caf
  • tab.border#171729
  • tab.inactiveBackground#171729
  • tab.inactiveForeground#7a798c
  • terminal.background#1a1a2e
  • terminal.foreground#f0eeff
  • titleBar.activeBackground#131321
  • titleBar.activeForeground#f0eeff
  • titleBar.inactiveBackground#131321
  • titleBar.inactiveForeground#7a798c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6f6f9citalic
string, string.quoted, string.template#ffd166
constant.numeric, constant.language, constant.character#ff8c42
keyword, keyword.control, storage, storage.type, storage.modifier#26d9ff
entity.name.function, support.function, meta.function-call.generic#ff61d8
variable, meta.definition.variable.name, variable.other.readwrite#f0eeff
variable.parameter, parameter#c9c8d9
entity.name.type, support.type, support.class, entity.name.namespace#7af5ff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#9b5de5
keyword.operator#ff3caf
entity.name.tag, punctuation.definition.tag#26d9ff
entity.other.attribute-name#ff61d8
constant.other.color, support.constant#ff8c42
entity.name.type.class#7af5ffbold
markup.boldbold
markup.italicitalic
markup.heading#ff3cafbold
invalid#1a1a2e
ThemePaint by Toqir Ahmad - VS Code Theme