Shaant Shakti - Spiritual Dark Theme for Focused Coding

Name: Shaant Shakti - Spiritual Dark Theme for Focused Coding
Author: Aadityaa

Publisher: AadityaaThemes in package: 8

A spiritually inspired dark theme balancing inner peace and raw coding power. Shaant Shakti keeps you grounded, focused, and creatively fierce.

Open in VS Code GitHub

Color themes

VS Code preview

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

Shaant Shakti - Spiritual Dark Theme for Focused Coding — Shaant Shakti: Sand Storm

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#D07C5B20
activityBar.activeBorder#E2BB77
activityBar.background#201713
activityBar.border#2B1F1A
activityBar.foreground#D07C5B
activityBar.inactiveForeground#82685E
activityBarBadge.background#D07C5B
activityBarBadge.foreground#181614
badge.background#D07C5B
badge.foreground#181614
breadcrumb.activeSelectionForeground#D07C5B
breadcrumb.background#181614
breadcrumb.focusForeground#F0E6D2
breadcrumb.foreground#9C8779
breadcrumbPicker.background#2A1C1C
button.background#D07C5B
button.foreground#181614
button.hoverBackground#C36C4B
button.secondaryBackground#4A2F2F
button.secondaryForeground#F0E6D2
button.secondaryHoverBackground#5A3F3F
dropdown.background#2A1C1C
dropdown.border#4A2F2F
dropdown.foreground#F0E6D2
dropdown.listBackground#2A1C1C
editor.background#181614
editor.findMatchBackground#E2BB7760
editor.findMatchHighlightBackground#E2BB7740
editor.findRangeHighlightBackground#D07C5B20
editor.foreground#F0E6D2
editor.inactiveSelectionBackground#4A2F2F60
editor.lineHighlightBackground#2B1F1A
editor.selectionBackground#D07C5B40
editor.selectionHighlightBackground#D07C5B20
editor.wordHighlightBackground#E2BB7730
editor.wordHighlightStrongBackground#D07C5B30
editorBracketMatch.background#D07C5B40
editorBracketMatch.border#D07C5B
editorCodeLens.foreground#9C8779
editorCursor.foreground#E2BB77
editorError.foreground#FF6B6B
editorGroup.border#2B1F1A
editorGroupHeader.tabsBackground#181614
editorGroupHeader.tabsBorder#2B1F1A
editorHint.foreground#81C784
editorIndentGuide.activeBackground1#D07C5B
editorIndentGuide.background1#3A3C26
editorInfo.foreground#64B5F6
editorLightBulb.foreground#E2BB77
editorLightBulbAutoFix.foreground#A6B07A
editorLineNumber.activeForeground#D07C5B
editorLineNumber.foreground#7A665B
editorRuler.foreground#3A3C26
editorWarning.foreground#FFB74D
extensionButton.prominentBackground#D07C5B
extensionButton.prominentForeground#181614
extensionButton.prominentHoverBackground#C36C4B
gitDecoration.addedResourceForeground#A6B07A
gitDecoration.conflictingResourceForeground#FFB74D
gitDecoration.deletedResourceForeground#FF6B6B
gitDecoration.ignoredResourceForeground#7A665B
gitDecoration.modifiedResourceForeground#E2BB77
gitDecoration.submoduleResourceForeground#C78C99
gitDecoration.untrackedResourceForeground#9AB0B8
input.background#2A1C1C
input.border#4A2F2F
input.foreground#F0E6D2
input.placeholderForeground#9C8779
inputOption.activeBorder#D07C5B
inputValidation.errorBackground#FF6B6B20
inputValidation.errorBorder#FF6B6B
inputValidation.infoBackground#64B5F620
inputValidation.infoBorder#64B5F6
inputValidation.warningBackground#FFB74D20
inputValidation.warningBorder#FFB74D
list.activeSelectionBackground#3A2626
list.activeSelectionForeground#F0E6D2
list.dropBackground#4A2F2F
list.errorForeground#FF6B6B
list.focusBackground#2B1F1A
list.focusForeground#F0E6D2
list.highlightForeground#D07C5B
list.hoverBackground#2A1C1C
list.inactiveSelectionBackground#2B1F1A
list.inactiveSelectionForeground#DABCA1
list.warningForeground#FFB74D
menu.background#2A1C1C
menu.foreground#F0E6D2
menu.selectionBackground#3A2626
menu.selectionBorder#D07C5B
menu.selectionForeground#F0E6D2
menu.separatorBackground#4A2F2F
menubar.selectionBackground#3A2626
menubar.selectionForeground#F0E6D2
notificationCenter.border#2B1F1A
notificationCenterHeader.background#201713
notificationCenterHeader.foreground#F0E6D2
notificationLink.foreground#D07C5B
notifications.background#2A1C1C
notifications.border#2B1F1A
notifications.foreground#F0E6D2
notificationToast.border#2B1F1A
panel.background#181614
panel.border#2B1F1A
panelTitle.activeBorder#D07C5B
panelTitle.activeForeground#F0E6D2
panelTitle.inactiveForeground#9C8779
peekView.border#D07C5B
peekViewEditor.background#2B1F1A
peekViewEditor.matchHighlightBackground#D07C5B40
peekViewResult.background#181614
peekViewResult.fileForeground#F0E6D2
peekViewResult.lineForeground#DABCA1
peekViewResult.matchHighlightBackground#D07C5B40
peekViewResult.selectionBackground#3A2626
peekViewResult.selectionForeground#F0E6D2
peekViewTitle.background#201713
peekViewTitleDescription.foreground#9C8779
peekViewTitleLabel.foreground#F0E6D2
pickerGroup.border#2B1F1A
pickerGroup.foreground#D07C5B
quickInput.background#2A1C1C
quickInput.foreground#F0E6D2
scrollbarSlider.activeBackground#6B5340
scrollbarSlider.background#6B534050
scrollbarSlider.hoverBackground#6B534080
settings.checkboxBackground#2A1C1C
settings.checkboxBorder#4A2F2F
settings.checkboxForeground#F0E6D2
settings.dropdownBackground#2A1C1C
settings.dropdownBorder#4A2F2F
settings.dropdownForeground#F0E6D2
settings.headerForeground#F0E6D2
settings.modifiedItemIndicator#D07C5B
settings.numberInputBackground#2A1C1C
settings.numberInputBorder#4A2F2F
settings.numberInputForeground#F0E6D2
settings.textInputBackground#2A1C1C
settings.textInputBorder#4A2F2F
settings.textInputForeground#F0E6D2
sideBar.background#191311
sideBar.border#2B1F1A
sideBar.foreground#DABCA1
sideBarSectionHeader.background#201713
sideBarSectionHeader.border#2B1F1A
sideBarSectionHeader.foreground#D07C5B
sideBarTitle.foreground#F0E6D2
statusBar.background#181614
statusBar.border#2B1F1A
statusBar.debuggingBackground#D07C5B
statusBar.debuggingForeground#181614
statusBar.foreground#D07C5B
statusBar.noFolderBackground#181614
statusBar.noFolderForeground#D07C5B
statusBarItem.activeBackground#D07C5B40
statusBarItem.hoverBackground#D07C5B20
statusBarItem.prominentBackground#E2BB77
statusBarItem.prominentForeground#181614
statusBarItem.prominentHoverBackground#F4D03F
tab.activeBackground#181614
tab.activeBorder#D07C5B
tab.activeBorderTop#E2BB77
tab.activeForeground#F0E6D2
tab.border#2B1F1A
tab.hoverBackground#2B1F1A
tab.hoverForeground#DABCA1
tab.inactiveBackground#18161488
tab.inactiveForeground#82685E
tab.unfocusedActiveBackground#18161488
tab.unfocusedActiveForeground#DABCA1
tab.unfocusedInactiveForeground#7A665B
terminal.ansiBlack#1E1815
terminal.ansiBlue#9AB0B8
terminal.ansiBrightBlack#7A665B
terminal.ansiBrightBlue#B3E5FC
terminal.ansiBrightCyan#B2DFDB
terminal.ansiBrightGreen#C8E6C9
terminal.ansiBrightMagenta#F8BBD9
terminal.ansiBrightRed#FF8A80
terminal.ansiBrightWhite#F7EEDD
terminal.ansiBrightYellow#FFF59D
terminal.ansiCyan#92B8B0
terminal.ansiGreen#A6B07A
terminal.ansiMagenta#C78C99
terminal.ansiRed#FF6B6B
terminal.ansiWhite#F0E6D2
terminal.ansiYellow#E2BB77
terminal.background#181614
terminal.border#2B1F1A
terminal.foreground#F0E6D2
terminal.selectionBackground#D07C5B40
titleBar.activeBackground#181614
titleBar.activeForeground#F0E6D2
titleBar.border#2B1F1A
titleBar.inactiveBackground#18161488
titleBar.inactiveForeground#9C8779
tree.indentGuidesStroke#3A3C26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation	#8D6E63	italic
keyword, storage.type, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other.debugger	#D07C5B	italic
string, constant.other.symbol, string.quoted, string.template	#A6B07A	—
string.template, punctuation.definition.string.template	#A6B07A	—
meta.template.expression, punctuation.definition.template-expression	#E2BB77	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#FFB74D	—
constant.language, support.constant, variable.language	#C78C99	—
variable, meta.definition.variable.name, support.variable	#F0E6D2	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#E2BB77	—
entity.name.type, entity.name.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#9AB0B8	—
support.type	#9AB0B8	—
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	#92B8B0	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF6B6B	—
variable.language	#C78C99	italic
entity.name.method.js	#E2BB77	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#E2BB77	—
entity.other.attribute-name	#D07C5B	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#E2BB77	italic
entity.other.attribute-name.class	#E2BB77	—
source.sass keyword.control	#E2BB77	—
markup.inserted	#A6B07A	—
markup.deleted	#FF6B6B	—
markup.changed	#C78C99	—
string.regexp	#92B8B0	—
constant.character.escape	#92B8B0	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E2BB77	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF6B6B	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#D07C5B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E2BB77	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFB74D	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6B6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C78C99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E2BB77	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6B6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C78C99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#A6B07A	—
text.html.markdown, punctuation.definition.list_item.markdown	#F0E6D2	—
text.html.markdown markup.inline.raw.markdown	#C78C99	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#92B8B0	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#A6B07A	—
markup.italic	#F4D03F	italic
markup.bold, markup.bold string	#F4D03F	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#F4D03F	bold
markup.underline	#F4D03F	underline
markup.quote punctuation.definition.blockquote.markdown	#92B8B0	—
markup.quote	—	italic
string.other.link.title.markdown	#E2BB77	—
string.other.link.description.title.markdown	#C78C99	—
constant.other.reference.link.markdown	#FFCC80	—
markup.raw.block	#C78C99	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#F0E6D2	—
variable.language.fenced.markdown	#92B8B0	—
meta.separator	#92B8B0	bold
markup.table	#F0E6D2	—
entity.name.tag, meta.tag, punctuation.definition.tag	#FF6B6B	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css entity.name.tag	#E2BB77	—
support.type.property-name.css	#92B8B0	—
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css	#A6B07A	—
invalid, invalid.illegal	#FF6B6B	italic underline
invalid.deprecated	#C78C99	italic underline
support.class.component	#E2BB77	—
support.function.lifecycle.react	#FF6B6B	—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx	#9AB0B8	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#92B8B0	—
meta.type.parameters.ts, meta.type.parameters.tsx	#C78C99	—

