GK - Semantic colors

Name: GK - Semantic colors
Author: George K

Publisher: George KThemes in package: 15

Semantic color themes

Open in VS Code GitHub

Color themes

VS Code preview

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

GK - Semantic colors — GK semantic - Github Gruvbox 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#fc5800
activityBar.background#282828
activityBar.border#504945
activityBar.foreground#ebdbb2
activityBar.inactiveForeground#a89984
activityBarBadge.background#5f95e7
activityBarBadge.foreground#fff6c8
badge.background#37568c
badge.foreground#d3d9cc
breadcrumb.activeSelectionForeground#dbcca5
breadcrumb.focusForeground#ebdbb2
breadcrumb.foreground#bdae93
breadcrumbPicker.background#38322f
button.background#507f16
button.foreground#e8f5ab
button.hoverBackground#77ad27
button.secondaryBackground#665c54
button.secondaryForeground#fff6c8
button.secondaryHoverBackground#948570
checkbox.background#665c54
checkbox.border#504945
debugToolBar.background#38322f
descriptionForeground#bdae93
diffEditor.insertedTextBackground#6db80030
diffEditor.removedTextBackground#d0474930
dropdown.background#3c3836
dropdown.border#504945
dropdown.foreground#ebdbb2
dropdown.listBackground#282828
editor.background#282828
editor.findMatchBackground#c8b10044
editor.findMatchHighlightBackground#c8b10022
editor.focusedStackFrameHighlightBackground#597a1f33
editor.foldBackground#94857015
editor.foreground#ebdbb2
editor.inactiveSelectionBackground#45859e22
editor.lineHighlightBackground#38322f
editor.linkedEditingBackground#45859e22
editor.selectionBackground#45859e44
editor.selectionHighlightBackground#8ec07c33
editor.selectionHighlightBorder#8ec07c00
editor.stackFrameHighlightBackground#c6670025
editor.wordHighlightBackground#8ec07c00
editor.wordHighlightBorder#8ec07c99
editor.wordHighlightStrongBackground#8ec07c00
editor.wordHighlightStrongBorder#8ec07c66
editorBracketHighlight.foreground1#83a598
editorBracketHighlight.foreground2#fe8019
editorBracketHighlight.foreground3#d3869b
editorBracketHighlight.foreground4#83a598
editorBracketHighlight.foreground5#fe8019
editorBracketHighlight.foreground6#d3869b
editorBracketMatch.background#8ec07c50
editorBracketMatch.border#8ec07c00
editorCursor.foreground#d3d9cc
editorError.foreground#fb4934
editorGroup.border#504945
editorGroupHeader.tabsBackground#1d2021
editorGroupHeader.tabsBorder#504945
editorGutter.addedBackground#6db800
editorGutter.deletedBackground#ea0000
editorGutter.modifiedBackground#377d9f
editorLineNumber.activeForeground#ebdbb2
editorLineNumber.foreground#665c54
editorOverviewRuler.border#504945
editorWarning.foreground#fabd2f
editorWhitespace.foreground#665c54
editorWidget.background#1d2021
errorForeground#fb4934
focusBorder#598ad6
foreground#dbcca5
gitDecoration.addedResourceForeground#3c958d
gitDecoration.conflictingResourceForeground#fe8019
gitDecoration.deletedResourceForeground#ea0000
gitDecoration.ignoredResourceForeground#a89984
gitDecoration.modifiedResourceForeground#83a598
gitDecoration.submoduleResourceForeground#a89984
gitDecoration.untrackedResourceForeground#3c958d
input.background#3c3836
input.border#504945
input.foreground#ebdbb2
input.placeholderForeground#bdae93
list.activeSelectionBackground#464343
list.activeSelectionForeground#ebdbb2
list.focusBackground#37568c
list.hoverBackground#2c2d2e
list.hoverForeground#ebdbb2
list.inactiveFocusBackground#222c38
list.inactiveSelectionBackground#2c2d2e
list.inactiveSelectionForeground#ebdbb2
notificationCenterHeader.background#282828
notificationCenterHeader.foreground#bdae93
notifications.background#3c3836
notifications.border#504945
notifications.foreground#ebdbb2
notificationsErrorIcon.foreground#ea0000
notificationsInfoIcon.foreground#83a598
notificationsWarningIcon.foreground#fe8019
panel.background#1d2021
panel.border#504945
panelInput.border#3c3836
panelTitle.activeBorder#fc5800
panelTitle.activeForeground#ebdbb2
panelTitle.inactiveForeground#bdae93
peekViewEditor.background#1d202188
peekViewEditor.matchHighlightBackground#c8b10033
peekViewResult.background#1d2021
peekViewResult.matchHighlightBackground#c8b10033
pickerGroup.border#665c54
pickerGroup.foreground#ebdbb2
progressBar.background#5f95e7
quickInput.background#282828
quickInput.foreground#ebdbb2
scrollbar.shadow#170e0788
scrollbarSlider.activeBackground#a8998488
scrollbarSlider.background#a8998433
scrollbarSlider.hoverBackground#a8998444
settings.headerForeground#ebdbb2
settings.modifiedItemIndicator#5f95e7
sideBar.background#1d2021
sideBar.border#504945
sideBar.foreground#dbcca5
sideBarSectionHeader.background#1d2021
sideBarSectionHeader.border#504945
sideBarSectionHeader.foreground#ebdbb2
sideBarTitle.foreground#ebdbb2
statusBar.background#282828
statusBar.border#504945
statusBar.debuggingBackground#cc6c47
statusBar.debuggingForeground#fff6c8
statusBar.foreground#dbcca5
statusBar.noFolderBackground#282828
statusBarItem.prominentBackground#2c2d2e
statusBarItem.remoteBackground#282828
statusBarItem.remoteForeground#dbcca5
tab.activeBackground#282828
tab.activeBorder#282828
tab.activeBorderTop#fc5800
tab.activeForeground#ebdbb2
tab.border#504945
tab.hoverBackground#282828
tab.inactiveBackground#1d2021
tab.inactiveForeground#bdae93
tab.unfocusedActiveBorder#282828
tab.unfocusedActiveBorderTop#504945
tab.unfocusedHoverBackground#282828
terminal.ansiBlack#948570
terminal.ansiBlue#377d9f
terminal.ansiBrightBlack#bdae93
terminal.ansiBrightBlue#83a598
terminal.ansiBrightCyan#9aaf75
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#d3869b
terminal.ansiBrightRed#fb4934
terminal.ansiBrightWhite#fff2c5
terminal.ansiBrightYellow#fabd2f
terminal.ansiCyan#88a168
terminal.ansiGreen#3c958d
terminal.ansiMagenta#d3869b
terminal.ansiRed#ea0000
terminal.ansiWhite#dbcca5
terminal.ansiYellow#fabd2f
terminal.foreground#dbcca5
terminal.tab.activeBorder#fc5800
terminalCursor.background#948570
terminalCursor.foreground#83a598
textBlockQuote.background#282828
textBlockQuote.border#665c54
textCodeBlock.background#3c3836
textLink.activeForeground#d3d9cc
textLink.foreground#83a598
textPreformat.foreground#dbcca5
textSeparator.foreground#948570
titleBar.activeBackground#282828
titleBar.activeForeground#ebdbb2
titleBar.border#504945
titleBar.inactiveBackground#1d2021
titleBar.inactiveForeground#bdae93
tree.indentGuidesStroke#3c3836

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#a89984	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language	#83a598	—
entity, entity.name	#d3869b	—
variable.parameter.function	#ebdbb2	—
entity.name.tag	#b8bb26	—
keyword	#fb4934	—
storage, storage.type	#fb4934	—
storage.modifier.package, storage.modifier.import, storage.type.java	#ebdbb2	—
string, punctuation.definition.string, string punctuation.section.embedded source	#a6b594	—
support	#83a598	—
meta.property-name	#83a598	—
variable	#fe8019	—
variable.other	#ebdbb2	—
invalid.broken	#fb4934	italic
invalid.deprecated	#fb4934	italic
invalid.illegal	#fb4934	italic
invalid.unimplemented	#fb4934	italic
carriage-return	#282828	italic underline
message.error	#fb4934	—
string variable	#83a598	—
source.regexp, string.regexp	#e6e5ca	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#e6e5ca	—
string.regexp constant.character.escape	#b8bb26	bold
support.constant	#83a598	—
support.variable	#83a598	—
meta.module-reference	#83a598	—
punctuation.definition.list.begin.markdown	#fe8019	—
markup.heading, markup.heading entity.name	#83a598	bold
markup.quote	#b8bb26	—
markup.italic	#ebdbb2	italic
markup.bold	#ebdbb2	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#83a598	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#fb4934	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#b8bb26	—
markup.changed, punctuation.definition.changed	#fe8019	—
markup.ignored, markup.untracked	#3c3836	—
meta.diff.range	#d3869b	bold
meta.diff.header	#83a598	—
meta.separator	#83a598	bold
meta.output	#83a598	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#dbcca5	—
brackethighlighter.unmatched	#fb4934	—
constant.other.reference.link, string.other.link	#e6e5ca	underline
token.info-token	#6e8583	—
token.warn-token	#ce6e00	—
token.error-token	#ef5142	—
token.debug-token	#cc5c95	—

