Magica

Name: Magica
Author: Alisson Mateus de Oliveira

Publisher: Alisson Mateus de OliveiraThemes in package: 4

A quiet, native-feeling Mac theme for VS Code—with Xcode-inspired Light and Dark palettes, optional cursive syntax, and matching navigator icons.

Open in VS Code GitHub

Color themes

VS Code preview

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

Magica — Magica Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#35363C
activityBar.activeBorder#0A84FF
activityBar.activeFocusBorder#64D2FF
activityBar.background#2B2C31
activityBar.border#3A3B41
activityBar.dropBorder#0A84FF
activityBar.foreground#F2F2F7
activityBar.inactiveForeground#98989D
activityBarBadge.background#0A84FF
activityBarBadge.foreground#FFFFFF
badge.background#0A84FF
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#202126
breadcrumb.focusForeground#FFFFFF
breadcrumb.foreground#98989D
breadcrumbPicker.background#2C2C2E
button.background#0A84FF
button.border#409CFF
button.foreground#FFFFFF
button.hoverBackground#3296FF
button.secondaryBackground#3A3A3C
button.secondaryForeground#F2F2F7
button.secondaryHoverBackground#48484A
chat.avatarBackground#0A84FF
chat.avatarForeground#FFFFFF
chat.checkpointSeparator#48484A
chat.editedFileForeground#64D2FF
chat.linesAddedForeground#30D158
chat.linesRemovedForeground#FF6961
chat.requestBackground#25262B
chat.requestBorder#48484A
chat.requestBubbleBackground#2C2C2E
chat.requestBubbleHoverBackground#35363C
chat.requestCodeBorder#48484A
chat.slashCommandBackground#3A3A3C
chat.slashCommandForeground#F2F2F7
chat.thinkingShimmer#0A84FF
chatManagement.sashBorder#48484A
checkbox.background#2C2C2E
checkbox.border#636366
checkbox.foreground#F2F2F7
commandCenter.activeBackground#3A3A3C
commandCenter.activeBorder#0A84FF
commandCenter.activeForeground#FFFFFF
commandCenter.background#2C2C2EB8
commandCenter.border#48484A
commandCenter.foreground#F2F2F7
commandCenter.inactiveBorder#3A3A3C
commandCenter.inactiveForeground#98989D
descriptionForeground#98989D
diffEditor.diagonalFill#8E8E9320
diffEditor.insertedLineBackground#30D15817
diffEditor.insertedTextBackground#30D15838
diffEditor.removedLineBackground#FF453A17
diffEditor.removedTextBackground#FF453A38
diffEditorGutter.insertedLineBackground#30D15824
diffEditorGutter.removedLineBackground#FF453A24
dropdown.background#2C2C2E
dropdown.border#636366
dropdown.foreground#F2F2F7
dropdown.listBackground#303035
editor.background#202126
editor.findMatchBackground#FFD60A99
editor.findMatchBorder#FFE36E
editor.findMatchForeground#1C1C1E
editor.findMatchHighlightBackground#FFD60A45
editor.foreground#F2F2F7
editor.inactiveSelectionBackground#0A84FF33
editor.lineHighlightBackground#27282E
editor.selectionBackground#0A84FF55
editor.selectionHighlightBackground#0A84FF2B
editor.wordHighlightBackground#FFD60A30
editor.wordHighlightStrongBackground#FF9F0A38
editorBracketHighlight.foreground1#67B7A4
editorBracketHighlight.foreground2#FC5FA3
editorBracketHighlight.foreground3#5DD8FF
editorBracketHighlight.foreground4#FD8F3F
editorBracketHighlight.foreground5#FC6A5D
editorBracketHighlight.foreground6#D0BF69
editorBracketHighlight.unexpectedBracket.foreground#FF6961
editorBracketMatch.background#0A84FF2B
editorBracketMatch.border#64D2FF
editorCodeLens.foreground#8E8E93
editorCursor.foreground#0A84FF
editorError.foreground#FF6961
editorGroup.border#3A3B41
editorGroup.dropBackground#0A84FF30
editorGroup.emptyBackground#25262B
editorGroupHeader.noTabsBackground#25262B
editorGroupHeader.tabsBackground#292A2F
editorGroupHeader.tabsBorder#3A3B41
editorGutter.addedBackground#30D158
editorGutter.deletedBackground#FF6961
editorGutter.modifiedBackground#0A84FF
editorHoverWidget.background#2C2C2E
editorHoverWidget.border#48484A
editorHoverWidget.foreground#F2F2F7
editorHoverWidget.highlightForeground#64D2FF
editorHoverWidget.statusBarBackground#252529
editorIndentGuide.activeBackground#63636A
editorIndentGuide.background#35363C
editorInlayHint.background#303137
editorInlayHint.foreground#98989D
editorLineNumber.activeForeground#D1D1D6
editorLineNumber.foreground#6E6E73
editorLink.activeForeground#64D2FF
editorOverviewRuler.addedForeground#30D158
editorOverviewRuler.border#3A3B41
editorOverviewRuler.deletedForeground#FF6961
editorOverviewRuler.modifiedForeground#0A84FF
editorPane.background#25262B
editorRuler.foreground#35363C
editorStickyScroll.background#27282E
editorStickyScroll.border#00000000
editorStickyScroll.shadow#00000080
editorStickyScrollHover.background#303137
editorSuggestWidget.background#2C2C2E
editorSuggestWidget.border#48484A
editorSuggestWidget.focusHighlightForeground#FFFFFF
editorSuggestWidget.foreground#F2F2F7
editorSuggestWidget.highlightForeground#FC5FA3
editorSuggestWidget.selectedBackground#0A64D8
editorSuggestWidget.selectedForeground#FFFFFF
editorSuggestWidget.selectedIconForeground#FFFFFF
editorWarning.foreground#FFD60A
editorWhitespace.foreground#3A3B41
editorWidget.background#2C2C2E
editorWidget.border#48484A
editorWidget.foreground#F2F2F7
editorWidget.resizeBorder#0A84FF
errorForeground#FF6961
focusBorder#0A84FF
foreground#F2F2F7
gitDecoration.addedResourceForeground#30D158
gitDecoration.conflictingResourceForeground#FFD60A
gitDecoration.deletedResourceForeground#FF6961
gitDecoration.ignoredResourceForeground#8E8E93
gitDecoration.modifiedResourceForeground#409CFF
gitDecoration.renamedResourceForeground#64D2FF
gitDecoration.stageDeletedResourceForeground#FF6961
gitDecoration.stageModifiedResourceForeground#30D158
gitDecoration.submoduleResourceForeground#98989D
gitDecoration.untrackedResourceForeground#30D158
icon.foreground#C7C7CC
inlineChat.background#2C2C2E
inlineChat.border#48484A
inlineChat.foreground#F2F2F7
inlineChat.shadow#000000A6
inlineChatDiff.inserted#30D15830
inlineChatDiff.removed#FF453A30
inlineChatInput.background#252529
inlineChatInput.border#636366
inlineChatInput.focusBorder#0A84FF
inlineChatInput.placeholderForeground#8E8E93
input.background#2C2C2E
input.border#636366
input.foreground#F2F2F7
input.placeholderForeground#8E8E93
inputOption.activeBackground#0A84FF42
inputOption.activeBorder#0A84FF
inputOption.activeForeground#FFFFFF
interactive.activeCodeBorder#0A84FF
interactive.inactiveCodeBorder#48484A
keybindingLabel.background#2C2C2E
keybindingLabel.border#545458
keybindingLabel.bottomBorder#1C1C1E
keybindingLabel.foreground#F2F2F7
list.activeSelectionBackground#0A64D8
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.deemphasizedForeground#8E8E93
list.dropBackground#0A84FF38
list.errorForeground#FF6961
list.focusBackground#0A64D8
list.focusForeground#FFFFFF
list.focusHighlightForeground#FFFFFF
list.focusOutline#0A84FF
list.highlightForeground#64D2FF
list.hoverBackground#3A3A3C99
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#3A4655
list.inactiveSelectionForeground#F2F2F7
list.invalidItemForeground#FF6961
menu.background#2C2C2E
menu.border#48484A
menu.foreground#F2F2F7
menu.selectionBackground#0A64D8
menu.selectionForeground#FFFFFF
menu.separatorBackground#48484A
menubar.selectionBackground#3A3A3C
menubar.selectionForeground#FFFFFF
minimap.background#202126
notificationCenterHeader.background#2D2E34
notificationCenterHeader.foreground#F2F2F7
notificationLink.foreground#64D2FF
notifications.background#2C2C2E
notifications.border#48484A
notifications.foreground#F2F2F7
panel.background#25262B
panel.border#3A3B41
panel.dropBorder#0A84FF
panelInput.border#545458
panelSection.border#3A3B41
panelSectionHeader.background#2D2E34
panelSectionHeader.border#3A3B41
panelSectionHeader.foreground#D1D1D6
panelTitle.activeBorder#0A84FF
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#98989D
peekView.border#0A84FF
peekViewEditor.background#202126
peekViewEditor.matchHighlightBackground#FFD60A55
peekViewResult.background#25262B
peekViewResult.fileForeground#F2F2F7
peekViewResult.lineForeground#98989D
peekViewResult.matchHighlightBackground#FFD60A55
peekViewResult.selectionBackground#0A64D8
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#2D2E34
peekViewTitleDescription.foreground#98989D
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#48484A
pickerGroup.foreground#98989D
progressBar.background#0A84FF
quickInput.background#2C2C2E
quickInput.foreground#F2F2F7
quickInputList.focusBackground#0A64D8
quickInputList.focusForeground#FFFFFF
quickInputList.focusHighlightForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#35363C
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#EBEBF559
scrollbarSlider.background#EBEBF526
scrollbarSlider.hoverBackground#EBEBF540
selection.background#0A84FF55
settings.checkboxBackground#2C2C2E
settings.checkboxBorder#636366
settings.checkboxForeground#F2F2F7
settings.dropdownBackground#2C2C2E
settings.dropdownBorder#636366
settings.dropdownForeground#F2F2F7
settings.focusedRowBackground#0A84FF1F
settings.focusedRowBorder#0A84FF
settings.headerBorder#48484A
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#0A84FF
settings.numberInputBackground#2C2C2E
settings.numberInputBorder#636366
settings.numberInputForeground#F2F2F7
settings.rowHoverBackground#3A3A3C80
settings.sashBorder#3A3B41
settings.settingsHeaderHoverForeground#64D2FF
settings.textInputBackground#2C2C2E
settings.textInputBorder#636366
settings.textInputForeground#F2F2F7
sideBar.background#25262B
sideBar.border#3A3B41
sideBar.dropBackground#0A84FF30
sideBar.foreground#F2F2F7
sideBarSectionHeader.background#2D2E34
sideBarSectionHeader.border#3A3B41
sideBarSectionHeader.foreground#D1D1D6
sideBarTitle.foreground#FFFFFF
statusBar.background#292A2F
statusBar.border#3A3B41
statusBar.debuggingBackground#493A12
statusBar.debuggingBorder#6B5418
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#D1D1D6
statusBar.noFolderBackground#292A2F
statusBar.noFolderBorder#3A3B41
statusBar.noFolderForeground#98989D
statusBarItem.activeBackground#545458
statusBarItem.hoverBackground#48484A80
statusBarItem.hoverForeground#FFFFFF
statusBarItem.remoteBackground#0A84FF
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#5DD8FF
symbolIcon.booleanForeground#D0BF69
symbolIcon.classForeground#5DD8FF
symbolIcon.colorForeground#D0BF69
symbolIcon.constantForeground#D0BF69
symbolIcon.constructorForeground#67B7A4
symbolIcon.enumeratorForeground#5DD8FF
symbolIcon.enumeratorMemberForeground#D0BF69
symbolIcon.eventForeground#FD8F3F
symbolIcon.fieldForeground#F2F2F7
symbolIcon.fileForeground#F2F2F7
symbolIcon.folderForeground#67B7A4
symbolIcon.functionForeground#67B7A4
symbolIcon.interfaceForeground#5DD8FF
symbolIcon.keyForeground#F2F2F7
symbolIcon.keywordForeground#FC5FA3
symbolIcon.methodForeground#67B7A4
symbolIcon.moduleForeground#5DD8FF
symbolIcon.namespaceForeground#5DD8FF
symbolIcon.nullForeground#D0BF69
symbolIcon.numberForeground#D0BF69
symbolIcon.objectForeground#F2F2F7
symbolIcon.operatorForeground#FC5FA3
symbolIcon.packageForeground#5DD8FF
symbolIcon.propertyForeground#F2F2F7
symbolIcon.referenceForeground#D0BF69
symbolIcon.snippetForeground#FC6A5D
symbolIcon.stringForeground#FC6A5D
symbolIcon.structForeground#5DD8FF
symbolIcon.textForeground#F2F2F7
symbolIcon.typeParameterForeground#5DD8FF
symbolIcon.unitForeground#FD8F3F
symbolIcon.variableForeground#F2F2F7
tab.activeBackground#202126
tab.activeBorderTop#0A84FF
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#FF9F0A
tab.border#3A3B41
tab.hoverBackground#303137
tab.hoverForeground#F2F2F7
tab.inactiveBackground#292A2F
tab.inactiveForeground#98989D
tab.inactiveModifiedBorder#B87500
tab.unfocusedActiveForeground#D1D1D6
tab.unfocusedInactiveForeground#7C7C80
terminal.ansiBlack#1C1C1E
terminal.ansiBlue#0A84FF
terminal.ansiBrightBlack#8E8E93
terminal.ansiBrightBlue#409CFF
terminal.ansiBrightCyan#9DDEFF
terminal.ansiBrightGreen#4ADE80
terminal.ansiBrightMagenta#DA8FFF
terminal.ansiBrightRed#FF6961
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFE36E
terminal.ansiCyan#64D2FF
terminal.ansiGreen#30D158
terminal.ansiMagenta#BF5AF2
terminal.ansiRed#FF453A
terminal.ansiWhite#D1D1D6
terminal.ansiYellow#FFD60A
terminal.background#202126
terminal.foreground#F2F2F7
terminal.selectionBackground#0A84FF55
terminalCursor.foreground#0A84FF
textBlockQuote.background#2C2C2E
textBlockQuote.border#48484A
textLink.activeForeground#9DDEFF
textLink.foreground#64D2FF
textPreformat.background#303035
textPreformat.foreground#F2F2F7
titleBar.activeBackground#2B2C31
titleBar.activeForeground#F2F2F7
titleBar.border#3A3B41
titleBar.inactiveBackground#25262B
titleBar.inactiveForeground#8E8E93
toolbar.activeBackground#545458
toolbar.hoverBackground#48484A80
tree.inactiveIndentGuidesStroke#3A3A3C
tree.indentGuidesStroke#48484A
walkThrough.embeddedEditorBackground#202126
welcomePage.background#25262B
welcomePage.tileBackground#2C2C2E
welcomePage.tileBorder#48484A
welcomePage.tileHoverBackground#35363C
widget.border#48484A
widget.shadow#000000A6
window.activeBorder#48484A
window.inactiveBorder#303137

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#D0BF69	—
source	#F2F2F7	—
meta.diff, meta.diff.header	#8E99A4	—
markup.inserted	#67B7A4	—
markup.deleted	#FF6961	—
markup.changed	#FD8F3F	—
invalid	#FF6961	underline
invalid.deprecated	#F2F2F7	underline
entity.name.filename	#FC6A5D	—
markup.error	#FF6961	—
markup.underline	—	underline
markup.bold	#FD8F3F	bold
markup.heading	#D0BF69	bold
markup.italic	#FC6A5D	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#5DD8FF	—
markup.inline.raw, markup.raw.restructuredtext	#67B7A4	—
markup.underline.link, markup.underline.link.image	#5DD8FF	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FC5FA3	—
entity.name.directive.restructuredtext, markup.quote	#FC6A5D	italic
meta.separator.markdown	#8E99A4	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#67B7A4	—
punctuation.definition.constant.restructuredtext	#D0BF69	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#D0BF69	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F2F2F7	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FC6A5D	—
entity.name.type.class, entity.name.class	#5DD8FF
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	#D0BF69	—
entity.other.inherited-class	#5DD8FF	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#8E99A4	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FC5FA3	—
comment.block.documentation entity.name.type	#5DD8FF	—
comment.block.documentation entity.name.type punctuation.definition.bracket	#5DD8FF	—
comment.block.documentation variable	#FD8F3F	—
constant, variable.other.constant	#D0BF69	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FC5FA3	—
entity.name.tag	#FC5FA3	—
entity.other.attribute-name.parent-selector	#FC5FA3	—
entity.other.attribute-name	#67B7A4	—
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	#67B7A4	—
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	#FD8F3F	—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#D0BF69	—
meta.decorator variable.other.object	#D0BF69	—
keyword, punctuation.definition.keyword	#FC5FA3	—
keyword.control.new, keyword.operator.new	—
meta.selector	#FC5FA3	—
support	#5DD8FF	—
support.function.magic, support.variable, variable.other.predefined	#D0BF69
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	#FC5FA3	—
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	#F2F2F7	—
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	#FC5FA3	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#5DD8FF	—
constant.other.date, constant.other.timestamp	#FD8F3F	—
variable.other.alias.yaml	#67B7A4	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FC5FA3
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.haskell, storage.type.ocaml	#5DD8FF	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FD8F3F	—
storage.modifier	#FC5FA3	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FC6A5D	—
punctuation.definition.group.capture.regexp	#FC5FA3	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF6961	—
punctuation.definition.character-class.regexp	#5DD8FF	—
punctuation.definition.group.regexp	#FD8F3F	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF6961	—
meta.assertion.look-ahead.regexp	#67B7A4	—
string	#FC6A5D	—
punctuation.definition.string.begin, punctuation.definition.string.end	#FC6A5D	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#5DD8FF	—
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	#8E99A4	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#F2F2F7	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#FD8F3F	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F2F2F7
meta.selectionset.graphql variable	#FC6A5D	—
meta.selectionset.graphql meta.arguments variable	#F2F2F7	—
entity.name.fragment.graphql, variable.fragment.graphql	#5DD8FF	—
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	#F2F2F7	—
source.shell variable.other	#D0BF69	—
support.constant	#D0BF69
meta.scope.prerequisites.makefile	#FC6A5D	—
meta.attribute-selector.scss	#FC6A5D	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F2F2F7	—
meta.preprocessor.haskell	#8E99A4	—
variable.other.property, support.variable.property, meta.object-literal.key, meta.property-name, support.type.property-name	#F2F2F7	—
keyword.operator, keyword.operator.word	#FC5FA3	—
constant, variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, support.constant, entity.name.constant	#D0BF69	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	—	—
comment.block.documentation, string.quoted.docstring.multi	—	—

