Themee

Name: Themee
Author: Koha13

Publisher: Koha13Themes in package: 5

Light theme base on Intellij light theme. Dark theme base on gruvbox

Open in VS Code GitHub

Color themes

VS Code preview

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

Themee — koha13: Github 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.

activityBar.activeBorder#f9826c
activityBar.background#24292e
activityBar.border#1b1f23
activityBar.foreground#e1e4e8
activityBar.inactiveForeground#6a737d
activityBarBadge.background#0366d6
activityBarBadge.foreground#fff
badge.background#044289
badge.foreground#c8e1ff
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#e1e4e8
breadcrumb.foreground#959da5
breadcrumbPicker.background#2b3036
button.background#176f2c
button.foreground#dcffe4
button.hoverBackground#22863a
checkbox.background#444d56
checkbox.border#1b1f23
debugToolBar.background#2b3036
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#2f363d
dropdown.border#1b1f23
dropdown.foreground#e1e4e8
dropdown.listBackground#24292e
editor.background#24292e
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#b808
editor.foldBackground#282e33
editor.foreground#e1e4e8
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2b3036
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#a707
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#c8e1ff
editorGroup.border#1b1f23
editorGroupHeader.tabsBackground#1f2428
editorGroupHeader.tabsBorder#1b1f23
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#ea4a5a
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#444d56
editorIndentGuide.background#2f363d
editorLineNumber.activeForeground#e1e4e8
editorLineNumber.foreground#444d56
editorOverviewRuler.border#1b1f23
editorWhitespace.foreground#444d56
editorWidget.background#1f2428
errorForeground#f97583
focusBorder#005cc5
foreground#d1d5da
gitDecoration.addedResourceForeground#34d058
gitDecoration.conflictingResourceForeground#ffab70
gitDecoration.deletedResourceForeground#ea4a5a
gitDecoration.ignoredResourceForeground#6a737d
gitDecoration.modifiedResourceForeground#79b8ff
gitDecoration.submoduleResourceForeground#6a737d
gitDecoration.untrackedResourceForeground#34d058
input.background#2f363d
input.border#1b1f23
input.foreground#e1e4e8
input.placeholderForeground#959da5
list.activeSelectionBackground#39414a
list.activeSelectionForeground#e1e4e8
list.focusBackground#044289
list.hoverBackground#282e34
list.hoverForeground#e1e4e8
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#e1e4e8
notificationCenterHeader.background#24292e
notificationCenterHeader.foreground#959da5
notifications.background#2f363d
notifications.border#1b1f23
notifications.foreground#e1e4e8
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#1f2428
panel.border#1b1f23
panelInput.border#2f363d
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#e1e4e8
panelTitle.inactiveForeground#959da5
peekViewEditor.background#1f242888
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#1f2428
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#444d56
pickerGroup.foreground#e1e4e8
progressBar.background#0366d6
quickInput.background#24292e
quickInput.foreground#e1e4e8
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#e1e4e8
settings.modifiedItemIndicator#0366d6
sideBar.background#1f2428
sideBar.border#1b1f23
sideBar.foreground#d1d5da
sideBarSectionHeader.background#1f2428
sideBarSectionHeader.border#1b1f23
sideBarSectionHeader.foreground#e1e4e8
sideBarTitle.foreground#e1e4e8
statusBar.background#24292e
statusBar.border#1b1f23
statusBar.debuggingBackground#931c06
statusBar.debuggingForeground#fff
statusBar.foreground#d1d5da
statusBar.noFolderBackground#24292e
statusBarItem.prominentBackground#282e34
tab.activeBackground#24292e
tab.activeBorder#24292e
tab.activeBorderTop#f9826c
tab.activeForeground#e1e4e8
tab.border#1b1f23
tab.hoverBackground#24292e
tab.inactiveBackground#1f2428
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#24292e
tab.unfocusedActiveBorderTop#1b1f23
tab.unfocusedHoverBackground#24292e
terminal.foreground#d1d5da
textBlockQuote.background#24292e
textBlockQuote.border#444d56
textCodeBlock.background#2f363d
textLink.activeForeground#c8e1ff
textLink.foreground#79b8ff
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#24292e
titleBar.activeForeground#e1e4e8
titleBar.border#1b1f23
titleBar.inactiveBackground#1f2428
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#2f363d
welcomePage.buttonBackground#2f363d
welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.language	#79b8ff	—
entity, entity.name	#b392f0	—
variable.parameter.function	#e1e4e8	—
entity.name.tag	#85e89d	—
keyword	#f97583	—
storage, storage.type	#f97583	—
storage.modifier.package, storage.modifier.import, storage.type.java	#e1e4e8	—
string, punctuation.definition.string, string punctuation.section.embedded source	#9ecbff	—
support	#79b8ff	—
meta.property-name	#79b8ff	—
variable	#ffab70	—
variable.other	#e1e4e8	—
invalid.broken	#fdaeb7	italic
invalid.deprecated	#fdaeb7	italic
invalid.illegal	#fdaeb7	italic
invalid.unimplemented	#fdaeb7	italic
carriage-return	#24292e	italic underline
message.error	#fdaeb7	—
string source	#e1e4e8	—
string variable	#79b8ff	—
source.regexp, string.regexp	#dbedff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#dbedff	—
string.regexp constant.character.escape	#85e89d	bold
support.constant	#79b8ff	—
support.variable	#79b8ff	—
meta.module-reference	#79b8ff	—
punctuation.definition.list.begin.markdown	#ffab70	—
markup.heading, markup.heading entity.name	#79b8ff	bold
markup.quote	#85e89d	—
markup.italic	#e1e4e8	italic
markup.bold	#e1e4e8	bold
markup.raw	#79b8ff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#fdaeb7	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#85e89d	—
markup.changed, punctuation.definition.changed	#ffab70	—
markup.ignored, markup.untracked	#2f363d	—
meta.diff.range	#b392f0	bold
meta.diff.header	#79b8ff	—
meta.separator	#79b8ff	bold
meta.output	#79b8ff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#d1d5da	—
brackethighlighter.unmatched	#fdaeb7	—
constant.other.reference.link, string.other.link	#dbedff	underline

