Game of Thrones - The Seven Kingdoms

Name: Game of Thrones - The Seven Kingdoms
Author: Abhiroux

Publisher: AbhirouxThemes in package: 12

A complete Game of Thrones VS Code experience: 12 house-themed color themes, GoT file & folder icons, themed code snippets, bracket colorization, and auto icon switching.

Open in VS Code GitHub

Color themes

VS Code preview

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

Game of Thrones - The Seven Kingdoms — GOT: House Lannister (Dark Gold)

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.

_comment=== HOUSE LANNISTER: A Lannister Always Pays Their Debts ===
_comment2=== Palette: Deep burgundy-black, rich gold, crimson accents, warm amber ===
activityBar.background#0D0A05
activityBar.border#1C1608
activityBar.foreground#FFD700
activityBar.inactiveForeground#5A4A20
activityBarBadge.background#8B0000
activityBarBadge.foreground#FFD700
badge.background#8B0000
badge.foreground#FFD700
button.background#8B0000
button.foreground#FFD700
button.hoverBackground#A80000
button.secondaryBackground#1C1608
button.secondaryForeground#C9A840
descriptionForeground#7A6530
diffEditor.insertedTextBackground#88BB0022
diffEditor.removedTextBackground#CC000033
editor.background#14100A
editor.findMatchBackground#FFD70055
editor.findMatchHighlightBackground#FFD70033
editor.foreground#F0E0C0
editor.hoverHighlightBackground#7B000033
editor.lineHighlightBackground#1C1608
editor.lineHighlightBorder#2A200E
editor.selectionBackground#B8960C40
editor.selectionHighlightBackground#B8960C25
editor.wordHighlightBackground#FFD70022
editor.wordHighlightStrongBackground#FFD70044
editorBracketHighlight.foreground1#FFD700
editorBracketHighlight.foreground2#CC0000
editorBracketHighlight.foreground3#88BB00
editorBracketHighlight.foreground4#FFEA80
editorBracketHighlight.foreground5#BB77BB
editorBracketHighlight.foreground6#E6B800
editorBracketHighlight.unexpectedBracket.foreground#FF0000
editorBracketMatch.background#FFD70033
editorBracketMatch.border#FFD700AA
editorCodeLens.foreground#7A6530
editorCursor.background#000000
editorCursor.foreground#FFD700
editorGroupHeader.tabsBackground#0D0A05
editorGutter.addedBackground#88BB00
editorGutter.background#14100A
editorGutter.deletedBackground#CC0000
editorGutter.modifiedBackground#FFD700
editorIndentGuide.activeBackground#FFD70055
editorIndentGuide.background#2A200E
editorInlayHint.background#1C1608
editorInlayHint.foreground#7A6530
editorLineNumber.activeForeground#FFD700
editorLineNumber.foreground#3A2E10
editorLink.activeForeground#FFD700
editorRuler.foreground#2A200E
editorSuggestWidget.background#14100A
editorSuggestWidget.highlightForeground#FFD700
editorSuggestWidget.selectedBackground#B8960C55
editorWhitespace.foreground#2A200E
editorWidget.background#14100A
editorWidget.border#3A2E10
editorWidget.foreground#F0E0C0
errorForeground#FF4444
focusBorder#FFD70066
gitDecoration.addedResourceForeground#88BB00
gitDecoration.conflictingResourceForeground#E6B800
gitDecoration.deletedResourceForeground#CC0000
gitDecoration.ignoredResourceForeground#3A2E10
gitDecoration.modifiedResourceForeground#FFD700
gitDecoration.untrackedResourceForeground#88BB00
icon.foreground#FFD700
input.background#100D07
input.border#3A2E10
input.foreground#F0E0C0
input.placeholderForeground#5A4A20
inputOption.activeBackground#B8960C55
inputOption.activeBorder#FFD700
list.activeSelectionBackground#B8960C44
list.activeSelectionForeground#FFD700
list.errorForeground#FF4444
list.focusBackground#B8960C33
list.focusForeground#FFD700
list.highlightForeground#FFD700
list.hoverBackground#1C1608
list.hoverForeground#F0E0C0
list.inactiveSelectionBackground#1C1608
list.inactiveSelectionForeground#C9A840
list.warningForeground#E6B800
menu.background#14100A
menu.foreground#F0E0C0
menu.selectionBackground#B8960C55
menu.selectionForeground#FFD700
menu.separatorBackground#2A200E
minimap.background#0D0A05
notificationCenterHeader.background#0D0A05
notificationCenterHeader.foreground#FFD700
notifications.background#14100A
notifications.border#1C1608
notifications.foreground#F0E0C0
panel.background#0D0A05
panel.border#1C1608
panelTitle.activeBorder#FFD700
panelTitle.activeForeground#FFD700
panelTitle.inactiveForeground#5A4A20
progressBar.background#FFD700
quickInput.background#14100A
quickInputList.focusBackground#B8960C55
scrollbar.shadow#000000
scrollbarSlider.activeBackground#8B000088
scrollbarSlider.background#3A2E1055
scrollbarSlider.hoverBackground#FFD70044
selection.background#B8960C55
settings.headerForeground#FFD700
settings.modifiedItemIndicator#8B0000
sideBar.background#100D07
sideBar.border#1C1608
sideBar.foreground#C9A840
sideBarSectionHeader.background#0D0A05
sideBarSectionHeader.border#8B000033
sideBarSectionHeader.foreground#FFD700
sideBarTitle.foreground#FFD700
statusBar.background#7B0000
statusBar.border#FFD70044
statusBar.debuggingBackground#B8960C
statusBar.debuggingForeground#0D0A05
statusBar.foreground#FFD700
statusBarItem.activeBackground#8B000066
statusBarItem.hoverBackground#8B000033
statusBarItem.remoteBackground#7B0000
statusBarItem.remoteForeground#FFD700
tab.activeBackground#14100A
tab.activeBorder#8B0000
tab.activeBorderTop#FFD700
tab.activeForeground#FFD700
tab.border#1C1608
tab.hoverBackground#1C1608
tab.hoverForeground#C9A840
tab.inactiveBackground#0D0A05
tab.inactiveForeground#5A4A20
terminal.ansiBlack#0D0A05
terminal.ansiBlue#5577AA
terminal.ansiBrightBlack#5A4A20
terminal.ansiBrightBlue#88AADD
terminal.ansiBrightCyan#88AACC
terminal.ansiBrightGreen#88BB00
terminal.ansiBrightMagenta#BB77BB
terminal.ansiBrightRed#FF4444
terminal.ansiBrightWhite#F0E0C0
terminal.ansiBrightYellow#FFD700
terminal.ansiCyan#557799
terminal.ansiGreen#557A00
terminal.ansiMagenta#884488
terminal.ansiRed#CC0000
terminal.ansiWhite#C9A840
terminal.ansiYellow#B8960C
terminal.background#0D0A05
terminal.border#1C1608
terminal.foreground#F0E0C0
terminal.selectionBackground#B8960C44
terminalCursor.foreground#FFD700
titleBar.activeBackground#0D0A05
titleBar.activeForeground#FFD700
titleBar.border#1C1608
titleBar.inactiveBackground#0A0805
titleBar.inactiveForeground#5A4A20
window.activeBorder#8B0000
window.inactiveBorder#1C1608

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#F0E0C0	—
comment, punctuation.definition.comment	#5A4825	italic
keyword, keyword.control, storage.type, storage.modifier	#CC0000	bold
keyword.operator	#D4A850	—
string, string.quoted, string.template	#FFD700	—
constant.character.escape	#88BB00	—
punctuation.definition.template-expression	#E6B800	—
constant.numeric	#E6B800	—
constant, constant.language	#F5E6B0	bold
constant.language.boolean, constant.language.null	#FFEA80	italic
entity.name.function, support.function	#FFEA80	—
variable.parameter	#C9A840	italic
storage.type.function.arrow	#CC0000	—
entity.name.class, entity.name.type.class, support.class	#FFD700	bold
entity.name.type, support.type, storage.type.primitive	#DAA520	—
entity.name.type.interface, entity.name.type.enum	#BB9900	italic
variable, variable.other, variable.other.readwrite	#88BB00	—
variable.other.property, support.variable.property	#C9A840	—
support.type.property-name	#FFEA80	—
variable.language.this, variable.language.self	#CC0000	italic
keyword.control.import, keyword.control.export, keyword.control.from	#CC0000	bold
punctuation.separator, punctuation.terminator	#7A6530	—
punctuation.definition.block, meta.brace	#9A8050	—
meta.decorator, entity.name.function.decorator	#BB77BB	italic
entity.name.tag	#CC0000	—
entity.other.attribute-name	#C9A840	italic
support.class.component, entity.name.tag.tsx	#FFD700	bold
entity.name.tag.css, entity.other.attribute-name.class.css	#CC0000	—
support.type.property-name.css	#C9A840	—
meta.property-value.css	#FFD700	—
support.type.property-name.json	#FFEA80	—
markup.heading	#FFD700	bold
markup.bold	#F5E6B0	bold
markup.underline.link	#88AACC	—
invalid, invalid.illegal	#FF0000	bold underline