VS Code preview

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

Shaant Shakti - Spiritual Dark Theme for Focused Coding — Shaant Shakti: Soul Drift

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#FF5C5720
activityBar.activeBorder#FF6AC1
activityBar.background#1A1A1D
activityBar.border#25171A
activityBar.foreground#FF5C57
activityBar.inactiveForeground#595959
activityBarBadge.background#FF5C57
activityBarBadge.foreground#1A1A1D
badge.background#FF6AC1
badge.foreground#141314
breadcrumb.activeSelectionForeground#FF6AC1
breadcrumb.background#141314
breadcrumb.focusForeground#F8F8F2
breadcrumb.foreground#5A5C6A
breadcrumbPicker.background#25171A
button.background#FF6AC1
button.foreground#141314
button.hoverBackground#FF5C57
button.secondaryBackground#4A2B3D
button.secondaryForeground#F8F8F2
button.secondaryHoverBackground#5A3B4D
dropdown.background#25171A
dropdown.border#4A2B3D
dropdown.foreground#F8F8F2
dropdown.listBackground#25171A
editor.background#141314
editor.findMatchBackground#F78C6C60
editor.findMatchHighlightBackground#F78C6C40
editor.findRangeHighlightBackground#FF6AC120
editor.foreground#F8F8F2
editor.inactiveSelectionBackground#4A2B3D60
editor.lineHighlightBackground#25171A
editor.selectionBackground#FF6AC140
editor.selectionHighlightBackground#FF6AC120
editor.wordHighlightBackground#FF5C5730
editor.wordHighlightStrongBackground#FF6AC130
editorBracketHighlight.foreground1#FF5C57
editorBracketHighlight.foreground2#FF6AC1
editorBracketHighlight.foreground3#F78C6C
editorBracketHighlight.foreground4#57C7FF
editorBracketHighlight.foreground5#5AF78E
editorBracketHighlight.foreground6#F3F99D
editorBracketMatch.background#FF6AC140
editorBracketMatch.border#FF6AC1
editorCodeLens.foreground#5A5C6A
editorCursor.foreground#FF4B5C
editorError.foreground#FF5C57
editorGhostText.foreground#5C637080
editorGroup.border#25171A
editorGroupHeader.tabsBackground#141314
editorGroupHeader.tabsBorder#25171A
editorHint.foreground#9AEDFE
editorIndentGuide.activeBackground1#FF6AC1
editorIndentGuide.background1#2C2C2E
editorInfo.foreground#57C7FF
editorLightBulb.foreground#F3F99D
editorLightBulbAutoFix.foreground#5AF78E
editorLineNumber.activeForeground#FF6AC1
editorLineNumber.foreground#5A5C6A
editorRuler.foreground#2C2C2E
editorWarning.foreground#FFB86C
editorWhitespace.foreground#44475A
extensionButton.prominentBackground#FF6AC1
extensionButton.prominentForeground#141314
extensionButton.prominentHoverBackground#FF5C57
gitDecoration.addedResourceForeground#5AF78E
gitDecoration.conflictingResourceForeground#FFB86C
gitDecoration.deletedResourceForeground#FF5C57
gitDecoration.ignoredResourceForeground#5A5C6A
gitDecoration.modifiedResourceForeground#F3F99D
gitDecoration.submoduleResourceForeground#FF6AC1
gitDecoration.untrackedResourceForeground#57C7FF
input.background#25171A
input.border#4A2B3D
input.foreground#F8F8F2
input.placeholderForeground#5A5C6A
inputOption.activeBorder#FF6AC1
inputValidation.errorBackground#FF5C5720
inputValidation.errorBorder#FF5C57
inputValidation.infoBackground#57C7FF20
inputValidation.infoBorder#57C7FF
inputValidation.warningBackground#FFB86C20
inputValidation.warningBorder#FFB86C
list.activeSelectionBackground#4A2B3D
list.activeSelectionForeground#FFFFFF
list.dropBackground#4A2B3D
list.errorForeground#FF5C57
list.focusBackground#21252B
list.focusForeground#F8F8F2
list.highlightForeground#FF6AC1
list.hoverBackground#2D1E2D
list.inactiveSelectionBackground#29292C
list.inactiveSelectionForeground#C0C0C0
list.warningForeground#FFB86C
menu.background#25171A
menu.foreground#F8F8F2
menu.selectionBackground#4A2B3D
menu.selectionBorder#FF6AC1
menu.selectionForeground#F8F8F2
menu.separatorBackground#4A2B3D
menubar.selectionBackground#4A2B3D
menubar.selectionForeground#F8F8F2
notificationCenter.border#25171A
notificationCenterHeader.background#25171A
notificationCenterHeader.foreground#F8F8F2
notificationLink.foreground#FF6AC1
notifications.background#25171A
notifications.border#25171A
notifications.foreground#F8F8F2
notificationToast.border#25171A
panel.background#141314
panel.border#292B2E
panelTitle.activeBorder#FF6AC1
panelTitle.activeForeground#F8F8F2
panelTitle.inactiveForeground#5A5C6A
peekView.border#FF6AC1
peekViewEditor.background#25171A
peekViewEditor.matchHighlightBackground#FF6AC140
peekViewResult.background#141314
peekViewResult.fileForeground#F8F8F2
peekViewResult.lineForeground#B0B0B0
peekViewResult.matchHighlightBackground#FF6AC140
peekViewResult.selectionBackground#4A2B3D
peekViewResult.selectionForeground#F8F8F2
peekViewTitle.background#25171A
peekViewTitleDescription.foreground#5A5C6A
peekViewTitleLabel.foreground#F8F8F2
pickerGroup.border#25171A
pickerGroup.foreground#FF6AC1
quickInput.background#25171A
quickInput.foreground#F8F8F2
scrollbarSlider.activeBackground#FF5C57BB
scrollbarSlider.background#5C637050
scrollbarSlider.hoverBackground#5C637080
settings.checkboxBackground#25171A
settings.checkboxBorder#4A2B3D
settings.checkboxForeground#F8F8F2
settings.dropdownBackground#25171A
settings.dropdownBorder#4A2B3D
settings.dropdownForeground#F8F8F2
settings.headerForeground#F8F8F2
settings.modifiedItemIndicator#FF6AC1
settings.numberInputBackground#25171A
settings.numberInputBorder#4A2B3D
settings.numberInputForeground#F8F8F2
settings.textInputBackground#25171A
settings.textInputBorder#4A2B3D
settings.textInputForeground#F8F8F2
sideBar.background#161617
sideBar.border#25171A
sideBar.foreground#B0B0B0
sideBarSectionHeader.background#25171A
sideBarSectionHeader.border#2C2C2E
sideBarSectionHeader.foreground#FF5C57
sideBarTitle.foreground#F8F8F2
statusBar.background#141314
statusBar.border#25171A
statusBar.debuggingBackground#FF5C57
statusBar.debuggingForeground#141314
statusBar.foreground#FF6AC1
statusBar.noFolderBackground#141314
statusBar.noFolderForeground#FF6AC1
statusBarItem.activeBackground#FF6AC140
statusBarItem.hoverBackground#FF6AC120
statusBarItem.prominentBackground#F78C6C
statusBarItem.prominentForeground#141314
statusBarItem.prominentHoverBackground#FFB86C
tab.activeBackground#141314
tab.activeBorder#FF6AC1
tab.activeBorderTop#FF5C57
tab.activeForeground#FFFFFF
tab.border#25171A
tab.hoverBackground#25171A
tab.hoverForeground#B0B0B0
tab.inactiveBackground#1A1C1D99
tab.inactiveForeground#5A5A5F
tab.unfocusedActiveBackground#141314AA
tab.unfocusedActiveForeground#B0B0B0
tab.unfocusedInactiveForeground#5A5C6A
terminal.ansiBlack#1C1C1C
terminal.ansiBlue#57C7FF
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#77D7FF
terminal.ansiBrightCyan#BAFFFF
terminal.ansiBrightGreen#7AFF9E
terminal.ansiBrightMagenta#FF8AD1
terminal.ansiBrightRed#FF7B77
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFF9BD
terminal.ansiCyan#9AEDFE
terminal.ansiGreen#5AF78E
terminal.ansiMagenta#FF6AC1
terminal.ansiRed#FF5C57
terminal.ansiWhite#F1F1F0
terminal.ansiYellow#F3F99D
terminal.background#141314
terminal.border#25171A
terminal.foreground#F8F8F2
terminal.selectionBackground#FF6AC140
titleBar.activeBackground#141314
titleBar.activeForeground#FFFFFF
titleBar.border#25171A
titleBar.inactiveBackground#141314AA
titleBar.inactiveForeground#7A7A85
tree.indentGuidesStroke#3E4451

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation	#5C6370	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other, keyword.operator.new, keyword.operator.expression, keyword.other.debugger	#FF6AC1	italic
string, constant.other.symbol, string.quoted, string.template	#5AF78E	—
string.template, punctuation.definition.string.template	#5AF78E	—
meta.template.expression, punctuation.definition.template-expression	#F78C6C	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#F3F99D	—
constant.language, support.constant, variable.language	#57C7FF	—
variable, identifier, meta.definition.variable, meta.definition.variable.name, support.variable	#F78C6C	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#9AEDFE	bold
entity.name.type, entity.name.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#57C7FF	—
support.type	#57C7FF	—
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	#9AEDFE	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5C57	—
variable.language.this, variable.language.super	#FF6AC1	italic
entity.name.method.js	#9AEDFE	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#9AEDFE	—
entity.other.attribute-name	#FF6AC1	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FF6AC1	italic
entity.other.attribute-name.class	#F3F99D	—
source.sass keyword.control	#F3F99D	—
markup.inserted	#5AF78E	—
markup.deleted	#FF5C57	—
markup.changed	#FF6AC1	—
string.regexp	#9AEDFE	—
constant.character.escape	#9AEDFE	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#9AEDFE	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5C57	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FF6AC1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9AEDFE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5C57	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5AF78E	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F3F99D	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#57C7FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6AC1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9AEDFE	—
text.html.markdown, punctuation.definition.list_item.markdown	#F8F8F2	—
text.html.markdown markup.inline.raw.markdown	#FF6AC1	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#9AEDFE	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#9AEDFE	bold
markup.italic	#FF6AC1	italic
markup.bold, markup.bold string	#F3F99D	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#F78C6C	bold
markup.underline	#9AEDFE	underline
markup.quote punctuation.definition.blockquote.markdown	#9AEDFE	—
markup.quote	—	italic
string.other.link.title.markdown	#9AEDFE	—
string.other.link.description.title.markdown	#FF6AC1	—
constant.other.reference.link.markdown	#F78C6C	—
markup.raw.block	#FF6AC1	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#F8F8F2	—
variable.language.fenced.markdown	#9AEDFE	—
meta.separator	#9AEDFE	bold
markup.table	#F8F8F2	—
entity.name.tag, meta.tag, punctuation.definition.tag	#FF5C57	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css entity.name.tag	#FF5C57	—
support.type.property-name.css	#9AEDFE	—
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css	#5AF78E	—
invalid, invalid.illegal	#FF5C57	italic underline
invalid.deprecated	#FF6AC1	italic underline
support.class.component	#FF5C57	italic
support.function.lifecycle.react	#9AEDFE	—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx	#57C7FF	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#9AEDFE	—
meta.type.parameters.ts, meta.type.parameters.tsx	#FF6AC1	—
storage, storage.modifier	#FF6AC1	italic bold
entity.name.function.constructor	#F78C6C	bold
support.variable, support.constant	#57C7FF	bold
variable.other.constant	#F3F99D	italic
meta.embedded, source.groovy.embedded, string.template	#5AF78E	—
variable.parameter	#F78C6C	italic
punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.separator.key-value.json, punctuation.separator.dictionary.key-value.json	#ABB2BF	—
string.quoted.double.json	#5AF78E	—
meta.structure.dictionary.json string.quoted.double.json	#F78C6C	—
constant.language.json, constant.numeric.json	#F3F99D	—
comment.line.double-slash.json	#5C6370	italic

