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#B4C1D0italic
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#F6F8F7
constant.language#B4C1D0
constant.character.escape#FFFFFF
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#D58FDB
entity.other.attribute-name#D58FDBitalic
entity.name.function, variable.function, meta.export.default.js#fff
keyword#D167B5italic
keyword.control#D58FDBitalic
keyword.operator#D58FDBnormal
keyword.other.unit#B4C1D0
support#B4C1D0
support.function#F6F8F7
support.variable#FFFFFF
meta.object-literal.key, support.type.property-name#D58FDB
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#FFFFFF
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
meta.function-call.generic.python#F6F8F7
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
entity.name.type, entity.name.type.alias, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.module, support.type, support.type.builtin, support.type.primitive#A8C3C8
storage.type.interface, storage.type.type, storage.type.enum, storage.type.class, storage.type.namespace#D58FDBitalic
keyword.operator.type, keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.definiteassignment#D58FDB
punctuation.definition.typeparameters, meta.type.parameters, entity.name.type.parameter#FAD481
meta.type.annotation, meta.return.type#A8C3C8
storage.modifier.async, storage.modifier.ts, keyword.control.as, keyword.control.satisfies#D58FDBitalic
storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx#D58FDB
variable.other.property.ts, variable.other.property.tsx, variable.other.object.ts, variable.other.object.tsx#B4C1D0
meta.decorator, punctuation.decorator#FAD481
entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx, support.class.component, support.class.component.jsx, support.class.component.tsx#D167B5
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx, entity.other.attribute-name.ts.tsx#D58FDBitalic
meta.jsx.children, meta.jsx.children.tsx#F6F8F7
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, meta.embedded.expression#D58FDB
string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#B4C1D0
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.union.rust, entity.name.type.option.rust, entity.name.type.result.rust#A8C3C8
storage.type.rust, storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.impl.rust, storage.type.union.rust, keyword.other.fn.rust#D58FDBitalic
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#FAD481italic
entity.name.function.macro.rust, entity.name.macro.rust, support.macro.rust, meta.macro.rust#8FC8FF
punctuation.definition.macro.rust#8FC8FF
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#6B6D8C
meta.attribute.rust entity.name#B4C1D0
storage.modifier.mut.rust, keyword.other.unsafe.rust, keyword.other.ref.rust, storage.modifier.ref.rust#D167B5italic
variable.language.self.rust, variable.language.super.rust#D58FDBitalic
keyword.operator.borrow.rust, keyword.operator.dereference.rust, keyword.operator.sigil.rust#D58FDB
punctuation.separator.namespace.rust#D58FDB
keyword.operator.question.rust#D167B5
entity.name.module.rust, entity.name.type.mod.rust#B4C1D0
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#FAD481
string.quoted.single, string.quoted.double, string.quoted.backtick#B4C1D0
support.type.property-name.json, string.json support.type.property-name#D58FDB
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#D58FDBitalic
string.quoted.module-ref, meta.import string.quoted#B4C1D0
variable.other.constant, constant.other#A8C3C8
variable.language.this, variable.language.super#D58FDBitalic
keyword.operator.new#D167B5italic
keyword.operator.spread#D58FDB
entity.name.package.go#B4C1D0
entity.name.type.go, storage.type.go#A8C3C8

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Mr Pink - Coding Theme