VS Code preview

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

Themee — koha13: Github 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.

activityBar.activeBorder#f9826c
activityBar.background#f6f8fa
activityBar.border#e1e4e8
activityBar.foreground#2f363d
activityBar.inactiveForeground#959da5
activityBarBadge.background#2188ff
activityBarBadge.foreground#fff
badge.background#dbedff
badge.foreground#005cc5
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#2f363d
breadcrumb.foreground#6a737d
breadcrumbPicker.background#fafbfc
button.background#159739
button.foreground#fff
button.hoverBackground#138934
checkbox.background#fafbfc
checkbox.border#d1d5da
debugToolBar.background#fff
descriptionForeground#6a737d
diffEditor.insertedTextBackground#34d05822
diffEditor.removedTextBackground#d73a4922
dropdown.background#fafbfc
dropdown.border#e1e4e8
dropdown.foreground#2f363d
dropdown.listBackground#fff
editor.background#fff
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#fff5b1
editor.foldBackground#fafbfc
editor.foreground#000
editor.inactiveSelectionBackground#0366d611
editor.lineHighlightBackground#f6f8fa
editor.selectionBackground#0366d625
editor.selectionHighlightBackground#34d05840
editor.selectionHighlightBorder#34d05800
editor.stackFrameHighlightBackground#fffbdd
editor.wordHighlightBackground#34d05800
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#34d05800
editor.wordHighlightStrongBorder#24943e50
editorBracketMatch.background#34d05840
editorBracketMatch.border#34d05800
editorCursor.foreground#044289
editorGroup.border#e1e4e8
editorGroupHeader.tabsBackground#f6f8fa
editorGroupHeader.tabsBorder#e1e4e8
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#d7dbe0
editorIndentGuide.background#eff2f6
editorLineNumber.activeForeground#24292e
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#fff
editorWhitespace.foreground#d1d5da
editorWidget.background#f6f8fa
errorForeground#cb2431
focusBorder#2188ff
foreground#444d56
gitDecoration.addedResourceForeground#28a745
gitDecoration.conflictingResourceForeground#e36209
gitDecoration.deletedResourceForeground#d73a49
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#005cc5
gitDecoration.submoduleResourceForeground#959da5
gitDecoration.untrackedResourceForeground#28a745
input.background#fafbfc
input.border#e1e4e8
input.foreground#2f363d
input.placeholderForeground#959da5
list.activeSelectionBackground#e2e5e9
list.activeSelectionForeground#2f363d
list.focusBackground#cce5ff
list.hoverBackground#ebf0f4
list.hoverForeground#2f363d
list.inactiveFocusBackground#dbedff
list.inactiveSelectionBackground#e8eaed
list.inactiveSelectionForeground#2f363d
notificationCenterHeader.background#e1e4e8
notificationCenterHeader.foreground#6a737d
notifications.background#fafbfc
notifications.border#e1e4e8
notifications.foreground#2f363d
notificationsErrorIcon.foreground#d73a49
notificationsInfoIcon.foreground#005cc5
notificationsWarningIcon.foreground#e36209
panel.background#f6f8fa
panel.border#e1e4e8
panelInput.border#e1e4e8
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#2f363d
panelTitle.inactiveForeground#6a737d
pickerGroup.border#e1e4e8
pickerGroup.foreground#2f363d
progressBar.background#2188ff
quickInput.background#fafbfc
quickInput.foreground#2f363d
scrollbar.shadow#6a737d33
scrollbarSlider.activeBackground#959da588
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
settings.headerForeground#2f363d
settings.modifiedItemIndicator#2188ff
sideBar.background#f6f8fa
sideBar.border#e1e4e8
sideBar.foreground#586069
sideBarSectionHeader.background#f6f8fa
sideBarSectionHeader.border#e1e4e8
sideBarSectionHeader.foreground#2f363d
sideBarTitle.foreground#2f363d
statusBar.background#282828
statusBar.border#e1e4e8
statusBar.debuggingBackground#f9826c
statusBar.debuggingForeground#fff
statusBar.foreground#e78f0a
statusBar.noFolderBackground#fff
statusBarItem.prominentBackground#e8eaed
tab.activeBackground#fff
tab.activeBorder#fff
tab.activeBorderTop#f9826c
tab.activeForeground#2f363d
tab.border#e1e4e8
tab.hoverBackground#fff
tab.inactiveBackground#f6f8fa
tab.inactiveForeground#6a737d
tab.unfocusedActiveBorder#fff
tab.unfocusedActiveBorderTop#e1e4e8
tab.unfocusedHoverBackground#fff
terminal.foreground#586069
textBlockQuote.background#fafbfc
textBlockQuote.border#e1e4e8
textCodeBlock.background#f6f8fa
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#f6f8fa
titleBar.activeForeground#2f363d
titleBar.border#e1e4e8
titleBar.inactiveBackground#f6f8fa
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#e1e4e8
welcomePage.buttonBackground#f6f8fa
welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.language	#005cc5	—
entity, entity.name	#6f42c1	—
variable.parameter.function	#24292e	—
entity.name.tag	#22863a	—
keyword	#d73a49	—
storage, storage.type	#d73a49	—
storage.modifier.package, storage.modifier.import, storage.type.java	#24292e	—
string, punctuation.definition.string, string punctuation.section.embedded source	#032f62	—
support	#005cc5	—
meta.property-name	#005cc5	—
variable	#e36209	—
variable.other	#24292e	—
invalid.broken	#b31d28	italic
invalid.deprecated	#b31d28	italic
invalid.illegal	#b31d28	italic
invalid.unimplemented	#b31d28	italic
carriage-return	#fafbfc	italic underline
message.error	#b31d28	—
string source	#24292e	—
string variable	#005cc5	—
source.regexp, string.regexp	#032f62	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#032f62	—
string.regexp constant.character.escape	#22863a	bold
support.constant	#005cc5	—
support.variable	#005cc5	—
meta.module-reference	#005cc5	—
punctuation.definition.list.begin.markdown	#e36209	—
markup.heading, markup.heading entity.name	#005cc5	bold
markup.quote	#22863a	—
markup.italic	#24292e	italic
markup.bold	#24292e	bold
markup.raw	#005cc5	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#b31d28	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#22863a	—
markup.changed, punctuation.definition.changed	#e36209	—
markup.ignored, markup.untracked	#f6f8fa	—
meta.diff.range	#6f42c1	bold
meta.diff.header	#005cc5	—
meta.separator	#005cc5	bold
meta.output	#005cc5	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#586069	—
brackethighlighter.unmatched	#b31d28	—
constant.other.reference.link, string.other.link	#032f62	underline

