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#100d1e
  • activityBar.foreground#9f86ff
  • activityBar.inactiveForeground#716d85
  • activityBarBadge.background#9f86ff
  • activityBarBadge.foreground#1a1a1a
  • badge.background#9f86ff
  • badge.foreground#1a1a1a
  • button.background#9f86ff
  • button.foreground#1a1a1a
  • button.hoverBackground#ab95ff
  • dropdown.background#100d1e
  • editor.background#161229
  • editor.findMatchBackground#9f86ff66
  • editor.findMatchHighlightBackground#9f86ff38
  • editor.foreground#e0dcf5
  • editor.lineHighlightBackground#242036
  • editor.selectionBackground#9f86ff42
  • editorBracketMatch.border#9f86ff
  • editorCursor.foreground#9f86ff
  • editorGroupHeader.tabsBackground#141025
  • editorIndentGuide.activeBackground1#e0dcf538
  • editorIndentGuide.background1#e0dcf514
  • editorLineNumber.activeForeground#9f86ff
  • editorLineNumber.foreground#716d85
  • editorSuggestWidget.selectedBackground#9f86ff42
  • editorWhitespace.foreground#e0dcf51a
  • editorWidget.background#100d1e
  • focusBorder#9f86ff
  • input.background#100d1e
  • input.foreground#e0dcf5
  • input.placeholderForeground#716d85
  • list.activeSelectionBackground#9f86ff42
  • list.activeSelectionForeground#e0dcf5
  • list.hoverBackground#242036
  • list.inactiveSelectionBackground#9f86ff24
  • panel.background#130f23
  • panelTitle.activeForeground#9f86ff
  • scrollbarSlider.activeBackground#e0dcf55c
  • scrollbarSlider.background#e0dcf529
  • scrollbarSlider.hoverBackground#e0dcf542
  • selection.background#9f86ff4d
  • sideBar.background#130f23
  • sideBar.foreground#e0dcf5
  • sideBarSectionHeader.background#161229
  • sideBarTitle.foreground#9f86ff
  • statusBar.background#100d1e
  • statusBar.foreground#e0dcf5
  • statusBar.noFolderBackground#100d1e
  • tab.activeBackground#161229
  • tab.activeBorderTop#9f86ff
  • tab.activeForeground#9f86ff
  • tab.border#141025
  • tab.inactiveBackground#141025
  • tab.inactiveForeground#716d85
  • terminal.background#161229
  • terminal.foreground#e0dcf5
  • titleBar.activeBackground#100d1e
  • titleBar.activeForeground#e0dcf5
  • titleBar.inactiveBackground#100d1e
  • titleBar.inactiveForeground#716d85

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#615a85italic
string, string.quoted, string.template#9fe8c0
constant.numeric, constant.language, constant.character#ffcb8a
keyword, keyword.control, storage, storage.type, storage.modifier#c0a0ff
entity.name.function, support.function, meta.function-call.generic#80c8ff
variable, meta.definition.variable.name, variable.other.readwrite#e0dcf5
variable.parameter, parameter#bcb8d0
entity.name.type, support.type, support.class, entity.name.namespace#ffe39a
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#ff96c0
keyword.operator#9f86ff
entity.name.tag, punctuation.definition.tag#c0a0ff
entity.other.attribute-name#80c8ff
constant.other.color, support.constant#ffcb8a
entity.name.type.class#ffe39abold
markup.boldbold
markup.italicitalic
markup.heading#9f86ffbold
invalid#161229
ThemePaint by Toqir Ahmad - VS Code Theme