VS Code preview

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

Shaant Shakti - Spiritual Dark Theme for Focused Coding — Shaant Shakti: SPFx Sanctuary

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#0078D420
activityBar.activeBorder#00BCF2
activityBar.background#0D1117
activityBar.border#1A2332
activityBar.foreground#0078D4
activityBar.inactiveForeground#6B7C93
activityBarBadge.background#0078D4
activityBarBadge.foreground#FFFFFF
badge.background#0078D4
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#0078D4
breadcrumb.background#0F1419
breadcrumb.focusForeground#E8F4FD
breadcrumb.foreground#6B7C93
breadcrumbPicker.background#1A2332
button.background#0078D4
button.foreground#FFFFFF
button.hoverBackground#106EBE
button.secondaryBackground#2D3748
button.secondaryForeground#E8F4FD
button.secondaryHoverBackground#3D4758
dropdown.background#1A2332
dropdown.border#2D3748
dropdown.foreground#E8F4FD
dropdown.listBackground#1A2332
editor.background#0F1419
editor.findMatchBackground#FFB90060
editor.findMatchHighlightBackground#FFB90040
editor.findRangeHighlightBackground#0078D420
editor.foreground#E8F4FD
editor.inactiveSelectionBackground#0078D420
editor.lineHighlightBackground#1A2332
editor.selectionBackground#0078D440
editor.selectionHighlightBackground#0078D420
editor.wordHighlightBackground#00BCF230
editor.wordHighlightStrongBackground#0078D430
editorBracketHighlight.foreground1#0078D4
editorBracketHighlight.foreground2#00BCF2
editorBracketHighlight.foreground3#40E0D0
editorBracketHighlight.foreground4#32CD32
editorBracketHighlight.foreground5#FFB900
editorBracketHighlight.foreground6#E74856
editorBracketMatch.background#0078D440
editorBracketMatch.border#0078D4
editorCodeLens.foreground#6B7C93
editorCursor.foreground#00BCF2
editorError.foreground#E74856
editorGroup.border#1A2332
editorGroupHeader.tabsBackground#0F1419
editorGroupHeader.tabsBorder#1A2332
editorHint.foreground#40E0D0
editorIndentGuide.activeBackground1#0078D4
editorIndentGuide.background1#2D3748
editorInfo.foreground#0078D4
editorLightBulb.foreground#FFB900
editorLightBulbAutoFix.foreground#32CD32
editorLineNumber.activeForeground#0078D4
editorLineNumber.foreground#6B7C93
editorRuler.foreground#2D3748
editorWarning.foreground#FFB900
extensionButton.prominentBackground#0078D4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#106EBE
gitDecoration.addedResourceForeground#32CD32
gitDecoration.conflictingResourceForeground#B146C2
gitDecoration.deletedResourceForeground#E74856
gitDecoration.ignoredResourceForeground#6B7C93
gitDecoration.modifiedResourceForeground#FFB900
gitDecoration.submoduleResourceForeground#00BCF2
gitDecoration.untrackedResourceForeground#40E0D0
input.background#1A2332
input.border#2D3748
input.foreground#E8F4FD
input.placeholderForeground#6B7C93
inputOption.activeBorder#0078D4
inputValidation.errorBackground#E7485620
inputValidation.errorBorder#E74856
inputValidation.infoBackground#0078D420
inputValidation.infoBorder#0078D4
inputValidation.warningBackground#FFB90020
inputValidation.warningBorder#FFB900
list.activeSelectionBackground#2D3748
list.activeSelectionForeground#E8F4FD
list.dropBackground#2D3748
list.errorForeground#E74856
list.focusBackground#1A2332
list.focusForeground#E8F4FD
list.highlightForeground#0078D4
list.hoverBackground#1A2332
list.inactiveSelectionBackground#1A2332
list.inactiveSelectionForeground#C9D1D9
list.warningForeground#FFB900
menu.background#1A2332
menu.foreground#E8F4FD
menu.selectionBackground#2D3748
menu.selectionBorder#0078D4
menu.selectionForeground#E8F4FD
menu.separatorBackground#2D3748
menubar.selectionBackground#2D3748
menubar.selectionForeground#E8F4FD
notificationCenter.border#1A2332
notificationCenterHeader.background#1A2332
notificationCenterHeader.foreground#E8F4FD
notificationLink.foreground#0078D4
notifications.background#1A2332
notifications.border#1A2332
notifications.foreground#E8F4FD
notificationToast.border#1A2332
panel.background#0F1419
panel.border#1A2332
panelTitle.activeBorder#0078D4
panelTitle.activeForeground#E8F4FD
panelTitle.inactiveForeground#6B7C93
peekView.border#0078D4
peekViewEditor.background#1A2332
peekViewEditor.matchHighlightBackground#0078D440
peekViewResult.background#0F1419
peekViewResult.fileForeground#E8F4FD
peekViewResult.lineForeground#C9D1D9
peekViewResult.matchHighlightBackground#0078D440
peekViewResult.selectionBackground#2D3748
peekViewResult.selectionForeground#E8F4FD
peekViewTitle.background#1A2332
peekViewTitleDescription.foreground#6B7C93
peekViewTitleLabel.foreground#E8F4FD
pickerGroup.border#1A2332
pickerGroup.foreground#0078D4
quickInput.background#1A2332
quickInput.foreground#E8F4FD
scrollbarSlider.activeBackground#0078D4BB
scrollbarSlider.background#6B7C9350
scrollbarSlider.hoverBackground#6B7C9380
settings.checkboxBackground#1A2332
settings.checkboxBorder#2D3748
settings.checkboxForeground#E8F4FD
settings.dropdownBackground#1A2332
settings.dropdownBorder#2D3748
settings.dropdownForeground#E8F4FD
settings.headerForeground#E8F4FD
settings.modifiedItemIndicator#0078D4
settings.numberInputBackground#1A2332
settings.numberInputBorder#2D3748
settings.numberInputForeground#E8F4FD
settings.textInputBackground#1A2332
settings.textInputBorder#2D3748
settings.textInputForeground#E8F4FD
sideBar.background#161B22
sideBar.border#1A2332
sideBar.foreground#C9D1D9
sideBarSectionHeader.background#1A2332
sideBarSectionHeader.border#2D3748
sideBarSectionHeader.foreground#0078D4
sideBarTitle.foreground#E8F4FD
statusBar.background#0F1419
statusBar.border#1A2332
statusBar.debuggingBackground#E74856
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#0078D4
statusBar.noFolderBackground#0F1419
statusBar.noFolderForeground#0078D4
statusBarItem.activeBackground#0078D440
statusBarItem.hoverBackground#0078D420
statusBarItem.prominentBackground#00BCF2
statusBarItem.prominentForeground#0F1419
statusBarItem.prominentHoverBackground#40E0D0
tab.activeBackground#0F1419
tab.activeBorder#0078D4
tab.activeBorderTop#00BCF2
tab.activeForeground#E8F4FD
tab.border#1A2332
tab.hoverBackground#1A2332
tab.hoverForeground#C9D1D9
tab.inactiveBackground#0F141988
tab.inactiveForeground#6B7C93
tab.unfocusedActiveBackground#0F141988
tab.unfocusedActiveForeground#C9D1D9
tab.unfocusedInactiveForeground#6B7C93
terminal.ansiBlack#161B22
terminal.ansiBlue#0078D4
terminal.ansiBrightBlack#6B7C93
terminal.ansiBrightBlue#4A9EFF
terminal.ansiBrightCyan#60F0E0
terminal.ansiBrightGreen#52ED52
terminal.ansiBrightMagenta#D166E2
terminal.ansiBrightRed#FF6B7D
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD700
terminal.ansiCyan#40E0D0
terminal.ansiGreen#32CD32
terminal.ansiMagenta#B146C2
terminal.ansiRed#E74856
terminal.ansiWhite#E8F4FD
terminal.ansiYellow#FFB900
terminal.background#0F1419
terminal.border#1A2332
terminal.foreground#E8F4FD
terminal.selectionBackground#0078D440
titleBar.activeBackground#0F1419
titleBar.activeForeground#E8F4FD
titleBar.border#1A2332
titleBar.inactiveBackground#0F141988
titleBar.inactiveForeground#6B7C93
tree.indentGuidesStroke#2D3748

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.documentation	#6B7C93	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other, keyword.operator.new, keyword.operator.expression, keyword.other.debugger	#0078D4	italic
string, constant.other.symbol, string.quoted, string.template	#32CD32	—
string.template, punctuation.definition.string.template	#32CD32	—
meta.template.expression, punctuation.definition.template-expression	#00BCF2	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#FFB900	—
constant.language, support.constant, variable.language	#40E0D0	—
variable, identifier, meta.definition.variable, meta.definition.variable.name, support.variable	#E8F4FD	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#00BCF2	bold
entity.name.type, entity.name.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#40E0D0	—
support.type	#40E0D0	—
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	#40E0D0	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E74856	—
variable.language.this, variable.language.super	#0078D4	italic
entity.name.method.js	#00BCF2	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#00BCF2	—
entity.other.attribute-name	#FFB900	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFB900	italic
entity.other.attribute-name.class	#FFB900	—
source.sass keyword.control	#FFB900	—
markup.inserted	#32CD32	—
markup.deleted	#E74856	—
markup.changed	#0078D4	—
string.regexp	#40E0D0	—
constant.character.escape	#40E0D0	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#00BCF2	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E74856	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#0078D4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#00BCF2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#40E0D0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32CD32	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFB900	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#B146C2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E74856	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0078D4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#00BCF2	—
text.html.markdown, punctuation.definition.list_item.markdown	#E8F4FD	—
text.html.markdown markup.inline.raw.markdown	#0078D4	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#40E0D0	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#00BCF2	bold
markup.italic	#0078D4	italic
markup.bold, markup.bold string	#FFB900	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#00BCF2	bold
markup.underline	#00BCF2	underline
markup.quote punctuation.definition.blockquote.markdown	#40E0D0	—
markup.quote	—	italic
string.other.link.title.markdown	#00BCF2	—
string.other.link.description.title.markdown	#0078D4	—
constant.other.reference.link.markdown	#FFB900	—
markup.raw.block	#0078D4	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#E8F4FD	—
variable.language.fenced.markdown	#40E0D0	—
meta.separator	#40E0D0	bold
markup.table	#E8F4FD	—
entity.name.tag, meta.tag, punctuation.definition.tag	#E74856	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css entity.name.tag	#E74856	—
support.type.property-name.css	#40E0D0	—
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css	#32CD32	—
invalid, invalid.illegal	#E74856	italic underline
invalid.deprecated	#FFB900	italic underline
support.class.component	#E74856	italic
support.function.lifecycle.react	#00BCF2	—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx	#40E0D0	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#00BCF2	—
meta.type.parameters.ts, meta.type.parameters.tsx	#0078D4	—
storage, storage.modifier	#0078D4	italic bold
entity.name.function.constructor	#00BCF2	bold
support.variable, support.constant	#40E0D0	bold
variable.other.constant	#FFB900	italic
meta.embedded, source.groovy.embedded, string.template	#32CD32	—
variable.parameter	#E8F4FD	italic
punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.separator.key-value.json, punctuation.separator.dictionary.key-value.json	#C9D1D9	—
string.quoted.double.json	#32CD32	—
meta.structure.dictionary.json string.quoted.double.json	#E8F4FD	—
constant.language.json, constant.numeric.json	#FFB900	—
comment.line.double-slash.json	#6B7C93	italic
entity.name.class.spfx, support.class.webpart	#0078D4	bold
entity.name.sharepoint.list, support.sharepoint.library	#00BCF2	italic
entity.name.graph, support.microsoft.graph	#40E0D0	bold italic
entity.name.pnp, support.pnp.js	#32CD32	bold
entity.name.fluentui, support.fluentui.component	#B146C2	italic

