Gasrulle Theme

Name: Gasrulle Theme
Author: Gasrulle

Publisher: GasrulleThemes in package: 13

A curated theme pack for VS Code — ported IDE themes (JetBrains Rider, Visual Studio, and more) plus original creations by Gasrulle.

Open in VS Code GitHub

Color themes

VS Code preview

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

Gasrulle Theme — Gasrulle - Apex Carbon++

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.activeBorder#78C8F0
activityBar.background#1f1f1f
activityBar.border#1f1f1f
activityBar.foreground#C2C2C2
activityBar.inactiveForeground#616161
activityBarBadge.background#78C8F0
activityBarBadge.foreground#1f1f1f
badge.background#78C8F0
badge.foreground#1f1f1f
breadcrumb.activeSelectionForeground#C2C2C2
breadcrumb.focusForeground#C2C2C2
breadcrumb.foreground#6E6E6E
breadcrumbPicker.background#272727
button.background#78C8F0
button.foreground#1f1f1f
button.hoverBackground#80C8F0
button.secondaryBackground#4f4f4f
button.secondaryForeground#C2C2C2
button.secondaryHoverBackground#616161
chat.requestBubbleBackground#333333
chat.requestBubbleHoverBackground#3B3B3B
debugConsole.errorForeground#E07070
debugConsole.infoForeground#78C8F0
debugConsole.warningForeground#D9B086
debugExceptionWidget.background#272727
debugExceptionWidget.border#E07070
debugToolBar.background#272727
descriptionForeground#B0B0B0
diffEditor.diagonalFill#393939
diffEditor.insertedTextBackground#9AD68A28
diffEditor.removedTextBackground#E0707028
dropdown.background#272727
dropdown.border#393939
dropdown.foreground#C2C2C2
dropdown.listBackground#272727
editor.background#1f1f1f
editor.findMatchBackground#9AD68A60
editor.findMatchHighlightBackground#9AD68A40
editor.findRangeHighlightBackground#32323280
editor.foldBackground#32323230
editor.foreground#C2C2C2
editor.hoverHighlightBackground#78C8F020
editor.inactiveSelectionBackground#44444466
editor.lineHighlightBackground#2b2b2b
editor.lineHighlightBorder#2b2b2b
editor.rangeHighlightBackground#242424CC
editor.selectionBackground#444444
editor.selectionHighlightBackground#78C8F030
editor.wordHighlightBackground#78C8F048
editor.wordHighlightStrongBackground#E68CA548
editorBracketHighlight.foreground1#E8D898
editorBracketHighlight.foreground2#90DCC0
editorBracketHighlight.foreground3#B08068
editorBracketHighlight.foreground4#C0E498
editorBracketHighlight.foreground5#F0CCC0
editorBracketHighlight.foreground6#887098
editorBracketHighlight.unexpectedBracket.foreground#E07070
editorBracketMatch.background#78C8F030
editorBracketMatch.border#4f4f4f
editorCodeLens.foreground#828282
editorCursor.foreground#C2C2C2
editorError.foreground#E07070
editorGhostText.foreground#616161
editorGroup.border#1f1f1f
editorGroup.dropBackground#3e3e3e44
editorGroupHeader.noTabsBackground#1f1f1f
editorGroupHeader.tabsBackground#1f1f1f
editorGroupHeader.tabsBorder#1f1f1f
editorGutter.addedBackground#9AD68A
editorGutter.deletedBackground#E07070
editorGutter.foldingControlForeground#6E6E6E
editorGutter.modifiedBackground#78C8F0
editorHoverWidget.background#272727
editorHoverWidget.border#393939
editorHoverWidget.foreground#C2C2C2
editorIndentGuide.activeBackground1#4f4f4f
editorIndentGuide.background1#393939
editorInfo.foreground#78C8F0
editorInlayHint.background#32323280
editorInlayHint.foreground#6E6E6E
editorInlayHint.parameterBackground#32323280
editorInlayHint.parameterForeground#6E6E6E
editorInlayHint.typeBackground#32323280
editorInlayHint.typeForeground#6E6E6E
editorLightBulb.foreground#D9B086
editorLightBulbAutoFix.foreground#78C8F0
editorLineNumber.activeForeground#989898
editorLineNumber.foreground#656565
editorOverviewRuler.border#1f1f1f
editorOverviewRuler.currentContentForeground#9AD68A
editorOverviewRuler.errorForeground#E07070
editorOverviewRuler.findMatchForeground#D9B08680
editorOverviewRuler.incomingContentForeground#78C8F0
editorOverviewRuler.infoForeground#78C8F0
editorOverviewRuler.warningForeground#D9B086
editorRuler.foreground#393939
editorStickyScroll.background#1f1f1f
editorStickyScrollHover.background#2b2b2b
editorSuggestWidget.background#272727
editorSuggestWidget.border#393939
editorSuggestWidget.foreground#C2C2C2
editorSuggestWidget.highlightForeground#78C8F0
editorSuggestWidget.selectedBackground#444444
editorSuggestWidget.selectedForeground#D0D0D0
editorWarning.foreground#D9B086
editorWhitespace.foreground#37373780
editorWidget.background#272727
editorWidget.border#393939
editorWidget.foreground#C2C2C2
errorForeground#E07070
extensionBadge.remoteBackground#78C8F0
extensionBadge.remoteForeground#1f1f1f
extensionButton.prominentBackground#78C8F0
extensionButton.prominentForeground#1f1f1f
extensionButton.prominentHoverBackground#80C8F0
focusBorder#78C8F0
foreground#C2C2C2
gitDecoration.addedResourceForeground#9AD68A
gitDecoration.conflictingResourceForeground#E07070
gitDecoration.deletedResourceForeground#6E6E6E
gitDecoration.ignoredResourceForeground#616161
gitDecoration.modifiedResourceForeground#78C8F0
gitDecoration.stageDeletedResourceForeground#6E6E6E
gitDecoration.stageModifiedResourceForeground#78C8F0
gitDecoration.untrackedResourceForeground#9AD68A
icon.foreground#B0B0B0
input.background#393939
input.border#4f4f4f
input.foreground#C2C2C2
input.placeholderForeground#616161
inputOption.activeBackground#78C8F044
inputOption.activeBorder#78C8F0
inputValidation.errorBackground#272727
inputValidation.errorBorder#E07070
inputValidation.infoBackground#272727
inputValidation.infoBorder#78C8F0
inputValidation.warningBackground#272727
inputValidation.warningBorder#D9B086
list.activeSelectionBackground#444444
list.activeSelectionForeground#D0D0D0
list.errorForeground#E07070
list.focusBackground#444444
list.focusForeground#D0D0D0
list.highlightForeground#78C8F0
list.hoverBackground#38383860
list.hoverForeground#C2C2C2
list.inactiveSelectionBackground#44444466
list.inactiveSelectionForeground#D0D0D0
list.invalidItemForeground#E07070
list.warningForeground#D9B086
merge.border#1f1f1f
merge.currentContentBackground#9AD68A50
merge.currentHeaderBackground#9AD68A66
merge.incomingContentBackground#78C8F050
merge.incomingHeaderBackground#78C8F066
minimap.errorHighlight#E07070
minimap.findMatchHighlight#9AD68A80
minimap.selectionHighlight#78C8F0BB
minimap.warningHighlight#D9B086
minimapGutter.addedBackground#9AD68A
minimapGutter.deletedBackground#E07070
minimapGutter.modifiedBackground#78C8F0
minimapSlider.activeBackground#5c5c5c60
minimapSlider.background#5c5c5c20
minimapSlider.hoverBackground#5c5c5c40
notificationCenter.border#393939
notificationCenterHeader.background#272727
notificationCenterHeader.foreground#C2C2C2
notificationLink.foreground#78C8F0
notifications.background#393939
notifications.border#4f4f4f
notifications.foreground#C2C2C2
notificationsErrorIcon.foreground#E07070
notificationsInfoIcon.foreground#78C8F0
notificationsWarningIcon.foreground#D9B086
panel.background#1f1f1f
panel.border#393939
panelTitle.activeBorder#78C8F0
panelTitle.activeForeground#C2C2C2
panelTitle.inactiveForeground#616161
peekView.border#78C8F0
peekViewEditor.background#1f1f1f
peekViewEditor.matchHighlightBackground#9AD68A50
peekViewEditorGutter.background#1f1f1f
peekViewResult.background#272727
peekViewResult.fileForeground#C2C2C2
peekViewResult.lineForeground#989898
peekViewResult.matchHighlightBackground#9AD68A50
peekViewResult.selectionBackground#444444
peekViewResult.selectionForeground#D0D0D0
peekViewTitle.background#272727
peekViewTitleDescription.foreground#6E6E6E
peekViewTitleLabel.foreground#C2C2C2
progressBar.background#78C8F0
quickInput.background#272727
quickInput.foreground#C2C2C2
quickInputList.focusBackground#444444
quickInputList.focusForeground#D0D0D0
quickInputTitle.background#272727
sash.hoverBorder#78C8F0
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#666666BB
scrollbarSlider.background#66666666
scrollbarSlider.hoverBackground#66666699
selection.background#444444
settings.focusedRowBackground#20202080
settings.headerForeground#C2C2C2
settings.modifiedItemIndicator#78C8F0
sideBar.background#272727
sideBar.border#1f1f1f
sideBar.foreground#C2C2C2
sideBarSectionHeader.background#2D2D2D
sideBarSectionHeader.border#1f1f1f
sideBarSectionHeader.foreground#CECECE
sideBarTitle.foreground#CECECE
statusBar.background#1f1f1f
statusBar.border#1f1f1f
statusBar.debuggingBackground#E07070
statusBar.debuggingForeground#1f1f1f
statusBar.foreground#989898
statusBar.noFolderBackground#1f1f1f
statusBar.noFolderForeground#989898
statusBarItem.hoverBackground#393939
statusBarItem.prominentBackground#78C8F0
statusBarItem.prominentForeground#1f1f1f
statusBarItem.remoteBackground#78C8F0
statusBarItem.remoteForeground#1f1f1f
tab.activeBackground#1f1f1f
tab.activeBorderTop#78C8F0
tab.activeForeground#C2C2C2
tab.border#1f1f1f
tab.hoverBackground#333333
tab.inactiveBackground#1f1f1f
tab.inactiveForeground#6E6E6E
tab.lastPinnedBorder#393939
tab.unfocusedActiveBackground#1f1f1f
tab.unfocusedActiveForeground#6E6E6E
tab.unfocusedInactiveBackground#1f1f1f
tab.unfocusedInactiveForeground#616161
terminal.ansiBlack#1f1f1f
terminal.ansiBlue#78C8F0
terminal.ansiBrightBlack#6E6E6E
terminal.ansiBrightBlue#80C8F0
terminal.ansiBrightCyan#68C8C8
terminal.ansiBrightGreen#9CD48C
terminal.ansiBrightMagenta#E898B0
terminal.ansiBrightRed#E88080
terminal.ansiBrightWhite#E8E8E8
terminal.ansiBrightYellow#D4B090
terminal.ansiCyan#66CACA
terminal.ansiGreen#9AD68A
terminal.ansiMagenta#E68CA5
terminal.ansiRed#E07070
terminal.ansiWhite#C2C2C2
terminal.ansiYellow#D9B086
terminal.background#1f1f1f
terminal.border#272727
terminal.dropBackground#78C8F020
terminal.findMatchBackground#9AD68A60
terminal.findMatchBorder#9AD68ACC
terminal.findMatchHighlightBackground#9AD68A40
terminal.foreground#C2C2C2
terminal.hoverHighlightBackground#78C8F020
terminal.inactiveSelectionBackground#44444466
terminal.initialHintForeground#6E6E6E
terminal.selectionBackground#444444
terminal.tab.activeBorder#78C8F0
terminalCommandDecoration.defaultBackground#6E6E6E
terminalCommandDecoration.errorBackground#E07070
terminalCommandDecoration.successBackground#9AD68A
terminalCommandGuide.foreground#6E6E6E40
terminalCursor.background#1f1f1f
terminalCursor.foreground#C2C2C2
terminalOverviewRuler.cursorForeground#78C8F0BB
terminalOverviewRuler.findMatchForeground#9AD68A80
terminalStickyScroll.background#272727
terminalStickyScrollHover.background#2E2E2E
testing.iconErrored#E07070
testing.iconFailed#E07070
testing.iconPassed#9AD68A
testing.iconQueued#D9B086
testing.iconSkipped#6E6E6E
testing.iconUnset#6E6E6E
textBlockQuote.background#272727
textBlockQuote.border#78C8F0
textCodeBlock.background#393939
textLink.activeForeground#80C8F0
textLink.foreground#78C8F0
textPreformat.foreground#D9B086
titleBar.activeBackground#1f1f1f
titleBar.activeForeground#C2C2C2
titleBar.border#1f1f1f
titleBar.inactiveBackground#1f1f1f
titleBar.inactiveForeground#616161
tree.indentGuidesStroke#393939
walkThrough.embeddedEditorBackground#1f1f1f
welcomePage.background#1f1f1f
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#C2C2C2	—
comment, punctuation.definition.comment	#6E6E6E	italic
comment.block.documentation, comment.block.javadoc	#5A5A5A	italic
comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.type.instance.jsdoc, keyword.other.documentation, storage.type.class.jsdoc	#888078	—
keyword, keyword.control, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, storage, storage.modifier, storage.type	#E68CA5	—
keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch	#F09CB5	italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, punctuation.accessor, punctuation.separator, punctuation.terminator	#a0a0a0	—
keyword.operator.logical, keyword.operator.logical.python	#66CACA	—
string, string.interpolated, string.quoted, string.template	#9AD68A	—
constant.character.escape, string.template punctuation.definition.template-expression	#D9B086	—
constant.numeric, constant.numeric.binary, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal	#D9B086	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.language.self, variable.language.super, variable.language.this	#D9B086	italic
entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function	#78C8F0	—
entity.name.function.member, meta.function-call support.function	#78C8F0	—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.other.inherited-class, support.class, support.type	#66CACA	—
entity.name.type.parameter, entity.name.type.type-parameter	#68C8C8	—
meta.parameter, variable, variable.other, variable.parameter	#C2C2C2	—
entity.name.tag.yaml, meta.object-literal.key, support.type.property-name, variable.other.object.property, variable.other.property	#E8A898	—
variable.other.constant, variable.other.enummember	#D9B086	italic
meta.attribute, meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.annotation, storage.type.annotation	#A8C98E	—
entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace	#989898	—
meta.brace, punctuation.bracket, punctuation.definition.arguments, punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#a0a0a0	—
entity.name.tag, punctuation.definition.tag	#C07070	—
entity.name.tag.custom, entity.name.tag.other.custom, support.class.component	#66CACA	—
entity.other.attribute-name	#A8C98E	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css	#D9B086	—
support.type.property-name.css, support.type.vendored.property-name.css	#E8A898	—
constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, support.constant.property-value.css	#D9B086	—
entity.name.tag.css	#C07070	—
keyword.other.unit.css	#D9B086	—
variable.argument.css, variable.css	#E8A898	—
support.type.property-name.json	#E8A898	—
string.quoted.double.json, string.value.json	#9AD68A	—
markup.heading, markup.heading entity.name	#78C8F0	bold
markup.bold	#D9B086	bold
markup.italic	—	italic
markup.underline	—	underline
markup.fenced_code, markup.inline.raw, markup.raw	#9AD68A	—
markup.quote	#6E6E6E	italic
punctuation.definition.quote.begin.markdown	#9AD68A	—
punctuation.definition.list.begin.markdown	#78C8F0	—
markup.underline.link	#78C8F0	—
markup.inserted	#9AD68A	—
markup.deleted	#E07070	—
markup.changed	#78C8F0	—
constant.other.character-class.regexp, string.regexp, string.regexp.character-class	#C07070	—
keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp	#D9B086	—
keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, keyword.other.var.cs	#E68CA5	—
entity.name.variable.property.cs	#E8A898	—
meta.preprocessor	#6E6E6E	—
meta.preprocessor.numeric	#D9B086	—
meta.preprocessor.string	#9AD68A	—
meta.function-call.generic.python	#78C8F0	—
support.function.builtin.python, support.function.magic.python	#66CACA	—
meta.function.decorator.identifier.python, meta.function.decorator.python	#A8C98E	—
variable.parameter.function.language.special.self.python	#D9B086	italic
entity.name.type.alias.ts, entity.name.type.interface.ts	#B896D8	—
variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx	#E8A898	—
entity.name.tag.yaml	#E8A898	—
keyword.key.toml, support.type.property-name.table.toml	#E8A898	—
variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell	#E8A898	—
support.other.variable, support.variable	#C2C2C2	—
entity.name.label	#a0a0a0	—
invalid, invalid.illegal	#E07070	—
invalid.deprecated	#E07070	strikethrough

