Lumina Themes Suite

Name: Lumina Themes Suite
Author: Lumina IDE

Publisher: Lumina IDEThemes in package: 4

Official color themes for Lumina IDE — includes Lumina Dark, Lumina Cyberpunk, Lumina Yellow, and Lumina Light.

Open in VS Code GitHub

Color themes

VS Code preview

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

Lumina Themes Suite — Lumina Cyberpunk

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.

actionBar.toggledBackground#ff2d7818
activityBar.activeBackground#ff2d7810
activityBar.activeBorder#ff2d78
activityBar.background#0d0015
activityBar.border#1a0028
activityBar.foreground#ff2d78
activityBar.inactiveForeground#3d0055
activityBarBadge.background#ffe600
activityBarBadge.foreground#0d0015
activityBarTop.activeBorder#ff2d78
activityBarTop.background#0d0015
activityBarTop.foreground#ff2d78
activityBarTop.inactiveForeground#3d0055
badge.background#ff2d78
badge.foreground#0d0015
breadcrumb.activeSelectionForeground#ff2d78
breadcrumb.background#0d0015
breadcrumb.focusForeground#cc88ff
breadcrumb.foreground#3d0055
breadcrumbPicker.background#1a0028
button.background#ff2d7820
button.border#ff2d7840
button.foreground#ff2d78
button.hoverBackground#ff2d7830
button.secondaryBackground#ffe60020
button.secondaryForeground#ffe600
button.secondaryHoverBackground#ffe60030
checkbox.background#1a0028
checkbox.border#2a0040
checkbox.foreground#f0e6ff
descriptionForeground#9966bb
diffEditor.border#2a0040
diffEditor.insertedLineBackground#00fff908
diffEditor.insertedTextBackground#00fff910
diffEditor.removedLineBackground#ff2d7808
diffEditor.removedTextBackground#ff2d7810
disabledForeground#3d0055
dropdown.background#1a0028
dropdown.border#2a0040
dropdown.foreground#f0e6ff
editor.background#0d0015
editor.findMatchBackground#ffe60050
editor.findMatchHighlightBackground#ffe60025
editor.foreground#f0e6ff
editor.hoverHighlightBackground#ff2d7818
editor.inactiveSelectionBackground#ff2d7818
editor.lineHighlightBackground#1a0028
editor.lineHighlightBorder#220033
editor.selectionBackground#ff2d7830
editor.selectionHighlightBackground#ff2d7818
editor.wordHighlightBackground#ffe60018
editor.wordHighlightStrongBackground#ffe60030
editorBracketMatch.background#00fff920
editorBracketMatch.border#00fff970
editorCodeLens.foreground#3d0055
editorCursor.background#0d0015
editorCursor.foreground#ff2d78
editorError.foreground#ff2d78
editorGroup.border#220033
editorGroup.dropBackground#ff2d7810
editorGroupHeader.tabsBackground#0d0015
editorGroupHeader.tabsBorder#0d0015
editorGutter.addedBackground#00fff960
editorGutter.background#0d0015
editorGutter.deletedBackground#ff2d7860
editorGutter.modifiedBackground#ffe60060
editorHint.foreground#bf00ff
editorIndentGuide.activeBackground1#ff2d7850
editorIndentGuide.background1#2a0040
editorInfo.foreground#00fff9
editorLineNumber.activeForeground#ff2d7890
editorLineNumber.foreground#3d0055
editorOverviewRuler.border#1a0028
editorOverviewRuler.errorForeground#ff2d78
editorOverviewRuler.infoForeground#00fff9
editorOverviewRuler.warningForeground#ffe600
editorRuler.foreground#2a0040
editorWarning.foreground#ffe600
editorWhitespace.foreground#2a0040
errorForeground#ff2d78
focusBorder#ff2d7840
foreground#f0e6ff
gitDecoration.addedResourceForeground#00fff9
gitDecoration.conflictingResourceForeground#ffe600
gitDecoration.deletedResourceForeground#ff2d78
gitDecoration.ignoredResourceForeground#2a0040
gitDecoration.modifiedResourceForeground#ffe600
gitDecoration.untrackedResourceForeground#bf00ff
icon.foreground#9966bb
input.background#1a0028
input.border#2a0040
input.foreground#f0e6ff
input.placeholderForeground#3d0055
inputOption.activeBackground#ff2d7818
inputOption.activeBorder#ff2d7860
inputOption.activeForeground#ff2d78
inputValidation.errorBackground#ff2d7818
inputValidation.errorBorder#ff2d78
inputValidation.infoBackground#00fff918
inputValidation.infoBorder#00fff9
inputValidation.warningBackground#ffe60018
inputValidation.warningBorder#ffe600
list.activeSelectionBackground#220033
list.activeSelectionForeground#ff2d78
list.activeSelectionIconForeground#ff2d78
list.filterMatchBackground#ff2d7820
list.focusBackground#220033
list.focusForeground#ff2d78
list.highlightForeground#ff2d78
list.hoverBackground#1a0028
list.hoverForeground#cc88ff
list.inactiveSelectionBackground#1a0028
list.inactiveSelectionForeground#cc88ff
listFilterWidget.background#1a0028
listFilterWidget.noMatchesOutline#ff2d78
listFilterWidget.outline#ff2d7840
menu.background#1a0028
menu.border#2a0040
menu.foreground#f0e6ff
menu.selectionBackground#220033
menu.selectionForeground#ff2d78
menu.separatorBackground#2a0040
menubar.selectionBackground#ff2d7810
menubar.selectionBorder#ff2d7830
menubar.selectionForeground#ff2d78
notificationLink.foreground#00fff9
notifications.background#1a0028
notifications.border#2a0040
notifications.foreground#f0e6ff
notificationsErrorIcon.foreground#ff2d78
notificationsInfoIcon.foreground#00fff9
notificationsWarningIcon.foreground#ffe600
panel.background#0d0015
panel.border#1a0028
panel.dropBorder#ff2d78
panelSectionHeader.background#0d0015
panelTitle.activeBorder#ff2d78
panelTitle.activeForeground#f0e6ff
panelTitle.inactiveForeground#3d0055
pickerGroup.border#2a0040
pickerGroup.foreground#ff2d7860
ports.iconRunningProcessForeground#00fff9
quickInput.background#1a0028
quickInput.foreground#f0e6ff
quickInputList.focusBackground#220033
quickInputList.focusForeground#ff2d78
quickInputList.focusIconForeground#ff2d78
quickInputTitle.background#0d0015
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#ff2d7850
scrollbarSlider.background#2a004060
scrollbarSlider.hoverBackground#ff2d7830
selection.background#ff2d7828
settings.headerForeground#ff2d78
settings.modifiedItemIndicator#ffe600
sideBar.background#0d0015
sideBar.border#1a0028
sideBar.foreground#cc88ff
sideBarSectionHeader.background#0d0015
sideBarSectionHeader.border#1a0028
sideBarSectionHeader.foreground#3d0055
sideBarTitle.foreground#ff2d78
statusBar.background#0d0015
statusBar.border#1a0028
statusBar.debuggingBackground#ff2d78
statusBar.debuggingForeground#0d0015
statusBar.foreground#3d0055
statusBar.noFolderBackground#0d0015
statusBarItem.activeBackground#ff2d7820
statusBarItem.errorBackground#ff2d7820
statusBarItem.errorForeground#ff2d78
statusBarItem.hoverBackground#ff2d7810
statusBarItem.prominentBackground#ffe60030
statusBarItem.prominentForeground#ffe600
statusBarItem.remoteBackground#ff2d7820
statusBarItem.remoteForeground#ff2d78
statusBarItem.warningBackground#ffe60020
statusBarItem.warningForeground#ffe600
tab.activeBackground#1a0028
tab.activeBorder#1a0028
tab.activeBorderTop#ff2d78
tab.activeForeground#f0e6ff
tab.border#0d0015
tab.hoverBackground#1a0028
tab.hoverForeground#ff2d78
tab.inactiveBackground#0d0015
tab.inactiveForeground#3d0055
tab.lastPinnedBorder#2a0040
tab.selectedBackground#1a0028
tab.selectedForeground#f0e6ff
tab.unfocusedActiveBackground#1a0028
tab.unfocusedActiveForeground#9966bb
tab.unfocusedInactiveForeground#2a0040
terminal.ansiBlack#1a0028
terminal.ansiBlue#bf00ff
terminal.ansiBrightBlack#3d0055
terminal.ansiBrightBlue#cc66ff
terminal.ansiBrightCyan#66fffd
terminal.ansiBrightGreen#66fffc
terminal.ansiBrightMagenta#ff66aa
terminal.ansiBrightRed#ff6699
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffee55
terminal.ansiCyan#00fff9
terminal.ansiGreen#00fff9
terminal.ansiMagenta#ff2d78
terminal.ansiRed#ff2d78
terminal.ansiWhite#f0e6ff
terminal.ansiYellow#ffe600
terminal.background#0d0015
terminal.border#1a0028
terminal.foreground#f0e6ff
terminal.selectionBackground#ff2d7828
terminalCursor.background#0d0015
terminalCursor.foreground#ff2d78
textBlockQuote.background#1a0028
textBlockQuote.border#ff2d7840
textCodeBlock.background#1a0028
textLink.activeForeground#66fffc
textLink.foreground#00fff9
textPreformat.foreground#00fff9
textSeparator.foreground#2a0040
titleBar.activeBackground#0d0015
titleBar.activeForeground#ff2d78
titleBar.border#1a0028
titleBar.inactiveBackground#0d0015
titleBar.inactiveForeground#3d0055
toolbar.activeBackground#ff2d7818
toolbar.hoverBackground#ff2d7810
tree.inactiveIndentGuidesStroke#1a0028
tree.indentGuidesStroke#2a0040
welcomePage.tileBackground#1a0028
welcomePage.tileBorder#2a0040
welcomePage.tileHoverBackground#220033
widget.border#220033
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3d0055	italic
keyword, keyword.control, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.wordlike	#ff2d78	—
storage, storage.type	#ff2d78	—
keyword.operator	#9966bb	—
entity.name.function, support.function	#00fff9	—
entity.name.type, entity.name.class, support.class, support.type, entity.name.namespace	#bf00ff	—
variable, variable.other.readwrite	#f0e6ff	—
variable.parameter	#cc88ff	—
variable.language	#ff2d78	italic
constant.language, variable.other.constant	#ffe600	—
constant.numeric, variable.other.enummember	#ffe600	—
string, meta.embedded.assembly	#ff9de2	—
constant.character.escape, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#00fff9	—
string.regexp	#ffe600	—
entity.name.tag	#ff2d78	—
entity.other.attribute-name	#bf00ff	—
support.type.property-name, support.type.vendored.property-name	#00fff9	—
keyword.other.unit	#ffe600	—
meta.decorator, punctuation.decorator	#ffe600	italic
invalid	#ff2d78	—
punctuation.definition.tag	#3d0055	—
markup.heading	#ff2d78	bold
markup.inline.raw	#00fff9	—
markup.inserted	#00fff9	—
markup.deleted	#ff2d78	—
markup.changed	#ffe600	—