VS Code preview

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

Game of Thrones - The Seven Kingdoms — GOT: House Martell (Dorne)

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.

_comment=== HOUSE MARTELL: Unbowed, Unbent, Unbroken ===
_comment2=== Palette: Desert night, burnt orange, sand gold, terracotta ===
activityBar.background#0D0A08
activityBar.border#1C1610
activityBar.foreground#FF8C00
activityBar.inactiveForeground#4A3828
activityBarBadge.background#CC3333
activityBarBadge.foreground#FFD700
badge.background#CC3333
badge.foreground#FFD700
button.background#D2691E
button.foreground#0D0A08
button.hoverBackground#FF8C00
editor.background#14100C
editor.findMatchBackground#FF8C0055
editor.findMatchHighlightBackground#FF8C0033
editor.foreground#E0D0B0
editor.hoverHighlightBackground#D2691E22
editor.lineHighlightBackground#1C1610
editor.lineHighlightBorder#2A2018
editor.selectionBackground#D2691E40
editor.wordHighlightBackground#FF8C0022
editorBracketHighlight.foreground1#FF8C00
editorBracketHighlight.foreground2#D2691E
editorBracketHighlight.foreground3#F4A460
editorBracketHighlight.foreground4#CD853F
editorBracketHighlight.foreground5#DEB887
editorBracketHighlight.foreground6#FFD700
editorBracketHighlight.unexpectedBracket.foreground#FF0000
editorBracketMatch.background#FF8C0033
editorBracketMatch.border#FF8C00AA
editorCodeLens.foreground#6A5030
editorCursor.foreground#FF8C00
editorGroupHeader.tabsBackground#0D0A08
editorGutter.addedBackground#7AAA3A
editorGutter.background#14100C
editorGutter.deletedBackground#CC3333
editorGutter.modifiedBackground#FF8C00
editorIndentGuide.activeBackground#FF8C0055
editorIndentGuide.background#2A2018
editorLineNumber.activeForeground#FF8C00
editorLineNumber.foreground#3A2A18
editorLink.activeForeground#FF8C00
editorSuggestWidget.highlightForeground#FF8C00
editorWhitespace.foreground#2A2018
editorWidget.background#14100C
editorWidget.border#3A2A18
focusBorder#FF8C0088
gitDecoration.addedResourceForeground#7AAA3A
gitDecoration.deletedResourceForeground#CC3333
gitDecoration.modifiedResourceForeground#FF8C00
icon.foreground#FF8C00
input.background#100D0A
input.border#3A2A18
input.foreground#E0D0B0
list.activeSelectionBackground#D2691E44
list.activeSelectionForeground#FF8C00
list.highlightForeground#FF8C00
list.hoverBackground#1C1610
list.inactiveSelectionBackground#1C1610
minimap.background#0D0A08
notifications.background#14100C
panel.background#0D0A08
panel.border#1C1610
panelTitle.activeForeground#FF8C00
panelTitle.inactiveForeground#4A3828
progressBar.background#D2691E
quickInput.background#14100C
quickInputList.focusBackground#D2691E44
settings.headerForeground#FF8C00
sideBar.background#100D0A
sideBar.border#1C1610
sideBar.foreground#B09060
sideBarSectionHeader.background#0D0A08
sideBarSectionHeader.foreground#FF8C00
sideBarTitle.foreground#FF8C00
statusBar.background#0D0A08
statusBar.border#D2691E44
statusBar.debuggingBackground#CC3333
statusBar.debuggingForeground#FFD700
statusBar.foreground#FF8C00
tab.activeBackground#14100C
tab.activeBorderTop#FF8C00
tab.activeForeground#FF8C00
tab.border#1C1610
tab.hoverBackground#1C1610
tab.inactiveBackground#0D0A08
tab.inactiveForeground#4A3828
terminal.ansiBlack#0D0A08
terminal.ansiBlue#5A7A9A
terminal.ansiBrightBlack#4A3828
terminal.ansiBrightBlue#8AAABB
terminal.ansiBrightCyan#8ABAAA
terminal.ansiBrightGreen#AADA5A
terminal.ansiBrightMagenta#CC8888
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#E0D0B0
terminal.ansiBrightYellow#FF8C00
terminal.ansiCyan#5A8A7A
terminal.ansiGreen#7AAA3A
terminal.ansiMagenta#9A5A5A
terminal.ansiRed#CC3333
terminal.ansiWhite#B09060
terminal.ansiYellow#D2691E
terminal.background#0D0A08
terminal.foreground#E0D0B0
terminalCursor.foreground#FF8C00
titleBar.activeBackground#0D0A08
titleBar.activeForeground#FF8C00
titleBar.border#1C1610
titleBar.inactiveBackground#0A0806
titleBar.inactiveForeground#4A3828
window.activeBorder#D2691E
window.inactiveBorder#1C1610

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#E0D0B0	—
comment, punctuation.definition.comment	#5A4830	italic
keyword, keyword.control, storage.type, storage.modifier	#CC3333	bold
keyword.operator	#B09060	—
string, string.quoted	#F4A460	—
constant.character.escape	#7AAA3A	—
constant.numeric	#DEB887	—
constant, constant.language	#F0E0C0	bold
constant.language.boolean, constant.language.null	#CD853F	italic
entity.name.function, support.function	#FF8C00	—
variable.parameter	#B09060	italic
entity.name.class, support.class	#FF8C00	bold
entity.name.type, support.type	#D2691E	—
variable, variable.other	#8AAA6A	—
variable.other.property	#B09060	—
support.type.property-name	#F4A460	—
variable.language.this	#CC3333	italic
keyword.control.import, keyword.control.export	#CC3333	bold
punctuation.separator	#6A5030	—
entity.name.tag	#CC3333	—
entity.other.attribute-name	#F4A460	italic
support.type.property-name.json	#FF8C00	—
markup.heading	#FF8C00	bold
invalid	#FF0000	bold underline