VS Code preview

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

Magica — Magica Dark Italic

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#35363C
activityBar.activeBorder#0A84FF
activityBar.activeFocusBorder#64D2FF
activityBar.background#2B2C31
activityBar.border#3A3B41
activityBar.dropBorder#0A84FF
activityBar.foreground#F2F2F7
activityBar.inactiveForeground#98989D
activityBarBadge.background#0A84FF
activityBarBadge.foreground#FFFFFF
badge.background#0A84FF
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.background#202126
breadcrumb.focusForeground#FFFFFF
breadcrumb.foreground#98989D
breadcrumbPicker.background#2C2C2E
button.background#0A84FF
button.border#409CFF
button.foreground#FFFFFF
button.hoverBackground#3296FF
button.secondaryBackground#3A3A3C
button.secondaryForeground#F2F2F7
button.secondaryHoverBackground#48484A
chat.avatarBackground#0A84FF
chat.avatarForeground#FFFFFF
chat.checkpointSeparator#48484A
chat.editedFileForeground#64D2FF
chat.linesAddedForeground#30D158
chat.linesRemovedForeground#FF6961
chat.requestBackground#25262B
chat.requestBorder#48484A
chat.requestBubbleBackground#2C2C2E
chat.requestBubbleHoverBackground#35363C
chat.requestCodeBorder#48484A
chat.slashCommandBackground#3A3A3C
chat.slashCommandForeground#F2F2F7
chat.thinkingShimmer#0A84FF
chatManagement.sashBorder#48484A
checkbox.background#2C2C2E
checkbox.border#636366
checkbox.foreground#F2F2F7
commandCenter.activeBackground#3A3A3C
commandCenter.activeBorder#0A84FF
commandCenter.activeForeground#FFFFFF
commandCenter.background#2C2C2EB8
commandCenter.border#48484A
commandCenter.foreground#F2F2F7
commandCenter.inactiveBorder#3A3A3C
commandCenter.inactiveForeground#98989D
descriptionForeground#98989D
diffEditor.diagonalFill#8E8E9320
diffEditor.insertedLineBackground#30D15817
diffEditor.insertedTextBackground#30D15838
diffEditor.removedLineBackground#FF453A17
diffEditor.removedTextBackground#FF453A38
diffEditorGutter.insertedLineBackground#30D15824
diffEditorGutter.removedLineBackground#FF453A24
dropdown.background#2C2C2E
dropdown.border#636366
dropdown.foreground#F2F2F7
dropdown.listBackground#303035
editor.background#202126
editor.findMatchBackground#FFD60A99
editor.findMatchBorder#FFE36E
editor.findMatchForeground#1C1C1E
editor.findMatchHighlightBackground#FFD60A45
editor.foreground#F2F2F7
editor.inactiveSelectionBackground#0A84FF33
editor.lineHighlightBackground#27282E
editor.selectionBackground#0A84FF55
editor.selectionHighlightBackground#0A84FF2B
editor.wordHighlightBackground#FFD60A30
editor.wordHighlightStrongBackground#FF9F0A38
editorBracketHighlight.foreground1#67B7A4
editorBracketHighlight.foreground2#FC5FA3
editorBracketHighlight.foreground3#5DD8FF
editorBracketHighlight.foreground4#FD8F3F
editorBracketHighlight.foreground5#FC6A5D
editorBracketHighlight.foreground6#D0BF69
editorBracketHighlight.unexpectedBracket.foreground#FF6961
editorBracketMatch.background#0A84FF2B
editorBracketMatch.border#64D2FF
editorCodeLens.foreground#8E8E93
editorCursor.foreground#0A84FF
editorError.foreground#FF6961
editorGroup.border#3A3B41
editorGroup.dropBackground#0A84FF30
editorGroup.emptyBackground#25262B
editorGroupHeader.noTabsBackground#25262B
editorGroupHeader.tabsBackground#292A2F
editorGroupHeader.tabsBorder#3A3B41
editorGutter.addedBackground#30D158
editorGutter.deletedBackground#FF6961
editorGutter.modifiedBackground#0A84FF
editorHoverWidget.background#2C2C2E
editorHoverWidget.border#48484A
editorHoverWidget.foreground#F2F2F7
editorHoverWidget.highlightForeground#64D2FF
editorHoverWidget.statusBarBackground#252529
editorIndentGuide.activeBackground#63636A
editorIndentGuide.background#35363C
editorInlayHint.background#303137
editorInlayHint.foreground#98989D
editorLineNumber.activeForeground#D1D1D6
editorLineNumber.foreground#6E6E73
editorLink.activeForeground#64D2FF
editorOverviewRuler.addedForeground#30D158
editorOverviewRuler.border#3A3B41
editorOverviewRuler.deletedForeground#FF6961
editorOverviewRuler.modifiedForeground#0A84FF
editorPane.background#25262B
editorRuler.foreground#35363C
editorStickyScroll.background#27282E
editorStickyScroll.border#00000000
editorStickyScroll.shadow#00000080
editorStickyScrollHover.background#303137
editorSuggestWidget.background#2C2C2E
editorSuggestWidget.border#48484A
editorSuggestWidget.focusHighlightForeground#FFFFFF
editorSuggestWidget.foreground#F2F2F7
editorSuggestWidget.highlightForeground#FC5FA3
editorSuggestWidget.selectedBackground#0A64D8
editorSuggestWidget.selectedForeground#FFFFFF
editorSuggestWidget.selectedIconForeground#FFFFFF
editorWarning.foreground#FFD60A
editorWhitespace.foreground#3A3B41
editorWidget.background#2C2C2E
editorWidget.border#48484A
editorWidget.foreground#F2F2F7
editorWidget.resizeBorder#0A84FF
errorForeground#FF6961
focusBorder#0A84FF
foreground#F2F2F7
gitDecoration.addedResourceForeground#30D158
gitDecoration.conflictingResourceForeground#FFD60A
gitDecoration.deletedResourceForeground#FF6961
gitDecoration.ignoredResourceForeground#8E8E93
gitDecoration.modifiedResourceForeground#409CFF
gitDecoration.renamedResourceForeground#64D2FF
gitDecoration.stageDeletedResourceForeground#FF6961
gitDecoration.stageModifiedResourceForeground#30D158
gitDecoration.submoduleResourceForeground#98989D
gitDecoration.untrackedResourceForeground#30D158
icon.foreground#C7C7CC
inlineChat.background#2C2C2E
inlineChat.border#48484A
inlineChat.foreground#F2F2F7
inlineChat.shadow#000000A6
inlineChatDiff.inserted#30D15830
inlineChatDiff.removed#FF453A30
inlineChatInput.background#252529
inlineChatInput.border#636366
inlineChatInput.focusBorder#0A84FF
inlineChatInput.placeholderForeground#8E8E93
input.background#2C2C2E
input.border#636366
input.foreground#F2F2F7
input.placeholderForeground#8E8E93
inputOption.activeBackground#0A84FF42
inputOption.activeBorder#0A84FF
inputOption.activeForeground#FFFFFF
interactive.activeCodeBorder#0A84FF
interactive.inactiveCodeBorder#48484A
keybindingLabel.background#2C2C2E
keybindingLabel.border#545458
keybindingLabel.bottomBorder#1C1C1E
keybindingLabel.foreground#F2F2F7
list.activeSelectionBackground#0A64D8
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.deemphasizedForeground#8E8E93
list.dropBackground#0A84FF38
list.errorForeground#FF6961
list.focusBackground#0A64D8
list.focusForeground#FFFFFF
list.focusHighlightForeground#FFFFFF
list.focusOutline#0A84FF
list.highlightForeground#64D2FF
list.hoverBackground#3A3A3C99
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#3A4655
list.inactiveSelectionForeground#F2F2F7
list.invalidItemForeground#FF6961
menu.background#2C2C2E
menu.border#48484A
menu.foreground#F2F2F7
menu.selectionBackground#0A64D8
menu.selectionForeground#FFFFFF
menu.separatorBackground#48484A
menubar.selectionBackground#3A3A3C
menubar.selectionForeground#FFFFFF
minimap.background#202126
notificationCenterHeader.background#2D2E34
notificationCenterHeader.foreground#F2F2F7
notificationLink.foreground#64D2FF
notifications.background#2C2C2E
notifications.border#48484A
notifications.foreground#F2F2F7
panel.background#25262B
panel.border#3A3B41
panel.dropBorder#0A84FF
panelInput.border#545458
panelSection.border#3A3B41
panelSectionHeader.background#2D2E34
panelSectionHeader.border#3A3B41
panelSectionHeader.foreground#D1D1D6
panelTitle.activeBorder#0A84FF
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#98989D
peekView.border#0A84FF
peekViewEditor.background#202126
peekViewEditor.matchHighlightBackground#FFD60A55
peekViewResult.background#25262B
peekViewResult.fileForeground#F2F2F7
peekViewResult.lineForeground#98989D
peekViewResult.matchHighlightBackground#FFD60A55
peekViewResult.selectionBackground#0A64D8
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#2D2E34
peekViewTitleDescription.foreground#98989D
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#48484A
pickerGroup.foreground#98989D
progressBar.background#0A84FF
quickInput.background#2C2C2E
quickInput.foreground#F2F2F7
quickInputList.focusBackground#0A64D8
quickInputList.focusForeground#FFFFFF
quickInputList.focusHighlightForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#35363C
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#EBEBF559
scrollbarSlider.background#EBEBF526
scrollbarSlider.hoverBackground#EBEBF540
selection.background#0A84FF55
settings.checkboxBackground#2C2C2E
settings.checkboxBorder#636366
settings.checkboxForeground#F2F2F7
settings.dropdownBackground#2C2C2E
settings.dropdownBorder#636366
settings.dropdownForeground#F2F2F7
settings.focusedRowBackground#0A84FF1F
settings.focusedRowBorder#0A84FF
settings.headerBorder#48484A
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#0A84FF
settings.numberInputBackground#2C2C2E
settings.numberInputBorder#636366
settings.numberInputForeground#F2F2F7
settings.rowHoverBackground#3A3A3C80
settings.sashBorder#3A3B41
settings.settingsHeaderHoverForeground#64D2FF
settings.textInputBackground#2C2C2E
settings.textInputBorder#636366
settings.textInputForeground#F2F2F7
sideBar.background#25262B
sideBar.border#3A3B41
sideBar.dropBackground#0A84FF30
sideBar.foreground#F2F2F7
sideBarSectionHeader.background#2D2E34
sideBarSectionHeader.border#3A3B41
sideBarSectionHeader.foreground#D1D1D6
sideBarTitle.foreground#FFFFFF
statusBar.background#292A2F
statusBar.border#3A3B41
statusBar.debuggingBackground#493A12
statusBar.debuggingBorder#6B5418
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#D1D1D6
statusBar.noFolderBackground#292A2F
statusBar.noFolderBorder#3A3B41
statusBar.noFolderForeground#98989D
statusBarItem.activeBackground#545458
statusBarItem.hoverBackground#48484A80
statusBarItem.hoverForeground#FFFFFF
statusBarItem.remoteBackground#0A84FF
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#5DD8FF
symbolIcon.booleanForeground#D0BF69
symbolIcon.classForeground#5DD8FF
symbolIcon.colorForeground#D0BF69
symbolIcon.constantForeground#D0BF69
symbolIcon.constructorForeground#67B7A4
symbolIcon.enumeratorForeground#5DD8FF
symbolIcon.enumeratorMemberForeground#D0BF69
symbolIcon.eventForeground#FD8F3F
symbolIcon.fieldForeground#F2F2F7
symbolIcon.fileForeground#F2F2F7
symbolIcon.folderForeground#67B7A4
symbolIcon.functionForeground#67B7A4
symbolIcon.interfaceForeground#5DD8FF
symbolIcon.keyForeground#F2F2F7
symbolIcon.keywordForeground#FC5FA3
symbolIcon.methodForeground#67B7A4
symbolIcon.moduleForeground#5DD8FF
symbolIcon.namespaceForeground#5DD8FF
symbolIcon.nullForeground#D0BF69
symbolIcon.numberForeground#D0BF69
symbolIcon.objectForeground#F2F2F7
symbolIcon.operatorForeground#FC5FA3
symbolIcon.packageForeground#5DD8FF
symbolIcon.propertyForeground#F2F2F7
symbolIcon.referenceForeground#D0BF69
symbolIcon.snippetForeground#FC6A5D
symbolIcon.stringForeground#FC6A5D
symbolIcon.structForeground#5DD8FF
symbolIcon.textForeground#F2F2F7
symbolIcon.typeParameterForeground#5DD8FF
symbolIcon.unitForeground#FD8F3F
symbolIcon.variableForeground#F2F2F7
tab.activeBackground#202126
tab.activeBorderTop#0A84FF
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#FF9F0A
tab.border#3A3B41
tab.hoverBackground#303137
tab.hoverForeground#F2F2F7
tab.inactiveBackground#292A2F
tab.inactiveForeground#98989D
tab.inactiveModifiedBorder#B87500
tab.unfocusedActiveForeground#D1D1D6
tab.unfocusedInactiveForeground#7C7C80
terminal.ansiBlack#1C1C1E
terminal.ansiBlue#0A84FF
terminal.ansiBrightBlack#8E8E93
terminal.ansiBrightBlue#409CFF
terminal.ansiBrightCyan#9DDEFF
terminal.ansiBrightGreen#4ADE80
terminal.ansiBrightMagenta#DA8FFF
terminal.ansiBrightRed#FF6961
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFE36E
terminal.ansiCyan#64D2FF
terminal.ansiGreen#30D158
terminal.ansiMagenta#BF5AF2
terminal.ansiRed#FF453A
terminal.ansiWhite#D1D1D6
terminal.ansiYellow#FFD60A
terminal.background#202126
terminal.foreground#F2F2F7
terminal.selectionBackground#0A84FF55
terminalCursor.foreground#0A84FF
textBlockQuote.background#2C2C2E
textBlockQuote.border#48484A
textLink.activeForeground#9DDEFF
textLink.foreground#64D2FF
textPreformat.background#303035
textPreformat.foreground#F2F2F7
titleBar.activeBackground#2B2C31
titleBar.activeForeground#F2F2F7
titleBar.border#3A3B41
titleBar.inactiveBackground#25262B
titleBar.inactiveForeground#8E8E93
toolbar.activeBackground#545458
toolbar.hoverBackground#48484A80
tree.inactiveIndentGuidesStroke#3A3A3C
tree.indentGuidesStroke#48484A
walkThrough.embeddedEditorBackground#202126
welcomePage.background#25262B
welcomePage.tileBackground#2C2C2E
welcomePage.tileBorder#48484A
welcomePage.tileHoverBackground#35363C
widget.border#48484A
widget.shadow#000000A6
window.activeBorder#48484A
window.inactiveBorder#303137

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#D0BF69	—
source	#F2F2F7	—
meta.diff, meta.diff.header	#8E99A4	—
markup.inserted	#67B7A4	—
markup.deleted	#FF6961	—
markup.changed	#FD8F3F	—
invalid	#FF6961	underline
invalid.deprecated	#F2F2F7	underline
entity.name.filename	#FC6A5D	—
markup.error	#FF6961	—
markup.underline	—	underline
markup.bold	#FD8F3F	bold
markup.heading	#D0BF69	bold
markup.italic	#FC6A5D	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#5DD8FF	—
markup.inline.raw, markup.raw.restructuredtext	#67B7A4	—
markup.underline.link, markup.underline.link.image	#5DD8FF	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FC5FA3	—
entity.name.directive.restructuredtext, markup.quote	#FC6A5D	italic
meta.separator.markdown	#8E99A4	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#67B7A4	—
punctuation.definition.constant.restructuredtext	#D0BF69	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#D0BF69	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F2F2F7	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FC6A5D	—
entity.name.type.class, entity.name.class	#5DD8FF
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	#D0BF69	—
entity.other.inherited-class	#5DD8FF	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#8E99A4	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FC5FA3	—
comment.block.documentation entity.name.type	#5DD8FF	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#5DD8FF	—
comment.block.documentation variable	#FD8F3F	italic
constant, variable.other.constant	#D0BF69	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FC5FA3	—
entity.name.tag	#FC5FA3	—
entity.other.attribute-name.parent-selector	#FC5FA3	—
entity.other.attribute-name	#67B7A4	—
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	#67B7A4	—
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	#FD8F3F	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#D0BF69	italic
meta.decorator variable.other.object	#D0BF69	—
keyword, punctuation.definition.keyword	#FC5FA3	—
keyword.control.new, keyword.operator.new	—
meta.selector	#FC5FA3	—
support	#5DD8FF	—
support.function.magic, support.variable, variable.other.predefined	#D0BF69
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	#FC5FA3	—
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	#F2F2F7	—
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	#FC5FA3	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#5DD8FF	—
constant.other.date, constant.other.timestamp	#FD8F3F	—
variable.other.alias.yaml	#67B7A4	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FC5FA3
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.haskell, storage.type.ocaml	#5DD8FF	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FD8F3F	—
storage.modifier	#FC5FA3	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FC6A5D	—
punctuation.definition.group.capture.regexp	#FC5FA3	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF6961	—
punctuation.definition.character-class.regexp	#5DD8FF	—
punctuation.definition.group.regexp	#FD8F3F	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF6961	—
meta.assertion.look-ahead.regexp	#67B7A4	—
string	#FC6A5D	—
punctuation.definition.string.begin, punctuation.definition.string.end	#FC6A5D	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#5DD8FF	—
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	#8E99A4	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#F2F2F7	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#FD8F3F	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F2F2F7
meta.selectionset.graphql variable	#FC6A5D	—
meta.selectionset.graphql meta.arguments variable	#F2F2F7	—
entity.name.fragment.graphql, variable.fragment.graphql	#5DD8FF	—
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	#F2F2F7	—
source.shell variable.other	#D0BF69	—
support.constant	#D0BF69
meta.scope.prerequisites.makefile	#FC6A5D	—
meta.attribute-selector.scss	#FC6A5D	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F2F2F7	—
meta.preprocessor.haskell	#8E99A4	—
variable.other.property, support.variable.property, meta.object-literal.key, meta.property-name, support.type.property-name	#F2F2F7	—
keyword.operator, keyword.operator.word	#FC5FA3	italic
constant, variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, support.constant, entity.name.constant	#D0BF69	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	—	italic
comment.block.documentation, string.quoted.docstring.multi	—	italic

