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#ff6478
  • activityBar.background#1e1e1e
  • activityBar.border#2a2a2a
  • activityBar.foreground#f0e8f5
  • activityBar.inactiveForeground#f0eaf860
  • activityBarBadge.background#f0e8f5
  • activityBarBadge.foreground#1e1e1e
  • badge.background#f0e8f590
  • badge.foreground#1e1e1e
  • breadcrumb.activeSelectionForeground#f0e8f590
  • breadcrumb.focusForeground#f0e8f5
  • breadcrumb.foreground#f0e8f590
  • breadcrumbPicker.background#1e1e1e
  • button.background#ff6478
  • button.foreground#1e1e1e
  • button.hoverBackground#ff6478
  • checkbox.background#c78fff30
  • checkbox.border#f0e8f5
  • debugToolBar.background#1e1e1e
  • descriptionForeground#f0e8f590
  • diffEditor.insertedTextBackground#a1d6a130
  • diffEditor.removedTextBackground#ff647830
  • dropdown.background#1e1e1e
  • dropdown.border#2a2a2a
  • dropdown.foreground#f0e8f5
  • dropdown.listBackground#2a2a2a
  • editor.background#1e1e1e
  • editor.findMatchBackground#ff647840
  • editor.findMatchHighlightBackground#c78fff20
  • editor.focusedStackFrameHighlightBackground#c78fff
  • editor.foldBackground#1e1e1e
  • editor.foreground#f0e8f5
  • editor.inactiveSelectionBackground#c78fff20
  • editor.lineHighlightBackground#c78fff30
  • editor.selectionBackground#c78fff40
  • editor.selectionHighlightBackground#c78fff20
  • editor.stackFrameHighlightBackground#c78fff
  • editor.wordHighlightBackground#c78fff40
  • editor.wordHighlightStrongBackground#ff647835
  • editorBracketHighlight.foreground1#b3a8bd60
  • editorBracketHighlight.foreground2#b3a8bd60
  • editorBracketHighlight.foreground3#b3a8bd60
  • editorBracketHighlight.foreground4#b3a8bd60
  • editorBracketHighlight.foreground5#b3a8bd60
  • editorBracketHighlight.foreground6#b3a8bd60
  • editorBracketHighlight.unexpectedBracket.foreground#f0e8f5
  • editorBracketMatch.background#c78fff20
  • editorCursor.foreground#f0e8f5
  • editorError.foreground#ff6478
  • editorGroup.border#2a2a2a
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGroupHeader.tabsBorder#2a2a2a
  • editorGutter.addedBackground#a1d6a1cc
  • editorGutter.commentRangeForeground#f0eaf840
  • editorGutter.deletedBackground#ff6478cc
  • editorGutter.foldingControlForeground#f0e8f580
  • editorGutter.modifiedBackground#c78fffcc
  • editorHint.foreground#c78fff
  • editorIndentGuide.activeBackground#2a2a2a60
  • editorIndentGuide.background#2a2a2a40
  • editorInfo.foreground#c78fff
  • editorLineNumber.activeForeground#c78fffcc
  • editorLineNumber.foreground#c78fff40
  • editorOverviewRuler.border#c78fff00
  • editorWarning.foreground#ff6478
  • editorWhitespace.foreground#2a2a2a40
  • editorWidget.background#1e1e1e
  • errorForeground#ff6478
  • focusBorder#00000000
  • foreground#f0e8f5
  • gitDecoration.addedResourceForeground#a1d6a1cc
  • gitDecoration.conflictingResourceForeground#f9cf75cc
  • gitDecoration.deletedResourceForeground#ff6478cc
  • gitDecoration.ignoredResourceForeground#f0eaf840
  • gitDecoration.modifiedResourceForeground#c78fffcc
  • gitDecoration.submoduleResourceForeground#f0e8f580
  • gitDecoration.untrackedResourceForeground#c78fffcc
  • input.background#c78fff30
  • input.border#2a2a2a
  • input.foreground#f0e8f5
  • input.placeholderForeground#f0e8f590
  • list.activeSelectionBackground#c78fff60
  • list.activeSelectionForeground#f0e8f5
  • list.focusBackground#c78fff30
  • list.hoverBackground#c78fff30
  • list.hoverForeground#f0e8f5
  • list.inactiveFocusBackground#1e1e1e
  • list.inactiveSelectionBackground#c78fff30
  • list.inactiveSelectionForeground#f0e8f5
  • notificationCenterHeader.background#1e1e1e
  • notificationCenterHeader.foreground#f0e8f5
  • notifications.background#1e1e1e
  • notifications.border#2a2a2a
  • notifications.foreground#f0e8f5
  • notificationsErrorIcon.foreground#ff6478
  • notificationsInfoIcon.foreground#c78fff
  • notificationsWarningIcon.foreground#ff6478
  • panel.background#1e1e1e
  • panel.border#2a2a2a
  • panelInput.border#f0e8f590
  • panelTitle.activeBorder#ff6478
  • panelTitle.activeForeground#f0e8f5
  • panelTitle.inactiveForeground#f0eaf860
  • peekViewEditor.background#1e1e1e
  • peekViewEditor.matchHighlightBackground#ff6478
  • peekViewResult.background#1e1e1e
  • peekViewResult.matchHighlightBackground#ff6478
  • pickerGroup.border#f0e8f590
  • pickerGroup.foreground#f0e8f5
  • problemsErrorIcon.foreground#ff6478
  • problemsInfoIcon.foreground#c78fff
  • problemsWarningIcon.foreground#ff6478
  • progressBar.background#ff6478
  • quickInput.background#1e1e1e
  • quickInput.foreground#f0e8f5
  • scrollbar.shadow#f0e8f590
  • scrollbarSlider.activeBackground#c78fff35
  • scrollbarSlider.background#c78fff18
  • scrollbarSlider.hoverBackground#c78fff25
  • settings.headerForeground#f0e8f5
  • settings.modifiedItemIndicator#ff6478
  • sideBar.background#1e1e1e
  • sideBar.border#2a2a2a
  • sideBar.foreground#f0e8f5
  • sideBarSectionHeader.background#1e1e1e
  • sideBarSectionHeader.border#2a2a2a
  • sideBarSectionHeader.foreground#c78fff
  • sideBarTitle.foreground#f0e8f5
  • statusBar.background#1e1e1e
  • statusBar.border#2a2a2a
  • statusBar.debuggingBackground#c78fff30
  • statusBar.debuggingForeground#f0e8f5
  • statusBar.foreground#f0e8f5
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.prominentBackground#c78fff30
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#2a2a2a
  • tab.activeBorderTop#ff6478
  • tab.activeForeground#f0e8f5
  • tab.border#2a2a2a
  • tab.hoverBackground#c78fff20
  • tab.inactiveBackground#c78fff30
  • tab.inactiveForeground#f0e8f590
  • tab.unfocusedActiveBorder#2a2a2a
  • tab.unfocusedActiveBorderTop#2a2a2a
  • tab.unfocusedHoverBackground#1e1e1e
  • terminal.ansiBlack#f0e8f5
  • terminal.ansiBlue#c78fff
  • terminal.ansiBrightBlack#f0e8f5
  • terminal.ansiBrightBlue#c78fff
  • terminal.ansiBrightCyan#f0e8f5
  • terminal.ansiBrightGreen#c78fff
  • terminal.ansiBrightMagenta#c78fff
  • terminal.ansiBrightRed#ff6478
  • terminal.ansiBrightWhite#f0e8f5
  • terminal.ansiBrightYellow#ff6478
  • terminal.ansiCyan#f0e8f5
  • terminal.ansiGreen#c78fff
  • terminal.ansiMagenta#c78fff
  • terminal.ansiRed#ff6478
  • terminal.ansiWhite#1e1e1e
  • terminal.ansiYellow#ff6478
  • terminal.foreground#f0e8f5
  • textBlockQuote.background#1e1e1e
  • textBlockQuote.border#2a2a2a
  • textCodeBlock.background#1e1e1e
  • textLink.activeForeground#ff6478
  • textLink.foreground#ff6478
  • textPreformat.foreground#f0e8f590
  • textSeparator.foreground#f0e8f590
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#f0e8f5
  • titleBar.border#c78fff30
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#f0eaf860
  • tree.indentGuidesStroke#2a2a2a40
  • welcomePage.buttonBackground#c78fff20
  • welcomePage.buttonHoverBackground#c78fff30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#b3a8bd60—
