Skip to main content
Coding Theme

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#080610
  • activityBar.border#2a0f3e
  • activityBar.foreground#ff6eb4
  • activityBar.inactiveForeground#4a2a5e
  • activityBarBadge.background#ff6eb4
  • activityBarBadge.foreground#0d0a14
  • badge.background#c94fa8
  • badge.foreground#fff0fa
  • button.background#c94fa8
  • button.foreground#fff0fa
  • button.hoverBackground#e060be
  • button.secondaryBackground#3d1a5e
  • button.secondaryForeground#f0d6f5
  • button.secondaryHoverBackground#5a2a80
  • descriptionForeground#a07ab0
  • diffEditor.insertedLineBackground#1a3a2522
  • diffEditor.insertedTextBackground#2a5e3a33
  • diffEditor.removedLineBackground#3a1a2522
  • diffEditor.removedTextBackground#5e2a3a33
  • dropdown.background#130d1e
  • dropdown.border#3d1a5e
  • dropdown.foreground#f0d6f5
  • editor.background#0d0a14
  • editor.findMatchBackground#ff6eb455
  • editor.findMatchHighlightBackground#c94fa833
  • editor.foreground#f0d6f5
  • editor.hoverHighlightBackground#7b2d8b44
  • editor.lineHighlightBackground#1a0f2a
  • editor.lineHighlightBorder#3d1a5e22
  • editor.selectionBackground#7b2d8b55
  • editor.selectionHighlightBackground#c94fa833
  • editor.wordHighlightBackground#b44f9933
  • editor.wordHighlightStrongBackground#ff6eb455
  • editorBracketMatch.background#c94fa833
  • editorBracketMatch.border#ff6eb4
  • editorCursor.foreground#ff6eb4
  • editorError.foreground#ff6e8a
  • editorGroupHeader.tabsBackground#080610
  • editorGroupHeader.tabsBorder#2a0f3e
  • editorGutter.background#0d0a14
  • editorHint.foreground#c94fa8
  • editorHoverWidget.background#130d1e
  • editorHoverWidget.border#c94fa8
  • editorIndentGuide.activeBackground1#7b2d8b
  • editorIndentGuide.background1#2a1040
  • editorInfo.foreground#b09ee8
  • editorLineNumber.activeForeground#ff6eb4
  • editorLineNumber.foreground#5a3a6e
  • editorOverviewRuler.addedForeground#6dc98a
  • editorOverviewRuler.border#2a0f3e
  • editorOverviewRuler.deletedForeground#d44a6e
  • editorOverviewRuler.errorForeground#d44a6e
  • editorOverviewRuler.findMatchForeground#ff6eb4
  • editorOverviewRuler.infoForeground#8a6fc9
  • editorOverviewRuler.modifiedForeground#e8a87c
  • editorOverviewRuler.rangeHighlightForeground#c94fa8
  • editorOverviewRuler.selectionHighlightForeground#ff6eb4
  • editorOverviewRuler.warningForeground#ffd6b4
  • editorSuggestWidget.background#130d1e
  • editorSuggestWidget.border#c94fa8
  • editorSuggestWidget.foreground#f0d6f5
  • editorSuggestWidget.highlightForeground#ff6eb4
  • editorSuggestWidget.selectedBackground#3d1a5e
  • editorWarning.foreground#ffd6b4
  • editorWidget.background#130d1e
  • editorWidget.border#c94fa8
  • errorForeground#ff6e8a
  • focusBorder#c94fa8
  • foreground#f0d6f5
  • gitDecoration.addedResourceForeground#6dc98a
  • gitDecoration.conflictingResourceForeground#ff6e8a
  • gitDecoration.deletedResourceForeground#d44a6e
  • gitDecoration.ignoredResourceForeground#4a2a5e
  • gitDecoration.modifiedResourceForeground#e8a87c
  • gitDecoration.untrackedResourceForeground#9de8b0
  • icon.foreground#c9a8d4
  • input.background#130d1e
  • input.border#3d1a5e
  • input.foreground#f0d6f5
  • input.placeholderForeground#5a3a6e
  • inputOption.activeBackground#3d1a5e
  • inputOption.activeBorder#c94fa8
  • inputValidation.errorBackground#5c0a2a
  • inputValidation.errorBorder#d44a6e
  • inputValidation.infoBackground#0f1a3e
  • inputValidation.infoBorder#8a6fc9
  • list.activeSelectionBackground#3d1a5e
  • list.activeSelectionForeground#ff6eb4
  • list.focusBackground#3d1a5e
  • list.focusForeground#ff6eb4
  • list.highlightForeground#ff6eb4
  • list.hoverBackground#1a0f2a
  • list.hoverForeground#e084c8
  • list.inactiveSelectionBackground#1f1030
  • list.inactiveSelectionForeground#c9a8d4
  • listFilterWidget.background#130d1e
  • listFilterWidget.outline#c94fa8
  • menu.background#130d1e
  • menu.border#2a0f3e
  • menu.foreground#f0d6f5
  • menu.selectionBackground#3d1a5e
  • menu.selectionForeground#ff6eb4
  • menu.separatorBackground#2a0f3e
  • menubar.selectionBackground#1a0f2a
  • menubar.selectionForeground#ff6eb4
  • minimap.background#0a0810
  • minimap.findMatchHighlight#ff6eb477
  • minimap.selectionHighlight#c94fa877
  • notificationCenter.border#2a0f3e
  • notifications.background#130d1e
  • notifications.border#2a0f3e
  • notifications.foreground#f0d6f5
  • notificationsErrorIcon.foreground#ff6e8a
  • notificationsInfoIcon.foreground#8a6fc9
  • notificationsWarningIcon.foreground#ffd6b4
  • notificationToast.border#c94fa8
  • panel.background#0a0810
  • panel.border#2a0f3e
  • panelTitle.activeBorder#ff6eb4
  • panelTitle.activeForeground#ff6eb4
  • panelTitle.inactiveForeground#7a5a8a
  • peekView.border#c94fa8
  • peekViewEditor.background#0f0a1a
  • peekViewEditor.matchHighlightBackground#ff6eb433
  • peekViewResult.background#0a0810
  • peekViewResult.fileForeground#ff6eb4
  • peekViewResult.lineForeground#c9a8d4
  • peekViewResult.matchHighlightBackground#c94fa844
  • peekViewResult.selectionBackground#3d1a5e
  • peekViewResult.selectionForeground#ff6eb4
  • peekViewTitle.background#130d1e
  • peekViewTitleDescription.foreground#c9a8d4
  • peekViewTitleLabel.foreground#ff6eb4
  • progressBar.background#c94fa8
  • scrollbarSlider.activeBackground#ff6eb455
  • scrollbarSlider.background#7b2d8b44
  • scrollbarSlider.hoverBackground#c94fa866
  • searchEditor.findMatchBackground#ff6eb433
  • selection.background#7b2d8b55
  • sideBar.background#0a0810
  • sideBar.border#2a0f3e
  • sideBar.foreground#c9a8d4
  • sideBarSectionHeader.background#130d1e
  • sideBarSectionHeader.border#2a0f3e
  • sideBarSectionHeader.foreground#e084c8
  • sideBarTitle.foreground#ff6eb4
  • statusBar.background#5c1a7a
  • statusBar.border#7b2d8b
  • statusBar.debuggingBackground#8b1a4a
  • statusBar.debuggingForeground#ffd6f0
  • statusBar.foreground#ffd6f0
  • statusBar.noFolderBackground#3d1a5e
  • statusBarItem.hoverBackground#7b2d8b
  • statusBarItem.remoteBackground#c94fa8
  • statusBarItem.remoteForeground#fff0fa
  • tab.activeBackground#0d0a14
  • tab.activeBorder#ff6eb4
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ff6eb4
  • tab.border#2a0f3e
  • tab.hoverBackground#130d1e
  • tab.hoverForeground#e084c8
  • tab.inactiveBackground#080610
  • tab.inactiveForeground#7a5a8a
  • tab.unfocusedActiveForeground#c9a8d4
  • terminal.ansiBlack#1a0f2a
  • terminal.ansiBlue#8a6fc9
  • terminal.ansiBrightBlack#5a3a6e
  • terminal.ansiBrightBlue#b09ee8
  • terminal.ansiBrightCyan#c084d4
  • terminal.ansiBrightGreen#9de8b0
  • terminal.ansiBrightMagenta#ff6eb4
  • terminal.ansiBrightRed#ff6e8a
  • terminal.ansiBrightWhite#f0d6f5
  • terminal.ansiBrightYellow#ffd6b4
  • terminal.ansiCyan#a05ec4
  • terminal.ansiGreen#6dc98a
  • terminal.ansiMagenta#c94fa8
  • terminal.ansiRed#d44a6e
  • terminal.ansiWhite#c9a8d4
  • terminal.ansiYellow#e8a87c
  • terminal.background#0a0810
  • terminal.foreground#f0d6f5
  • terminalCursor.background#0d0a14
  • terminalCursor.foreground#ff6eb4
  • textLink.activeForeground#ffa0d0
  • textLink.foreground#ff6eb4
  • textPreformat.foreground#e084c8
  • textSeparator.foreground#3d1a5e
  • titleBar.activeBackground#080610
  • titleBar.activeForeground#ff6eb4
  • titleBar.border#2a0f3e
  • titleBar.inactiveBackground#080610
  • titleBar.inactiveForeground#7a5a8a
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b4a7eitalic
string, string.quoted, string.template#ff6eb4
constant.character.escape, string.regexp#ff9ed2
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, storage.type.class, storage.type.function, storage.type.interface, storage.type.enum#c94fa8bold
keyword.control.flow, keyword.control.return, keyword.control.if, keyword.control.else, keyword.control.for, keyword.control.while, keyword.control.switch#e060bebold
keyword.operator, punctuation.separator#e084c8
storage, storage.type#b09ee8bold
storage.modifier#9b87d4italic
constant.numeric#ffa0d0
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan#ff6e8abold
constant.language, constant.other#ffa0d0
variable, variable.other#f0d6f5
variable.language.this, variable.language.self, variable.language.super#ff6eb4italic
variable.parameter#d4a8f5italic
entity.name.function, meta.function-call.generic, support.function#e084c8bold
meta.function-call#d070be
entity.name.class, entity.name.type, entity.name.type.class, entity.other.inherited-class, support.class#b09ee8bold
entity.name.type.alias, entity.name.type.interface, entity.name.type.enum#c9b5f0
entity.name.tag, meta.tag.sgml#ff6eb4bold
entity.other.attribute-name#e8a87c
punctuation.definition.tag#7b2d8b
support.type.property-name.css#e084c8
support.constant.property-value.css#ffa0d0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b09ee8
entity.name.tag.css#ff6eb4
constant.numeric.css, keyword.other.unit.css#ffd6b4
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c94fa8bold
entity.name.module, support.module#9de8b0
meta.decorator, entity.name.function.decorator, punctuation.decorator#6dc98aitalic
punctuation.definition.block, punctuation.definition.parameters, punctuation.section.block, meta.brace#9b87d4
markup.heading, entity.name.section#ff6eb4bold
markup.bold#e084c8bold
markup.italic#c9b5f0italic
markup.inline.raw, markup.fenced_code#ffa0d0
markup.underline.link#ff6eb4
markup.quote#7b2d8bitalic
support.type.property-name.json#e084c8
string.quoted.double.json#ffa0d0
invalid, invalid.illegal#ff6e8aunderline
invalid.deprecated#e8a87cstrikethrough
KAngel — Needy Girl Overdose by Agusmoky - VS Code Theme