VS Code preview

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

Magica — Magica Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#F4F4F6
activityBar.activeBorder#007AFF
activityBar.activeFocusBorder#007AFF
activityBar.background#E8E8ED
activityBar.border#D1D1D6
activityBar.dropBorder#007AFF
activityBar.foreground#242426
activityBar.inactiveForeground#7C7C80
activityBarBadge.background#007AFF
activityBarBadge.foreground#FFFFFF
badge.background#007AFF
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#1F2328
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#1F2328
breadcrumb.foreground#6E6E73
breadcrumbPicker.background#F7F7F8
button.background#007AFF
button.border#0062CC
button.foreground#FFFFFF
button.hoverBackground#006EE6
button.secondaryBackground#E5E5EA
button.secondaryForeground#242426
button.secondaryHoverBackground#D8D8DD
chat.avatarBackground#007AFF
chat.avatarForeground#FFFFFF
chat.checkpointSeparator#D1D1D6
chat.editedFileForeground#0068B7
chat.linesAddedForeground#248A3D
chat.linesRemovedForeground#C42026
chat.requestBackground#F2F2F5
chat.requestBorder#C7C7CC
chat.requestBubbleBackground#FFFFFF
chat.requestBubbleHoverBackground#F7F7F8
chat.requestCodeBorder#C7C7CC
chat.slashCommandBackground#E5E5EA
chat.slashCommandForeground#242426
chat.thinkingShimmer#007AFF
chatManagement.sashBorder#D1D1D6
checkbox.background#FFFFFF
checkbox.border#AEAEB2
checkbox.foreground#242426
commandCenter.activeBackground#FFFFFF
commandCenter.activeBorder#007AFF
commandCenter.activeForeground#1F2328
commandCenter.background#FFFFFFB8
commandCenter.border#C7C7CC
commandCenter.foreground#242426
commandCenter.inactiveBorder#D1D1D6
commandCenter.inactiveForeground#6E6E73
descriptionForeground#6E6E73
diffEditor.diagonalFill#8E8E931A
diffEditor.insertedLineBackground#34C75914
diffEditor.insertedTextBackground#34C75930
diffEditor.removedLineBackground#FF3B3014
diffEditor.removedTextBackground#FF3B3030
diffEditorGutter.insertedLineBackground#34C75920
diffEditorGutter.removedLineBackground#FF3B3020
dropdown.background#FFFFFF
dropdown.border#AEAEB2
dropdown.foreground#242426
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FFD60A80
editor.findMatchBorder#C98B00
editor.findMatchForeground#1F2328
editor.findMatchHighlightBackground#FFD60A45
editor.foreground#1F2328
editor.inactiveSelectionBackground#0A84FF26
editor.lineHighlightBackground#F6F8FA
editor.selectionBackground#0A84FF40
editor.selectionHighlightBackground#0A84FF1F
editor.wordHighlightBackground#FFD60A30
editor.wordHighlightStrongBackground#FF9F0A30
editorBracketHighlight.foreground1#0068B7
editorBracketHighlight.foreground2#A90D91
editorBracketHighlight.foreground3#357C85
editorBracketHighlight.foreground4#8A4B08
editorBracketHighlight.foreground5#C41A16
editorBracketHighlight.foreground6#272AD8
editorBracketHighlight.unexpectedBracket.foreground#C42026
editorBracketMatch.background#0A84FF1F
editorBracketMatch.border#007AFF
editorCodeLens.foreground#7C7C80
editorCursor.foreground#007AFF
editorError.foreground#C42026
editorGroup.border#D1D1D6
editorGroup.dropBackground#007AFF20
editorGroup.emptyBackground#F2F2F5
editorGroupHeader.noTabsBackground#F2F2F5
editorGroupHeader.tabsBackground#E9E9ED
editorGroupHeader.tabsBorder#D1D1D6
editorGutter.addedBackground#248A3D
editorGutter.deletedBackground#C42026
editorGutter.modifiedBackground#007AFF
editorHoverWidget.background#F7F7F8
editorHoverWidget.border#C7C7CC
editorHoverWidget.foreground#242426
editorHoverWidget.highlightForeground#0068B7
editorHoverWidget.statusBarBackground#E9E9ED
editorIndentGuide.activeBackground#B8B8BD
editorIndentGuide.background#E5E5EA
editorInlayHint.background#E9E9ED
editorInlayHint.foreground#6E6E73
editorLineNumber.activeForeground#3A3A3C
editorLineNumber.foreground#9A9AA0
editorLink.activeForeground#0068B7
editorOverviewRuler.addedForeground#248A3D
editorOverviewRuler.border#D1D1D6
editorOverviewRuler.deletedForeground#C42026
editorOverviewRuler.modifiedForeground#007AFF
editorPane.background#F2F2F5
editorRuler.foreground#E5E5EA
editorStickyScroll.background#F8F8FA
editorStickyScroll.border#00000000
editorStickyScroll.shadow#00000020
editorStickyScrollHover.background#EFEFF2
editorSuggestWidget.background#F7F7F8
editorSuggestWidget.border#C7C7CC
editorSuggestWidget.focusHighlightForeground#145E96
editorSuggestWidget.foreground#242426
editorSuggestWidget.highlightForeground#A90D91
editorSuggestWidget.selectedBackground#D2E1EE
editorSuggestWidget.selectedForeground#1F2328
editorSuggestWidget.selectedIconForeground#315F80
editorWarning.foreground#9A6700
editorWhitespace.foreground#D1D1D6
editorWidget.background#F7F7F8
editorWidget.border#C7C7CC
editorWidget.foreground#242426
editorWidget.resizeBorder#007AFF
errorForeground#C42026
focusBorder#007AFF
foreground#242426
gitDecoration.addedResourceForeground#248A3D
gitDecoration.conflictingResourceForeground#9A6700
gitDecoration.deletedResourceForeground#C42026
gitDecoration.ignoredResourceForeground#8E8E93
gitDecoration.modifiedResourceForeground#0068B7
gitDecoration.renamedResourceForeground#357C85
gitDecoration.stageDeletedResourceForeground#C42026
gitDecoration.stageModifiedResourceForeground#248A3D
gitDecoration.submoduleResourceForeground#6E6E73
gitDecoration.untrackedResourceForeground#248A3D
icon.foreground#57575C
inlineChat.background#F7F7F8
inlineChat.border#C7C7CC
inlineChat.foreground#242426
inlineChat.shadow#00000026
inlineChatDiff.inserted#34C75926
inlineChatDiff.removed#FF3B3026
inlineChatInput.background#FFFFFF
inlineChatInput.border#AEAEB2
inlineChatInput.focusBorder#007AFF
inlineChatInput.placeholderForeground#8E8E93
input.background#FFFFFF
input.border#AEAEB2
input.foreground#1F2328
input.placeholderForeground#8E8E93
inputOption.activeBackground#007AFF24
inputOption.activeBorder#007AFF
inputOption.activeForeground#1F2328
interactive.activeCodeBorder#007AFF
interactive.inactiveCodeBorder#C7C7CC
keybindingLabel.background#FFFFFF
keybindingLabel.border#C7C7CC
keybindingLabel.bottomBorder#AEAEB2
keybindingLabel.foreground#3A3A3C
list.activeSelectionBackground#C7D9EA
list.activeSelectionForeground#1F2328
list.activeSelectionIconForeground#315F80
list.deemphasizedForeground#8E8E93
list.dropBackground#007AFF26
list.errorForeground#C42026
list.focusBackground#C7D9EA
list.focusForeground#1F2328
list.focusHighlightForeground#145E96
list.focusOutline#007AFF
list.highlightForeground#0068B7
list.hoverBackground#E5E5EA99
list.hoverForeground#1F2328
list.inactiveSelectionBackground#DDE8F5
list.inactiveSelectionForeground#1F2328
list.invalidItemForeground#C42026
menu.background#F7F7F8
menu.border#C7C7CC
menu.foreground#242426
menu.selectionBackground#D2E1EE
menu.selectionForeground#1F2328
menu.separatorBackground#D1D1D6
menubar.selectionBackground#DCDCE1
menubar.selectionForeground#1F2328
minimap.background#FFFFFF
notificationCenterHeader.background#E9E9ED
notificationCenterHeader.foreground#242426
notificationLink.foreground#0068B7
notifications.background#F7F7F8
notifications.border#C7C7CC
notifications.foreground#242426
panel.background#F5F5F7
panel.border#D1D1D6
panel.dropBorder#007AFF
panelInput.border#AEAEB2
panelSection.border#D1D1D6
panelSectionHeader.background#E9E9ED
panelSectionHeader.border#D1D1D6
panelSectionHeader.foreground#3A3A3C
panelTitle.activeBorder#007AFF
panelTitle.activeForeground#1F2328
panelTitle.inactiveForeground#6E6E73
peekView.border#007AFF
peekViewEditor.background#FFFFFF
peekViewEditor.matchHighlightBackground#FFD60A55
peekViewResult.background#F2F2F5
peekViewResult.fileForeground#1F2328
peekViewResult.lineForeground#6E6E73
peekViewResult.matchHighlightBackground#FFD60A55
peekViewResult.selectionBackground#C7D9EA
peekViewResult.selectionForeground#1F2328
peekViewTitle.background#E9E9ED
peekViewTitleDescription.foreground#6E6E73
peekViewTitleLabel.foreground#1F2328
pickerGroup.border#C7C7CC
pickerGroup.foreground#6E6E73
progressBar.background#007AFF
quickInput.background#F7F7F8
quickInput.foreground#242426
quickInputList.focusBackground#C7D9EA
quickInputList.focusForeground#1F2328
quickInputList.focusHighlightForeground#145E96
quickInputList.focusIconForeground#315F80
quickInputTitle.background#E9E9ED
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#3C3C4359
scrollbarSlider.background#3C3C4326
scrollbarSlider.hoverBackground#3C3C4340
selection.background#0A84FF38
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#AEAEB2
settings.checkboxForeground#242426
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#AEAEB2
settings.dropdownForeground#242426
settings.focusedRowBackground#0A84FF14
settings.focusedRowBorder#007AFF
settings.headerBorder#D1D1D6
settings.headerForeground#1F2328
settings.modifiedItemIndicator#007AFF
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#AEAEB2
settings.numberInputForeground#1F2328
settings.rowHoverBackground#E5E5EA80
settings.sashBorder#D1D1D6
settings.settingsHeaderHoverForeground#0068B7
settings.textInputBackground#FFFFFF
settings.textInputBorder#AEAEB2
settings.textInputForeground#1F2328
sideBar.background#F2F2F5
sideBar.border#D1D1D6
sideBar.dropBackground#007AFF20
sideBar.foreground#242426
sideBarSectionHeader.background#E9E9ED
sideBarSectionHeader.border#D1D1D6
sideBarSectionHeader.foreground#3A3A3C
sideBarTitle.foreground#1F2328
statusBar.background#E9E9ED
statusBar.border#D1D1D6
statusBar.debuggingBackground#FFF3D6
statusBar.debuggingBorder#E3B341
statusBar.debuggingForeground#5C3A00
statusBar.foreground#3A3A3C
statusBar.noFolderBackground#E9E9ED
statusBar.noFolderBorder#D1D1D6
statusBar.noFolderForeground#6E6E73
statusBarItem.activeBackground#C7C7CC
statusBarItem.hoverBackground#D1D1D680
statusBarItem.hoverForeground#1F2328
statusBarItem.remoteBackground#007AFF
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#357C85
symbolIcon.booleanForeground#272AD8
symbolIcon.classForeground#357C85
symbolIcon.colorForeground#836C28
symbolIcon.constantForeground#272AD8
symbolIcon.constructorForeground#0068B7
symbolIcon.enumeratorForeground#357C85
symbolIcon.enumeratorMemberForeground#272AD8
symbolIcon.eventForeground#8A4B08
symbolIcon.fieldForeground#1F2328
symbolIcon.fileForeground#1F2328
symbolIcon.folderForeground#0068B7
symbolIcon.functionForeground#0068B7
symbolIcon.interfaceForeground#357C85
symbolIcon.keyForeground#1F2328
symbolIcon.keywordForeground#A90D91
symbolIcon.methodForeground#0068B7
symbolIcon.moduleForeground#357C85
symbolIcon.namespaceForeground#357C85
symbolIcon.nullForeground#272AD8
symbolIcon.numberForeground#272AD8
symbolIcon.objectForeground#1F2328
symbolIcon.operatorForeground#A90D91
symbolIcon.packageForeground#357C85
symbolIcon.propertyForeground#1F2328
symbolIcon.referenceForeground#272AD8
symbolIcon.snippetForeground#C41A16
symbolIcon.stringForeground#C41A16
symbolIcon.structForeground#357C85
symbolIcon.textForeground#1F2328
symbolIcon.typeParameterForeground#357C85
symbolIcon.unitForeground#8A4B08
symbolIcon.variableForeground#1F2328
tab.activeBackground#FFFFFF
tab.activeBorderTop#007AFF
tab.activeForeground#1F2328
tab.activeModifiedBorder#FF9F0A
tab.border#D1D1D6
tab.hoverBackground#F7F7F8
tab.hoverForeground#1F2328
tab.inactiveBackground#E9E9ED
tab.inactiveForeground#6E6E73
tab.inactiveModifiedBorder#C77C00
tab.unfocusedActiveForeground#57575C
tab.unfocusedInactiveForeground#8E8E93
terminal.ansiBlack#000000
terminal.ansiBlue#0068B7
terminal.ansiBrightBlack#6E6E73
terminal.ansiBrightBlue#007AFF
terminal.ansiBrightCyan#32ADE6
terminal.ansiBrightGreen#34C759
terminal.ansiBrightMagenta#AF52DE
terminal.ansiBrightRed#FF3B30
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FF9F0A
terminal.ansiCyan#357C85
terminal.ansiGreen#248A3D
terminal.ansiMagenta#A90D91
terminal.ansiRed#C42026
terminal.ansiWhite#D1D1D6
terminal.ansiYellow#9A6700
terminal.background#FFFFFF
terminal.foreground#1F2328
terminal.selectionBackground#0A84FF38
terminalCursor.foreground#007AFF
textBlockQuote.background#F2F2F7
textBlockQuote.border#C7C7CC
textLink.activeForeground#004F8C
textLink.foreground#0068B7
textPreformat.background#E9E9EE
textPreformat.foreground#242426
titleBar.activeBackground#ECECEE
titleBar.activeForeground#242426
titleBar.border#D1D1D6
titleBar.inactiveBackground#F2F2F4
titleBar.inactiveForeground#8E8E93
toolbar.activeBackground#D1D1D6
toolbar.hoverBackground#DCDCE180
tree.inactiveIndentGuidesStroke#E5E5EA
tree.indentGuidesStroke#D1D1D6
walkThrough.embeddedEditorBackground#FFFFFF
welcomePage.background#F2F2F5
welcomePage.tileBackground#FFFFFF
welcomePage.tileBorder#D1D1D6
welcomePage.tileHoverBackground#F7F7F8
widget.border#C7C7CC
widget.shadow#00000026
window.activeBorder#C7C7CC
window.inactiveBorder#E5E5EA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#272AD8	—
source	#1F2328	—
meta.diff, meta.diff.header	#5D6C79	—
markup.inserted	#0068B7	—
markup.deleted	#C42026	—
markup.changed	#8A4B08	—
invalid	#C42026	underline
invalid.deprecated	#1F2328	underline
entity.name.filename	#C41A16	—
markup.error	#C42026	—
markup.underline	—	underline
markup.bold	#8A4B08	bold
markup.heading	#272AD8	bold
markup.italic	#C41A16	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#357C85	—
markup.inline.raw, markup.raw.restructuredtext	#0068B7	—
markup.underline.link, markup.underline.link.image	#357C85	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#A90D91	—
entity.name.directive.restructuredtext, markup.quote	#C41A16	italic
meta.separator.markdown	#5D6C79	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#0068B7	—
punctuation.definition.constant.restructuredtext	#272AD8	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#272AD8	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#1F2328	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#C41A16	—
entity.name.type.class, entity.name.class	#357C85
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	#272AD8	—
entity.other.inherited-class	#357C85	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#5D6C79	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#A90D91	—
comment.block.documentation entity.name.type	#357C85	—
comment.block.documentation entity.name.type punctuation.definition.bracket	#357C85	—
comment.block.documentation variable	#8A4B08	—
constant, variable.other.constant	#272AD8	—
constant.character.escape, constant.character.string.escape, constant.regexp	#A90D91	—
entity.name.tag	#A90D91	—
entity.other.attribute-name.parent-selector	#A90D91	—
entity.other.attribute-name	#0068B7	—
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	#0068B7	—
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	#8A4B08	—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#836C28	—
meta.decorator variable.other.object	#836C28	—
keyword, punctuation.definition.keyword	#A90D91	—
keyword.control.new, keyword.operator.new	—
meta.selector	#A90D91	—
support	#357C85	—
support.function.magic, support.variable, variable.other.predefined	#272AD8
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	#A90D91	—
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	#1F2328	—
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	#A90D91	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#357C85	—
constant.other.date, constant.other.timestamp	#8A4B08	—
variable.other.alias.yaml	#0068B7	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#A90D91
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.haskell, storage.type.ocaml	#357C85	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#8A4B08	—
storage.modifier	#A90D91	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#C41A16	—
punctuation.definition.group.capture.regexp	#A90D91	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#C42026	—
punctuation.definition.character-class.regexp	#357C85	—
punctuation.definition.group.regexp	#8A4B08	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#C42026	—
meta.assertion.look-ahead.regexp	#0068B7	—
string	#C41A16	—
punctuation.definition.string.begin, punctuation.definition.string.end	#C41A16	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#357C85	—
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	#5D6C79	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#1F2328	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#8A4B08	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#1F2328
meta.selectionset.graphql variable	#C41A16	—
meta.selectionset.graphql meta.arguments variable	#1F2328	—
entity.name.fragment.graphql, variable.fragment.graphql	#357C85	—
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	#1F2328	—
source.shell variable.other	#272AD8	—
support.constant	#272AD8
meta.scope.prerequisites.makefile	#C41A16	—
meta.attribute-selector.scss	#C41A16	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#1F2328	—
meta.preprocessor.haskell	#5D6C79	—
variable.other.property, support.variable.property, meta.object-literal.key, meta.property-name, support.type.property-name	#1F2328	—
keyword.operator, keyword.operator.word	#A90D91	—
constant, variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, support.constant, entity.name.constant	#272AD8	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	—	—
comment.block.documentation, string.quoted.docstring.multi	—	—