VS Code preview

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

Lumina Themes Suite — Lumina 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.

actionBar.toggledBackground#00c8f018
activityBar.activeBackground#00c8f010
activityBar.activeBorder#00c8f0
activityBar.background#050d1a
activityBar.border#0a1628
activityBar.foreground#00c8f0
activityBar.inactiveForeground#2a4a60
activityBarBadge.background#7b4fff
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#00c8f0
activityBarTop.background#050d1a
activityBarTop.foreground#00c8f0
activityBarTop.inactiveForeground#2a4a60
badge.background#7b4fff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#00c8f0
breadcrumb.background#070f1c
breadcrumb.focusForeground#7ab8cc
breadcrumb.foreground#2a4a60
breadcrumbPicker.background#0a1628
button.background#00c8f020
button.border#00c8f040
button.foreground#00c8f0
button.hoverBackground#00c8f030
button.secondaryBackground#7b4fff20
button.secondaryForeground#7b4fff
button.secondaryHoverBackground#7b4fff30
checkbox.background#0a1628
checkbox.border#1a2d4a
checkbox.foreground#c8dce8
descriptionForeground#5a7a90
diffEditor.border#1a2d4a
diffEditor.insertedLineBackground#00c8f008
diffEditor.insertedTextBackground#00c8f010
diffEditor.removedLineBackground#ff4a6a08
diffEditor.removedTextBackground#ff4a6a10
diffEditorGutter.insertedLineBackground#00c8f020
diffEditorGutter.removedLineBackground#ff4a6a20
disabledForeground#2a4a60
dropdown.background#0a1628
dropdown.border#1a2d4a
dropdown.foreground#c8dce8
editor.background#070f1c
editor.findMatchBackground#00c8f040
editor.findMatchHighlightBackground#00c8f020
editor.foreground#c8dce8
editor.hoverHighlightBackground#00c8f014
editor.inactiveSelectionBackground#00c8f014
editor.lineHighlightBackground#0a1628
editor.lineHighlightBorder#0f1e35
editor.selectionBackground#00c8f028
editor.selectionHighlightBackground#00c8f014
editor.wordHighlightBackground#7b4fff18
editor.wordHighlightStrongBackground#7b4fff28
editorBracketMatch.background#00c8f018
editorBracketMatch.border#00c8f060
editorCodeLens.foreground#2a4a60
editorCursor.background#070f1c
editorCursor.foreground#00c8f0
editorError.foreground#ff4a6a
editorGroup.border#0f1e35
editorGroup.dropBackground#00c8f010
editorGroupHeader.noTabsBackground#050d1a
editorGroupHeader.tabsBackground#050d1a
editorGroupHeader.tabsBorder#050d1a
editorGutter.addedBackground#00c8f060
editorGutter.background#070f1c
editorGutter.deletedBackground#ff4a6a60
editorGutter.modifiedBackground#7b4fff60
editorHint.foreground#7b4fff
editorIndentGuide.activeBackground1#00c8f040
editorIndentGuide.background1#1a2d4a
editorInfo.foreground#00c8f0
editorLineNumber.activeForeground#00c8f080
editorLineNumber.foreground#1e3550
editorOverviewRuler.border#0a1628
editorOverviewRuler.errorForeground#ff4a6a
editorOverviewRuler.infoForeground#00c8f0
editorOverviewRuler.warningForeground#f0a030
editorRuler.foreground#1a2d4a
editorWarning.foreground#f0a030
editorWhitespace.foreground#1a2d4a
errorForeground#ff4a6a
focusBorder#00c8f040
foreground#c8dce8
gitDecoration.addedResourceForeground#00c8a0
gitDecoration.conflictingResourceForeground#f0a030
gitDecoration.deletedResourceForeground#ff4a6a
gitDecoration.ignoredResourceForeground#1e3550
gitDecoration.modifiedResourceForeground#7b4fff
gitDecoration.submoduleResourceForeground#4a90d9
gitDecoration.untrackedResourceForeground#00c8f0
icon.foreground#5a7a90
input.background#0a1628
input.border#1a2d4a
input.foreground#c8dce8
input.placeholderForeground#2a4a60
inputOption.activeBackground#00c8f018
inputOption.activeBorder#00c8f060
inputOption.activeForeground#00c8f0
inputValidation.errorBackground#ff4a6a18
inputValidation.errorBorder#ff4a6a
inputValidation.infoBackground#00c8f018
inputValidation.infoBorder#00c8f0
inputValidation.warningBackground#f0a03018
inputValidation.warningBorder#f0a030
keybindingLabel.background#0a1628
keybindingLabel.border#1a2d4a
keybindingLabel.bottomBorder#1a2d4a
keybindingLabel.foreground#c8dce8
list.activeSelectionBackground#0f1e35
list.activeSelectionForeground#00c8f0
list.activeSelectionIconForeground#00c8f0
list.filterMatchBackground#00c8f020
list.focusBackground#0f1e35
list.focusForeground#00c8f0
list.highlightForeground#00c8f0
list.hoverBackground#0a1628
list.hoverForeground#7ab8cc
list.inactiveSelectionBackground#0a1628
list.inactiveSelectionForeground#7ab8cc
listFilterWidget.background#0a1628
listFilterWidget.noMatchesOutline#ff4a6a
listFilterWidget.outline#00c8f040
menu.background#0a1628
menu.border#1a2d4a
menu.foreground#c8dce8
menu.selectionBackground#0f1e35
menu.selectionForeground#00c8f0
menu.separatorBackground#1a2d4a
menubar.selectionBackground#00c8f010
menubar.selectionBorder#00c8f030
menubar.selectionForeground#00c8f0
notificationLink.foreground#00c8f0
notifications.background#0a1628
notifications.border#1a2d4a
notifications.foreground#c8dce8
notificationsErrorIcon.foreground#ff4a6a
notificationsInfoIcon.foreground#00c8f0
notificationsWarningIcon.foreground#f0a030
panel.background#050d1a
panel.border#0a1628
panel.dropBorder#00c8f0
panelSectionHeader.background#050d1a
panelTitle.activeBorder#00c8f0
panelTitle.activeForeground#c8dce8
panelTitle.inactiveForeground#2a4a60
pickerGroup.border#1a2d4a
pickerGroup.foreground#00c8f060
ports.iconRunningProcessForeground#00c8a0
quickInput.background#0a1628
quickInput.foreground#c8dce8
quickInputList.focusBackground#0f1e35
quickInputList.focusForeground#00c8f0
quickInputList.focusIconForeground#00c8f0
quickInputTitle.background#050d1a
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#00c8f050
scrollbarSlider.background#1a2d4a60
scrollbarSlider.hoverBackground#00c8f030
selection.background#00c8f028
settings.checkboxBackground#0a1628
settings.checkboxBorder#1a2d4a
settings.dropdownBackground#0a1628
settings.dropdownBorder#1a2d4a
settings.headerForeground#00c8f0
settings.modifiedItemIndicator#7b4fff
settings.numberInputBackground#0a1628
settings.numberInputBorder#1a2d4a
settings.textInputBackground#0a1628
settings.textInputBorder#1a2d4a
sideBar.background#050d1a
sideBar.border#0a1628
sideBar.foreground#7ab8cc
sideBarSectionHeader.background#050d1a
sideBarSectionHeader.border#0a1628
sideBarSectionHeader.foreground#2a4a60
sideBarTitle.foreground#00c8f0
statusBar.background#050d1a
statusBar.border#0a1628
statusBar.debuggingBackground#7b4fff
statusBar.debuggingForeground#ffffff
statusBar.foreground#2a4a60
statusBar.noFolderBackground#050d1a
statusBar.noFolderForeground#2a4a60
statusBarItem.activeBackground#00c8f018
statusBarItem.errorBackground#ff4a6a20
statusBarItem.errorForeground#ff4a6a
statusBarItem.hoverBackground#00c8f010
statusBarItem.prominentBackground#7b4fff30
statusBarItem.prominentForeground#7b4fff
statusBarItem.remoteBackground#00c8f020
statusBarItem.remoteForeground#00c8f0
statusBarItem.warningBackground#f0a03020
statusBarItem.warningForeground#f0a030
tab.activeBackground#0a1628
tab.activeBorder#0a1628
tab.activeBorderTop#00c8f0
tab.activeForeground#c8dce8
tab.border#050d1a
tab.hoverBackground#0a1628
tab.hoverForeground#7ab8cc
tab.inactiveBackground#050d1a
tab.inactiveForeground#2a4a60
tab.lastPinnedBorder#1a2d4a
tab.selectedBackground#0a1628
tab.selectedForeground#c8dce8
tab.unfocusedActiveBackground#0a1628
tab.unfocusedActiveForeground#5a7a90
tab.unfocusedInactiveForeground#1e3550
terminal.ansiBlack#0a1628
terminal.ansiBlue#4a90d9
terminal.ansiBrightBlack#2a4a60
terminal.ansiBrightBlue#6ab0f0
terminal.ansiBrightCyan#40d8f8
terminal.ansiBrightGreen#00e8b8
terminal.ansiBrightMagenta#9b6fff
terminal.ansiBrightRed#ff6a8a
terminal.ansiBrightWhite#e8f4f8
terminal.ansiBrightYellow#f8d860
terminal.ansiCyan#00c8f0
terminal.ansiGreen#00c8a0
terminal.ansiMagenta#7b4fff
terminal.ansiRed#ff4a6a
terminal.ansiWhite#c8dce8
terminal.ansiYellow#f0c030
terminal.background#050d1a
terminal.border#0a1628
terminal.foreground#c8dce8
terminal.inactiveSelectionBackground#00c8f014
terminal.selectionBackground#00c8f028
terminalCursor.background#050d1a
terminalCursor.foreground#00c8f0
textBlockQuote.background#0a1628
textBlockQuote.border#00c8f040
textCodeBlock.background#0a1628
textLink.activeForeground#40d8f8
textLink.foreground#00c8f0
textPreformat.foreground#00c8f0
textSeparator.foreground#1a2d4a
titleBar.activeBackground#050d1a
titleBar.activeForeground#7ab8cc
titleBar.border#0a1628
titleBar.inactiveBackground#050d1a
titleBar.inactiveForeground#2a4a60
toolbar.activeBackground#00c8f018
toolbar.hoverBackground#00c8f010
tree.inactiveIndentGuidesStroke#0f1e35
tree.indentGuidesStroke#1a2d4a
welcomePage.tileBackground#0a1628
welcomePage.tileBorder#1a2d4a
welcomePage.tileHoverBackground#0f1e35
widget.border#0f1e35
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#1e4060	italic
keyword, keyword.control, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.wordlike	#00c8f0	—
storage, storage.type	#00c8f0	—
keyword.operator	#5a7a90	—
entity.name.function, support.function, meta.function-call.generic	#40d8f8	—
entity.name.type, entity.name.class, support.class, support.type, entity.name.namespace	#7b4fff	—
variable, variable.other.readwrite	#c8dce8	—
variable.parameter	#9ab8cc	—
variable.language	#00c8f0	italic
constant.language, variable.other.constant	#9b6fff	—
constant.numeric, variable.other.enummember	#00c8a0	—
string, meta.embedded.assembly	#4a90d9	—
constant.character.escape, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#00c8f0	—
string.regexp	#f0a030	—
entity.name.tag	#00c8f0	—
entity.other.attribute-name	#7b4fff	—
support.type.property-name, support.type.vendored.property-name	#40d8f8	—
keyword.other.unit	#00c8a0	—
meta.decorator, punctuation.decorator	#9b6fff	italic
invalid	#ff4a6a	—
punctuation.definition.tag	#2a4a60	—
markup.heading	#00c8f0	bold
markup.bold	#c8dce8	bold
markup.italic	—	italic
markup.inline.raw	#40d8f8	—
markup.inserted	#00c8a0	—
markup.deleted	#ff4a6a	—
markup.changed	#7b4fff	—