VS Code preview

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

Game of Thrones - The Seven Kingdoms — GOT: House Stark (Dark)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

_comment=== HOUSE STARK: Winter Is Coming ===
_comment2=== Palette: Deep blue-grey, ice blue accents, frost white, steel grey ===
activityBar.background#080C12
activityBar.border#151D28
activityBar.foreground#79B8FF
activityBar.inactiveForeground#3A4F62
activityBarBadge.background#2E5C80
activityBarBadge.foreground#E8F0FE
badge.background#2E5C80
badge.foreground#E8F0FE
breadcrumb.activeSelectionForeground#CBD5E1
breadcrumb.focusForeground#79B8FF
breadcrumb.foreground#5A6F82
button.background#2E5C80
button.foreground#E8F0FE
button.hoverBackground#3D7BAA
button.secondaryBackground#151D28
button.secondaryForeground#8096AB
debugToolBar.background#080C12
descriptionForeground#5A6F82
diffEditor.insertedTextBackground#3FB95022
diffEditor.removedTextBackground#FF7B7233
editor.background#0E1319
editor.findMatchBackground#79B8FF55
editor.findMatchHighlightBackground#79B8FF33
editor.findRangeHighlightBackground#79B8FF11
editor.foreground#CBD5E1
editor.hoverHighlightBackground#2E5C8033
editor.lineHighlightBackground#151D28
editor.lineHighlightBorder#1E2A38
editor.rangeHighlightBackground#2E5C8022
editor.selectionBackground#2E5C8050
editor.selectionHighlightBackground#2E5C8030
editor.wordHighlightBackground#79B8FF22
editor.wordHighlightStrongBackground#79B8FF44
editorBracketHighlight.foreground1#79B8FF
editorBracketHighlight.foreground2#56D364
editorBracketHighlight.foreground3#FF7B72
editorBracketHighlight.foreground4#D2A8FF
editorBracketHighlight.foreground5#E3B341
editorBracketHighlight.foreground6#39C5CF
editorBracketHighlight.unexpectedBracket.foreground#FF0000
editorBracketMatch.background#79B8FF33
editorBracketMatch.border#79B8FFAA
editorCodeLens.foreground#5A6F82
editorCursor.background#000000
editorCursor.foreground#79B8FF
editorGroupHeader.tabsBackground#080C12
editorGutter.addedBackground#3FB950
editorGutter.background#0E1319
editorGutter.deletedBackground#FF7B72
editorGutter.modifiedBackground#D29922
editorIndentGuide.activeBackground#79B8FF55
editorIndentGuide.background#1E2A38
editorInlayHint.background#151D28
editorInlayHint.foreground#5A6F82
editorLineNumber.activeForeground#79B8FF
editorLineNumber.foreground#2E3D4F
editorLink.activeForeground#79B8FF
editorRuler.foreground#1E2A38
editorSuggestWidget.background#0E1319
editorSuggestWidget.border#1E2A38
editorSuggestWidget.highlightForeground#79B8FF
editorSuggestWidget.selectedBackground#2E5C8066
editorWhitespace.foreground#1E2A38
editorWidget.background#0E1319
editorWidget.border#2E3D4F
editorWidget.foreground#CBD5E1
errorForeground#FF7B72
focusBorder#79B8FF88
gitDecoration.addedResourceForeground#3FB950
gitDecoration.conflictingResourceForeground#E3B341
gitDecoration.deletedResourceForeground#FF7B72
gitDecoration.ignoredResourceForeground#2E3D4F
gitDecoration.modifiedResourceForeground#D29922
gitDecoration.untrackedResourceForeground#3FB950
icon.foreground#79B8FF
input.background#0B0F15
input.border#2E3D4F
input.foreground#CBD5E1
input.placeholderForeground#3A4F62
inputOption.activeBackground#2E5C8066
inputOption.activeBorder#79B8FF
list.activeSelectionBackground#2E5C8055
list.activeSelectionForeground#79B8FF
list.errorForeground#FF7B72
list.focusBackground#2E5C8044
list.focusForeground#79B8FF
list.highlightForeground#79B8FF
list.hoverBackground#151D28
list.hoverForeground#CBD5E1
list.inactiveSelectionBackground#151D28
list.inactiveSelectionForeground#8096AB
list.warningForeground#E3B341
menu.background#0E1319
menu.foreground#CBD5E1
menu.selectionBackground#2E5C8066
menu.selectionForeground#79B8FF
menu.separatorBackground#1E2A38
minimap.background#080C12
minimap.findMatchHighlight#79B8FFAA
notificationCenterHeader.background#080C12
notificationCenterHeader.foreground#79B8FF
notifications.background#0E1319
notifications.border#151D28
notifications.foreground#CBD5E1
panel.background#080C12
panel.border#151D28
panelTitle.activeBorder#79B8FF
panelTitle.activeForeground#79B8FF
panelTitle.inactiveForeground#3A4F62
peekView.border#2E5C80
peekViewEditor.background#0B0F15
peekViewResult.background#080C12
peekViewTitle.background#0E1319
progressBar.background#2E5C80
quickInput.background#0E1319
quickInput.foreground#CBD5E1
quickInputList.focusBackground#2E5C8066
scrollbar.shadow#000000
scrollbarSlider.activeBackground#2E5C8088
scrollbarSlider.background#2E3D4F55
scrollbarSlider.hoverBackground#79B8FF44
selection.background#2E5C8055
settings.headerForeground#79B8FF
settings.modifiedItemIndicator#D29922
sideBar.background#0B0F15
sideBar.border#151D28
sideBar.foreground#8096AB
sideBarSectionHeader.background#080C12
sideBarSectionHeader.border#2E5C8033
sideBarSectionHeader.foreground#79B8FF
sideBarTitle.foreground#79B8FF
statusBar.background#060A10
statusBar.border#2E5C8044
statusBar.debuggingBackground#2E5C80
statusBar.debuggingForeground#E8F0FE
statusBar.foreground#79B8FF
statusBarItem.activeBackground#2E5C8066
statusBarItem.hoverBackground#2E5C8033
statusBarItem.remoteBackground#2E5C80
statusBarItem.remoteForeground#79B8FF
tab.activeBackground#0E1319
tab.activeBorder#2E5C80
tab.activeBorderTop#79B8FF
tab.activeForeground#79B8FF
tab.border#151D28
tab.hoverBackground#151D28
tab.hoverForeground#8096AB
tab.inactiveBackground#080C12
tab.inactiveForeground#3A4F62
terminal.ansiBlack#080C12
terminal.ansiBlue#388BFD
terminal.ansiBrightBlack#3A4F62
terminal.ansiBrightBlue#79B8FF
terminal.ansiBrightCyan#56D4DD
terminal.ansiBrightGreen#56D364
terminal.ansiBrightMagenta#D2A8FF
terminal.ansiBrightRed#FFA198
terminal.ansiBrightWhite#CBD5E1
terminal.ansiBrightYellow#E3B341
terminal.ansiCyan#39C5CF
terminal.ansiGreen#3FB950
terminal.ansiMagenta#BC8CFF
terminal.ansiRed#FF7B72
terminal.ansiWhite#8096AB
terminal.ansiYellow#D29922
terminal.background#080C12
terminal.border#151D28
terminal.foreground#CBD5E1
terminal.selectionBackground#2E5C8044
terminalCursor.foreground#79B8FF
testing.iconErrored#E3B341
testing.iconFailed#FF7B72
testing.iconPassed#3FB950
titleBar.activeBackground#080C12
titleBar.activeForeground#79B8FF
titleBar.border#151D28
titleBar.inactiveBackground#060A10
titleBar.inactiveForeground#3A4F62
welcomePage.background#080C12
welcomePage.tileBackground#0E1319
welcomePage.tileHoverBackground#151D28
window.activeBorder#2E5C80
window.inactiveBorder#151D28

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#CBD5E1	—
comment, punctuation.definition.comment	#3F5468	italic
keyword, keyword.control, storage.type, storage.modifier	#FF7B72	bold
keyword.operator, keyword.operator.logical	#8096AB	—
string, string.quoted, string.template	#A5D6FF	—
constant.character.escape	#56D364	—
punctuation.definition.template-expression	#E3B341	—
constant.numeric	#79C0FF	—
constant, constant.language	#E8F0FE	bold
constant.language.boolean, constant.language.null	#79C0FF	italic
entity.name.function, support.function, meta.function-call entity.name.function	#79B8FF	—
variable.parameter	#E3B341	italic
storage.type.function.arrow	#FF7B72	—
entity.name.class, entity.name.type.class, support.class	#E8F0FE	bold
entity.name.type, support.type, storage.type.primitive	#D2A8FF	—
entity.name.type.interface, entity.name.type.enum	#BC8CFF	italic
variable, variable.other, variable.other.readwrite	#56D364	—
variable.other.property, support.variable.property	#8096AB	—
meta.objectliteral string.key, support.type.property-name	#A5D6FF	—
variable.language.this, variable.language.self	#FF7B72	italic
keyword.control.import, keyword.control.export, keyword.control.from	#FF7B72	bold
punctuation.separator, punctuation.terminator, punctuation.accessor	#5A6F82	—
punctuation.definition.block, meta.brace, punctuation.bracket	#6B8098	—
meta.decorator, entity.name.function.decorator	#BC8CFF	italic
entity.name.tag	#79B8FF	—
entity.other.attribute-name	#E3B341	italic
support.class.component, entity.name.tag.tsx	#E8F0FE	bold
entity.name.tag.css, entity.other.attribute-name.class.css	#79B8FF	—
support.type.property-name.css	#8096AB	—
meta.property-value.css, support.constant.property-value.css	#A5D6FF	—
entity.other.attribute-name.id.css	#E3B341	—
support.type.property-name.json	#79B8FF	—
markup.heading, entity.name.section.markdown	#79B8FF	bold
markup.bold	#E8F0FE	bold
markup.italic	#CBD5E1	italic
markup.raw.inline, markup.fenced_code	#A5D6FF	—
markup.underline.link	#39C5CF	—
invalid, invalid.illegal	#FF0000	bold underline
invalid.deprecated	#E3B341	underline

