Arcane Color Theme

Name: Arcane Color Theme
Author: Papa Ours Polaire

Publisher: Papa Ours PolaireThemes in package: 1

Thème sombre inspiré de l'univers Arcane (League of Legends) pour Visual Studio Code.

Open in VS Code GitHub

VS Code preview

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

Arcane Color Theme — Arcane Theme

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.background#000000
activityBar.border#EB396960
activityBar.foreground#0FF2F2
activityBarBadge.background#0FF2F2
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#EB3969
breadcrumb.activeSelectionForeground#EB3969
breadcrumb.background#000000
breadcrumb.focusForeground#0FF2F2
breadcrumb.foreground#E84B8B
breadcrumbPicker.background#000000
button.background#EB396950
charts.blue#416EF2
charts.foreground#A7A8AF
charts.green#3DEBAA
charts.purple#EB3969
charts.red#FF293B
charts.yellow#6589F2
contrastBorder#EB396940
debugConsole.errorForeground#FF293B
debugConsole.infoForeground#0FF2F2
debugConsole.sourceForeground#6589F2
debugConsole.warningForeground#416EF2
debugConsoleInputIcon.foreground#EB3969
debugIcon.breakpointForeground#EB3969
debugIcon.startForeground#3DEBAA
debugIcon.stopForeground#FF293B
debugToolBar.background#000000
diffEditor.insertedTextBackground#6589F215
diffEditor.removedTextBackground#034AA620
dropdown.background#000000
dropdown.border#1D173910
editor.background#000000
editor.findMatchBackground#000000
editor.findMatchBorder#EB3969
editor.findMatchHighlightBackground#EB396993
editor.findMatchHighlightBorder#1D173930
editor.foreground#C8C0D8
editor.lineHighlightBackground#00000050
editor.selectionBackground#0FF2F230
editor.selectionHighlightBackground#EB39696b
editor.selectionHighlightBorder#0FF2F2f0
editorBracketHighlight.foreground1#0FF2F2
editorBracketHighlight.foreground2#EB3969
editorBracketHighlight.foreground3#416EF2
editorBracketHighlight.foreground4#3DEBAA
editorBracketHighlight.foreground5#6589F2
editorBracketHighlight.foreground6#4FF7FF
editorBracketHighlight.unexpectedBracket.foreground#FF293B
editorBracketMatch.background#000000
editorBracketMatch.border#416EF27f
editorCursor.foreground#416EF2
editorError.foreground#416EF2
editorGhostText.background#00000000
editorGhostText.foreground#4a3a6a
editorGroup.border#00000030
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#6589F260
editorGutter.deletedBackground#034AA660
editorGutter.modifiedBackground#0FF2F260
editorHoverWidget.background#000000
editorHoverWidget.border#1D173910
editorIndentGuide.activeBackground#eb39698c
editorIndentGuide.background#eb396936
editorInfo.foreground#0FF2F270
editorInlayHint.background#00000055
editorInlayHint.foreground#EB396988
editorInlayHint.parameterForeground#416EF288
editorInlayHint.typeForeground#0FF2F288
editorLineNumber.activeForeground#0FF2F2
editorLineNumber.foreground#EB3969c0
editorLink.activeForeground#0FF2F2
editorMarkerNavigation.background#150E2D05
editorOverviewRuler.border#000000
editorOverviewRuler.errorForeground#034AA640
editorOverviewRuler.findMatchForeground#EB3969
editorOverviewRuler.infoForeground#0FF2F240
editorOverviewRuler.warningForeground#416EF270
editorRuler.foreground#0D0A1B
editorSuggestWidget.background#000000
editorSuggestWidget.border#1D173910
editorSuggestWidget.foreground#0FF2F2
editorSuggestWidget.highlightForeground#416EF2
editorSuggestWidget.selectedBackground#EB396920
editorWarning.foreground#6589F2
editorWhitespace.foreground#150E2D40
editorWidget.background#000000
editorWidget.border#416EF2
editorWidget.resizeBorder#EB3969
extensionButton.prominentBackground#6589F290
extensionButton.prominentHoverBackground#034AA6
focusBorder#1D173900
gitDecoration.conflictingResourceForeground#416EF2
gitDecoration.deletedResourceForeground#034AA6
gitDecoration.ignoredResourceForeground#EB3969
gitDecoration.modifiedResourceForeground#E84B8B
gitDecoration.untrackedResourceForeground#0FF2F2
input.background#000000
input.border#0FF2F260
input.foreground#0ff2f2cb
input.placeholderForeground#0FF2F260
inputOption.activeBackground#150E2D30
inputOption.activeBorder#150E2D30
inputValidation.errorBorder#034AA650
inputValidation.infoBorder#0FF2F250
inputValidation.warningBorder#416EF250
list.activeSelectionBackground#000000
list.activeSelectionForeground#EB3969
list.focusBackground#000000
list.focusForeground#0FF2F2
list.highlightForeground#EB3969
list.hoverBackground#0D0A1B
list.hoverForeground#EB3969
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#EB3969
list.warningForeground#416EF2
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#000000
menu.border#EB396950
menu.foreground#EB3969
menu.selectionBackground#000000
menu.selectionBorder#00000030
menu.selectionForeground#0FF2F2
menu.separatorBackground#150E2D
menubar.selectionBackground#EB396950
menubar.selectionBorder#EB396950
menubar.selectionForeground#EB3969
minimap.background#000000
minimapGutter.addedBackground#034AA6
minimapGutter.deletedBackground#416EF2
minimapGutter.modifiedBackground#6589F2
minimapSlider.activeBackground#6589F2b0
minimapSlider.background#6589F280
minimapSlider.hoverBackground#6589F2a0
notebook.cellBorderColor#EB396940
notebook.cellEditorBackground#00000055
notebook.focusedCellBorder#EB3969
notificationLink.foreground#EB3969
notifications.background#000000
notifications.foreground#EB3969
panel.background#000000
panel.border#EB396950
panelTitle.activeBorder#EB3969
panelTitle.activeForeground#EB3969
panelTitle.inactiveForeground#EB396950
peekView.border#00000030
peekViewEditor.background#150E2D05
peekViewEditor.matchHighlightBackground#EB396950
peekViewEditorGutter.background#150E2D05
peekViewResult.background#150E2D05
peekViewResult.matchHighlightBackground#EB396950
peekViewResult.selectionBackground#EB396970
peekViewTitle.background#150E2D05
peekViewTitleDescription.foreground#0FF2F260
pickerGroup.foreground#EB3969
problemsErrorIcon.foreground#FF293B
problemsInfoIcon.foreground#0FF2F2
problemsWarningIcon.foreground#416EF2
progressBar.background#EB3969
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#EB3969bb
scrollbarSlider.background#EB396940
scrollbarSlider.hoverBackground#EB396988
settings.checkboxBackground#0FF2F250
settings.checkboxForeground#ffffff
settings.dropdownBackground#000000
settings.dropdownForeground#0FF2F2
settings.headerForeground#EB3969
settings.modifiedItemIndicator#EB3969
settings.numberInputBackground#000000
settings.numberInputForeground#0FF2F2
settings.textInputBackground#000000
settings.textInputForeground#0FF2F2
sideBar.background#000000
sideBar.border#EB396950
sideBar.foreground#0FF2F2
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#00000060
sideBarSectionHeader.foreground#0FF2F2
sideBarTitle.foreground#EB3969
statusBar.background#1D0035
statusBar.border#00000060
statusBar.debuggingBackground#416EF2
statusBar.debuggingForeground#1D1739
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#EB396920
statusBarItem.remoteBackground#EB3969
statusBarItem.remoteForeground#000000
symbolIcon.classForeground#3DEBAA
symbolIcon.constantForeground#4FF7FF
symbolIcon.enumForeground#3DEBAA
symbolIcon.functionForeground#0FF2F2
symbolIcon.interfaceForeground#416EF2
symbolIcon.keyForeground#EB3969
symbolIcon.moduleForeground#E84B8B
symbolIcon.stringForeground#6589F2
symbolIcon.variableForeground#C8C0D8
tab.activeBackground#EB396950
tab.activeBorder#EB3969
tab.activeForeground#0FF2F2
tab.activeModifiedBorder#EB3969
tab.border#000000
tab.inactiveBackground#EB396920
tab.inactiveForeground#0FF2F2af
tab.unfocusedActiveBackground#EB396940
tab.unfocusedActiveBorder#EB3969
tab.unfocusedActiveForeground#0FF2F2af
tab.unfocusedInactiveBackground#EB396910
tab.unfocusedInactiveForeground#0FF2F27f
terminal.ansiBlack#000000
terminal.ansiBlue#0FF2F2
terminal.ansiBrightBlack#EB3969
terminal.ansiBrightBlue#0FF2F2
terminal.ansiBrightCyan#4FF7FF
terminal.ansiBrightGreen#6589F2
terminal.ansiBrightMagenta#416EF2
terminal.ansiBrightRed#034AA6
terminal.ansiBrightWhite#E8E0F0
terminal.ansiBrightYellow#416EF2
terminal.ansiCyan#4FF7FF
terminal.ansiGreen#6589F2
terminal.ansiMagenta#416EF2
terminal.ansiRed#034AA6
terminal.ansiWhite#C8C0D8
terminal.ansiYellow#416EF2
terminalCursor.background#000000
terminalCursor.foreground#416EF2
testing.iconErrored#FF293B
testing.iconFailed#FF293B
testing.iconPassed#3DEBAA
testing.iconSkipped#416EF2
testing.runAction#0FF2F2
textLink.activeForeground#4ff6ffd3
textLink.foreground#EB3969
titleBar.activeBackground#000000
titleBar.activeForeground#EB3969
titleBar.border#00000060
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#EB3969
tree.indentGuidesStroke#0D0A1B
widget.shadow#00000030
window.activeBorder#EB3969
window.inactiveBorder#EB396950

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#416EF2	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#6589F2	—
constant.other.php	#416EF2	—
constant.other.color	#0FF2F2	—
invalid, invalid.illegal	#034AA6	—
Keyword, Storage	—	italic
keyword.control, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#E84B8B	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#E84B8B	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js	#EB3969	—
comment, punctuation.definition.comment	#2AAB80	italic
string, constant.other.symbol	#6589F2	—
constant.numeric, constant.language	#0FF2F2	—
entity.name.function, meta.require, support.function.any-method	#0FF2F2	—
entity.name.tag	#EB3969	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#416EF2	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#E84B8B	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#0FF2F2	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#0FF2F2	italic
entity.other.attribute-name, support.function	#416EF2	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#0FF2F2	—
source.scss keyword.control	#416EF2	—
markup.inserted	#6589F2	—
markup.deleted	#034AA6	—
markup.changed	#416EF2	—
string.regexp	#4FF7FF	—
constant.character.escape	#4FF7FF	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#0FF2F2	italic
support.type.property-name.json	#5b29ffa9	—
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown	#D0C8E8	—
text.html.markdown markup.inline.raw.markdown	#416EF2	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#4FF7FF	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#E84B8B	bold
markup.underline	#0FF2F2	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#EB3969	—
markup.quote	—	italic
markup.italic, markup.italic.markdown, text.html.markdown markup.italic, text.html.markdown markup.italic.markdown	#4FF7FF	italic
punctuation.definition.italic.begin.markdown, punctuation.definition.italic.end.markdown, punctuation.definition.italic.markdown	#4FF7FF	italic
markup.bold, markup.bold.markdown, text.html.markdown markup.bold, text.html.markdown markup.bold.markdown	#EB3969	bold
punctuation.definition.bold.begin.markdown, punctuation.definition.bold.end.markdown, punctuation.definition.bold.markdown	#EB3969	bold
markup.bold markup.italic, markup.italic markup.bold, text.html.markdown markup.bold markup.italic	#E84B8B	bold italic
string.other.link.description.title.markdown	#416EF2	—
constant.other.reference.link.markdown	#416EF2	—
markup.raw.block	#416EF2	—
variable.language.fenced.markdown	#EB3969	—
meta.separator	#A7A8AF	bold
token.info-token	#EB3969	—
token.warn-token	#416EF2	—
token.error-token	#FF293B	—
token.debug-token	#4FF7FF	—
variable.language.special.self.python, variable.language.special.cls.python	#EB3969	italic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python	#E84B8B	italic
meta.fstring.python, constant.character.format.placeholder.other.python	#4FF7FF	—
support.function.builtin.python	#0FF2F2	—
support.function.magic.python	#6589F2	italic
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust	#3DEBAA	italic
support.macro.rust, entity.name.function.macro.rust	#4FF7FF	—
storage.type.rust, entity.name.type.rust	#3DEBAA	—
meta.attribute.rust, punctuation.definition.attribute.rust	#E84B8B	italic
variable.language.self.rust	#EB3969	italic
variable.other.php, variable.language.this.php, punctuation.definition.variable.php	#0FF2F2	—
keyword.operator.class.php, punctuation.separator.inheritance.php	#E84B8B	—
support.other.namespace.php, meta.use.php	#416EF2	—
entity.name.type.ts, entity.name.type.tsx, entity.name.interface.ts	#3DEBAA	—
meta.type.parameters.ts, meta.type.parameters.tsx	#4FF7FF	—
meta.type.annotation.ts, meta.type.annotation.tsx	#6589F2	—
entity.name.type.enum.ts	#3DEBAA	—
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx	#3DEBAA	—
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx	#0FF2F2	—
entity.name.tag.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml	#0FF2F2	—
string.unquoted.plain.out.yaml, meta.mapping.value.yaml	#6589F2	—
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#EB3969	—
variable.other.normal.shell, variable.other.bracket.shell, punctuation.definition.variable.shell	#0FF2F2	—
support.function.builtin.shell	#3DEBAA	—
string.unquoted.argument.shell	#4FF7FF	—
comment.line.shebang.shell	#EB3969	bold
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.create.sql	#EB3969	bold
support.function.aggregate.sql	#0FF2F2	—
entity.name.function.sql	#3DEBAA	—
entity.name.package.go, keyword.import.go	#416EF2	—
storage.type.go	#3DEBAA	—
keyword.channel.go, keyword.go	#EB3969	—
variable.other.property.go	#0FF2F2	—
constant.other.symbol.ruby, punctuation.definition.constant.ruby	#4FF7FF	—
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby, punctuation.definition.variable.ruby	#0FF2F2	—
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby	#EB3969	—
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java	#E84B8B	italic
storage.type.primitive.java	#3DEBAA	—
variable.language.this.java	#EB3969	italic
markup.inserted.diff, meta.diff.header.to-file	#3DEBAA	—
markup.deleted.diff, meta.diff.header.from-file	#FF293B	—
meta.diff.range.unified, punctuation.definition.range.diff	#416EF2	—
variable.other.env	#0FF2F2	—
string.unquoted.env, string.quoted.double.env, string.quoted.single.env	#6589F2	—
punctuation.separator.key-value.env	#EB3969	—
support.type.graphql, entity.name.type.graphql	#3DEBAA	—
variable.graphql	#0FF2F2	—
entity.name.directive.graphql	#E84B8B	italic
keyword.key.toml	#0FF2F2	—
entity.other.attribute-name.table.toml, punctuation.definition.table.toml	#EB3969	—
keyword.control.directive.cpp, keyword.control.directive.c, punctuation.definition.directive.cpp	#E84B8B	—
storage.type.c, storage.type.cpp	#3DEBAA	—
storage.modifier.pointer.cpp, storage.modifier.reference.cpp	#4FF7FF	—