punctuation, meta.tag.inline.any.html, meta.tag.block.any.html, meta.brace#b3a8bd60—
constant, entity.name.constant, variable.other.constant, variable.language, meta.definition.variable#f0eaf8—
entity, entity.name#c78fff—
variable.parameter.function#f0e8f5—
entity.name.tag#ff6478—
entity.name.function#c78fff—
keyword#c78fff—
storage, storage.type#ff6478—
storage.modifier.package, storage.modifier.import, storage.type.java#f0e8f5—
string, punctuation.definition.string, string punctuation.section.embedded source#ff6478—
support#c78fff—
meta.property-name, entity.other.attribute-name, meta.object-literal.key#c78fff—
variable#f0eaf8—
namespace#f0eaf8—
keyword.operator#ff6478—
invalid.broken#ff6478italic
invalid.deprecated#ff6478italic
invalid.illegal#ff6478italic
invalid.unimplemented#ff6478italic
carriage-return#1e1e1eitalic underline
message.error#ff6478—
string source#f0e8f5—
string variable#ff6478—
source.regexp, string.regexp#ff6478—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#ff6478—
string.regexp constant.character.escape#c78fffbold
support.constant#f0eaf8—
support.variable#ff6478—
constant.numeric#f0eaf8—
keyword.other.unit#ff6478—
constant.language.boolean#ff6478—
meta.module-reference#ff6478—
punctuation.definition.list.begin.markdown#ff6478—
markup.heading, markup.heading entity.name#ff6478bold
markup.quote#ff6478—
markup.italic#f0e8f5italic
markup.bold#f0e8f5bold
markup.raw#ff6478—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#1e1e1e—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#1e1e1e—
markup.changed, punctuation.definition.changed#1e1e1e—
markup.ignored, markup.untracked#f0e8f590—
meta.diff.range#c78fffbold
meta.diff.header#c78fff—
meta.separator#c78fffbold
meta.output#c78fff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#f0e8f5—
brackethighlighter.unmatched#ff6478—
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff6478—
markup.underline.link.markdown#f0e8f590underline