VS Code preview

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

Gasrulle Theme — Gasrulle - Apex Ember++

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.activeBorder#8caaee
activityBar.background#1b1c2e
activityBar.border#1b1c2e
activityBar.foreground#B6BCCE
activityBar.inactiveForeground#555782
activityBarBadge.background#8caaee
activityBarBadge.foreground#1b1c2e
badge.background#8caaee
badge.foreground#1b1c2e
breadcrumb.activeSelectionForeground#B6BCCE
breadcrumb.focusForeground#B6BCCE
breadcrumb.foreground#60647A
breadcrumbPicker.background#222238
button.background#8caaee
button.foreground#1b1c2e
button.hoverBackground#99b5f0
button.secondaryBackground#45475f
button.secondaryForeground#B6BCCE
button.secondaryHoverBackground#555782
chat.requestBubbleBackground#2A2D46
chat.requestBubbleHoverBackground#323654
debugConsole.errorForeground#f38ba8
debugConsole.infoForeground#8caaee
debugConsole.warningForeground#f9e2af
debugExceptionWidget.background#222238
debugExceptionWidget.border#f38ba8
debugToolBar.background#222238
descriptionForeground#ACB2C5
diffEditor.diagonalFill#353649
diffEditor.insertedTextBackground#a6d18928
diffEditor.removedTextBackground#f38ba828
dropdown.background#222238
dropdown.border#353649
dropdown.foreground#B6BCCE
dropdown.listBackground#222238
editor.background#1b1c2e
editor.findMatchBackground#A6D18960
editor.findMatchHighlightBackground#A6D18940
editor.findRangeHighlightBackground#2d2e3e66
editor.foldBackground#2d2e3e30
editor.foreground#B6BCCE
editor.hoverHighlightBackground#8CAAEE20
editor.inactiveSelectionBackground#6860A866
editor.lineHighlightBackground#222339
editor.lineHighlightBorder#222339
editor.rangeHighlightBackground#1b1c2dCC
editor.selectionBackground#6860A8
editor.selectionHighlightBackground#8CAAEE30
editor.wordHighlightBackground#8CAAEE48
editor.wordHighlightStrongBackground#C9A0F548
editorBracketHighlight.foreground1#EDD078
editorBracketHighlight.foreground2#58DEB8
editorBracketHighlight.foreground3#B47850
editorBracketHighlight.foreground4#B4E870
editorBracketHighlight.foreground5#FCD0DC
editorBracketHighlight.foreground6#C0DCF0
editorBracketHighlight.unexpectedBracket.foreground#f38ba8
editorBracketMatch.background#C9A0F530
editorBracketMatch.border#555782
editorCodeLens.foreground#747A94
editorCursor.foreground#B6BCCE
editorError.foreground#f38ba8
editorGhostText.foreground#555782
editorGroup.border#1b1c2e
editorGroup.dropBackground#3d3b6b44
editorGroupHeader.noTabsBackground#1b1c2e
editorGroupHeader.tabsBackground#1b1c2e
editorGroupHeader.tabsBorder#1b1c2e
editorGutter.addedBackground#a6d189
editorGutter.deletedBackground#f38ba8
editorGutter.foldingControlForeground#60647A
editorGutter.modifiedBackground#8caaee
editorHoverWidget.background#222238
editorHoverWidget.border#353649
editorHoverWidget.foreground#B6BCCE
editorIndentGuide.activeBackground1#555782
editorIndentGuide.background1#353649
editorInfo.foreground#8caaee
editorInlayHint.background#2d2e3e80
editorInlayHint.foreground#60647A
editorInlayHint.parameterBackground#2d2e3e80
editorInlayHint.parameterForeground#60647A
editorInlayHint.typeBackground#2d2e3e80
editorInlayHint.typeForeground#60647A
editorLightBulb.foreground#f9e2af
editorLightBulbAutoFix.foreground#8caaee
editorLineNumber.activeForeground#8c90a8
editorLineNumber.foreground#45475f
editorOverviewRuler.border#1b1c2e
editorOverviewRuler.currentContentForeground#a6d189
editorOverviewRuler.errorForeground#f38ba8
editorOverviewRuler.findMatchForeground#f2b07a80
editorOverviewRuler.incomingContentForeground#8caaee
editorOverviewRuler.infoForeground#8caaee
editorOverviewRuler.warningForeground#f9e2af
editorRuler.foreground#353649
editorStickyScroll.background#1b1c2e
editorStickyScrollHover.background#222339
editorSuggestWidget.background#222238
editorSuggestWidget.border#353649
editorSuggestWidget.foreground#B6BCCE
editorSuggestWidget.highlightForeground#8caaee
editorSuggestWidget.selectedBackground#6860A8
editorSuggestWidget.selectedForeground#C3C9DB
editorWarning.foreground#f9e2af
editorWhitespace.foreground#3d3f5480
editorWidget.background#222238
editorWidget.border#353649
editorWidget.foreground#B6BCCE
errorForeground#f38ba8
extensionBadge.remoteBackground#8caaee
extensionBadge.remoteForeground#1b1c2e
extensionButton.prominentBackground#8caaee
extensionButton.prominentForeground#1b1c2e
extensionButton.prominentHoverBackground#99b5f0
focusBorder#8caaee
foreground#B6BCCE
gitDecoration.addedResourceForeground#a6d189
gitDecoration.conflictingResourceForeground#f38ba8
gitDecoration.deletedResourceForeground#60647A
gitDecoration.ignoredResourceForeground#555782
gitDecoration.modifiedResourceForeground#8caaee
gitDecoration.stageDeletedResourceForeground#60647A
gitDecoration.stageModifiedResourceForeground#8caaee
gitDecoration.untrackedResourceForeground#a6d189
icon.foreground#ACB2C5
input.background#353649
input.border#45475f
input.foreground#B6BCCE
input.placeholderForeground#555782
inputOption.activeBackground#8caaee44
inputOption.activeBorder#8caaee
inputValidation.errorBackground#222238
inputValidation.errorBorder#f38ba8
inputValidation.infoBackground#222238
inputValidation.infoBorder#8caaee
inputValidation.warningBackground#222238
inputValidation.warningBorder#f9e2af
list.activeSelectionBackground#6860A8
list.activeSelectionForeground#C3C9DB
list.errorForeground#f38ba8
list.focusBackground#6860A8
list.focusForeground#C3C9DB
list.highlightForeground#8caaee
list.hoverBackground#1b1b2c80
list.hoverForeground#B6BCCE
list.inactiveSelectionBackground#6860A866
list.inactiveSelectionForeground#C0C7D9
list.invalidItemForeground#f38ba8
list.warningForeground#f9e2af
merge.border#1b1c2e
merge.currentContentBackground#a6d18930
merge.currentHeaderBackground#a6d18944
merge.incomingContentBackground#8caaee30
merge.incomingHeaderBackground#8caaee44
minimap.errorHighlight#f38ba8
minimap.findMatchHighlight#A6D18980
minimap.selectionHighlight#8CAAEEBB
minimap.warningHighlight#f9e2af
minimapGutter.addedBackground#a6d189
minimapGutter.deletedBackground#f38ba8
minimapGutter.modifiedBackground#8caaee
minimapSlider.activeBackground#50527a60
minimapSlider.background#50527a20
minimapSlider.hoverBackground#50527a40
notificationCenter.border#353649
notificationCenterHeader.background#222238
notificationCenterHeader.foreground#B6BCCE
notificationLink.foreground#8caaee
notifications.background#353649
notifications.border#45475f
notifications.foreground#B6BCCE
notificationsErrorIcon.foreground#f38ba8
notificationsInfoIcon.foreground#8caaee
notificationsWarningIcon.foreground#f9e2af
panel.background#1b1c2e
panel.border#353649
panelTitle.activeBorder#8caaee
panelTitle.activeForeground#B6BCCE
panelTitle.inactiveForeground#555782
peekView.border#8caaee
peekViewEditor.background#1b1c2e
peekViewEditor.matchHighlightBackground#A6D18950
peekViewEditorGutter.background#1b1c2e
peekViewResult.background#222238
peekViewResult.fileForeground#B6BCCE
peekViewResult.lineForeground#8c90a8
peekViewResult.matchHighlightBackground#A6D18950
peekViewResult.selectionBackground#6860A8
peekViewResult.selectionForeground#C3C9DB
peekViewTitle.background#222238
peekViewTitleDescription.foreground#60647A
peekViewTitleLabel.foreground#B6BCCE
progressBar.background#8caaee
quickInput.background#222238
quickInput.foreground#B6BCCE
quickInputList.focusBackground#6860A8
quickInputList.focusForeground#C3C9DB
quickInputTitle.background#222238
sash.hoverBorder#8caaee
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#505488BB
scrollbarSlider.background#50548866
scrollbarSlider.hoverBackground#50548899
selection.background#6860A8
settings.focusedRowBackground#1b1b2c80
settings.headerForeground#B6BCCE
settings.modifiedItemIndicator#8caaee
sideBar.background#222238
sideBar.border#1b1c2e
sideBar.foreground#B6BCCE
sideBarSectionHeader.background#292A42
sideBarSectionHeader.border#1b1c2e
sideBarSectionHeader.foreground#C1C7D8
sideBarTitle.foreground#C1C7D8
statusBar.background#1b1c2e
statusBar.border#1b1c2e
statusBar.debuggingBackground#f38ba8
statusBar.debuggingForeground#1b1c2e
statusBar.foreground#8c90a8
statusBar.noFolderBackground#1b1c2e
statusBar.noFolderForeground#8c90a8
statusBarItem.hoverBackground#353649
statusBarItem.prominentBackground#8caaee
statusBarItem.prominentForeground#1b1c2e
statusBarItem.remoteBackground#8caaee
statusBarItem.remoteForeground#1b1c2e
tab.activeBackground#1b1c2e
tab.activeBorderTop#8caaee
tab.activeForeground#B6BCCE
tab.border#1b1c2e
tab.hoverBackground#222238
tab.inactiveBackground#1b1c2e
tab.inactiveForeground#60647A
tab.lastPinnedBorder#353649
tab.unfocusedActiveBackground#1b1c2e
tab.unfocusedActiveForeground#60647A
tab.unfocusedInactiveBackground#1b1c2e
tab.unfocusedInactiveForeground#555782
terminal.ansiBlack#1b1c2e
terminal.ansiBlue#8caaee
terminal.ansiBrightBlack#60647A
terminal.ansiBrightBlue#a0bdf2
terminal.ansiBrightCyan#96d4ca
terminal.ansiBrightGreen#b5dda0
terminal.ansiBrightMagenta#d4b3f7
terminal.ansiBrightRed#f5a0b8
terminal.ansiBrightWhite#dce1f0
terminal.ansiBrightYellow#faeac0
terminal.ansiCyan#81c8be
terminal.ansiGreen#a6d189
terminal.ansiMagenta#c9a0f5
terminal.ansiRed#f38ba8
terminal.ansiWhite#B6BCCE
terminal.ansiYellow#f9e2af
terminal.background#1b1c2e
terminal.border#222238
terminal.dropBackground#8caaee20
terminal.findMatchBackground#a6d18960
terminal.findMatchBorder#a6d189CC
terminal.findMatchHighlightBackground#a6d18940
terminal.foreground#B6BCCE
terminal.hoverHighlightBackground#8caaee20
terminal.inactiveSelectionBackground#6860A866
terminal.initialHintForeground#60647A
terminal.selectionBackground#6860A8
terminal.tab.activeBorder#8caaee
terminalCommandDecoration.defaultBackground#60647A
terminalCommandDecoration.errorBackground#f38ba8
terminalCommandDecoration.successBackground#a6d189
terminalCommandGuide.foreground#60647A40
terminalCursor.background#1b1c2e
terminalCursor.foreground#B6BCCE
terminalOverviewRuler.cursorForeground#8caaeeBB
terminalOverviewRuler.findMatchForeground#a6d18980
terminalStickyScroll.background#222238
terminalStickyScrollHover.background#222339
testing.iconErrored#f38ba8
testing.iconFailed#f38ba8
testing.iconPassed#a6d189
testing.iconQueued#f9e2af
testing.iconSkipped#60647A
testing.iconUnset#60647A
textBlockQuote.background#222238
textBlockQuote.border#8caaee
textCodeBlock.background#353649
textLink.activeForeground#a0bdf2
textLink.foreground#8caaee
textPreformat.foreground#F2B07A
titleBar.activeBackground#1b1c2e
titleBar.activeForeground#B6BCCE
titleBar.border#1b1c2e
titleBar.inactiveBackground#1b1c2e
titleBar.inactiveForeground#555782
tree.indentGuidesStroke#353649
walkThrough.embeddedEditorBackground#1b1c2e
welcomePage.background#1b1c2e
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#B6BCCE	—
comment, punctuation.definition.comment	#60647A	italic
comment.block.documentation, comment.block.javadoc	#545866	italic
comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.type.instance.jsdoc, keyword.other.documentation, storage.type.class.jsdoc	#927A68	—
keyword, keyword.control, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, storage, storage.modifier, storage.type	#c9a0f5	—
keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch	#d8b0f8	italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, punctuation.accessor, punctuation.separator, punctuation.terminator	#9aa2c0	—
keyword.operator.logical, keyword.operator.logical.python	#81c8be	—
string, string.interpolated, string.quoted, string.template	#a6d189	—
constant.character.escape, string.template punctuation.definition.template-expression	#f2b07a	—
constant.numeric, constant.numeric.binary, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal	#f2b07a	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.language.self, variable.language.super, variable.language.this	#f2b07a	italic
entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function	#8caaee	—
entity.name.function.member, meta.function-call support.function	#8caaee	—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.other.inherited-class, support.class, support.type	#81c8be	—
entity.name.type.parameter, entity.name.type.type-parameter	#99d1db	—
meta.parameter, variable, variable.other, variable.parameter	#B6BCCE	—
entity.name.tag.yaml, meta.object-literal.key, support.type.property-name, variable.other.object.property, variable.other.property	#f4b8e4	—
variable.other.constant, variable.other.enummember	#f2b07a	italic
meta.attribute, meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.annotation, storage.type.annotation	#e5c890	—
entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace	#9399b2	—
meta.brace, punctuation.bracket, punctuation.definition.arguments, punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#9aa2c0	—
entity.name.tag, punctuation.definition.tag	#f38ba8	—
entity.name.tag.custom, entity.name.tag.other.custom, support.class.component	#81c8be	—
entity.other.attribute-name	#e5c890	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css	#f9e2af	—
support.type.property-name.css, support.type.vendored.property-name.css	#f4b8e4	—
constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, support.constant.property-value.css	#f2b07a	—
entity.name.tag.css	#f38ba8	—
keyword.other.unit.css	#f2b07a	—
variable.argument.css, variable.css	#f4b8e4	—
support.type.property-name.json	#f4b8e4	—
string.quoted.double.json, string.value.json	#a6d189	—
markup.heading, markup.heading entity.name	#8caaee	bold
markup.bold	#f2b07a	bold
markup.italic	—	italic
markup.underline	—	underline
markup.fenced_code, markup.inline.raw, markup.raw	#a6d189	—
markup.quote	#60647A	italic
punctuation.definition.quote.begin.markdown	#a6d189	—
punctuation.definition.list.begin.markdown	#8caaee	—
markup.underline.link	#8caaee	—
markup.inserted	#a6d189	—
markup.deleted	#f38ba8	—
markup.changed	#8caaee	—
constant.other.character-class.regexp, string.regexp, string.regexp.character-class	#f38ba8	—
keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp	#f2b07a	—
keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, keyword.other.var.cs	#c9a0f5	—
entity.name.variable.property.cs	#f4b8e4	—
meta.preprocessor	#60647A	—
meta.preprocessor.numeric	#f2b07a	—
meta.preprocessor.string	#a6d189	—
meta.function-call.generic.python	#8caaee	—
support.function.builtin.python, support.function.magic.python	#81c8be	—
meta.function.decorator.identifier.python, meta.function.decorator.python	#e5c890	—
variable.parameter.function.language.special.self.python	#f2b07a	italic
entity.name.type.alias.ts, entity.name.type.interface.ts	#b4befe	—
variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx	#f4b8e4	—
entity.name.tag.yaml	#f4b8e4	—
keyword.key.toml, support.type.property-name.table.toml	#f4b8e4	—
variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell	#f4b8e4	—
support.other.variable, support.variable	#B6BCCE	—
entity.name.label	#9aa2c0	—
invalid, invalid.illegal	#f38ba8	—
invalid.deprecated	#f38ba8	strikethrough

