Pink Code Dark

Name: Pink Code Dark
Author: Hygor Moor

Publisher: Hygor MoorThemes in package: 2

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Pink Code Dark — Pink Code Dark (Colorized)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#000000
activityBar.foreground#ff9dce
activityBarBadge.background#00b0ff
activityBarBadge.foreground#20232B
badge.background#00b0ff
badge.foreground#20232B
button.background#00e8c5cc
button.hoverBackground#07d4b6cc
debugExceptionWidget.background#FF9F2E60
debugExceptionWidget.border#FF9F2E60
debugToolBar.background#000000
diffEditor.insertedTextBackground#19920665
diffEditor.removedTextBackground#8600176b
dropdown.background#2b303b
dropdown.border#363c49
editor.background#08080a
editor.findMatchBackground#f39d1256
editor.findMatchBorder#f39d12b6
editor.findMatchHighlightBackground#59b8b377
editor.foreground#D5CED9
editor.hoverHighlightBackground#373941a1
editor.lineHighlightBackground#271326
editor.lineHighlightBorder#b354ae80
editor.rangeHighlightBackground#372f3c9f
editor.selectionBackground#ff7df841
editor.selectionHighlightBackground#70707080
editor.wordHighlightBackground#ff7df841
editor.wordHighlightStrongBackground#ff7df841
editorBracketMatch.background#746f77
editorBracketMatch.border#746f77
editorCodeLens.foreground#746f77
editorCursor.foreground#FFF
editorError.foreground#FC644D
editorGroup.dropBackground#495061d7
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#9BC53DBB
editorGutter.deletedBackground#FC644DBB
editorGutter.modifiedBackground#5BC0EBBB
editorHoverWidget.background#000000
editorHoverWidget.border#00e8c5cc
editorLineNumber.foreground#646464
editorLink.activeForeground#3B79C7
editorOverviewRuler.border#1B1D23
editorRuler.foreground#4F4355
editorSuggestWidget.background#20232A
editorSuggestWidget.border#372F3C
editorSuggestWidget.selectedBackground#373941
editorWarning.foreground#FF9F2E
editorWhitespace.foreground#333844
editorWidget.background#20232A
errorForeground#FC644D
extensionButton.prominentBackground#ff72f8cc
extensionButton.prominentHoverBackground#e963e2b0
focusBorder#746f77
foreground#D5CED9
gitDecoration.ignoredResourceForeground#555555
input.background#2b303b
input.placeholderForeground#746f77
inputOption.activeBorder#C668BA
inputValidation.errorBackground#D65343
inputValidation.errorBorder#D65343
inputValidation.infoBackground#3A6395
inputValidation.infoBorder#3A6395
inputValidation.warningBackground#DE9237
inputValidation.warningBorder#DE9237
list.activeSelectionBackground#23262E
list.activeSelectionForeground#ff81f9
list.dropBackground#3a404e
list.focusBackground#282b35
list.focusForeground#eee
list.hoverBackground#23262E
list.hoverForeground#eee
list.inactiveSelectionBackground#23262E
list.inactiveSelectionForeground#ff81f9
merge.currentContentBackground#F9267240
merge.currentHeaderBackground#f9267371
merge.incomingContentBackground#3B79C740
merge.incomingHeaderBackground#3B79C7BB
minimapSlider.activeBackground#60698060
minimapSlider.background#58607460
minimapSlider.hoverBackground#60698060
panel.background#000000
panel.border#686868
panelTitle.activeBorder#ff81f9
panelTitle.inactiveForeground#525252
peekView.border#23262E
peekViewEditor.background#1A1C22
peekViewEditor.matchHighlightBackground#FF9F2E60
peekViewResult.background#1A1C22
peekViewResult.matchHighlightBackground#FF9F2E60
peekViewResult.selectionBackground#23262E
peekViewTitle.background#1A1C22
peekViewTitleDescription.foreground#746f77
pickerGroup.border#4F4355
pickerGroup.foreground#746f77
progressBar.background#C668BA
scrollbar.shadow#23262E
scrollbarSlider.activeBackground#3A3F4CCC
scrollbarSlider.background#3A3F4C77
scrollbarSlider.hoverBackground#3A3F4CAA
selection.background#746f77
sideBar.background#000000
sideBar.foreground#999999
sideBarSectionHeader.background#271324
sideBarTitle.foreground#ff81f9
statusBar.background#181818
statusBar.debuggingBackground#FC644D
statusBar.noFolderBackground#23262E
statusBarItem.activeBackground#00e8c5cc
statusBarItem.hoverBackground#07d4b5b0
statusBarItem.prominentBackground#07d4b5b0
statusBarItem.prominentHoverBackground#00e8c5cc
tab.activeBackground#242424
tab.activeBorder#ff81f9
tab.activeForeground#ff81f9
tab.inactiveBackground#000000
tab.inactiveForeground#746f77
terminal.ansiBlue#7cb7ff
terminal.ansiBrightBlue#ff81f9
terminal.ansiBrightCyan#00e8c6
terminal.ansiBrightGreen#1eff00
terminal.ansiBrightMagenta#ff00aa
terminal.ansiBrightRed#ee5d43
terminal.ansiBrightYellow#FFE66D
terminal.ansiCyan#00e8c6
terminal.ansiGreen#96E072
terminal.ansiMagenta#ff00aa
terminal.ansiRed#ee5d43
terminal.ansiYellow#FFE66D
terminalCursor.background#23262E
terminalCursor.foreground#FFE66D
titleBar.activeBackground#23262E
walkThrough.embeddedEditorBackground#23262E
widget.shadow#14151A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—
strong	—	bold
header	#BD93F9	—
source	#F8F8F2	—
meta.diff, meta.diff.header	#6272A4	—
markup.inserted	#50FA7B	—
markup.deleted	#FF5555	—
markup.changed	#FFB86C	—
invalid	#FF5555	underline
invalid.deprecated	#F8F8F2	underline
entity.name.filename	#F1FA8C	—
markup.error	#FF5555	—
markup.underline	—	underline
markup.bold	#FFB86C	bold
markup.heading	#BD93F9	bold
markup.italic	#F1FA8C
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#8BE9FD	—
markup.inline.raw, markup.raw.restructuredtext	#50FA7B	—
markup.underline.link, markup.underline.link.image	#8BE9FD	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FF79C6	—
entity.name.directive.restructuredtext, markup.quote	#F1FA8C
meta.separator.markdown	#6272A4	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#50FA7B	—
punctuation.definition.constant.restructuredtext	#BD93F9	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#BD93F9	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F8F8F2	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#F1FA8C	—
entity.name.type.class, entity.name.class	#8BE9FD
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#BD93F9
entity.other.inherited-class	#8BE9FD
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#6272A4	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FF79C6	—
comment.block.documentation entity.name.type	#8BE9FD
comment.block.documentation entity.name.type punctuation.definition.bracket	#8BE9FD	—
comment.block.documentation variable	#FFB86C
constant, variable.other.constant	#BD93F9	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FF79C6	—
entity.name.tag	#FF79C6	—
entity.other.attribute-name.parent-selector	#FF79C6	—
entity.other.attribute-name	#50FA7B
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#50FA7B	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#FFB86C
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#50FA7B
meta.decorator variable.other.object	#50FA7B	—
keyword, punctuation.definition.keyword	#FF79C6	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#FF79C6	—
support	#8BE9FD
support.function.magic, support.variable, variable.other.predefined	#BD93F9
support.function, support.type.property-name	—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#FF79C6	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#F8F8F2	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#FF79C6	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#8BE9FD	—
constant.other.date, constant.other.timestamp	#FFB86C	—
variable.other.alias.yaml	#50FA7B	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FF79C6
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.php, storage.type.ocaml	#8BE9FD
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FFB86C	—
storage.modifier	#FF79C6	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#F1FA8C	—
punctuation.definition.group.capture.regexp	#FF79C6	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF5555	—
punctuation.definition.character-class.regexp	#8BE9FD	—
punctuation.definition.group.regexp	#FFB86C	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF5555	—
meta.assertion.look-ahead.regexp	#50FA7B	—
string	#F1FA8C	—
punctuation.definition.string.begin, punctuation.definition.string.end	#E9F284	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#8BE9FE	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#6272A4	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#F8F8F2	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#FFB86C
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F8F8F2
meta.selectionset.graphql variable	#F1FA8C	—
meta.selectionset.graphql meta.arguments variable	#F8F8F2	—
entity.name.fragment.graphql, variable.fragment.graphql	#8BE9FD	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#F8F8F2	—
source.shell variable.other	#BD93F9	—
support.constant	#BD93F9
meta.scope.prerequisites.makefile	#F1FA8C	—
meta.attribute-selector.scss	#F1FA8C	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F8F8F2	—
meta.preprocessor.haskell	#6272A4	—
invalid, keyword.operator, constant.numeric.css, keyword.other.unit.px.css, constant.numeric.decimal.js, constant.numeric.json, italic, keyword.control, quote, storage, modifier, this, comment, string, entity.name.function, support.function, support.type.property-name, entity.other.attribute-name, punctuation.definition.comment, text.html.basic entity.other, markup.quote, markup.italic, meta.tag.sgml.doctype, punctuation.binary, markup.changed, meta.diff.header, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, meta.delimiter.period, punctuation.accessor, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type, variable.other.object.property, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.section, meta.selector, comment, entity.name.type.class //class names, keyword //import, export, return…, constant //String, Number, Boolean…, this, super, storage.modifier //static keyword, storage.type.class.js //class keyword, markup.italic, markup.quote, keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, entity.other.inherited-class, comment.block.documentation entity.name.type, comment.block.documentation variable, entity.other.attribute-name, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter, meta.decorator variable.other.readwrite, meta.decorator variable.other.property, support, variable.other.alias.yaml, entity.name.type // Type names, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.php, storage.type.ocaml, meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable, emphasis, meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted, entity.name.type.js, entity.name.type.module.js, keyword.operator.logical, keyword.operator, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html	—
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, comment, punctuation.accessor, keyword, storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, entity.name.function, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, italic, quote, source.elixir .punctuation.binary.elixir, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown, markup.quote.markdown, keyword.control	—

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}