VS Code preview

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

Lumina Themes Suite — Lumina Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#0066ff14
activityBar.activeBackground#0066ff0a
activityBar.activeBorder#0066ff
activityBar.background#f5f6f8
activityBar.border#e8edf8
activityBar.foreground#0066ff
activityBar.inactiveForeground#c0c8d8
activityBarBadge.background#0066ff
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#0066ff
activityBarTop.background#f5f6f8
activityBarTop.foreground#0066ff
activityBarTop.inactiveForeground#c0c8d8
badge.background#0066ff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#0066ff
breadcrumb.background#ffffff
breadcrumb.focusForeground#374151
breadcrumb.foreground#9ca3af
breadcrumbPicker.background#ffffff
button.background#0066ff
button.border#0055dd
button.foreground#ffffff
button.hoverBackground#0055dd
button.secondaryBackground#f0f4ff
button.secondaryForeground#0066ff
button.secondaryHoverBackground#e0e8ff
checkbox.background#ffffff
checkbox.border#d0d5e0
checkbox.foreground#1a1d23
descriptionForeground#6b7280
diffEditor.border#e8edf8
diffEditor.insertedLineBackground#16a34a08
diffEditor.insertedTextBackground#16a34a10
diffEditor.removedLineBackground#e5193a08
diffEditor.removedTextBackground#e5193a10
disabledForeground#c0c8d8
dropdown.background#ffffff
dropdown.border#d0d5e0
dropdown.foreground#1a1d23
editor.background#ffffff
editor.findMatchBackground#0066ff40
editor.findMatchHighlightBackground#0066ff20
editor.foreground#1a1d23
editor.hoverHighlightBackground#0066ff10
editor.inactiveSelectionBackground#0066ff10
editor.lineHighlightBackground#f0f4ff
editor.lineHighlightBorder#e8edf8
editor.selectionBackground#0066ff22
editor.selectionHighlightBackground#0066ff12
editor.wordHighlightBackground#0066ff14
editor.wordHighlightStrongBackground#0066ff22
editorBracketMatch.background#0066ff18
editorBracketMatch.border#0066ff60
editorCodeLens.foreground#9ca3af
editorCursor.background#ffffff
editorCursor.foreground#0066ff
editorError.foreground#e5193a
editorGroup.border#e8edf8
editorGroup.dropBackground#0066ff08
editorGroupHeader.tabsBackground#f5f6f8
editorGroupHeader.tabsBorder#e8edf8
editorGutter.addedBackground#16a34a60
editorGutter.background#ffffff
editorGutter.deletedBackground#e5193a60
editorGutter.modifiedBackground#0066ff60
editorHint.foreground#7c3aed
editorIndentGuide.activeBackground1#0066ff40
editorIndentGuide.background1#e0e4ef
editorInfo.foreground#0066ff
editorLineNumber.activeForeground#0066ff80
editorLineNumber.foreground#c0c8d8
editorOverviewRuler.border#e8edf8
editorOverviewRuler.errorForeground#e5193a
editorOverviewRuler.infoForeground#0066ff
editorOverviewRuler.warningForeground#d97706
editorRuler.foreground#e0e4ef
editorWarning.foreground#d97706
editorWhitespace.foreground#d0d5e0
errorForeground#e5193a
focusBorder#0066ff40
foreground#1a1d23
gitDecoration.addedResourceForeground#16a34a
gitDecoration.conflictingResourceForeground#d97706
gitDecoration.deletedResourceForeground#e5193a
gitDecoration.ignoredResourceForeground#c0c8d8
gitDecoration.modifiedResourceForeground#0066ff
gitDecoration.untrackedResourceForeground#7c3aed
icon.foreground#6b7280
input.background#ffffff
input.border#d0d5e0
input.foreground#1a1d23
input.placeholderForeground#9ca3af
inputOption.activeBackground#0066ff14
inputOption.activeBorder#0066ff60
inputOption.activeForeground#0066ff
inputValidation.errorBackground#e5193a0a
inputValidation.errorBorder#e5193a
inputValidation.infoBackground#0066ff0a
inputValidation.infoBorder#0066ff
inputValidation.warningBackground#d977060a
inputValidation.warningBorder#d97706
list.activeSelectionBackground#e8edf8
list.activeSelectionForeground#0066ff
list.activeSelectionIconForeground#0066ff
list.filterMatchBackground#0066ff18
list.focusBackground#e8edf8
list.focusForeground#0066ff
list.highlightForeground#0066ff
list.hoverBackground#eef1f8
list.hoverForeground#1a1d23
list.inactiveSelectionBackground#f0f4ff
list.inactiveSelectionForeground#374151
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#e5193a
listFilterWidget.outline#0066ff40
menu.background#ffffff
menu.border#e8edf8
menu.foreground#1a1d23
menu.selectionBackground#e8edf8
menu.selectionForeground#0066ff
menu.separatorBackground#e8edf8
menubar.selectionBackground#0066ff0a
menubar.selectionBorder#0066ff20
menubar.selectionForeground#0066ff
notificationLink.foreground#0066ff
notifications.background#ffffff
notifications.border#e8edf8
notifications.foreground#1a1d23
notificationsErrorIcon.foreground#e5193a
notificationsInfoIcon.foreground#0066ff
notificationsWarningIcon.foreground#d97706
panel.background#f5f6f8
panel.border#e8edf8
panel.dropBorder#0066ff
panelSectionHeader.background#f5f6f8
panelTitle.activeBorder#0066ff
panelTitle.activeForeground#1a1d23
panelTitle.inactiveForeground#9ca3af
pickerGroup.border#e8edf8
pickerGroup.foreground#0066ff60
ports.iconRunningProcessForeground#16a34a
quickInput.background#ffffff
quickInput.foreground#1a1d23
quickInputList.focusBackground#e8edf8
quickInputList.focusForeground#0066ff
quickInputList.focusIconForeground#0066ff
quickInputTitle.background#f5f6f8
scrollbar.shadow#00000018
scrollbarSlider.activeBackground#0066ff50
scrollbarSlider.background#d0d5e060
scrollbarSlider.hoverBackground#0066ff30
selection.background#0066ff20
settings.headerForeground#0066ff
settings.modifiedItemIndicator#7c3aed
sideBar.background#f5f6f8
sideBar.border#e8edf8
sideBar.foreground#374151
sideBarSectionHeader.background#f5f6f8
sideBarSectionHeader.border#e8edf8
sideBarSectionHeader.foreground#9ca3af
sideBarTitle.foreground#0066ff
statusBar.background#f5f6f8
statusBar.border#e8edf8
statusBar.debuggingBackground#0066ff
statusBar.debuggingForeground#ffffff
statusBar.foreground#9ca3af
statusBar.noFolderBackground#f5f6f8
statusBarItem.activeBackground#0066ff14
statusBarItem.errorBackground#e5193a18
statusBarItem.errorForeground#e5193a
statusBarItem.hoverBackground#0066ff0a
statusBarItem.prominentBackground#7c3aed18
statusBarItem.prominentForeground#7c3aed
statusBarItem.remoteBackground#0066ff18
statusBarItem.remoteForeground#0066ff
statusBarItem.warningBackground#d9770618
statusBarItem.warningForeground#d97706
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#0066ff
tab.activeForeground#1a1d23
tab.border#e8edf8
tab.hoverBackground#eef1f8
tab.hoverForeground#1a1d23
tab.inactiveBackground#f5f6f8
tab.inactiveForeground#9ca3af
tab.lastPinnedBorder#e8edf8
tab.selectedBackground#ffffff
tab.selectedForeground#1a1d23
tab.unfocusedActiveBackground#ffffff
tab.unfocusedActiveForeground#6b7280
tab.unfocusedInactiveForeground#c0c8d8
terminal.ansiBlack#1a1d23
terminal.ansiBlue#0066ff
terminal.ansiBrightBlack#6b7280
terminal.ansiBrightBlue#3b82f6
terminal.ansiBrightCyan#06b6d4
terminal.ansiBrightGreen#22c55e
terminal.ansiBrightMagenta#8b5cf6
terminal.ansiBrightRed#f43f5e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f59e0b
terminal.ansiCyan#0891b2
terminal.ansiGreen#16a34a
terminal.ansiMagenta#7c3aed
terminal.ansiRed#e5193a
terminal.ansiWhite#f5f6f8
terminal.ansiYellow#d97706
terminal.background#f5f6f8
terminal.border#e8edf8
terminal.foreground#1a1d23
terminal.selectionBackground#0066ff20
terminalCursor.background#ffffff
terminalCursor.foreground#0066ff
textBlockQuote.background#f0f4ff
textBlockQuote.border#0066ff40
textCodeBlock.background#f0f4ff
textLink.activeForeground#0055dd
textLink.foreground#0066ff
textPreformat.foreground#0066ff
textSeparator.foreground#e8edf8
titleBar.activeBackground#f5f6f8
titleBar.activeForeground#1a1d23
titleBar.border#e8edf8
titleBar.inactiveBackground#f5f6f8
titleBar.inactiveForeground#9ca3af
toolbar.activeBackground#0066ff14
toolbar.hoverBackground#0066ff0a
tree.inactiveIndentGuidesStroke#e8edf8
tree.indentGuidesStroke#d0d5e0
welcomePage.tileBackground#ffffff
welcomePage.tileBorder#e8edf8
welcomePage.tileHoverBackground#f0f4ff
widget.border#e8edf8
widget.shadow#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9ca3af	italic
keyword, keyword.control, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.wordlike	#0066ff	—
storage, storage.type	#0066ff	—
keyword.operator	#6b7280	—
entity.name.function, support.function	#0891b2	—
entity.name.type, entity.name.class, support.class, support.type, entity.name.namespace	#7c3aed	—
variable, variable.other.readwrite	#1a1d23	—
variable.parameter	#374151	—
variable.language	#0066ff	italic
constant.language, variable.other.constant	#7c3aed	—
constant.numeric, variable.other.enummember	#16a34a	—
string, meta.embedded.assembly	#d97706	—
constant.character.escape, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#0066ff	—
string.regexp	#d97706	—
entity.name.tag	#0066ff	—
entity.other.attribute-name	#7c3aed	—
support.type.property-name, support.type.vendored.property-name	#0891b2	—
keyword.other.unit	#16a34a	—
meta.decorator, punctuation.decorator	#7c3aed	italic
invalid	#e5193a	—
punctuation.definition.tag	#9ca3af	—
markup.heading	#0066ff	bold
markup.inline.raw	#0891b2	—
markup.inserted	#16a34a	—
markup.deleted	#e5193a	—
markup.changed	#0066ff	—