VS Code preview

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

Gasrulle Theme — Gasrulle - Apex Frost++

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.activeBorder#7aa2f7
activityBar.background#1A1D30
activityBar.border#1A1D30
activityBar.foreground#B0B4C4
activityBar.inactiveForeground#51567C
activityBarBadge.background#7aa2f7
activityBarBadge.foreground#1A1D30
badge.background#7aa2f7
badge.foreground#1A1D30
breadcrumb.activeSelectionForeground#B0B4C4
breadcrumb.focusForeground#B0B4C4
breadcrumb.foreground#586390
breadcrumbPicker.background#22243A
button.background#7aa2f7
button.foreground#1A1D30
button.hoverBackground#8bb3f8
button.secondaryBackground#454973
button.secondaryForeground#B0B4C4
button.secondaryHoverBackground#51567C
chat.requestBubbleBackground#2A304A
chat.requestBubbleHoverBackground#333B58
debugConsole.errorForeground#f7768e
debugConsole.infoForeground#7aa2f7
debugConsole.warningForeground#e0af68
debugExceptionWidget.background#22243A
debugExceptionWidget.border#f7768e
debugToolBar.background#22243A
descriptionForeground#A8B0CB
diffEditor.diagonalFill#323548
diffEditor.insertedTextBackground#9ece6a28
diffEditor.removedTextBackground#f7768e28
dropdown.background#22243A
dropdown.border#323548
dropdown.foreground#B0B4C4
dropdown.listBackground#22243A
editor.background#1A1D30
editor.findMatchBackground#9ECE6A60
editor.findMatchHighlightBackground#9ECE6A40
editor.findRangeHighlightBackground#282A3B66
editor.foldBackground#282A3B30
editor.foreground#B0B4C4
editor.hoverHighlightBackground#7AA2F720
editor.inactiveSelectionBackground#4865B666
editor.lineHighlightBackground#22243B
editor.lineHighlightBorder#22243B
editor.rangeHighlightBackground#191A2CCC
editor.selectionBackground#4865B6
editor.selectionHighlightBackground#7AA2F730
editor.wordHighlightBackground#7AA2F748
editor.wordHighlightStrongBackground#7AA2F748
editorBracketHighlight.foreground1#B8D4C0
editorBracketHighlight.foreground2#50D4B0
editorBracketHighlight.foreground3#9890B8
editorBracketHighlight.foreground4#A8E070
editorBracketHighlight.foreground5#F4C8D0
editorBracketHighlight.foreground6#B8D4EC
editorBracketHighlight.unexpectedBracket.foreground#f7768e
editorBracketMatch.background#7AA2F730
editorBracketMatch.border#51567C
editorCodeLens.foreground#6D79A8
editorCursor.foreground#C4C8D6
editorError.foreground#f7768e
editorGhostText.foreground#51567C
editorGroup.border#1A1D30
editorGroup.dropBackground#2d3f5944
editorGroupHeader.noTabsBackground#1A1D30
editorGroupHeader.tabsBackground#1A1D30
editorGroupHeader.tabsBorder#1A1D30
editorGutter.addedBackground#9ece6a
editorGutter.deletedBackground#f7768e
editorGutter.foldingControlForeground#586390
editorGutter.modifiedBackground#7aa2f7
editorHoverWidget.background#22243A
editorHoverWidget.border#323548
editorHoverWidget.foreground#B0B4C4
editorIndentGuide.activeBackground1#51567C
editorIndentGuide.background1#323548
editorInfo.foreground#7aa2f7
editorInlayHint.background#282A3B80
editorInlayHint.foreground#586390
editorInlayHint.parameterBackground#282A3B80
editorInlayHint.parameterForeground#586390
editorInlayHint.typeBackground#282A3B80
editorInlayHint.typeForeground#586390
editorLightBulb.foreground#e0af68
editorLightBulbAutoFix.foreground#7aa2f7
editorLineNumber.activeForeground#767daa
editorLineNumber.foreground#454973
editorOverviewRuler.border#1A1D30
editorOverviewRuler.currentContentForeground#9ece6a
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.findMatchForeground#E8B48A80
editorOverviewRuler.incomingContentForeground#7aa2f7
editorOverviewRuler.infoForeground#7aa2f7
editorOverviewRuler.warningForeground#e0af68
editorRuler.foreground#323548
editorStickyScroll.background#1A1D30
editorStickyScrollHover.background#22243B
editorSuggestWidget.background#22243A
editorSuggestWidget.border#323548
editorSuggestWidget.foreground#B0B4C4
editorSuggestWidget.highlightForeground#7aa2f7
editorSuggestWidget.selectedBackground#4865B6
editorSuggestWidget.selectedForeground#C4C8D6
editorWarning.foreground#e0af68
editorWhitespace.foreground#3B3F5680
editorWidget.background#22243A
editorWidget.border#323548
editorWidget.foreground#B0B4C4
errorForeground#f7768e
extensionBadge.remoteBackground#7aa2f7
extensionBadge.remoteForeground#1A1D30
extensionButton.prominentBackground#7aa2f7
extensionButton.prominentForeground#1A1D30
extensionButton.prominentHoverBackground#8bb3f8
focusBorder#7aa2f7
foreground#B0B4C4
gitDecoration.addedResourceForeground#9ece6a
gitDecoration.conflictingResourceForeground#f7768e
gitDecoration.deletedResourceForeground#586390
gitDecoration.ignoredResourceForeground#51567C
gitDecoration.modifiedResourceForeground#7aa2f7
gitDecoration.stageDeletedResourceForeground#586390
gitDecoration.stageModifiedResourceForeground#7aa2f7
gitDecoration.untrackedResourceForeground#9ece6a
icon.foreground#A8B0CB
input.background#323548
input.border#454973
input.foreground#B0B4C4
input.placeholderForeground#51567C
inputOption.activeBackground#7aa2f744
inputOption.activeBorder#7aa2f7
inputValidation.errorBackground#22243A
inputValidation.errorBorder#f7768e
inputValidation.infoBackground#22243A
inputValidation.infoBorder#7aa2f7
inputValidation.warningBackground#22243A
inputValidation.warningBorder#e0af68
list.activeSelectionBackground#4865B6
list.activeSelectionForeground#C4C8D6
list.errorForeground#f7768e
list.focusBackground#4865B6
list.focusForeground#C4C8D6
list.highlightForeground#7aa2f7
list.hoverBackground#191a2e80
list.hoverForeground#B0B4C4
list.inactiveSelectionBackground#4865B666
list.inactiveSelectionForeground#C0C5D5
list.invalidItemForeground#f7768e
list.warningForeground#e0af68
merge.border#1A1D30
merge.currentContentBackground#9ece6a30
merge.currentHeaderBackground#9ece6a44
merge.incomingContentBackground#7aa2f730
merge.incomingHeaderBackground#7aa2f744
minimap.errorHighlight#f7768e
minimap.findMatchHighlight#9ECE6A80
minimap.selectionHighlight#7AA2F7BB
minimap.warningHighlight#e0af68
minimapGutter.addedBackground#9ece6a
minimapGutter.deletedBackground#f7768e
minimapGutter.modifiedBackground#7aa2f7
minimapSlider.activeBackground#3B3F5660
minimapSlider.background#3B3F5620
minimapSlider.hoverBackground#3B3F5640
notificationCenter.border#323548
notificationCenterHeader.background#22243A
notificationCenterHeader.foreground#B0B4C4
notificationLink.foreground#7aa2f7
notifications.background#323548
notifications.border#454973
notifications.foreground#B0B4C4
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#7aa2f7
notificationsWarningIcon.foreground#e0af68
panel.background#1A1D30
panel.border#323548
panelTitle.activeBorder#7aa2f7
panelTitle.activeForeground#B0B4C4
panelTitle.inactiveForeground#51567C
peekView.border#7aa2f7
peekViewEditor.background#1A1D30
peekViewEditor.matchHighlightBackground#9ECE6A50
peekViewEditorGutter.background#1A1D30
peekViewResult.background#22243A
peekViewResult.fileForeground#B0B4C4
peekViewResult.lineForeground#767daa
peekViewResult.matchHighlightBackground#9ECE6A50
peekViewResult.selectionBackground#4865B6
peekViewResult.selectionForeground#C4C8D6
peekViewTitle.background#22243A
peekViewTitleDescription.foreground#586390
peekViewTitleLabel.foreground#B0B4C4
progressBar.background#7aa2f7
quickInput.background#22243A
quickInput.foreground#B0B4C4
quickInputList.focusBackground#4865B6
quickInputList.focusForeground#C4C8D6
quickInputTitle.background#22243A
sash.hoverBorder#7aa2f7
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#484c98BB
scrollbarSlider.background#484c9866
scrollbarSlider.hoverBackground#484c9899
selection.background#4865B6
settings.focusedRowBackground#191a2e80
settings.headerForeground#B0B4C4
settings.modifiedItemIndicator#7aa2f7
sideBar.background#22243A
sideBar.border#1A1D30
sideBar.foreground#B0B4C4
sideBarSectionHeader.background#2A2D46
sideBarSectionHeader.border#1A1D30
sideBarSectionHeader.foreground#BBC0CF
sideBarTitle.foreground#BBC0CF
statusBar.background#1A1D30
statusBar.border#1A1D30
statusBar.debuggingBackground#f7768e
statusBar.debuggingForeground#1A1D30
statusBar.foreground#767daa
statusBar.noFolderBackground#1A1D30
statusBar.noFolderForeground#767daa
statusBarItem.hoverBackground#323548
statusBarItem.prominentBackground#7aa2f7
statusBarItem.prominentForeground#1A1D30
statusBarItem.remoteBackground#7aa2f7
statusBarItem.remoteForeground#1A1D30
tab.activeBackground#1A1D30
tab.activeBorderTop#7aa2f7
tab.activeForeground#B0B4C4
tab.border#1A1D30
tab.hoverBackground#22243A
tab.inactiveBackground#1A1D30
tab.inactiveForeground#586390
tab.lastPinnedBorder#323548
tab.unfocusedActiveBackground#1A1D30
tab.unfocusedActiveForeground#586390
tab.unfocusedInactiveBackground#1A1D30
tab.unfocusedInactiveForeground#51567C
terminal.ansiBlack#1A1D30
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#586390
terminal.ansiBrightBlue#8eb5f9
terminal.ansiBrightCyan#93d9ff
terminal.ansiBrightGreen#b0d982
terminal.ansiBrightMagenta#c9aaf9
terminal.ansiBrightRed#ff899b
terminal.ansiBrightWhite#C4C8D6
terminal.ansiBrightYellow#ebc380
terminal.ansiCyan#7dcfff
terminal.ansiGreen#9ece6a
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#B0B4C4
terminal.ansiYellow#e0af68
terminal.background#1A1D30
terminal.border#22243A
terminal.dropBackground#7aa2f720
terminal.findMatchBackground#9ece6a60
terminal.findMatchBorder#9ece6aCC
terminal.findMatchHighlightBackground#9ece6a40
terminal.foreground#B0B4C4
terminal.hoverHighlightBackground#7aa2f720
terminal.inactiveSelectionBackground#4865B666
terminal.initialHintForeground#586390
terminal.selectionBackground#4865B6
terminal.tab.activeBorder#7aa2f7
terminalCommandDecoration.defaultBackground#586390
terminalCommandDecoration.errorBackground#f7768e
terminalCommandDecoration.successBackground#9ece6a
terminalCommandGuide.foreground#58639040
terminalCursor.background#1A1D30
terminalCursor.foreground#C4C8D6
terminalOverviewRuler.cursorForeground#7aa2f7BB
terminalOverviewRuler.findMatchForeground#9ece6a80
terminalStickyScroll.background#22243A
terminalStickyScrollHover.background#282A44
testing.iconErrored#f7768e
testing.iconFailed#f7768e
testing.iconPassed#9ece6a
testing.iconQueued#e0af68
testing.iconSkipped#586390
testing.iconUnset#586390
textBlockQuote.background#22243A
textBlockQuote.border#7aa2f7
textCodeBlock.background#323548
textLink.activeForeground#8eb5f9
textLink.foreground#7aa2f7
textPreformat.foreground#E8B48A
titleBar.activeBackground#1A1D30
titleBar.activeForeground#B0B4C4
titleBar.border#1A1D30
titleBar.inactiveBackground#1A1D30
titleBar.inactiveForeground#51567C
tree.indentGuidesStroke#323548
walkThrough.embeddedEditorBackground#1A1D30
welcomePage.background#1A1D30
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#B0B4C4	—
comment, punctuation.definition.comment	#586390	italic
comment.block.documentation, comment.block.javadoc	#4d577a	italic
comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.type.instance.jsdoc, keyword.other.documentation, storage.type.class.jsdoc	#6E8098	—
keyword, keyword.control, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, storage, storage.modifier, storage.type	#7aa2f7	—
keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch	#89b4fa	italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, punctuation.accessor, punctuation.separator, punctuation.terminator	#808498	—
keyword.operator.logical, keyword.operator.logical.python	#2ac3de	—
string, string.interpolated, string.quoted, string.template	#9ece6a	—
constant.character.escape, string.template punctuation.definition.template-expression	#E8B48A	—
constant.numeric, constant.numeric.binary, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal	#E8B48A	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.language.self, variable.language.super, variable.language.this	#E8B48A	italic
entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function	#7dcfff	—
entity.name.function.member, meta.function-call support.function	#7dcfff	—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.other.inherited-class, support.class, support.type	#2ac3de	—
entity.name.type.parameter, entity.name.type.type-parameter	#b4f9f8	—
meta.parameter, variable, variable.other, variable.parameter	#C4C8D6	—
entity.name.tag.yaml, meta.object-literal.key, support.type.property-name, variable.other.object.property, variable.other.property	#73daca	—
variable.other.constant, variable.other.enummember	#E8B48A	italic
meta.attribute, meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.annotation, storage.type.annotation	#BAA478	—
entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace	#767daa	—
meta.brace, punctuation.bracket, punctuation.definition.arguments, punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#808498	—
entity.name.tag, punctuation.definition.tag	#f7768e	—
entity.name.tag.custom, entity.name.tag.other.custom, support.class.component	#2ac3de	—
entity.other.attribute-name	#BAA478	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css	#BAA478	—
support.type.property-name.css, support.type.vendored.property-name.css	#73daca	—
constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, support.constant.property-value.css	#E8B48A	—
entity.name.tag.css	#f7768e	—
keyword.other.unit.css	#E8B48A	—
variable.argument.css, variable.css	#73daca	—
support.type.property-name.json	#73daca	—
string.quoted.double.json, string.value.json	#9ece6a	—
markup.heading, markup.heading entity.name	#7aa2f7	bold
markup.bold	#E8B48A	bold
markup.italic	—	italic
markup.underline	—	underline
markup.fenced_code, markup.inline.raw, markup.raw	#9ece6a	—
markup.quote	#586390	italic
punctuation.definition.quote.begin.markdown	#9ece6a	—
punctuation.definition.list.begin.markdown	#7aa2f7	—
markup.underline.link	#7aa2f7	—
markup.inserted	#9ece6a	—
markup.deleted	#f7768e	—
markup.changed	#7aa2f7	—
constant.other.character-class.regexp, string.regexp, string.regexp.character-class	#f7768e	—
keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp	#E8B48A	—
keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, keyword.other.var.cs	#7aa2f7	—
entity.name.variable.property.cs	#73daca	—
meta.preprocessor	#586390	—
meta.preprocessor.numeric	#E8B48A	—
meta.preprocessor.string	#9ece6a	—
meta.function-call.generic.python	#7dcfff	—
support.function.builtin.python, support.function.magic.python	#2ac3de	—
meta.function.decorator.identifier.python, meta.function.decorator.python	#BAA478	—
variable.parameter.function.language.special.self.python	#E8B48A	italic
entity.name.type.alias.ts, entity.name.type.interface.ts	#bb9af7	—
variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx	#73daca	—
entity.name.tag.yaml	#73daca	—
keyword.key.toml, support.type.property-name.table.toml	#73daca	—
variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell	#73daca	—
support.other.variable, support.variable	#C4C8D6	—
entity.name.label	#808498	—
invalid, invalid.illegal	#f7768e	—
invalid.deprecated	#f7768e	strikethrough