VS Code preview

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

GK - Semantic colors — GK semantic - Github Gruvbox 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#ec7c6a
activityBar.background#fbf1c7
activityBar.border#d5c4a1
activityBar.foreground#484645
activityBar.inactiveForeground#a89984
activityBarBadge.background#60b2be
activityBarBadge.foreground#fbf1c7
badge.background#d0cdb9
badge.foreground#458588
breadcrumb.activeSelectionForeground#695c51
breadcrumb.focusForeground#484645
breadcrumb.foreground#7c6f64
breadcrumbPicker.background#d5c4a1
button.background#9ea907
button.foreground#fbf1c7
button.hoverBackground#969a01
button.secondaryBackground#d5c4a1
button.secondaryForeground#322d2b
button.secondaryHoverBackground#bdae93
checkbox.background#d5c4a1
checkbox.border#bdae93
debugToolBar.background#fbf1c7
descriptionForeground#7c6f64
diffEditor.insertedTextBackground#459be222
diffEditor.removedTextBackground#cc241d22
dropdown.background#d5c4a1
dropdown.border#d5c4a1
dropdown.foreground#484645
dropdown.listBackground#fbf1c7
editor.background#fbf1c7
editor.findMatchBackground#fccc62
editor.findMatchHighlightBackground#fccc6266
editor.focusedStackFrameHighlightBackground#abb92225
editor.foldBackground#bdae9311
editor.foreground#3c3836
editor.inactiveSelectionBackground#49909811
editor.lineHighlightBackground#ebdbb2
editor.linkedEditingBackground#49909811
editor.selectionBackground#49909825
editor.selectionHighlightBackground#459be240
editor.selectionHighlightBorder#459be200
editor.stackFrameHighlightBackground#fbc14633
editor.wordHighlightBackground#459be200
editor.wordHighlightBorder#a0a61c99
editor.wordHighlightStrongBackground#459be200
editor.wordHighlightStrongBorder#a0a61c50
editorBracketHighlight.foreground1#458588
editorBracketHighlight.foreground2#d65d0e
editorBracketHighlight.foreground3#9a5169
editorBracketHighlight.foreground4#458588
editorBracketHighlight.foreground5#d65d0e
editorBracketHighlight.foreground6#9a5169
editorBracketMatch.background#459be240
editorBracketMatch.border#459be200
editorCursor.foreground#3f654c
editorError.foreground#c00000
editorGroup.border#d5c4a1
editorGroupHeader.tabsBackground#ebdbb2
editorGroupHeader.tabsBorder#d5c4a1
editorGutter.addedBackground#abb922
editorGutter.deletedBackground#cc241d
editorGutter.modifiedBackground#60b2be
editorLineNumber.activeForeground#3c3836
editorLineNumber.foreground#322d2b4d
editorOverviewRuler.border#fbf1c7
editorWarning.foreground#f5b329
editorWhitespace.foreground#bdae93
editorWidget.background#ebdbb2
errorForeground#c00000
focusBorder#60b2be
foreground#55493f
gitDecoration.addedResourceForeground#abb922
gitDecoration.conflictingResourceForeground#d65d0e
gitDecoration.deletedResourceForeground#cc241d
gitDecoration.ignoredResourceForeground#a89984
gitDecoration.modifiedResourceForeground#458588
gitDecoration.submoduleResourceForeground#a89984
gitDecoration.untrackedResourceForeground#abb922
input.background#d5c4a1
input.border#d5c4a1
input.foreground#484645
input.placeholderForeground#a89984
list.activeSelectionBackground#d6c5a2
list.activeSelectionForeground#484645
list.focusBackground#c1c6ba
list.hoverBackground#e0d3ad
list.hoverForeground#484645
list.inactiveFocusBackground#d0cdb9
list.inactiveSelectionBackground#dccaa6
list.inactiveSelectionForeground#484645
notificationCenterHeader.background#d5c4a1
notificationCenterHeader.foreground#7c6f64
notifications.background#d5c4a1
notifications.border#d5c4a1
notifications.foreground#484645
notificationsErrorIcon.foreground#cc241d
notificationsInfoIcon.foreground#458588
notificationsWarningIcon.foreground#d65d0e
panel.background#ebdbb2
panel.border#d5c4a1
panelInput.border#d5c4a1
panelTitle.activeBorder#ec7c6a
panelTitle.activeForeground#484645
panelTitle.inactiveForeground#7c6f64
pickerGroup.border#d5c4a1
pickerGroup.foreground#484645
progressBar.background#60b2be
quickInput.background#d5c4a1
quickInput.foreground#484645
scrollbar.shadow#7c6f6433
scrollbarSlider.activeBackground#a8998488
scrollbarSlider.background#a8998433
scrollbarSlider.hoverBackground#a8998444
settings.headerForeground#484645
settings.modifiedItemIndicator#60b2be
sideBar.background#ebdbb2
sideBar.border#d5c4a1
sideBar.foreground#695c51
sideBarSectionHeader.background#ebdbb2
sideBarSectionHeader.border#d5c4a1
sideBarSectionHeader.foreground#484645
sideBarTitle.foreground#484645
statusBar.background#fbf1c7
statusBar.border#d5c4a1
statusBar.debuggingBackground#ec7c6a
statusBar.debuggingForeground#fbf1c7
statusBar.foreground#695c51
statusBar.noFolderBackground#fbf1c7
statusBarItem.prominentBackground#dccaa6
statusBarItem.remoteBackground#fbf1c7
statusBarItem.remoteForeground#695c51
tab.activeBackground#fbf1c7
tab.activeBorder#fbf1c7
tab.activeBorderTop#ec7c6a
tab.activeForeground#484645
tab.border#d5c4a1
tab.hoverBackground#fbf1c7
tab.inactiveBackground#ebdbb2
tab.inactiveForeground#7c6f64
tab.unfocusedActiveBorder#fbf1c7
tab.unfocusedActiveBorderTop#d5c4a1
tab.unfocusedHoverBackground#fbf1c7
terminal.ansiBlack#3c3836
terminal.ansiBlue#499098
terminal.ansiBrightBlack#a89984
terminal.ansiBrightBlue#458588
terminal.ansiBrightCyan#79b594
terminal.ansiBrightGreen#98971a
terminal.ansiBrightMagenta#9a5169
terminal.ansiBrightRed#c00000
terminal.ansiBrightWhite#bdae93
terminal.ansiBrightYellow#ac7718
terminal.ansiCyan#689d6a
terminal.ansiGreen#abb922
terminal.ansiMagenta#9a5169
terminal.ansiRed#cc241d
terminal.ansiWhite#7c6f64
terminal.ansiYellow#d79921
terminal.foreground#695c51
terminal.tab.activeBorder#ec7c6a
terminalCursor.background#bdae93
terminalCursor.foreground#458588
textBlockQuote.background#d5c4a1
textBlockQuote.border#d5c4a1
textCodeBlock.background#ebdbb2
textLink.activeForeground#458588
textLink.foreground#499098
textPreformat.foreground#695c51
textSeparator.foreground#bdae93
titleBar.activeBackground#fbf1c7
titleBar.activeForeground#484645
titleBar.border#d5c4a1
titleBar.inactiveBackground#ebdbb2
titleBar.inactiveForeground#7c6f64
tree.indentGuidesStroke#d5c4a1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#7c6f64	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language	#458588	—
entity, entity.name	#b16286	—
variable.parameter.function	#3c3836	—
entity.name.tag	#98971a	—
keyword	#cc241d	—
storage, storage.type	#cc241d	—
storage.modifier.package, storage.modifier.import, storage.type.java	#3c3836	—
string, punctuation.definition.string, string punctuation.section.embedded source	#25416d	—
support	#458588	—
meta.property-name	#458588	—
variable	#d65d0e	—
variable.other	#3c3836	—
invalid.broken	#a80000	italic
invalid.deprecated	#a80000	italic
invalid.illegal	#a80000	italic
invalid.unimplemented	#a80000	italic
carriage-return	#d5c4a1	italic underline
message.error	#a80000	—
string variable	#458588	—
source.regexp, string.regexp	#25416d	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#25416d	—
string.regexp constant.character.escape	#98971a	bold
support.constant	#458588	—
support.variable	#458588	—
meta.module-reference	#458588	—
punctuation.definition.list.begin.markdown	#d65d0e	—
markup.heading, markup.heading entity.name	#458588	bold
markup.quote	#98971a	—
markup.italic	#3c3836	italic
markup.bold	#3c3836	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#458588	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#a80000	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#98971a	—
markup.changed, punctuation.definition.changed	#d65d0e	—
markup.ignored, markup.untracked	#ebdbb2	—
meta.diff.range	#b16286	bold
meta.diff.header	#458588	—
meta.separator	#458588	bold
meta.output	#458588	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#695c51	—
brackethighlighter.unmatched	#a80000	—
constant.other.reference.link, string.other.link	#25416d	underline
token.info-token	#62928d	—
token.warn-token	#a6be4a	—
token.error-token	#c21600	—
token.debug-token	#c00b3f	—