VS Code preview

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

Shaant Shakti - Spiritual Dark Theme for Focused Coding — Shaant Shakti: Spirited Away

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#151515
activityBar.foreground#CFCFCF
activityBarBadge.background#EC5151
activityBarBadge.foreground#FFF
button.background#EC5151
button.foreground#FFF
button.hoverBackground#ef6363
debugExceptionWidget.background#000
debugExceptionWidget.border#383838
debugToolBar.background#000
diffEditor.insertedTextBackground#6d966c66
diffEditor.removedTextBackground#BD353866
dropdown.background#000
dropdown.border#383838
dropdown.foreground#CFCFCF
editor.background#151515
editor.findMatchBackground#CFCFCF80
editor.findMatchHighlightBackground#CFCFCF4D
editor.findRangeHighlightBackground#00000000
editor.foreground#CFCFCF
editor.hoverHighlightBackground#CFCFCF1B
editor.inactiveSelectionBackground#CFCFCF1B
editor.lineHighlightBackground#222
editor.rangeHighlightBackground#CFCFCF28
editor.selectionBackground#CFCFCF28
editor.selectionHighlightBackground#CFCFCF66
editor.wordHighlightBackground#CFCFCF28
editor.wordHighlightStrongBackground#EC515180
editorCursor.foreground#BD3538
editorGroup.border#000
editorGroup.dropBackground#CFCFCF33
editorGroupHeader.noTabsBackground#151515
editorGroupHeader.tabsBackground#151515
editorHoverWidget.background#000
editorHoverWidget.border#383838
editorIndentGuide.background1#383838
editorLineNumber.foreground#CFCFCF80
editorMarkerNavigation.background#000
editorMarkerNavigationError.background#BD3538
editorMarkerNavigationWarning.background#e7ab65
editorSuggestWidget.background#000
editorSuggestWidget.border#383838
editorSuggestWidget.foreground#CFCFCF
editorSuggestWidget.highlightForeground#268ac3
editorSuggestWidget.selectedBackground#268ac3B0
editorWhitespace.foreground#383838
editorWidget.background#000
focusBorder#383838
foreground#FFF
input.background#151515
input.border#383838
input.foreground#CFCFCF
inputOption.activeBorder#EC5151
inputValidation.errorBackground#EC5151
inputValidation.errorBorder#EC5151
inputValidation.infoBackground#268ac3
inputValidation.infoBorder#268ac3
inputValidation.warningBackground#e7ab65
inputValidation.warningBorder#e7ab65
list.activeSelectionBackground#268ac3
list.activeSelectionForeground#FFF
list.dropBackground#CFCFCF33
list.focusBackground#268ac3B0
list.highlightForeground#268ac3
list.hoverBackground#268ac380
list.inactiveSelectionBackground#CFCFCF99
panel.background#151515
panel.border#383838
panelTitle.activeBorder#383838
panelTitle.activeForeground#FFF
panelTitle.inactiveForeground#CFCFCF
peekView.border#383838
peekViewEditor.background#151515
peekViewEditor.matchHighlightBackground#CFCFCF80
peekViewResult.background#000
peekViewResult.fileForeground#FFF
peekViewResult.lineForeground#CFCFCF
peekViewResult.matchHighlightBackground#CFCFCF80
peekViewResult.selectionBackground#268ac3B0
peekViewResult.selectionForeground#FFF
peekViewTitle.background#000
peekViewTitleDescription.foreground#CFCFCF
peekViewTitleLabel.foreground#FFF
pickerGroup.border#383838
pickerGroup.foreground#ef6363
scrollbar.shadow#CFCFCF1B
scrollbarSlider.activeBackground#CFCFCF99
scrollbarSlider.background#CFCFCF28
scrollbarSlider.hoverBackground#CFCFCF66
sideBar.background#000
sideBarSectionHeader.background#000
sideBarTitle.foreground#CFCFCF
statusBar.background#EC5151
statusBar.debuggingBackground#BD3538
statusBar.foreground#FFF
statusBar.noFolderBackground#151515
tab.activeBackground#000
tab.activeForeground#FFF
tab.border#38383880
tab.inactiveBackground#222
tab.inactiveForeground#CFCFCF
titleBar.activeBackground#000
titleBar.activeForeground#FFF
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#CFCFCF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#CFCFCF	—
comment	#6d966c	italic
string, constant.character.escape.ts, punctuation.definition.string	#e7ab65	—
constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#e7ab65	—
punctuation.definition.template-expression	#ef6363	—
constant.numeric	#AFC563	—
constant.language	#268ac3	italic
support.constant.property-value	#e7ab65	—
constant.other.color.rgb-value.hex, support.constant.color.w3c-standard-color-name, support.constant.color.w3c-extended-color-name	#e7ab65	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#9977a2	italic
keyword.control.at-rule	#9977a2	italic
keyword	#ef6363	italic
storage	#CFCFCF	—
storage.modifier	#268ac3	italic
storage.modifier.import	#ef6363	italic
meta.object-literal.key	#CFCFCF	—
punctuation.definition.method-parameters, punctuation.definition.seperator.parameter, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section, punctuation.definition.block, punctuation.definition.typeparameters, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.definition.binding-pattern.object, punctuation.definition.bracket.curly, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.attribute-selector, punctuation.definition.metadata, punctuation.definition.dictionary, punctuation.definition.array, punctuation.separator.comma, punctuation.terminator, meta.method.identifier, meta.brace.round, meta.brace.square, punctuation.definition.entity	#888	—
punctuation.definition.section.case-statement	#888	—
punctuation.separator	#888	—
punctuation.accessor, punctuation.separator.pointer-access, punctuation.separator.dot-access	#888	—
punctuation.definition.tag	#777	—
variable.language	#268ac3	italic
storage.type	#268ac3	italic
support.type.posix-reserved, support.type.sys-types, support.type.stdint	#268ac3	italic
storage.type.function.arrow	#ef6363	—
entity.name.class, entity.name.type.class, entity.other.inherited-class, storage.type.generic, storage.class	#ef6363	italic
entity.name.type	#ef6363	italic
entity.name.function, support.function, meta.method, meta.function-call.generic	#da846b	—
meta.method-call, meta.method.body	#CFCFCF	—
entity.name.tag	#ef6363	—
entity.other.attribute-name	#CFCFCF	italic
meta.attribute-selector	#e7ab65	—
meta.tag.sgml.doctype.html	#268ac3	italic
support.constant	#CFCFCF	—
variable, variable.other.readwrite, meta.definition.variable.name	#CFCFCF	—
variable.scss	#5cafdf	—
support.variable.property, variable.property, variable.object.property, meta.definition.property, variable.other.property	#CFCFCF	—
variable.other.readwrite.alias	#CFCFCF	—
variable.other.enummember	#AFC563	—
support.type, support.class, storage.type.core	#ef6363	italic
punctuation.decorator	#9977a2	italic
punctuation.definition.block.tag	#268ac3	italic
entity.name.function.preprocessor	#9977a2	italic
invalid	—	italic
keyword.operator.type	#888	—
keyword.operator.new, keyword.control.new, keyword.operator.expression, keyword.other	#268ac3	italic
keyword.operator.dereference	#CFCFCF	—
markup.heading	#ef6363	bold
markup.bold	#268ac3	bold
markup.italic	#268ac3	italic
beginning.punctuation.definition.list	#ef6363	—
markup.underline.link	#5cafdf	—
markup.inline.raw, punctuation.definition.raw	#268ac3	—
punctuation.definition.markdown, fenced_code.block.language	#da846b	—
beginning.punctuation.definition.quote	#6d966c	italic
punctuation.definition.markdown	#888	—
meta.separator.markdown	#777	—