VS Code preview

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

Lumina Themes Suite — Lumina Yellow

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#fe8019
activityBar.activeFocusBorder#fabd2f
activityBar.background#1d2021
activityBar.border#1d2021
activityBar.foreground#ebdbb2
activityBarBadge.background#fe8019
activityBarBadge.foreground#1d2021
badge.background#fe8019
badge.foreground#1d2021
button.background#fabd2f
button.foreground#282828
button.hoverBackground#d79921
button.secondaryBackground#504945
button.secondaryForeground#ebdbb2
button.secondaryHoverBackground#665c54
debugExceptionWidget.background#1d2021
debugExceptionWidget.border#282828
debugToolBar.background#1d2021
diffEditor.insertedTextBackground#bae67e26
diffEditor.removedTextBackground#f29e7426
dropdown.background#504945
dropdown.border#665c54
dropdown.foreground#ebdbb2
dropdown.listBackground#504945
editor.background#282828
editor.findMatchBackground#ffcc660d
editor.findMatchBorder#fabd2f
editor.findMatchHighlightBackground#ffcc660d
editor.findMatchHighlightBorder#ffcc6659
editor.findRangeHighlightBackground#3c3836
editor.findRangeHighlightBorder#504945
editor.foreground#ebdbb2
editor.inactiveSelectionBackground#3c3836
editor.lineHighlightBackground#1d2021
editor.rangeHighlightBackground#1d2021
editor.selectionBackground#504945
editor.selectionHighlightBackground#3c3836
editor.selectionHighlightBorder#3c3836
editor.wordHighlightBackground#3c3836
editor.wordHighlightStrongBackground#ffcc6633
editorBracketMatch.background#665c54
editorBracketMatch.border#665c54
editorCodeLens.foreground#bdae93
editorCursor.foreground#ff4057
editorError.foreground#fb4934
editorGroup.border#1d2021
editorGroup.emptyBackground#282828
editorGroupHeader.noTabsBackground#282828
editorGroupHeader.tabsBackground#1d2021
editorGroupHeader.tabsBorder#282828
editorGutter.addedBackground#b8bb26
editorGutter.deletedBackground#d3869b
editorGutter.modifiedBackground#83a598
editorHoverWidget.background#1d2021
editorHoverWidget.border#282828
editorHoverWidget.foreground#ebdbb2
editorIndentGuide.activeBackground1#707a8cb3
editorIndentGuide.background1#707a8c4d
editorLineNumber.activeForeground#928374
editorLineNumber.foreground#7c6f64
editorLink.activeForeground#fabd2f
editorMarkerNavigation.background#282828
editorOverviewRuler.addedForeground#b8bb26
editorOverviewRuler.border#282828
editorOverviewRuler.deletedForeground#d3869b
editorOverviewRuler.errorForeground#fb4934
editorOverviewRuler.modifiedForeground#83a598
editorOverviewRuler.warningForeground#fabd2f
editorRuler.foreground#707a8c4d
editorSuggestWidget.background#1d2021
editorSuggestWidget.border#504945
editorSuggestWidget.foreground#ebdbb2
editorSuggestWidget.highlightForeground#fabd2f
editorSuggestWidget.selectedBackground#282828
editorWarning.foreground#fabd2f
editorWhitespace.foreground#707a8c66
editorWidget.background#1d2021
editorWidget.foreground#ebdbb2
errorForeground#fb4934
extensionButton.prominentBackground#fabd2f
extensionButton.prominentForeground#1d2021
extensionButton.prominentHoverBackground#fabd2f
foreground#ebdbb2
gitDecoration.conflictingResourceForeground#b16286
gitDecoration.deletedResourceForeground#b16286
gitDecoration.ignoredResourceForeground#484f5e
gitDecoration.modifiedResourceForeground#8ec07c
gitDecoration.submoduleResourceForeground#d3869b
gitDecoration.untrackedResourceForeground#d79921
input.background#504945
input.border#504945
input.foreground#ebdbb2
input.placeholderForeground#ebdbb2
inputOption.activeBorder#fabd2f
inputValidation.errorBackground#3c3836
inputValidation.errorBorder#cc241d
inputValidation.infoBackground#665c54
inputValidation.infoBorder#83a598
inputValidation.warningBackground#3c3836
inputValidation.warningBorder#d79921
list.activeSelectionBackground#282828
list.activeSelectionForeground#fabd2f
list.errorForeground#fb4934
list.focusBackground#3c3836
list.focusForeground#fabd2f
list.highlightForeground#fabd2f
list.hoverBackground#3d424d66
list.hoverForeground#fabd2f
list.inactiveSelectionBackground#3d424d66
list.inactiveSelectionForeground#d79921
list.invalidItemForeground#586070
minimap.errorHighlight#fb4934
minimap.selectionHighlight#fabd2f
minimap.warningHighlight#fe8019
panel.background#3c3836
panel.border#504945
panelTitle.activeBorder#fabd2f
panelTitle.activeForeground#ebdbb2
panelTitle.inactiveForeground#a89984
peekView.border#3c3836
peekViewEditor.background#1d2021
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#1d2021
peekViewResult.fileForeground#83a598
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#282828
peekViewTitleDescription.foreground#83a598
peekViewTitleLabel.foreground#83a598
pickerGroup.border#1d2021
pickerGroup.foreground#484f5e
progressBar.background#fabd2f
quickInputList.focusBackground#3c3836
scrollbar.shadow#282828
scrollbarSlider.activeBackground#d5c4a18a
scrollbarSlider.background#a8998491
scrollbarSlider.hoverBackground#bdae93c2
selection.background#867c5e
settings.headerForeground#ebdbb2
settings.modifiedItemIndicator#83a598
sideBar.background#1d2021
sideBar.border#1d2021
sideBar.foreground#bdae93
sideBarSectionHeader.background#1d2021
sideBarSectionHeader.foreground#ebdbb2
sideBarTitle.foreground#707a8c
statusBar.background#3c3836
statusBar.border#3c3836
statusBar.debuggingBackground#d3869b
statusBar.debuggingForeground#282828
statusBar.foreground#a89984
statusBar.noFolderBackground#282828
statusBarItem.activeBackground#00000050
statusBarItem.hoverBackground#00000030
statusBarItem.prominentBackground#3c3836
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#d79921
symbolIcon.folderForeground#fabd2f
tab.activeBackground#282828
tab.activeBorderTop#fe8019
tab.activeForeground#ebdbb2
tab.border#1d2021
tab.hoverBackground#3c3836
tab.inactiveBackground#1d2021
tab.inactiveForeground#a89984
tab.unfocusedActiveBorderTop#707a8c
tab.unfocusedActiveForeground#707a8c
tab.unfocusedInactiveForeground#707a8c
terminal.ansiBlack#1d2021
terminal.ansiBlue#83a598
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#83a598
terminal.ansiBrightCyan#83a598
terminal.ansiBrightGreen#8ec07c
terminal.ansiBrightMagenta#d3869b
terminal.ansiBrightRed#fb4934
terminal.ansiBrightWhite#ebdbb2
terminal.ansiBrightYellow#fabd2f
terminal.ansiCyan#83a598
terminal.ansiGreen#8ec07c
terminal.ansiMagenta#d3869b
terminal.ansiRed#fb4934
terminal.ansiWhite#ebdbb2
terminal.ansiYellow#fabd2f
terminal.background#3c3836
terminal.foreground#ebdbb2
terminalCursor.foreground#ff4057
textBlockQuote.background#232834
textLink.activeForeground#fabd2f
textLink.foreground#fabd2f
textPreformat.foreground#cbccc6
titleBar.activeBackground#1d2021
titleBar.activeForeground#cbccc6
titleBar.border#1d2021
titleBar.inactiveBackground#282828
titleBar.inactiveForeground#707a8c
walkThrough.embeddedEditorBackground#282828
widget.shadow#504945

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7c6f64	italic
string, constant.other.symbol	#b8bb26	—
constant.numeric	#d3869b	—
constant.language	#fabd2f	—
variable	#ebdbb2	—
variable.language	#fabd2f	italic
storage	#fabd2f	—
storage.type	#fb4934	italic
keyword	#fb4934	—
keyword.operator	#8ec07c	—
punctuation.separator, punctuation.terminator	#928374	—
punctuation.section	#ebdbb2	—
entity.name.type	#fe8019	—
entity.name.function	#fabd2f	—
entity.name.tag	#8ec07c	—
entity.other.attribute-name	#fabd2f	italic
support.type, support.class	#fe8019	—
support.function	#fabd2f	—
invalid	#fb3934	—
markup.heading	#8ec07c	bold