VS Code preview

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

GK - Semantic colors — GK semantic - 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#ffffff
activityBar.border#e1e4e8
activityBar.foreground#2f363d
activityBar.inactiveForeground#959da5
activityBarBadge.background#2188ff
activityBarBadge.foreground#ffffff
badge.background#dbedff
badge.foreground#005cc5
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#2f363d
breadcrumb.foreground#6a737d
breadcrumbPicker.background#fafbfc
button.background#159739
button.foreground#ffffff
button.hoverBackground#138934
button.secondaryBackground#e1e4e8
button.secondaryForeground#1b1f23
button.secondaryHoverBackground#d1d5da
checkbox.background#fafbfc
checkbox.border#d1d5da
debugToolBar.background#ffffff
descriptionForeground#6a737d
diffEditor.insertedTextBackground#009aff22
diffEditor.removedTextBackground#d73a4922
dropdown.background#fafbfc
dropdown.border#e1e4e8
dropdown.foreground#2f363d
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#28a74525
editor.foldBackground#d1d5da11
editor.foreground#24292e
editor.inactiveSelectionBackground#0366d611
editor.lineHighlightBackground#f6f8fa
editor.linkedEditingBackground#0366d611
editor.selectionBackground#0366d625
editor.selectionHighlightBackground#009aff40
editor.selectionHighlightBorder#009aff00
editor.stackFrameHighlightBackground#ffd33d33
editor.wordHighlightBackground#009aff00
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#009aff00
editor.wordHighlightStrongBorder#24943e50
editorBracketHighlight.foreground1#005cc5
editorBracketHighlight.foreground2#e36209
editorBracketHighlight.foreground3#5a32a3
editorBracketHighlight.foreground4#005cc5
editorBracketHighlight.foreground5#e36209
editorBracketHighlight.foreground6#5a32a3
editorBracketMatch.background#009aff40
editorBracketMatch.border#009aff00
editorCursor.foreground#044289
editorError.foreground#cb2431
editorGroup.border#e1e4e8
editorGroupHeader.tabsBackground#f6f8fa
editorGroupHeader.tabsBorder#e1e4e8
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#2188ff
editorLineNumber.activeForeground#24292e
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#ffffff
editorWarning.foreground#f9c513
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#ffffff
statusBar.border#e1e4e8
statusBar.debuggingBackground#f9826c
statusBar.debuggingForeground#ffffff
statusBar.foreground#586069
statusBar.noFolderBackground#ffffff
statusBarItem.prominentBackground#e8eaed
statusBarItem.remoteBackground#ffffff
statusBarItem.remoteForeground#586069
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#f9826c
tab.activeForeground#2f363d
tab.border#e1e4e8
tab.hoverBackground#ffffff
tab.inactiveBackground#f6f8fa
tab.inactiveForeground#6a737d
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#e1e4e8
tab.unfocusedHoverBackground#ffffff
terminal.ansiBlack#24292e
terminal.ansiBlue#0366d6
terminal.ansiBrightBlack#959da5
terminal.ansiBrightBlue#005cc5
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#22863a
terminal.ansiBrightMagenta#5a32a3
terminal.ansiBrightRed#cb2431
terminal.ansiBrightWhite#d1d5da
terminal.ansiBrightYellow#b08800
terminal.ansiCyan#1b7c83
terminal.ansiGreen#28a745
terminal.ansiMagenta#5a32a3
terminal.ansiRed#d73a49
terminal.ansiWhite#6a737d
terminal.ansiYellow#dbab09
terminal.foreground#586069
terminal.tab.activeBorder#f9826c
terminalCursor.background#d1d5da
terminalCursor.foreground#005cc5
textBlockQuote.background#fafbfc
textBlockQuote.border#e1e4e8
textCodeBlock.background#f6f8fa
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#ffffff
titleBar.activeForeground#2f363d
titleBar.border#e1e4e8
titleBar.inactiveBackground#f6f8fa
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#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.other.enummember, 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 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.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.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
token.info-token	#316bcd	—
token.warn-token	#00ab5c	—
token.error-token	#cd3131	—
token.debug-token	#800080	—

