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#25252F
  • activityBar.foreground#D58FDB
  • activityBarBadge.background#6B6D8C
  • activityBarBadge.foreground#1E1E25
  • breadcrumb.foreground#B4C1D05b
  • button.background#1E1E25
  • button.foreground#ffffff
  • button.hoverBackground#111
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#D58FDB33
  • dropdown.background#1E1E25
  • dropdown.border#000000
  • editor.background#25252F
  • editor.foreground#F6F8F7
  • editor.lineHighlightBackground#1E1E256b
  • editor.selectionBackground#F6F8F74b
  • editorBracketMatch.border#D58FDB
  • editorCursor.foreground#D58FDB
  • editorGroup.border#111
  • editorGroupHeader.tabsBackground#25252F
  • editorHoverWidget.background#1E1E25
  • editorHoverWidget.border#111
  • editorIndentGuide.background#1E1E25
  • editorLineNumber.foreground#6B6D8C5b
  • editorSuggestWidget.background#1E1E25
  • editorSuggestWidget.border#111
  • editorSuggestWidget.selectedBackground#0000005b
  • editorWhitespace.foreground#1E1E25
  • editorWidget.background#1E1E25
  • extensionButton.prominentBackground#D167B5
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#D58FDB
  • gitDecoration.addedResourceForeground#D58FDB
  • gitDecoration.deletedResourceForeground#ff6057
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#FAD481
  • gitDecoration.untrackedResourceForeground#84eea7
  • input.background#0000003b
  • input.border#111
  • list.activeSelectionBackground#0000005b
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#0000005b
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#0000005b
  • list.inactiveSelectionBackground#0000005b
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#111
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#0000005b
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1E1E25
  • sideBarSectionHeader.background#1E1E25
  • statusBar.background#1E1E25
  • statusBar.debuggingBackground#B2D5DA
  • statusBar.debuggingForeground#1E1E25
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1E1E25
  • statusBarItem.hoverBackground#0000005b
  • tab.activeBackground#25252F
  • tab.border#1E1E25
  • tab.inactiveBackground#1E1E25
  • terminal.ansiBlue#4095ff
  • terminal.ansiBrightBlue#4095ff
  • terminal.ansiBrightCyan#8FC8FF
  • terminal.ansiBrightGreen#84eea7
  • terminal.ansiBrightMagenta#F859CA
  • terminal.ansiBrightRed#ff6057
  • terminal.ansiBrightYellow#FAD481
  • terminal.ansiCyan#8FC8FF
  • terminal.ansiGreen#84eea7
  • terminal.ansiMagenta#F859CA
  • terminal.ansiRed#ff6057
  • terminal.ansiYellow#FAD481
  • terminal.background#22222A
  • terminal.foreground#F6F8F7
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#A8C3C8
  • terminalCursor.foreground#D58FDB
  • titleBar.activeBackground#25252F
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#1E1E25
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.template meta.embedded.line#F6F8F7
variable.parameter, variable.other, constant.language#FFFFFFitalic
storage.type, storage.modifier#D58FDBitalic
string.regexp#B4C1D0
meta.jsx.children.js, meta.property-value.css, text.html.derivative, constant.length.units.css, support.function.misc.css, support.function.transform.css, meta.function.color.css, constant.other.color.rgb-value.hex.css, meta.identifier.css#5F8658
constant.language#CB602D
constant.character.escape#CB602D
entity.name#A8C3C8
punctuation.definition.tag, punctuation.definition.block.js, punctuation.definition.string.begin, punctuation.definition.string.end, meta.property-list.css, storage.type.function.arrow.js#5F8658
entity.other.attribute-name#D58FDBitalic
entity.name.function, variable.function, meta.export.default.js#77DFEF
keyword#D167B5italic
keyword.control#D58FDBnormal
keyword.operator#CB602Dnormal
keyword.other.unit#a801d4
support#B4C1D0
support.function#EE0F88
support.variable#FFFFFF
meta.object-literal.key, support.type.property-name#D58FDB
meta.function-call.generic.python#A771FE
entity.name.type.class.python#D58FDB
punctuation.definition.decorator.python, support.type.python#7EB3FF
variable.language.special.self.python, variable.language.special.cls.python#D58FDB
support.variable.magic.python#EE0F88
storage.type.string.python, string.quoted.single.python, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python, string.quoted.docstring.multi.python constant.character.escape.python#5F8658normal
variable.other.property.js#B4C1D0italic
variable.other.object.js#F6F8F7
meta.brace.square, meta.brace.round, punctuation.definition.block#A8C3C8
punctuation.separator.key-value#ffffff
punctuation.section.embedded#ffffff
punctuation.section.embedded#5F8658
string.template#D58FDB
support.type.property-name.css, support.type.vendored.property-name.css, meta.property-name#D58FDB
support.constant.font-name#B4C1D0
entity.other.attribute-name.id#D167B5
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F6F8F7
markup.heading, entity.name.section#B4C1D0
markup.quote#D167B5
beginning.punctuation.definition.list#B4C1D0
markup.underline.link#F6F8F7
string.other.link.description#B4C1D0
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml#D167B5
storage.type.cs#D167B5
entity.name.variable.local.cs#B4C1D0
entity.name.variable.field.cs, entity.name.variable.property.cs#B4C1D0
source.cpp keyword.operator#D167B5
punctuation.definition.heading.markdown#D167B5
punctuation.definition.list#D167B5
punctuation.definition.bold.markdown#D58FDB7a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdown, entity.name.section.markdownbold
markup.italic.markdownitalic
Pink Puff by Jet C. - VS Code Theme