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.activeBorder#a78bfa
  • activityBar.background#101012
  • activityBar.border#ffffff0d
  • activityBar.foreground#ebebeb
  • activityBar.inactiveForeground#ffffff59
  • activityBarBadge.background#7c3aed
  • activityBarBadge.foreground#ffffff
  • badge.background#7c3aed
  • badge.foreground#ffffff
  • button.background#7c3aed
  • button.foreground#ffffff
  • button.hoverBackground#8b5cf6
  • editor.background#0a0a0a
  • editor.findMatchBackground#fcd34d66
  • editor.findMatchHighlightBackground#fcd34d26
  • editor.foreground#ebebeb
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7c3aed40
  • editor.selectionHighlightBackground#7c3aed26
  • editor.wordHighlightBackground#ffffff14
  • editor.wordHighlightStrongBackground#ffffff1f
  • editorBracketMatch.background#7c3aed26
  • editorBracketMatch.border#a78bfa66
  • editorCursor.foreground#a78bfa
  • editorError.foreground#fb7185
  • editorGroup.border#ffffff0d
  • editorGroupHeader.tabsBackground#101012
  • editorGutter.addedBackground#34d399
  • editorGutter.deletedBackground#fb7185
  • editorGutter.modifiedBackground#fcd34d
  • editorHoverWidget.background#121214
  • editorHoverWidget.border#ffffff12
  • editorIndentGuide.activeBackground1#ffffff1f
  • editorIndentGuide.background1#ffffff0d
  • editorInfo.foreground#7dd3fc
  • editorLineNumber.activeForeground#a78bfa
  • editorLineNumber.foreground#ffffff33
  • editorSuggestWidget.background#121214
  • editorSuggestWidget.border#ffffff12
  • editorSuggestWidget.highlightForeground#a78bfa
  • editorSuggestWidget.selectedBackground#7c3aed33
  • editorWarning.foreground#fcd34d
  • editorWhitespace.foreground#ffffff14
  • editorWidget.background#121214
  • editorWidget.border#ffffff12
  • focusBorder#7c3aed66
  • gitDecoration.addedResourceForeground#34d399
  • gitDecoration.deletedResourceForeground#fb7185
  • gitDecoration.modifiedResourceForeground#fcd34d
  • gitDecoration.untrackedResourceForeground#34d399
  • input.background#121214
  • input.border#ffffff12
  • input.foreground#ebebeb
  • list.activeSelectionBackground#7c3aed33
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#a78bfa
  • list.hoverBackground#ffffff0a
  • list.inactiveSelectionBackground#ffffff0d
  • panel.background#101012
  • panel.border#ffffff0d
  • panelTitle.activeBorder#a78bfa
  • panelTitle.activeForeground#ebebeb
  • progressBar.background#7c3aed
  • scrollbarSlider.activeBackground#ffffff33
  • scrollbarSlider.background#ffffff14
  • scrollbarSlider.hoverBackground#ffffff26
  • sideBar.background#101012
  • sideBar.border#ffffff0d
  • sideBar.foreground#ffffffb3
  • sideBarSectionHeader.background#161618
  • sideBarTitle.foreground#ffffff8c
  • statusBar.background#101012
  • statusBar.border#ffffff0d
  • statusBar.debuggingBackground#7c3aed
  • statusBar.foreground#ffffff8c
  • statusBar.noFolderBackground#101012
  • statusBarItem.remoteBackground#7c3aed
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0a0a0a
  • tab.activeBorderTop#a78bfa
  • tab.activeForeground#ebebeb
  • tab.border#00000000
  • tab.inactiveBackground#101012
  • tab.inactiveForeground#ffffff59
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#7dd3fc
  • terminal.ansiCyan#67e8f9
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#a78bfa
  • terminal.ansiRed#fb7185
  • terminal.ansiWhite#ebebeb
  • terminal.ansiYellow#fcd34d
  • terminal.foreground#ebebeb
  • textLink.activeForeground#c4b5fd
  • textLink.foreground#a78bfa
  • titleBar.activeBackground#101012
  • titleBar.activeForeground#ffffffeb
  • titleBar.border#ffffff0d
  • titleBar.inactiveBackground#101012

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7c8595italic
string, string.quoted, string.template#34d399
constant.numeric, constant.language, constant.character#f0abfc
keyword, keyword.control, storage.type, storage.modifier#a78bfa
keyword.operator#9ca3af
entity.name.function, support.function, meta.function-call entity.name.function#c4b5fd
entity.name.type, entity.name.class, support.type, support.class#7dd3fc
variable, meta.definition.variable.name, variable.other#ebebeb
variable.parameter#e5e7eb
variable.other.constant, variable.other.property, support.variable.property#c4b5fd
entity.name.tag, punctuation.definition.tag#fb7185
entity.other.attribute-name#fcd34d
support.type.property-name, meta.object-literal.key#7dd3fc
punctuation, meta.brace, meta.delimiter#9ca3af
markup.heading, markup.heading entity.name#a78bfabold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#34d399
invalid, invalid.illegal#fb7185
nullframe by Sushil Buragute - VS Code Theme