VS Code preview

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

Themee — koha13: Gruv dark theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#282828
activityBar.border#3c3836
activityBar.dropBackground#1d2021
activityBar.foreground#ebdbb2
activityBarBadge.background#458588
activityBarBadge.foreground#ebdbb2
badge.background#d3869b
badge.foreground#1d2021
button.background#45858880
button.foreground#ebdbb2
button.hoverBackground#45858860
debugConsole.infoForeground#ebdbb2
debugToolBar.background#1d2021
diffEditor.insertedTextBackground#b8bb2630
diffEditor.insertedTextBorder#98971a00
diffEditor.removedTextBackground#fb493430
diffEditor.removedTextBorder#cc241d00
dropdown.background#1d2021
dropdown.border#3c3836
dropdown.foreground#ebdbb2
editor.background#282828
editor.findMatchBackground#83a59870
editor.findMatchHighlightBackground#fe801930
editor.findRangeHighlightBackground#83a59870
editor.foreground#ebdbb2
editor.hoverHighlightBackground#689d6a50
editor.lineHighlightBackground#3c383660
editor.lineHighlightBorder#3c383600
editor.selectionBackground#689d6a40
editor.selectionHighlightBackground#fabd2f40
editorBracketMatch.background#92837480
editorBracketMatch.border#1d202100
editorCodeLens.foreground#a8998490
editorCursor.foreground#eee5e5
editorError.foreground#cc241d
editorGroup.background#3c3836
editorGroup.border#3c3836
editorGroup.dropBackground#3c383660
editorGroupHeader.noTabsBackground#3c3836
editorGroupHeader.tabsBackground#282828
editorGroupHeader.tabsBorder#3c3836
editorGutter.addedBackground#b8bb26
editorGutter.background#1d202100
editorGutter.deletedBackground#fb4934
editorGutter.modifiedBackground#83a598
editorHoverWidget.background#1d2021
editorHoverWidget.border#3c3836
editorIndentGuide.activeBackground#a8998450
editorIndentGuide.background#a8998420
editorInfo.foreground#458588
editorLineNumber.foreground#665c54
editorLink.activeForeground#ebdbb2
editorOverviewRuler.addedForeground#83a598
editorOverviewRuler.border#1d202100
editorOverviewRuler.commonContentForeground#928374
editorOverviewRuler.currentContentForeground#458588
editorOverviewRuler.deletedForeground#83a598
editorOverviewRuler.errorForeground#fb4934
editorOverviewRuler.findMatchForeground#bdae93
editorOverviewRuler.incomingContentForeground#689d6a
editorOverviewRuler.infoForeground#d3869b
editorOverviewRuler.modifiedForeground#83a598
editorOverviewRuler.rangeHighlightForeground#bdae93
editorOverviewRuler.selectionHighlightForeground#665c54
editorOverviewRuler.warningForeground#d79921
editorOverviewRuler.wordHighlightForeground#665c54
editorOverviewRuler.wordHighlightStrongForeground#665c54
editorRuler.foreground#a8998440
editorSuggestWidget.background#1d2021
editorSuggestWidget.border#3c3836
editorSuggestWidget.foreground#ebdbb2
editorSuggestWidget.highlightForeground#689d6a
editorSuggestWidget.selectedBackground#616363
editorWarning.foreground#d79921
editorWhitespace.foreground#a8998420
editorWidget.background#1d2021
editorWidget.border#3c3836
errorForeground#fb4934
extensionButton.prominentBackground#b8bb2680
extensionButton.prominentHoverBackground#b8bb2630
focusBorder#3c3836
foreground#ebdbb2
gitDecoration.conflictingResourceForeground#b16286
gitDecoration.deletedResourceForeground#cc241d
gitDecoration.ignoredResourceForeground#7c6f64
gitDecoration.modifiedResourceForeground#8db0dc
gitDecoration.untrackedResourceForeground#c5e650
input.background#ebdbb205
input.border#3c3836
input.foreground#ebdbb2
input.placeholderForeground#ebdbb260
inputOption.activeBorder#ebdbb260
inputValidation.errorBackground#cc241d80
inputValidation.errorBorder#fb4934
inputValidation.infoBackground#45858880
inputValidation.infoBorder#83a598
inputValidation.warningBackground#d7992180
inputValidation.warningBorder#fabd2f
list.activeSelectionBackground#3c383680
list.activeSelectionForeground#8ec07c
list.dropBackground#3c3836
list.focusBackground#3c3836
list.focusForeground#ebdbb2
list.highlightForeground#689d6a
list.hoverBackground#3c383680
list.hoverForeground#d5c4a1
list.inactiveSelectionBackground#3c383680
list.inactiveSelectionForeground#689d6a
merge.border#1d202100
merge.currentContentBackground#45858820
merge.currentHeaderBackground#45858840
merge.incomingContentBackground#689d6a20
merge.incomingHeaderBackground#689d6a40
notification.background#1d2021
notification.buttonBackground#665c54
notification.buttonForeground#ebdbb2
notification.buttonHoverBackground#665c5450
notification.errorBackground#fb4934
notification.errorForeground#1d2021
notification.foreground#ebdbb2
notification.infoBackground#83a598
notification.infoForeground#1d2021
notification.warningBackground#fabd2f
notification.warningForeground#1d2021
panel.border#3c3836
panelTitle.activeForeground#ebdbb2
peekView.border#3c3836
peekViewEditor.background#3c383650
peekViewEditor.matchHighlightBackground
peekViewEditorGutter.background#3c383650
peekViewResult.background#3c383650
peekViewResult.fileForeground#ebdbb2
peekViewResult.matchHighlightBackground#8ec07c30
peekViewResult.selectionBackground#8ec07c30
peekViewResult.selectionForeground#8ec07c30
peekViewTitle.background#3c383650
peekViewTitleDescription.foreground#bdae93
peekViewTitleLabel.foreground#ebdbb2
progressBar.background#689d6a
scrollbar.shadow#1d2021
scrollbarSlider.activeBackground#689d6a
scrollbarSlider.background#50494599
scrollbarSlider.hoverBackground#665c54
selection.background#689d6a80
sideBar.background#282828
sideBar.border#3c3836
sideBar.foreground#d5c4a1
sideBarSectionHeader.background#1d202100
sideBarSectionHeader.foreground#ebdbb2
sideBarTitle.foreground#ebdbb2
statusBar.background#282828
statusBar.border#3c3836
statusBar.debuggingBackground#fe8019
statusBar.debuggingBorder#1d202100
statusBar.debuggingForeground#1d2021
statusBar.foreground#e78f0a
statusBar.noFolderBackground#1d2021
statusBar.noFolderBorder#1d202100
statusBar.prominentBackground#689d6a
statusBar.prominentHoverBackground#689d6a70
tab.activeBackground#202020
tab.activeBorder#689d6a
tab.activeForeground#e78f0a
tab.border#1d202100
tab.inactiveBackground#282828
tab.inactiveForeground#a89984
tab.unfocusedActiveBorder#1d202100
tab.unfocusedActiveForeground#a89984
tab.unfocusedInactiveForeground#928374
terminal.ansiBlack#3c3836
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#83a598
terminal.ansiBrightCyan#8ec07c
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#d3869b
terminal.ansiBrightRed#fb4934
terminal.ansiBrightWhite#ebdbb2
terminal.ansiBrightYellow#fabd2f
terminal.ansiCyan#689d6a
terminal.ansiGreen#98971a
terminal.ansiMagenta#b16286
terminal.ansiRed#cc241d
terminal.ansiWhite#a89984
terminal.ansiYellow#d79921
terminal.background#282828
terminal.foreground#ebdbb2
textLink.activeForeground#458588
textLink.foreground#83a598
titleBar.activeBackground#282828
widget.shadow#1d202130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ebdbb2	—
emphasis	—	italic
strong	—	bold
header	#458588	—
comment, punctuation.definition.comment	#928374	italic
constant, support.constant, variable.arguments	#d3869b	—
constant.rgb-value	#ebdbb2	—
entity.name.selector	#8ec07c	—
entity.other.attribute-name	#fabd2f	—
entity.name.tag, punctuation.tag	#8ec07c	—
invalid, invalid.illegal	#cc241d	—
invalid.deprecated	#b16286	—
meta.selector	#8ec07c	—
meta.preprocessor	#fe8019	—
meta.preprocessor.string	#b8bb26	—
meta.preprocessor.numeric	#b8bb26	—
meta.header.diff	#fe8019	—
storage	#fb4934	—
storage.modifier	#fe8019	—
string	#b8bb26	—
string.tag	#b8bb26	—
string.value	#b8bb26	—
string.regexp	#fe8019	—
string.escape	#fb4934	—
string.quasi	#8ec07c	—
string.entity	#b8bb26	—
object	#ebdbb2	—
module.node	#83a598	—
support.type.property-name	#689d6a	—
keyword	#fb4934	—
keyword.control	#fb4934	—
keyword.control.module	#8ec07c	—
keyword.control.less	#d79921	—
keyword.operator	#8ec07c	—
keyword.operator.new	#fe8019	—
keyword.other.unit	#b8bb26	—
metatag.php	#fe8019	—
support.function.git-rebase	#689d6a	—
constant.sha.git-rebase	#b8bb26	—
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class	#fabd2f	—
variable.this, support.variable	#d3869b	—
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type	#fabd2f	—
storage.type.function, entity.function, entity.name.function.static	#8ec07c	—
entity.name.function.function-call	#8ec07c	—
support.function.builtin	#fe8019	—
entity.name.method, entity.name.method.function-call, entity.name.static.function-call	#689d6a	—
brace	#d5c4a1	—
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder	#83a598	—
prototype	#d3869b	—
storage.type.class	#fb4934	—
punctuation	#a89984	—
punctuation.quoted	#ebdbb2	—
punctuation.quasi	#fb4934	—
url, link, uri	—	underline
meta.function.python, entity.name.function.python	#8ec07c	—
storage.type.function.python, storage.modifier.declaration, storage.type.class.python	#fb4934	—
meta.function-call.generic	#83a598	—
meta.function-call.arguments	#d5c4a1	—
entity.name.function.decorator	#fabd2f	bold
constant.other.caps	—	bold
keyword.operator.logical	#fb4934	—
punctuation.definition.logical-expression	#fe8019	—
string.inperpolated.dollar.shell	#fe8019	—
string.interpolated.dollar.shell, string.interpolated.backtick.shell	#8ec07c	—
keyword.control.directive	#8ec07c	—
support.function.C99	#fabd2f	—
meta.scope.prerequisites	#fabd2f	—
entity.name.function.target	#b8bb26	bold
storage.modifier.import.java, storage.modifier.package.java	#bdae93	—
keyword.other.import.java, keyword.other.package.java	#8ec07c	—
storage.type.java	#fabd2f	—
storage.type.annotation	#83a598	bold
keyword.other.documentation.javadoc	#8ec07c	—
comment.block.javadoc variable.parameter.java	#b8bb26	bold
source.java variable.other.object, source.java variable.other.definition.java	#ebdbb2	—
meta.function-parameters.lisp	#fabd2f	—
markup.underline	—	underline
string.other.link.title.markdown	#928374	underline
markup.underline.link	#d3869b	—
markup.bold	#fe8019	bold
markup.heading	#fe8019	bold
markup.italic	—	italic
markup.inserted	#b8bb26	—
markup.deleted	#d65d0e	—
markup.changed	#fe8019	—
markup.punctuation.quote.beginning	#98971a	—
markup.punctuation.list.beginning	#83a598	—
markup.inline.raw, markup.fenced_code.block	#8ec07c	—
string.quoted.double.json	#83a598	—
source.json meta.structure.dictionary.json support.type.property-name.json	#b8bb26	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8ec07c	—
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	#d3869b	—
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	#b8bb26	—
entity.other.attribute-name.css	#fe8019	—
source.css meta.selector	#ebdbb2	—
support.type.property-name.css	#fe8019	—
entity.other.attribute-name.class	#b8bb26	—
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc	#fb4934	—
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss	#d65d0e	—
entity.name.tag.css	—	normal
punctuation.definition.tag	#83a598	—
text.html entity.name.tag, text.html punctuation.tag	#8ec07c	bold
source.js variable.language	#fe8019	—
source.ts variable.language	#fe8019	—
source.go storage.type	#fabd2f	—
source.go entity.name.import	#b8bb26	—
source.go keyword.package, source.go keyword.import	#8ec07c	—
source.go keyword.interface, source.go keyword.struct	#83a598	—
source.go entity.name.type	#ebdbb2	—
source.go entity.name.function	#d3869b	—
keyword.control.cucumber.table	#83a598	—
source.reason string.double, source.reason string.regexp	#b8bb26	—
source.reason keyword.control.less	#8ec07c	—
source.reason entity.name.function	#83a598	—
source.reason support.property-value, source.reason entity.name.filename	#fe8019	—
source.powershell variable.other.member.powershell	#fe8019	—
source.powershell support.function.powershell	#fabd2f	—
source.powershell support.function.attribute.powershell	#bdae93	—
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell	#fe8019	—