VS Code preview

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

GK - Semantic colors — GK semantic - Github Tomorrow

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#ffa67c
activityBar.background#ffffff
activityBar.border#e5e5e5
activityBar.foreground#595b5c
activityBar.inactiveForeground#a3a4a2
activityBarBadge.background#5d9de6
activityBarBadge.foreground#ffffff
badge.background#dfeefc
badge.foreground#4271ae
breadcrumb.activeSelectionForeground#7b7c78
breadcrumb.focusForeground#595b5c
breadcrumb.foreground#8e908c
breadcrumbPicker.background#efefef
button.background#759d00
button.foreground#ffffff
button.hoverBackground#6e8f00
button.secondaryBackground#e5e5e5
button.secondaryForeground#434240
button.secondaryHoverBackground#d6d6d6
checkbox.background#efefef
checkbox.border#d6d6d6
debugToolBar.background#ffffff
descriptionForeground#8e908c
diffEditor.insertedTextBackground#30a3fe22
diffEditor.removedTextBackground#c8282922
dropdown.background#efefef
dropdown.border#e5e5e5
dropdown.foreground#595b5c
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#ffec5f
editor.findMatchHighlightBackground#ffec5f66
editor.focusedStackFrameHighlightBackground#81ad0725
editor.foldBackground#d6d6d611
editor.foreground#4d4d4c
editor.inactiveSelectionBackground#477bbf11
editor.lineHighlightBackground#f6f6f6
editor.linkedEditingBackground#477bbf11
editor.selectionBackground#477bbf25
editor.selectionHighlightBackground#30a3fe40
editor.selectionHighlightBorder#30a3fe00
editor.stackFrameHighlightBackground#ffdf3d33
editor.wordHighlightBackground#30a3fe00
editor.wordHighlightBorder#789a0099
editor.wordHighlightStrongBackground#30a3fe00
editor.wordHighlightStrongBorder#789a0050
editorBracketHighlight.foreground1#4271ae
editorBracketHighlight.foreground2#f5871f
editorBracketHighlight.foreground3#73498b
editorBracketHighlight.foreground4#4271ae
editorBracketHighlight.foreground5#f5871f
editorBracketHighlight.foreground6#73498b
editorBracketMatch.background#30a3fe40
editorBracketMatch.border#30a3fe00
editorCursor.foreground#385473
editorError.foreground#bc0400
editorGroup.border#e5e5e5
editorGroupHeader.tabsBackground#f6f6f6
editorGroupHeader.tabsBorder#e5e5e5
editorGutter.addedBackground#81ad07
editorGutter.deletedBackground#c82829
editorGutter.modifiedBackground#5d9de6
editorLineNumber.activeForeground#4d4d4c
editorLineNumber.foreground#4342404d
editorOverviewRuler.border#ffffff
editorWarning.foreground#ffd10b
editorWhitespace.foreground#d6d6d6
editorWidget.background#f6f6f6
errorForeground#bc0400
focusBorder#5d9de6
foreground#666864
gitDecoration.addedResourceForeground#81ad07
gitDecoration.conflictingResourceForeground#f5871f
gitDecoration.deletedResourceForeground#c82829
gitDecoration.ignoredResourceForeground#a3a4a2
gitDecoration.modifiedResourceForeground#4271ae
gitDecoration.submoduleResourceForeground#a3a4a2
gitDecoration.untrackedResourceForeground#81ad07
input.background#efefef
input.border#e5e5e5
input.foreground#595b5c
input.placeholderForeground#a3a4a2
list.activeSelectionBackground#e6e6e6
list.activeSelectionForeground#595b5c
list.focusBackground#d0e6fc
list.hoverBackground#ebeef0
list.hoverForeground#595b5c
list.inactiveFocusBackground#dfeefc
list.inactiveSelectionBackground#ecebea
list.inactiveSelectionForeground#595b5c
notificationCenterHeader.background#e5e5e5
notificationCenterHeader.foreground#8e908c
notifications.background#efefef
notifications.border#e5e5e5
notifications.foreground#595b5c
notificationsErrorIcon.foreground#c82829
notificationsInfoIcon.foreground#4271ae
notificationsWarningIcon.foreground#f5871f
panel.background#f6f6f6
panel.border#e5e5e5
panelInput.border#e5e5e5
panelTitle.activeBorder#ffa67c
panelTitle.activeForeground#595b5c
panelTitle.inactiveForeground#8e908c
pickerGroup.border#e5e5e5
pickerGroup.foreground#595b5c
progressBar.background#5d9de6
quickInput.background#efefef
quickInput.foreground#595b5c
scrollbar.shadow#8e908c33
scrollbarSlider.activeBackground#a3a4a288
scrollbarSlider.background#a3a4a233
scrollbarSlider.hoverBackground#a3a4a244
settings.headerForeground#595b5c
settings.modifiedItemIndicator#5d9de6
sideBar.background#f6f6f6
sideBar.border#e5e5e5
sideBar.foreground#7b7c78
sideBarSectionHeader.background#f6f6f6
sideBarSectionHeader.border#e5e5e5
sideBarSectionHeader.foreground#595b5c
sideBarTitle.foreground#595b5c
statusBar.background#ffffff
statusBar.border#e5e5e5
statusBar.debuggingBackground#ffa67c
statusBar.debuggingForeground#ffffff
statusBar.foreground#7b7c78
statusBar.noFolderBackground#ffffff
statusBarItem.prominentBackground#ecebea
statusBarItem.remoteBackground#ffffff
statusBarItem.remoteForeground#7b7c78
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#ffa67c
tab.activeForeground#595b5c
tab.border#e5e5e5
tab.hoverBackground#ffffff
tab.inactiveBackground#f6f6f6
tab.inactiveForeground#8e908c
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#e5e5e5
tab.unfocusedHoverBackground#ffffff
terminal.ansiBlack#4d4d4c
terminal.ansiBlue#477bbf
terminal.ansiBrightBlack#a3a4a2
terminal.ansiBrightBlue#4271ae
terminal.ansiBrightCyan#51b0c7
terminal.ansiBrightGreen#718c00
terminal.ansiBrightMagenta#73498b
terminal.ansiBrightRed#bc0400
terminal.ansiBrightWhite#d6d6d6
terminal.ansiBrightYellow#be9400
terminal.ansiCyan#3e999f
terminal.ansiGreen#81ad07
terminal.ansiMagenta#73498b
terminal.ansiRed#c82829
terminal.ansiWhite#8e908c
terminal.ansiYellow#eab700
terminal.foreground#7b7c78
terminal.tab.activeBorder#ffa67c
terminalCursor.background#d6d6d6
terminalCursor.foreground#4271ae
textBlockQuote.background#efefef
textBlockQuote.border#e5e5e5
textCodeBlock.background#f6f6f6
textLink.activeForeground#4271ae
textLink.foreground#477bbf
textPreformat.foreground#7b7c78
textSeparator.foreground#d6d6d6
titleBar.activeBackground#ffffff
titleBar.activeForeground#595b5c
titleBar.border#e5e5e5
titleBar.inactiveBackground#f6f6f6
titleBar.inactiveForeground#8e908c
tree.indentGuidesStroke#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#8e908c	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language	#4271ae	—
entity, entity.name	#8959a8	—
variable.parameter.function	#4d4d4c	—
entity.name.tag	#718c00	—
keyword	#c82829	—
storage, storage.type	#c82829	—
storage.modifier.package, storage.modifier.import, storage.type.java	#4d4d4c	—
string, punctuation.definition.string, string punctuation.section.embedded source	#345786	—
support	#4271ae	—
meta.property-name	#4271ae	—
variable	#f5871f	—
variable.other	#4d4d4c	—
invalid.broken	#a40000	italic
invalid.deprecated	#a40000	italic
invalid.illegal	#a40000	italic
invalid.unimplemented	#a40000	italic
carriage-return	#efefef	italic underline
message.error	#a40000	—
string variable	#4271ae	—
source.regexp, string.regexp	#345786	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#345786	—
string.regexp constant.character.escape	#718c00	bold
support.constant	#4271ae	—
support.variable	#4271ae	—
meta.module-reference	#4271ae	—
punctuation.definition.list.begin.markdown	#f5871f	—
markup.heading, markup.heading entity.name	#4271ae	bold
markup.quote	#718c00	—
markup.italic	#4d4d4c	italic
markup.bold	#4d4d4c	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#4271ae	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#a40000	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#718c00	—
markup.changed, punctuation.definition.changed	#f5871f	—
markup.ignored, markup.untracked	#f6f6f6	—
meta.diff.range	#8959a8	bold
meta.diff.header	#4271ae	—
meta.separator	#4271ae	bold
meta.output	#4271ae	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#7b7c78	—
brackethighlighter.unmatched	#a40000	—
constant.other.reference.link, string.other.link	#345786	underline
token.info-token	#5d7eb5	—
token.warn-token	#7ab23d	—
token.error-token	#be1c00	—
token.debug-token	#9b1e67	—