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#130e1e
  • activityBar.foreground#ff6ac1
  • activityBar.inactiveForeground#7d738a
  • activityBarBadge.background#ff6ac1
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ff6ac1
  • badge.foreground#1a1a1a
  • button.background#ff6ac1
  • button.foreground#1a1a1a
  • button.hoverBackground#ff7cc8
  • dropdown.background#130e1e
  • editor.background#1b132a
  • editor.findMatchBackground#ff6ac166
  • editor.findMatchHighlightBackground#ff6ac138
  • editor.foreground#f5e9ff
  • editor.lineHighlightBackground#292137
  • editor.selectionBackground#ff6ac142
  • editorBracketMatch.border#ff6ac1
  • editorCursor.foreground#ff6ac1
  • editorGroupHeader.tabsBackground#181126
  • editorIndentGuide.activeBackground1#f5e9ff38
  • editorIndentGuide.background1#f5e9ff14
  • editorLineNumber.activeForeground#ff6ac1
  • editorLineNumber.foreground#7d738a
  • editorSuggestWidget.selectedBackground#ff6ac142
  • editorWhitespace.foreground#f5e9ff1a
  • editorWidget.background#130e1e
  • focusBorder#ff6ac1
  • input.background#130e1e
  • input.foreground#f5e9ff
  • input.placeholderForeground#7d738a
  • list.activeSelectionBackground#ff6ac142
  • list.activeSelectionForeground#f5e9ff
  • list.hoverBackground#292137
  • list.inactiveSelectionBackground#ff6ac124
  • panel.background#171024
  • panelTitle.activeForeground#ff6ac1
  • scrollbarSlider.activeBackground#f5e9ff5c
  • scrollbarSlider.background#f5e9ff29
  • scrollbarSlider.hoverBackground#f5e9ff42
  • selection.background#ff6ac14d
  • sideBar.background#171024
  • sideBar.foreground#f5e9ff
  • sideBarSectionHeader.background#1b132a
  • sideBarTitle.foreground#ff6ac1
  • statusBar.background#130e1e
  • statusBar.foreground#f5e9ff
  • statusBar.noFolderBackground#130e1e
  • tab.activeBackground#1b132a
  • tab.activeBorderTop#ff6ac1
  • tab.activeForeground#ff6ac1
  • tab.border#181126
  • tab.inactiveBackground#181126
  • tab.inactiveForeground#7d738a
  • terminal.background#1b132a
  • terminal.foreground#f5e9ff
  • titleBar.activeBackground#130e1e
  • titleBar.activeForeground#f5e9ff
  • titleBar.inactiveBackground#130e1e
  • titleBar.inactiveForeground#7d738a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a6e99italic
string, string.quoted, string.template#ff9966
constant.numeric, constant.language, constant.character#ff6ac1
keyword, keyword.control, storage, storage.type, storage.modifier#ffcc55
entity.name.function, support.function, meta.function-call.generic#39c4ff
variable, meta.definition.variable.name, variable.other.readwrite#f5e9ff
variable.parameter, parameter#cec2d9
entity.name.type, support.type, support.class, entity.name.namespace#ff4d6d
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#5cf2c8
keyword.operator#ff6ac1
entity.name.tag, punctuation.definition.tag#ffcc55
entity.other.attribute-name#39c4ff
constant.other.color, support.constant#ff6ac1
entity.name.type.class#ff4d6dbold
markup.boldbold
markup.italicitalic
markup.heading#ff6ac1bold
invalid#1b132a
ThemePaint by Toqir Ahmad - VS Code Theme