VS Code preview

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

Magica — Magica Light Italic

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#F4F4F6
activityBar.activeBorder#007AFF
activityBar.activeFocusBorder#007AFF
activityBar.background#E8E8ED
activityBar.border#D1D1D6
activityBar.dropBorder#007AFF
activityBar.foreground#242426
activityBar.inactiveForeground#7C7C80
activityBarBadge.background#007AFF
activityBarBadge.foreground#FFFFFF
badge.background#007AFF
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#1F2328
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#1F2328
breadcrumb.foreground#6E6E73
breadcrumbPicker.background#F7F7F8
button.background#007AFF
button.border#0062CC
button.foreground#FFFFFF
button.hoverBackground#006EE6
button.secondaryBackground#E5E5EA
button.secondaryForeground#242426
button.secondaryHoverBackground#D8D8DD
chat.avatarBackground#007AFF
chat.avatarForeground#FFFFFF
chat.checkpointSeparator#D1D1D6
chat.editedFileForeground#0068B7
chat.linesAddedForeground#248A3D
chat.linesRemovedForeground#C42026
chat.requestBackground#F2F2F5
chat.requestBorder#C7C7CC
chat.requestBubbleBackground#FFFFFF
chat.requestBubbleHoverBackground#F7F7F8
chat.requestCodeBorder#C7C7CC
chat.slashCommandBackground#E5E5EA
chat.slashCommandForeground#242426
chat.thinkingShimmer#007AFF
chatManagement.sashBorder#D1D1D6
checkbox.background#FFFFFF
checkbox.border#AEAEB2
checkbox.foreground#242426
commandCenter.activeBackground#FFFFFF
commandCenter.activeBorder#007AFF
commandCenter.activeForeground#1F2328
commandCenter.background#FFFFFFB8
commandCenter.border#C7C7CC
commandCenter.foreground#242426
commandCenter.inactiveBorder#D1D1D6
commandCenter.inactiveForeground#6E6E73
descriptionForeground#6E6E73
diffEditor.diagonalFill#8E8E931A
diffEditor.insertedLineBackground#34C75914
diffEditor.insertedTextBackground#34C75930
diffEditor.removedLineBackground#FF3B3014
diffEditor.removedTextBackground#FF3B3030
diffEditorGutter.insertedLineBackground#34C75920
diffEditorGutter.removedLineBackground#FF3B3020
dropdown.background#FFFFFF
dropdown.border#AEAEB2
dropdown.foreground#242426
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FFD60A80
editor.findMatchBorder#C98B00
editor.findMatchForeground#1F2328
editor.findMatchHighlightBackground#FFD60A45
editor.foreground#1F2328
editor.inactiveSelectionBackground#0A84FF26
editor.lineHighlightBackground#F6F8FA
editor.selectionBackground#0A84FF40
editor.selectionHighlightBackground#0A84FF1F
editor.wordHighlightBackground#FFD60A30
editor.wordHighlightStrongBackground#FF9F0A30
editorBracketHighlight.foreground1#0068B7
editorBracketHighlight.foreground2#A90D91
editorBracketHighlight.foreground3#357C85
editorBracketHighlight.foreground4#8A4B08
editorBracketHighlight.foreground5#C41A16
editorBracketHighlight.foreground6#272AD8
editorBracketHighlight.unexpectedBracket.foreground#C42026
editorBracketMatch.background#0A84FF1F
editorBracketMatch.border#007AFF
editorCodeLens.foreground#7C7C80
editorCursor.foreground#007AFF
editorError.foreground#C42026
editorGroup.border#D1D1D6
editorGroup.dropBackground#007AFF20
editorGroup.emptyBackground#F2F2F5
editorGroupHeader.noTabsBackground#F2F2F5
editorGroupHeader.tabsBackground#E9E9ED
editorGroupHeader.tabsBorder#D1D1D6
editorGutter.addedBackground#248A3D
editorGutter.deletedBackground#C42026
editorGutter.modifiedBackground#007AFF
editorHoverWidget.background#F7F7F8
editorHoverWidget.border#C7C7CC
editorHoverWidget.foreground#242426
editorHoverWidget.highlightForeground#0068B7
editorHoverWidget.statusBarBackground#E9E9ED
editorIndentGuide.activeBackground#B8B8BD
editorIndentGuide.background#E5E5EA
editorInlayHint.background#E9E9ED
editorInlayHint.foreground#6E6E73
editorLineNumber.activeForeground#3A3A3C
editorLineNumber.foreground#9A9AA0
editorLink.activeForeground#0068B7
editorOverviewRuler.addedForeground#248A3D
editorOverviewRuler.border#D1D1D6
editorOverviewRuler.deletedForeground#C42026
editorOverviewRuler.modifiedForeground#007AFF
editorPane.background#F2F2F5
editorRuler.foreground#E5E5EA
editorStickyScroll.background#F8F8FA
editorStickyScroll.border#00000000
editorStickyScroll.shadow#00000020
editorStickyScrollHover.background#EFEFF2
editorSuggestWidget.background#F7F7F8
editorSuggestWidget.border#C7C7CC
editorSuggestWidget.focusHighlightForeground#145E96
editorSuggestWidget.foreground#242426
editorSuggestWidget.highlightForeground#A90D91
editorSuggestWidget.selectedBackground#D2E1EE
editorSuggestWidget.selectedForeground#1F2328
editorSuggestWidget.selectedIconForeground#315F80
editorWarning.foreground#9A6700
editorWhitespace.foreground#D1D1D6
editorWidget.background#F7F7F8
editorWidget.border#C7C7CC
editorWidget.foreground#242426
editorWidget.resizeBorder#007AFF
errorForeground#C42026
focusBorder#007AFF
foreground#242426
gitDecoration.addedResourceForeground#248A3D
gitDecoration.conflictingResourceForeground#9A6700
gitDecoration.deletedResourceForeground#C42026
gitDecoration.ignoredResourceForeground#8E8E93
gitDecoration.modifiedResourceForeground#0068B7
gitDecoration.renamedResourceForeground#357C85
gitDecoration.stageDeletedResourceForeground#C42026
gitDecoration.stageModifiedResourceForeground#248A3D
gitDecoration.submoduleResourceForeground#6E6E73
gitDecoration.untrackedResourceForeground#248A3D
icon.foreground#57575C
inlineChat.background#F7F7F8
inlineChat.border#C7C7CC
inlineChat.foreground#242426
inlineChat.shadow#00000026
inlineChatDiff.inserted#34C75926
inlineChatDiff.removed#FF3B3026
inlineChatInput.background#FFFFFF
inlineChatInput.border#AEAEB2
inlineChatInput.focusBorder#007AFF
inlineChatInput.placeholderForeground#8E8E93
input.background#FFFFFF
input.border#AEAEB2
input.foreground#1F2328
input.placeholderForeground#8E8E93
inputOption.activeBackground#007AFF24
inputOption.activeBorder#007AFF
inputOption.activeForeground#1F2328
interactive.activeCodeBorder#007AFF
interactive.inactiveCodeBorder#C7C7CC
keybindingLabel.background#FFFFFF
keybindingLabel.border#C7C7CC
keybindingLabel.bottomBorder#AEAEB2
keybindingLabel.foreground#3A3A3C
list.activeSelectionBackground#C7D9EA
list.activeSelectionForeground#1F2328
list.activeSelectionIconForeground#315F80
list.deemphasizedForeground#8E8E93
list.dropBackground#007AFF26
list.errorForeground#C42026
list.focusBackground#C7D9EA
list.focusForeground#1F2328
list.focusHighlightForeground#145E96
list.focusOutline#007AFF
list.highlightForeground#0068B7
list.hoverBackground#E5E5EA99
list.hoverForeground#1F2328
list.inactiveSelectionBackground#DDE8F5
list.inactiveSelectionForeground#1F2328
list.invalidItemForeground#C42026
menu.background#F7F7F8
menu.border#C7C7CC
menu.foreground#242426
menu.selectionBackground#D2E1EE
menu.selectionForeground#1F2328
menu.separatorBackground#D1D1D6
menubar.selectionBackground#DCDCE1
menubar.selectionForeground#1F2328
minimap.background#FFFFFF
notificationCenterHeader.background#E9E9ED
notificationCenterHeader.foreground#242426
notificationLink.foreground#0068B7
notifications.background#F7F7F8
notifications.border#C7C7CC
notifications.foreground#242426
panel.background#F5F5F7
panel.border#D1D1D6
panel.dropBorder#007AFF
panelInput.border#AEAEB2
panelSection.border#D1D1D6
panelSectionHeader.background#E9E9ED
panelSectionHeader.border#D1D1D6
panelSectionHeader.foreground#3A3A3C
panelTitle.activeBorder#007AFF
panelTitle.activeForeground#1F2328
panelTitle.inactiveForeground#6E6E73
peekView.border#007AFF
peekViewEditor.background#FFFFFF
peekViewEditor.matchHighlightBackground#FFD60A55
peekViewResult.background#F2F2F5
peekViewResult.fileForeground#1F2328
peekViewResult.lineForeground#6E6E73
peekViewResult.matchHighlightBackground#FFD60A55
peekViewResult.selectionBackground#C7D9EA
peekViewResult.selectionForeground#1F2328
peekViewTitle.background#E9E9ED
peekViewTitleDescription.foreground#6E6E73
peekViewTitleLabel.foreground#1F2328
pickerGroup.border#C7C7CC
pickerGroup.foreground#6E6E73
progressBar.background#007AFF
quickInput.background#F7F7F8
quickInput.foreground#242426
quickInputList.focusBackground#C7D9EA
quickInputList.focusForeground#1F2328
quickInputList.focusHighlightForeground#145E96
quickInputList.focusIconForeground#315F80
quickInputTitle.background#E9E9ED
scrollbar.shadow#0000001A
scrollbarSlider.activeBackground#3C3C4359
scrollbarSlider.background#3C3C4326
scrollbarSlider.hoverBackground#3C3C4340
selection.background#0A84FF38
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#AEAEB2
settings.checkboxForeground#242426
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#AEAEB2
settings.dropdownForeground#242426
settings.focusedRowBackground#0A84FF14
settings.focusedRowBorder#007AFF
settings.headerBorder#D1D1D6
settings.headerForeground#1F2328
settings.modifiedItemIndicator#007AFF
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#AEAEB2
settings.numberInputForeground#1F2328
settings.rowHoverBackground#E5E5EA80
settings.sashBorder#D1D1D6
settings.settingsHeaderHoverForeground#0068B7
settings.textInputBackground#FFFFFF
settings.textInputBorder#AEAEB2
settings.textInputForeground#1F2328
sideBar.background#F2F2F5
sideBar.border#D1D1D6
sideBar.dropBackground#007AFF20
sideBar.foreground#242426
sideBarSectionHeader.background#E9E9ED
sideBarSectionHeader.border#D1D1D6
sideBarSectionHeader.foreground#3A3A3C
sideBarTitle.foreground#1F2328
statusBar.background#E9E9ED
statusBar.border#D1D1D6
statusBar.debuggingBackground#FFF3D6
statusBar.debuggingBorder#E3B341
statusBar.debuggingForeground#5C3A00
statusBar.foreground#3A3A3C
statusBar.noFolderBackground#E9E9ED
statusBar.noFolderBorder#D1D1D6
statusBar.noFolderForeground#6E6E73
statusBarItem.activeBackground#C7C7CC
statusBarItem.hoverBackground#D1D1D680
statusBarItem.hoverForeground#1F2328
statusBarItem.remoteBackground#007AFF
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#357C85
symbolIcon.booleanForeground#272AD8
symbolIcon.classForeground#357C85
symbolIcon.colorForeground#836C28
symbolIcon.constantForeground#272AD8
symbolIcon.constructorForeground#0068B7
symbolIcon.enumeratorForeground#357C85
symbolIcon.enumeratorMemberForeground#272AD8
symbolIcon.eventForeground#8A4B08
symbolIcon.fieldForeground#1F2328
symbolIcon.fileForeground#1F2328
symbolIcon.folderForeground#0068B7
symbolIcon.functionForeground#0068B7
symbolIcon.interfaceForeground#357C85
symbolIcon.keyForeground#1F2328
symbolIcon.keywordForeground#A90D91
symbolIcon.methodForeground#0068B7
symbolIcon.moduleForeground#357C85
symbolIcon.namespaceForeground#357C85
symbolIcon.nullForeground#272AD8
symbolIcon.numberForeground#272AD8
symbolIcon.objectForeground#1F2328
symbolIcon.operatorForeground#A90D91
symbolIcon.packageForeground#357C85
symbolIcon.propertyForeground#1F2328
symbolIcon.referenceForeground#272AD8
symbolIcon.snippetForeground#C41A16
symbolIcon.stringForeground#C41A16
symbolIcon.structForeground#357C85
symbolIcon.textForeground#1F2328
symbolIcon.typeParameterForeground#357C85
symbolIcon.unitForeground#8A4B08
symbolIcon.variableForeground#1F2328
tab.activeBackground#FFFFFF
tab.activeBorderTop#007AFF
tab.activeForeground#1F2328
tab.activeModifiedBorder#FF9F0A
tab.border#D1D1D6
tab.hoverBackground#F7F7F8
tab.hoverForeground#1F2328
tab.inactiveBackground#E9E9ED
tab.inactiveForeground#6E6E73
tab.inactiveModifiedBorder#C77C00
tab.unfocusedActiveForeground#57575C
tab.unfocusedInactiveForeground#8E8E93
terminal.ansiBlack#000000
terminal.ansiBlue#0068B7
terminal.ansiBrightBlack#6E6E73
terminal.ansiBrightBlue#007AFF
terminal.ansiBrightCyan#32ADE6
terminal.ansiBrightGreen#34C759
terminal.ansiBrightMagenta#AF52DE
terminal.ansiBrightRed#FF3B30
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FF9F0A
terminal.ansiCyan#357C85
terminal.ansiGreen#248A3D
terminal.ansiMagenta#A90D91
terminal.ansiRed#C42026
terminal.ansiWhite#D1D1D6
terminal.ansiYellow#9A6700
terminal.background#FFFFFF
terminal.foreground#1F2328
terminal.selectionBackground#0A84FF38
terminalCursor.foreground#007AFF
textBlockQuote.background#F2F2F7
textBlockQuote.border#C7C7CC
textLink.activeForeground#004F8C
textLink.foreground#0068B7
textPreformat.background#E9E9EE
textPreformat.foreground#242426
titleBar.activeBackground#ECECEE
titleBar.activeForeground#242426
titleBar.border#D1D1D6
titleBar.inactiveBackground#F2F2F4
titleBar.inactiveForeground#8E8E93
toolbar.activeBackground#D1D1D6
toolbar.hoverBackground#DCDCE180
tree.inactiveIndentGuidesStroke#E5E5EA
tree.indentGuidesStroke#D1D1D6
walkThrough.embeddedEditorBackground#FFFFFF
welcomePage.background#F2F2F5
welcomePage.tileBackground#FFFFFF
welcomePage.tileBorder#D1D1D6
welcomePage.tileHoverBackground#F7F7F8
widget.border#C7C7CC
widget.shadow#00000026
window.activeBorder#C7C7CC
window.inactiveBorder#E5E5EA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#272AD8	—
source	#1F2328	—
meta.diff, meta.diff.header	#5D6C79	—
markup.inserted	#0068B7	—
markup.deleted	#C42026	—
markup.changed	#8A4B08	—
invalid	#C42026	underline
invalid.deprecated	#1F2328	underline
entity.name.filename	#C41A16	—
markup.error	#C42026	—
markup.underline	—	underline
markup.bold	#8A4B08	bold
markup.heading	#272AD8	bold
markup.italic	#C41A16	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#357C85	—
markup.inline.raw, markup.raw.restructuredtext	#0068B7	—
markup.underline.link, markup.underline.link.image	#357C85	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#A90D91	—
entity.name.directive.restructuredtext, markup.quote	#C41A16	italic
meta.separator.markdown	#5D6C79	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#0068B7	—
punctuation.definition.constant.restructuredtext	#272AD8	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#272AD8	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#1F2328	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#C41A16	—
entity.name.type.class, entity.name.class	#357C85
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	#272AD8	—
entity.other.inherited-class	#357C85	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#5D6C79	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#A90D91	—
comment.block.documentation entity.name.type	#357C85	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#357C85	—
comment.block.documentation variable	#8A4B08	italic
constant, variable.other.constant	#272AD8	—
constant.character.escape, constant.character.string.escape, constant.regexp	#A90D91	—
entity.name.tag	#A90D91	—
entity.other.attribute-name.parent-selector	#A90D91	—
entity.other.attribute-name	#0068B7	—
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	#0068B7	—
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	#8A4B08	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#836C28	italic
meta.decorator variable.other.object	#836C28	—
keyword, punctuation.definition.keyword	#A90D91	—
keyword.control.new, keyword.operator.new	—
meta.selector	#A90D91	—
support	#357C85	—
support.function.magic, support.variable, variable.other.predefined	#272AD8
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	#A90D91	—
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	#1F2328	—
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	#A90D91	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#357C85	—
constant.other.date, constant.other.timestamp	#8A4B08	—
variable.other.alias.yaml	#0068B7	underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#A90D91
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.haskell, storage.type.ocaml	#357C85	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#8A4B08	—
storage.modifier	#A90D91	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#C41A16	—
punctuation.definition.group.capture.regexp	#A90D91	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#C42026	—
punctuation.definition.character-class.regexp	#357C85	—
punctuation.definition.group.regexp	#8A4B08	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#C42026	—
meta.assertion.look-ahead.regexp	#0068B7	—
string	#C41A16	—
punctuation.definition.string.begin, punctuation.definition.string.end	#C41A16	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#357C85	—
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	#5D6C79	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#1F2328	—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable	#8A4B08	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#1F2328
meta.selectionset.graphql variable	#C41A16	—
meta.selectionset.graphql meta.arguments variable	#1F2328	—
entity.name.fragment.graphql, variable.fragment.graphql	#357C85	—
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	#1F2328	—
source.shell variable.other	#272AD8	—
support.constant	#272AD8
meta.scope.prerequisites.makefile	#C41A16	—
meta.attribute-selector.scss	#C41A16	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#1F2328	—
meta.preprocessor.haskell	#5D6C79	—
variable.other.property, support.variable.property, meta.object-literal.key, meta.property-name, support.type.property-name	#1F2328	—
keyword.operator, keyword.operator.word	#A90D91	italic
constant, variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, support.constant, entity.name.constant	#272AD8	—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	—	italic
comment.block.documentation, string.quoted.docstring.multi	—	italic