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#1e132c
  • activityBar.foreground#ff5e7e
  • activityBar.inactiveForeground#8a788e
  • activityBarBadge.background#ff5e7e
  • activityBarBadge.foreground#ffffff
  • badge.background#ff5e7e
  • badge.foreground#ffffff
  • button.background#ff5e7e
  • button.foreground#ffffff
  • button.hoverBackground#ff718d
  • dropdown.background#1e132c
  • editor.background#2a1b3d
  • editor.findMatchBackground#ff5e7e66
  • editor.findMatchHighlightBackground#ff5e7e38
  • editor.foreground#ffe9f0
  • editor.lineHighlightBackground#372949
  • editor.selectionBackground#ff5e7e42
  • editorBracketMatch.border#ff5e7e
  • editorCursor.foreground#ff5e7e
  • editorGroupHeader.tabsBackground#261837
  • editorIndentGuide.activeBackground1#ffe9f038
  • editorIndentGuide.background1#ffe9f014
  • editorLineNumber.activeForeground#ff5e7e
  • editorLineNumber.foreground#8a788e
  • editorSuggestWidget.selectedBackground#ff5e7e42
  • editorWhitespace.foreground#ffe9f01a
  • editorWidget.background#1e132c
  • focusBorder#ff5e7e
  • input.background#1e132c
  • input.foreground#ffe9f0
  • input.placeholderForeground#8a788e
  • list.activeSelectionBackground#ff5e7e42
  • list.activeSelectionForeground#ffe9f0
  • list.hoverBackground#372949
  • list.inactiveSelectionBackground#ff5e7e24
  • panel.background#241734
  • panelTitle.activeForeground#ff5e7e
  • scrollbarSlider.activeBackground#ffe9f05c
  • scrollbarSlider.background#ffe9f029
  • scrollbarSlider.hoverBackground#ffe9f042
  • selection.background#ff5e7e4d
  • sideBar.background#241734
  • sideBar.foreground#ffe9f0
  • sideBarSectionHeader.background#2a1b3d
  • sideBarTitle.foreground#ff5e7e
  • statusBar.background#1e132c
  • statusBar.foreground#ffe9f0
  • statusBar.noFolderBackground#1e132c
  • tab.activeBackground#2a1b3d
  • tab.activeBorderTop#ff5e7e
  • tab.activeForeground#ff5e7e
  • tab.border#261837
  • tab.inactiveBackground#261837
  • tab.inactiveForeground#8a788e
  • terminal.background#2a1b3d
  • terminal.foreground#ffe9f0
  • titleBar.activeBackground#1e132c
  • titleBar.activeForeground#ffe9f0
  • titleBar.inactiveBackground#1e132c
  • titleBar.inactiveForeground#8a788e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8a6f8aitalic
string, string.quoted, string.template#ffd56b
constant.numeric, constant.language, constant.character#ff8e6b
keyword, keyword.control, storage, storage.type, storage.modifier#ffa94d
entity.name.function, support.function, meta.function-call.generic#ff5e7e
variable, meta.definition.variable.name, variable.other.readwrite#ffe9f0
variable.parameter, parameter#d9c4d0
entity.name.type, support.type, support.class, entity.name.namespace#c77dff
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#7bdff2
keyword.operator#ff5e7e
entity.name.tag, punctuation.definition.tag#ffa94d
entity.other.attribute-name#ff5e7e
constant.other.color, support.constant#ff8e6b
entity.name.type.class#c77dffbold
markup.boldbold
markup.italicitalic
markup.heading#ff5e7ebold
invalid#2a1b3d
ThemePaint by Toqir Ahmad - VS Code Theme