VS Code preview

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

Gasrulle Theme — Gasrulle - Apex Neon++

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.activeBorder#be9bf1
activityBar.background#1b1b34
activityBar.border#1b1b34
activityBar.foreground#C2C2CA
activityBar.inactiveForeground#595c7c
activityBarBadge.background#be9bf1
activityBarBadge.foreground#1b1b34
badge.background#be9bf1
badge.foreground#1b1b34
breadcrumb.activeSelectionForeground#C2C2CA
breadcrumb.focusForeground#C2C2CA
breadcrumb.foreground#566698
breadcrumbPicker.background#23234b
button.background#be9bf1
button.foreground#1b1b34
button.hoverBackground#caa3f2
button.secondaryBackground#383860
button.secondaryForeground#C2C2CA
button.secondaryHoverBackground#595c7c
chat.requestBubbleBackground#2E2E60
chat.requestBubbleHoverBackground#393977
debugConsole.errorForeground#ff5555
debugConsole.infoForeground#be9bf1
debugConsole.warningForeground#e9f096
debugExceptionWidget.background#23234b
debugExceptionWidget.border#ff5555
debugToolBar.background#23234b
descriptionForeground#B0B4D8
diffEditor.diagonalFill#34345c
diffEditor.insertedTextBackground#50fa7b28
diffEditor.removedTextBackground#ff555528
dropdown.background#23234b
dropdown.border#34345c
dropdown.foreground#C2C2CA
dropdown.listBackground#23234b
editor.background#1b1b34
editor.findMatchBackground#50FA7B60
editor.findMatchHighlightBackground#50FA7B40
editor.findRangeHighlightBackground#2e2e5266
editor.foldBackground#2e2e5230
editor.foreground#C2C2CA
editor.hoverHighlightBackground#BD93F920
editor.inactiveSelectionBackground#65689866
editor.lineHighlightBackground#27274f
editor.lineHighlightBorder#27274f
editor.rangeHighlightBackground#222244CC
editor.selectionBackground#656898
editor.selectionHighlightBackground#BD93F930
editor.wordHighlightBackground#BD93F948
editor.wordHighlightStrongBackground#FF79C648
editorBracketHighlight.foreground1#F8E050
editorBracketHighlight.foreground2#48F0C0
editorBracketHighlight.foreground3#C86888
editorBracketHighlight.foreground4#A0F460
editorBracketHighlight.foreground5#F8B0A0
editorBracketHighlight.foreground6#7888E8
editorBracketHighlight.unexpectedBracket.foreground#ff5555
editorBracketMatch.background#BD93F930
editorBracketMatch.border#595c7c
editorCodeLens.foreground#6C7EB3
editorCursor.foreground#C2C2CA
editorError.foreground#ff5555
editorGhostText.foreground#595c7c
editorGroup.border#1b1b34
editorGroup.dropBackground#44475a44
editorGroupHeader.noTabsBackground#1b1b34
editorGroupHeader.tabsBackground#1b1b34
editorGroupHeader.tabsBorder#1b1b34
editorGutter.addedBackground#61e984
editorGutter.deletedBackground#ff5555
editorGutter.foldingControlForeground#566698
editorGutter.modifiedBackground#be9bf1
editorHoverWidget.background#23234b
editorHoverWidget.border#34345c
editorHoverWidget.foreground#C2C2CA
editorIndentGuide.activeBackground1#595c7c
editorIndentGuide.background1#34345c
editorInfo.foreground#be9bf1
editorInlayHint.background#2e2e5280
editorInlayHint.foreground#566698
editorInlayHint.parameterBackground#2e2e5280
editorInlayHint.parameterForeground#566698
editorInlayHint.typeBackground#2e2e5280
editorInlayHint.typeForeground#566698
editorLightBulb.foreground#e9f096
editorLightBulbAutoFix.foreground#be9bf1
editorLineNumber.activeForeground#8b8fbf
editorLineNumber.foreground#434578
editorOverviewRuler.border#1b1b34
editorOverviewRuler.currentContentForeground#61e984
editorOverviewRuler.errorForeground#ff5555
editorOverviewRuler.findMatchForeground#bd93f980
editorOverviewRuler.incomingContentForeground#be9bf1
editorOverviewRuler.infoForeground#be9bf1
editorOverviewRuler.warningForeground#e9f096
editorRuler.foreground#34345c
editorStickyScroll.background#1b1b34
editorStickyScrollHover.background#27274f
editorSuggestWidget.background#23234b
editorSuggestWidget.border#34345c
editorSuggestWidget.foreground#C2C2CA
editorSuggestWidget.highlightForeground#be9bf1
editorSuggestWidget.selectedBackground#656898
editorSuggestWidget.selectedForeground#D1D1D9
editorWarning.foreground#e9f096
editorWhitespace.foreground#3d3f6e80
editorWidget.background#23234b
editorWidget.border#34345c
editorWidget.foreground#C2C2CA
errorForeground#ff5555
extensionBadge.remoteBackground#be9bf1
extensionBadge.remoteForeground#1b1b34
extensionButton.prominentBackground#be9bf1
extensionButton.prominentForeground#1b1b34
extensionButton.prominentHoverBackground#caa3f2
focusBorder#be9bf1
foreground#C2C2CA
gitDecoration.addedResourceForeground#61e984
gitDecoration.conflictingResourceForeground#ff5555
gitDecoration.deletedResourceForeground#566698
gitDecoration.ignoredResourceForeground#595c7c
gitDecoration.modifiedResourceForeground#be9bf1
gitDecoration.stageDeletedResourceForeground#566698
gitDecoration.stageModifiedResourceForeground#be9bf1
gitDecoration.untrackedResourceForeground#61e984
icon.foreground#B0B4D8
input.background#34345c
input.border#434578
input.foreground#C2C2CA
input.placeholderForeground#595c7c
inputOption.activeBackground#bd93f944
inputOption.activeBorder#be9bf1
inputValidation.errorBackground#23234b
inputValidation.errorBorder#ff5555
inputValidation.infoBackground#23234b
inputValidation.infoBorder#be9bf1
inputValidation.warningBackground#23234b
inputValidation.warningBorder#e9f096
list.activeSelectionBackground#656898
list.activeSelectionForeground#D1D1D9
list.errorForeground#ff5555
list.focusBackground#656898
list.focusForeground#D1D1D9
list.highlightForeground#be9bf1
list.hoverBackground#1e1e4080
list.hoverForeground#C2C2CA
list.inactiveSelectionBackground#65689866
list.inactiveSelectionForeground#CECED6
list.invalidItemForeground#ff5555
list.warningForeground#e9f096
merge.border#1b1b34
merge.currentContentBackground#50fa7b30
merge.currentHeaderBackground#50fa7b44
merge.incomingContentBackground#bd93f930
merge.incomingHeaderBackground#bd93f944
minimap.errorHighlight#ff5555
minimap.findMatchHighlight#50FA7B80
minimap.selectionHighlight#BD93F9BB
minimap.warningHighlight#e9f096
minimapGutter.addedBackground#61e984
minimapGutter.deletedBackground#ff5555
minimapGutter.modifiedBackground#be9bf1
minimapSlider.activeBackground#3d3f6e60
minimapSlider.background#3d3f6e20
minimapSlider.hoverBackground#3d3f6e40
notificationCenter.border#34345c
notificationCenterHeader.background#23234b
notificationCenterHeader.foreground#C2C2CA
notificationLink.foreground#be9bf1
notifications.background#34345c
notifications.border#434578
notifications.foreground#C2C2CA
notificationsErrorIcon.foreground#ff5555
notificationsInfoIcon.foreground#be9bf1
notificationsWarningIcon.foreground#e9f096
panel.background#1b1b34
panel.border#34345c
panelTitle.activeBorder#be9bf1
panelTitle.activeForeground#C2C2CA
panelTitle.inactiveForeground#595c7c
peekView.border#be9bf1
peekViewEditor.background#1b1b34
peekViewEditor.matchHighlightBackground#50FA7B50
peekViewEditorGutter.background#1b1b34
peekViewResult.background#23234b
peekViewResult.fileForeground#C2C2CA
peekViewResult.lineForeground#8b8fbf
peekViewResult.matchHighlightBackground#50FA7B50
peekViewResult.selectionBackground#656898
peekViewResult.selectionForeground#D1D1D9
peekViewTitle.background#23234b
peekViewTitleDescription.foreground#566698
peekViewTitleLabel.foreground#C2C2CA
progressBar.background#be9bf1
quickInput.background#23234b
quickInput.foreground#C2C2CA
quickInputList.focusBackground#656898
quickInputList.focusForeground#D1D1D9
quickInputTitle.background#23234b
sash.hoverBorder#be9bf1
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#4d4d92BB
scrollbarSlider.background#4d4d9266
scrollbarSlider.hoverBackground#4d4d9299
selection.background#656898
settings.focusedRowBackground#1e1e4080
settings.headerForeground#C2C2CA
settings.modifiedItemIndicator#be9bf1
sideBar.background#23234b
sideBar.border#1b1b34
sideBar.foreground#C2C2CA
sideBarSectionHeader.background#2C2C58
sideBarSectionHeader.border#1b1b34
sideBarSectionHeader.foreground#CCCCD4
sideBarTitle.foreground#CCCCD4
statusBar.background#1b1b34
statusBar.border#1b1b34
statusBar.debuggingBackground#ff5555
statusBar.debuggingForeground#1b1b34
statusBar.foreground#8b8fbf
statusBar.noFolderBackground#1b1b34
statusBar.noFolderForeground#8b8fbf
statusBarItem.hoverBackground#34345c
statusBarItem.prominentBackground#be9bf1
statusBarItem.prominentForeground#1b1b34
statusBarItem.remoteBackground#be9bf1
statusBarItem.remoteForeground#1b1b34
tab.activeBackground#1b1b34
tab.activeBorderTop#be9bf1
tab.activeForeground#C2C2CA
tab.border#1b1b34
tab.hoverBackground#23234b
tab.inactiveBackground#1b1b34
tab.inactiveForeground#566698
tab.lastPinnedBorder#34345c
tab.unfocusedActiveBackground#1b1b34
tab.unfocusedActiveForeground#566698
tab.unfocusedInactiveBackground#1b1b34
tab.unfocusedInactiveForeground#595c7c
terminal.ansiBlack#1b1b34
terminal.ansiBlue#be9bf1
terminal.ansiBrightBlack#566698
terminal.ansiBrightBlue#caa3f2
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#7cec9c
terminal.ansiBrightMagenta#f1a0ce
terminal.ansiBrightRed#ff6e6e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f5fca0
terminal.ansiCyan#98e1f0
terminal.ansiGreen#61e984
terminal.ansiMagenta#ee8ac3
terminal.ansiRed#ff5555
terminal.ansiWhite#C2C2CA
terminal.ansiYellow#e9f096
terminal.background#1b1b34
terminal.border#23234B
terminal.dropBackground#be9bf120
terminal.findMatchBackground#e9f09660
terminal.findMatchBorder#e9f096CC
terminal.findMatchHighlightBackground#e9f09640
terminal.foreground#C2C2CA
terminal.hoverHighlightBackground#be9bf120
terminal.inactiveSelectionBackground#65689866
terminal.initialHintForeground#566698
terminal.selectionBackground#656898
terminal.tab.activeBorder#be9bf1
terminalCommandDecoration.defaultBackground#566698
terminalCommandDecoration.errorBackground#ff5555
terminalCommandDecoration.successBackground#61e984
terminalCommandGuide.foreground#56669840
terminalCursor.background#1b1b34
terminalCursor.foreground#C2C2CA
terminalOverviewRuler.cursorForeground#be9bf1BB
terminalOverviewRuler.findMatchForeground#e9f09680
terminalStickyScroll.background#23234B
terminalStickyScrollHover.background#2A2A55
testing.iconErrored#ff5555
testing.iconFailed#ff5555
testing.iconPassed#61e984
testing.iconQueued#e9f096
testing.iconSkipped#566698
testing.iconUnset#566698
textBlockQuote.background#23234b
textBlockQuote.border#be9bf1
textCodeBlock.background#34345c
textLink.activeForeground#caa3f2
textLink.foreground#be9bf1
textPreformat.foreground#EFD090
titleBar.activeBackground#1b1b34
titleBar.activeForeground#C2C2CA
titleBar.border#1b1b34
titleBar.inactiveBackground#1b1b34
titleBar.inactiveForeground#595c7c
tree.indentGuidesStroke#34345c
walkThrough.embeddedEditorBackground#1b1b34
welcomePage.background#1b1b34
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#C2C2CA	—
comment, punctuation.definition.comment	#566698	italic
comment.block.documentation, comment.block.javadoc	#4E5688	italic
comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.type.instance.jsdoc, keyword.other.documentation, storage.type.class.jsdoc	#8C7C94	—
keyword, keyword.control, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, storage, storage.modifier, storage.type	#ee8ac3	—
keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch	#f1a0ce	italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, punctuation.accessor, punctuation.separator, punctuation.terminator	#9090c0	—
keyword.operator.logical, keyword.operator.logical.python	#98e1f0	—
string, string.interpolated, string.quoted, string.template	#e9f096	—
constant.character.escape, string.template punctuation.definition.template-expression	#edb77e	—
constant.numeric, constant.numeric.binary, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal	#be9bf1	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.language.self, variable.language.super, variable.language.this	#be9bf1	italic
entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function	#61e984	—
entity.name.function.member, meta.function-call support.function	#61e984	—
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.other.inherited-class, support.class, support.type	#98e1f0	—
entity.name.type.parameter, entity.name.type.type-parameter	#a4ffff	—
meta.parameter, variable, variable.other, variable.parameter	#C2C2CA	—
entity.name.tag.yaml, meta.object-literal.key, support.type.property-name, variable.other.object.property, variable.other.property	#edb77e	—
variable.other.constant, variable.other.enummember	#be9bf1	italic
meta.attribute, meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.annotation, storage.type.annotation	#efd090	—
entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace	#7a7fb5	—
meta.brace, punctuation.bracket, punctuation.definition.arguments, punctuation.definition.block, punctuation.definition.parameters, punctuation.section	#9090c0	—
entity.name.tag, punctuation.definition.tag	#ff6e6e	—
entity.name.tag.custom, entity.name.tag.other.custom, support.class.component	#98e1f0	—
entity.other.attribute-name	#efd090	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css	#61e984	—
support.type.property-name.css, support.type.vendored.property-name.css	#edb77e	—
constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, support.constant.property-value.css	#be9bf1	—
entity.name.tag.css	#ff6e6e	—
keyword.other.unit.css	#be9bf1	—
variable.argument.css, variable.css	#edb77e	—
support.type.property-name.json	#edb77e	—
string.quoted.double.json, string.value.json	#e9f096	—
markup.heading, markup.heading entity.name	#be9bf1	bold
markup.bold	#edb77e	bold
markup.italic	—	italic
markup.underline	—	underline
markup.fenced_code, markup.inline.raw, markup.raw	#e9f096	—
markup.quote	#566698	italic
punctuation.definition.quote.begin.markdown	#e9f096	—
punctuation.definition.list.begin.markdown	#be9bf1	—
markup.underline.link	#be9bf1	—
markup.inserted	#61e984	—
markup.deleted	#ff5555	—
markup.changed	#be9bf1	—
constant.other.character-class.regexp, string.regexp, string.regexp.character-class	#ff5555	—
keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp	#be9bf1	—
keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, keyword.other.var.cs	#ee8ac3	—
entity.name.variable.property.cs	#edb77e	—
meta.preprocessor	#566698	—
meta.preprocessor.numeric	#be9bf1	—
meta.preprocessor.string	#e9f096	—
meta.function-call.generic.python	#61e984	—
support.function.builtin.python, support.function.magic.python	#98e1f0	—
meta.function.decorator.identifier.python, meta.function.decorator.python	#efd090	—
variable.parameter.function.language.special.self.python	#be9bf1	italic
entity.name.type.alias.ts, entity.name.type.interface.ts	#caa3f2	—
variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx	#edb77e	—
entity.name.tag.yaml	#edb77e	—
keyword.key.toml, support.type.property-name.table.toml	#edb77e	—
variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell	#edb77e	—
support.other.variable, support.variable	#C2C2CA	—
entity.name.label	#9090c0	—
invalid, invalid.illegal	#ff5555	—
invalid.deprecated	#ff5555	strikethrough