VS Code preview

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

Themee — koha13: Intellij light theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

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

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

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

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

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#f9826c
activityBar.background#f6f8fa
activityBar.border#e1e4e8
activityBar.foreground#2f363d
activityBar.inactiveForeground#959da5
activityBarBadge.background#2188ff
activityBarBadge.foreground#fff
badge.background#dbedff
badge.foreground#005cc5
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#2f363d
breadcrumb.foreground#6a737d
breadcrumbPicker.background#fafbfc
button.background#159739
button.foreground#fff
button.hoverBackground#138934
checkbox.background#fafbfc
checkbox.border#d1d5da
debugToolBar.background#fff
descriptionForeground#6a737d
diffEditor.insertedTextBackground#34d05822
diffEditor.removedTextBackground#d73a4922
dropdown.background#fafbfc
dropdown.border#e1e4e8
dropdown.foreground#2f363d
dropdown.listBackground#fff
editor.background#fff
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#fff5b1
editor.foldBackground#fafbfc
editor.foreground#000
editor.inactiveSelectionBackground#0366d611
editor.lineHighlightBackground#f6f8fa
editor.selectionBackground#0366d625
editor.selectionHighlightBackground#34d05840
editor.selectionHighlightBorder#34d05800
editor.stackFrameHighlightBackground#fffbdd
editor.wordHighlightBackground#34d05800
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#34d05800
editor.wordHighlightStrongBorder#24943e50
editorBracketMatch.background#34d05840
editorBracketMatch.border#34d05800
editorCursor.foreground#044289
editorGroup.border#e1e4e8
editorGroupHeader.tabsBackground#f6f8fa
editorGroupHeader.tabsBorder#e1e4e8
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#d7dbe0
editorIndentGuide.background#eff2f6
editorLineNumber.activeForeground#24292e
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#fff
editorWhitespace.foreground#d1d5da
editorWidget.background#f6f8fa
errorForeground#cb2431
focusBorder#2188ff
foreground#444d56
gitDecoration.addedResourceForeground#28a745
gitDecoration.conflictingResourceForeground#e36209
gitDecoration.deletedResourceForeground#d73a49
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#005cc5
gitDecoration.submoduleResourceForeground#959da5
gitDecoration.untrackedResourceForeground#28a745
input.background#fafbfc
input.border#e1e4e8
input.foreground#2f363d
input.placeholderForeground#959da5
list.activeSelectionBackground#e2e5e9
list.activeSelectionForeground#2f363d
list.focusBackground#cce5ff
list.hoverBackground#ebf0f4
list.hoverForeground#2f363d
list.inactiveFocusBackground#dbedff
list.inactiveSelectionBackground#e8eaed
list.inactiveSelectionForeground#2f363d
notificationCenterHeader.background#e1e4e8
notificationCenterHeader.foreground#6a737d
notifications.background#fafbfc
notifications.border#e1e4e8
notifications.foreground#2f363d
notificationsErrorIcon.foreground#d73a49
notificationsInfoIcon.foreground#005cc5
notificationsWarningIcon.foreground#e36209
panel.background#f6f8fa
panel.border#e1e4e8
panelInput.border#e1e4e8
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#2f363d
panelTitle.inactiveForeground#6a737d
pickerGroup.border#e1e4e8
pickerGroup.foreground#2f363d
progressBar.background#2188ff
quickInput.background#fafbfc
quickInput.foreground#2f363d
scrollbar.shadow#6a737d33
scrollbarSlider.activeBackground#959da588
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
settings.headerForeground#2f363d
settings.modifiedItemIndicator#2188ff
sideBar.background#f6f8fa
sideBar.border#e1e4e8
sideBar.foreground#586069
sideBarSectionHeader.background#f6f8fa
sideBarSectionHeader.border#e1e4e8
sideBarSectionHeader.foreground#2f363d
sideBarTitle.foreground#2f363d
statusBar.background#282828
statusBar.border#e1e4e8
statusBar.debuggingBackground#f9826c
statusBar.debuggingForeground#fff
statusBar.foreground#e78f0a
statusBar.noFolderBackground#fff
statusBarItem.prominentBackground#e8eaed
tab.activeBackground#fff
tab.activeBorder#fff
tab.activeBorderTop#f9826c
tab.activeForeground#2f363d
tab.border#e1e4e8
tab.hoverBackground#fff
tab.inactiveBackground#f6f8fa
tab.inactiveForeground#6a737d
tab.unfocusedActiveBorder#fff
tab.unfocusedActiveBorderTop#e1e4e8
tab.unfocusedHoverBackground#fff
terminal.foreground#586069
textBlockQuote.background#fafbfc
textBlockQuote.border#e1e4e8
textCodeBlock.background#f6f8fa
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#f6f8fa
titleBar.activeForeground#2f363d
titleBar.border#e1e4e8
titleBar.inactiveBackground#f6f8fa
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#e1e4e8
welcomePage.buttonBackground#f6f8fa
welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#333333ff	—
comment, punctuation.definition.comment	#AAAAAA	italic
comment.block.preprocessor	#AAAAAA
comment.documentation, comment.block.documentation	#095e09	—
invalid.deprecated	—	—
invalid.illegal	#ff0000	—
keyword.operator	#777777	—
keyword	#000088	bold
storage	#000088	—
storage.type.annotation, storage.type.annotation.java, punctuation.definition.annotation	#9E880D	—
storage.modifier, storage.modifier	#000088	bold
storage.modifier.import, storage.modifier.package	#000000
storage.type, support.type	#000000
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#880088	bold
variable.other.object.property.java	#880088	italic
entity.name.function, support.function	#000000	—
entity.name.type, entity.other.inherited-class, support.class	#000000	—
entity.name.exception	#660000	—
entity.name.section	—	bold
string	#095e09	bold
constant.character.escape	#777777	—
string.regexp	#4B83CD	—
constant.other.symbol	#AB6526	—
punctuation	#4d4d4d	—
string source, text source	#000000	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#AAAAAA	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#2E2A2E	—
entity.name.tag	#000088	bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#0058D7	—
string.quoted.double.html	—
source.css	—
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#7A3E9D	—
meta.property-name, support.type.property-name	#AB6526	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#095e09	—
keyword.other.important	—	bold
keyword.other.unit.px.css	—
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#4B83CD	—
markup.bold, markup.italic	#095e09	—
markup.inline.raw	#AB6526
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#862F95	bold
variable.language	#0042B6	bold
string.quoted.double.js	—
string.quoted.single.js	—
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.block.js, meta.method.declaration.js, meta.objectliteral.js	#862F95
meta.object-literal.key.js	—
meta.object-literal.key.js entity.name.function	#696539
variable.parameter.js	#000000
keyword.operator.expression.delete.js	#000088
constant.language	#000088
storage.type.function.js	#000088	bold
storage.type.js	#000088	bold
variable.language.this.js	#000088	bold
punctuation.section.embedded.begin.php	#000088	bold
variable.language.this.php	#696539	bold
variable.other.php	#696539	bold
storage.type.function.php	#000088	bold
storage.type.class.php	#000088	bold
comment.block.documentation.phpdoc.php	#AAAAAA
comment.block.documentation.phpdoc.php support.class	#AAAAAA
keyword.other.phpdoc.php	#AAAAAA