VS Code preview

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

Game of Thrones - The Seven Kingdoms — GOT: House Targaryen (Dark Fire)

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.

_comment=== HOUSE TARGARYEN: Fire and Blood ===
_comment2=== Palette: Deep volcanic black, dragon fire orange, dragonscale red, ember glow ===
activityBar.background#0A0404
activityBar.border#1A0E0A
activityBar.foreground#FF4500
activityBar.inactiveForeground#5A2020
activityBarBadge.background#8B0000
activityBarBadge.foreground#FF8C00
badge.background#8B0000
badge.foreground#FF4500
button.background#8B0000
button.foreground#FF8C00
button.hoverBackground#A80000
button.secondaryBackground#1A0E0A
button.secondaryForeground#C07060
descriptionForeground#6A4030
diffEditor.insertedTextBackground#5FD70022
diffEditor.removedTextBackground#8B000033
editor.background#110808
editor.findMatchBackground#FF450055
editor.findMatchHighlightBackground#FF450033
editor.foreground#F0C8B8
editor.hoverHighlightBackground#FF450022
editor.lineHighlightBackground#1A0E0A
editor.lineHighlightBorder#2A1510
editor.selectionBackground#8B000050
editor.selectionHighlightBackground#8B000030
editor.wordHighlightBackground#FF450022
editor.wordHighlightStrongBackground#FF450044
editorBracketHighlight.foreground1#FF4500
editorBracketHighlight.foreground2#FF8C00
editorBracketHighlight.foreground3#5FD700
editorBracketHighlight.foreground4#CC0099
editorBracketHighlight.foreground5#FFA500
editorBracketHighlight.foreground6#4D99B0
editorBracketHighlight.unexpectedBracket.foreground#FF0000
editorBracketMatch.background#FF450033
editorBracketMatch.border#FF4500AA
editorCodeLens.foreground#6A4030
editorCursor.background#000000
editorCursor.foreground#FF4500
editorGroupHeader.tabsBackground#0A0404
editorGutter.addedBackground#5FD700
editorGutter.background#110808
editorGutter.deletedBackground#8B0000
editorGutter.modifiedBackground#FF8C00
editorIndentGuide.activeBackground#FF450055
editorIndentGuide.background#2A1510
editorInlayHint.background#1A0E0A
editorInlayHint.foreground#6A4030
editorLineNumber.activeForeground#FF4500
editorLineNumber.foreground#3A2018
editorLink.activeForeground#FF6347
editorRuler.foreground#2A1510
editorSuggestWidget.background#110808
editorSuggestWidget.highlightForeground#FF4500
editorSuggestWidget.selectedBackground#8B000066
editorWhitespace.foreground#2A1510
editorWidget.background#110808
editorWidget.border#3A2018
editorWidget.foreground#F0C8B8
errorForeground#FF0000
focusBorder#8B000088
gitDecoration.addedResourceForeground#5FD700
gitDecoration.conflictingResourceForeground#FF8C00
gitDecoration.deletedResourceForeground#FF4500
gitDecoration.ignoredResourceForeground#3A2018
gitDecoration.modifiedResourceForeground#FF8C00
gitDecoration.untrackedResourceForeground#5FD700
icon.foreground#FF4500
input.background#0D0606
input.border#3A2018
input.foreground#F0C8B8
input.placeholderForeground#5A2020
inputOption.activeBackground#8B000066
inputOption.activeBorder#FF4500
list.activeSelectionBackground#8B000055
list.activeSelectionForeground#FF4500
list.errorForeground#FF0000
list.focusBackground#8B000044
list.focusForeground#FF4500
list.highlightForeground#FF4500
list.hoverBackground#1A0E0A
list.hoverForeground#F0C8B8
list.inactiveSelectionBackground#1A0E0A
list.inactiveSelectionForeground#C07060
list.warningForeground#FF8C00
menu.background#110808
menu.foreground#F0C8B8
menu.selectionBackground#8B000066
menu.selectionForeground#FF4500
menu.separatorBackground#2A1510
minimap.background#0A0404
notificationCenterHeader.background#0A0404
notificationCenterHeader.foreground#FF4500
notifications.background#110808
notifications.border#1A0E0A
notifications.foreground#F0C8B8
panel.background#0A0404
panel.border#1A0E0A
panelTitle.activeBorder#FF4500
panelTitle.activeForeground#FF4500
panelTitle.inactiveForeground#5A2020
progressBar.background#8B0000
quickInput.background#110808
quickInputList.focusBackground#8B000066
scrollbar.shadow#000000
scrollbarSlider.activeBackground#8B000088
scrollbarSlider.background#3A201855
scrollbarSlider.hoverBackground#FF450044
selection.background#8B000055
settings.headerForeground#FF4500
settings.modifiedItemIndicator#FF8C00
sideBar.background#0D0606
sideBar.border#1A0E0A
sideBar.foreground#C07060
sideBarSectionHeader.background#0A0404
sideBarSectionHeader.border#8B000033
sideBarSectionHeader.foreground#FF4500
sideBarTitle.foreground#FF4500
statusBar.background#8B0000
statusBar.border#FF450044
statusBar.debuggingBackground#FF4500
statusBar.debuggingForeground#0A0404
statusBar.foreground#FF4500
statusBarItem.activeBackground#8B000066
statusBarItem.hoverBackground#8B000033
statusBarItem.remoteBackground#8B0000
statusBarItem.remoteForeground#FF4500
tab.activeBackground#110808
tab.activeBorder#8B0000
tab.activeBorderTop#FF4500
tab.activeForeground#FF4500
tab.border#1A0E0A
tab.hoverBackground#1A0E0A
tab.hoverForeground#C07060
tab.inactiveBackground#0A0404
tab.inactiveForeground#5A2020
terminal.ansiBlack#0A0404
terminal.ansiBlue#1A3A6B
terminal.ansiBrightBlack#5A2020
terminal.ansiBrightBlue#4D7FCC
terminal.ansiBrightCyan#4D99B0
terminal.ansiBrightGreen#5FD700
terminal.ansiBrightMagenta#CC0099
terminal.ansiBrightRed#FF4500
terminal.ansiBrightWhite#F0C8B8
terminal.ansiBrightYellow#FF8C00
terminal.ansiCyan#1A4A5A
terminal.ansiGreen#3D6B00
terminal.ansiMagenta#6B0050
terminal.ansiRed#8B0000
terminal.ansiWhite#C07060
terminal.ansiYellow#B8640C
terminal.background#0A0404
terminal.border#1A0E0A
terminal.foreground#F0C8B8
terminal.selectionBackground#8B000044
terminalCursor.foreground#FF4500
titleBar.activeBackground#0A0404
titleBar.activeForeground#FF4500
titleBar.border#1A0E0A
titleBar.inactiveBackground#080303
titleBar.inactiveForeground#5A2020
window.activeBorder#8B0000
window.inactiveBorder#1A0E0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#F0C8B8	—
comment, punctuation.definition.comment	#4A2828	italic
keyword, keyword.control, storage.type, storage.modifier	#FF4500	bold
keyword.operator	#CC6633	—
string, string.quoted, string.template	#FF8C00	—
constant.character.escape	#5FD700	—
punctuation.definition.template-expression	#FFA500	—
constant.numeric	#FFA500	—
constant, constant.language	#F0D0C0	bold
constant.language.boolean, constant.language.null	#FF6347	italic
entity.name.function, support.function	#FF6347	—
variable.parameter	#C07060	italic
storage.type.function.arrow	#FF4500	—
entity.name.class, entity.name.type.class, support.class	#FF4500	bold
entity.name.type, support.type, storage.type.primitive	#E03311	—
entity.name.type.interface, entity.name.type.enum	#CC0099	italic
variable, variable.other, variable.other.readwrite	#CC5544	—
variable.other.property, support.variable.property	#B08070	—
support.type.property-name	#FF6347	—
variable.language.this, variable.language.self	#FF4500	italic
keyword.control.import, keyword.control.export, keyword.control.from	#FF4500	bold
punctuation.separator, punctuation.terminator	#6A4030	—
punctuation.definition.block, meta.brace	#8A5540	—
meta.decorator, entity.name.function.decorator	#CC0099	italic
entity.name.tag	#FF4500	—
entity.other.attribute-name	#CC6633	italic
support.class.component, entity.name.tag.tsx	#FF4500	bold
entity.name.tag.css, entity.other.attribute-name.class.css	#FF4500	—
support.type.property-name.css	#B08070	—
meta.property-value.css	#FF8C00	—
support.type.property-name.json	#FF6347	—
markup.heading	#FF4500	bold
markup.bold	#F0D0C0	bold
markup.underline.link	#4D99B0	—
invalid, invalid.illegal	#FF0000	bold underline