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#12060f
  • activityBar.foreground#ffd94a
  • activityBar.inactiveForeground#aa8a96
  • activityBarBadge.background#ff4d5a
  • activityBarBadge.foreground#fff7de
  • badge.background#ffd94a
  • badge.foreground#180913
  • button.background#ff4d5a
  • button.foreground#fff7de
  • button.hoverBackground#ff6f78
  • descriptionForeground#d9cfb0
  • diffEditor.insertedTextBackground#8af27b22
  • diffEditor.removedTextBackground#ff6b5f22
  • dropdown.background#2d1520
  • dropdown.border#7f2b45
  • editor.background#200d18
  • editor.findMatchBackground#ffd94a
  • editor.findMatchForeground#180913
  • editor.findMatchHighlightBackground#ffd94a44
  • editor.foreground#f8f3de
  • editor.inactiveSelectionBackground#401d3688
  • editor.selectionBackground#5a274d
  • editor.wordHighlightBackground#7cd6ff22
  • editor.wordHighlightStrongBackground#ffd94a33
  • editorBracketMatch.background#7cd6ff22
  • editorBracketMatch.border#7cd6ff
  • editorCursor.foreground#7cd6ff
  • editorGroup.border#5b2437
  • editorGroupHeader.tabsBackground#12060f
  • editorGutter.addedBackground#8af27b
  • editorGutter.deletedBackground#ff6b5f
  • editorGutter.modifiedBackground#7cd6ff
  • editorHoverWidget.background#180913
  • editorHoverWidget.border#7f2b45
  • editorIndentGuide.activeBackground1#7f2b45
  • editorIndentGuide.background1#3b1729
  • editorLineNumber.activeForeground#ffd94a
  • editorLineNumber.foreground#8e5f72
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#2b1020
  • editorWidget.background#180913
  • editorWidget.border#7f2b45
  • errorForeground#ff6b5f
  • focusBorder#ffd94a
  • foreground#f8f3de
  • icon.foreground#7cd6ff
  • input.background#180913
  • input.border#7f2b45
  • input.foreground#f8f3de
  • input.placeholderForeground#aa8a96
  • list.activeSelectionBackground#4b1f33
  • list.activeSelectionForeground#fff7de
  • list.highlightForeground#ffd94a
  • list.hoverBackground#331625
  • panel.background#12060f
  • panel.border#5b2437
  • panelTitle.activeForeground#ffd94a
  • panelTitle.inactiveForeground#aa8a96
  • progressBar.background#7cd6ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ffd94aaa
  • scrollbarSlider.background#7f2b4599
  • scrollbarSlider.hoverBackground#a6395eaa
  • selection.background#5a274d
  • sideBar.background#1a0b15
  • sideBar.border#5b2437
  • sideBar.foreground#e8dcc0
  • sideBarTitle.foreground#ffd94a
  • statusBar.background#0b0308
  • statusBar.border#5b2437
  • statusBar.debuggingBackground#ff4d5a
  • statusBar.debuggingForeground#fff7de
  • statusBar.foreground#e8dcc0
  • statusBar.noFolderBackground#0b0308
  • tab.activeBackground#2d1520
  • tab.activeBorderTop#ff4d5a
  • tab.activeForeground#fff7de
  • tab.border#5b2437
  • tab.inactiveBackground#12060f
  • tab.inactiveForeground#aa8a96
  • tab.unfocusedActiveBorderTop#7f2b45
  • terminal.ansiBlack#12060f
  • terminal.ansiBlue#5ea1ff
  • terminal.ansiBrightBlack#aa8a96
  • terminal.ansiBrightBlue#8ebcff
  • terminal.ansiBrightCyan#c5f1ff
  • terminal.ansiBrightGreen#b2ff9f
  • terminal.ansiBrightMagenta#ff88c3
  • terminal.ansiBrightRed#ff8a81
  • terminal.ansiBrightWhite#fff7de
  • terminal.ansiBrightYellow#fff0a3
  • terminal.ansiCyan#7cd6ff
  • terminal.ansiGreen#8af27b
  • terminal.ansiMagenta#ff4d9e
  • terminal.ansiRed#ff6b5f
  • terminal.ansiWhite#f8f3de
  • terminal.ansiYellow#ffd94a
  • terminal.background#12060f
  • terminal.foreground#f8f3de
  • textBlockQuote.background#2d1520
  • textCodeBlock.background#180913
  • textLink.activeForeground#c5f1ff
  • textLink.foreground#7cd6ff
  • textPreformat.foreground#8af27b
  • titleBar.activeBackground#0b0308
  • titleBar.activeForeground#fff0b1
  • titleBar.inactiveBackground#0b0308
  • titleBar.inactiveForeground#aa8a96
  • tree.indentGuidesStroke#5b2437

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94727f
keyword, storage, storage.type#ffd94a
string#8af27b
constant.numeric, constant.language, support.constant#ffb36b
entity.name.function, meta.function-call, support.function#7cd6ff
variable, meta.definition.variable.name, support.variable#f8f3de
variable.parameter#ffc8de
entity.name.type, entity.name.class, support.type, support.class#5ea1ff
entity.name.tag, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#ff4d9e
entity.other.attribute-name, entity.other.attribute-name.class.html, entity.other.attribute-name.class.jsx, entity.other.attribute-name.class.tsx#ffd94a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#7cd6ff
support.type.property-name.json, meta.object-literal.key#ffb36b
Pixel Night Arcade Themes by vdhoangson - VS Code Theme