Buzzokai Dimmed

Name: Buzzokai Dimmed
Author: HRIDOY-BUZZ

Publisher: HRIDOY-BUZZThemes in package: 8

A collection of dark, dimmed and eye-comforting VS Code color themes for better productivity. Easily switch between themes by typing 'buzzokai' in the Command Palette.

Open in VS Code GitHub

Color themes

VS Code preview

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

Buzzokai Dimmed — Buzzokai Mono Green

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#383a49
activityBar.activeBorder#2ea043
activityBar.background#0D1213
activityBar.border#2b2b2b
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#868686
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#616161
badge.foreground#f8f8f8
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#026ec1
button.secondaryBackground#313131
button.secondaryForeground#cccccc
button.secondaryHoverBackground#3c3c3c
chat.slashCommandBackground#34414b
chat.slashCommandForeground#40a6ff
checkbox.background#313131
checkbox.border#3c3c3c
debugToolBar.background#0D1213
descriptionForeground#9d9d9d
dropdown.background#313131
dropdown.border#3c3c3c
dropdown.foreground#cccccc
dropdown.listBackground#151D1E
editor.background#151D1E
editor.findMatchBackground#9e6a03
editor.foreground#cccccc
editor.inactiveSelectionBackground#3a3d41fa
editor.selectionHighlightBackground#add6ff26
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#0D1213
editorGroupHeader.tabsBorder#2b2b2b
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#f85149
focusBorder#2ea043
foreground#cccccc
icon.foreground#cccccc
input.background#313131
input.border#3c3c3c
input.foreground#cccccc
input.placeholderForeground#989898
inputOption.activeBackground#2489db82
inputOption.activeBorder#2ea043
keybindingLabel.foreground#cccccc
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#151D1E
menu.border#454545
menu.foreground#cccccc
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#151D1E
notificationCenterHeader.foreground#cccccc
notifications.background#151D1E
notifications.border#2b2b2b
notifications.foreground#cccccc
panel.background#0D1213
panel.border#2b2b2b
panelInput.border#2b2b2b
panelTitle.activeBorder#2ea043
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#9d9d9d
peekViewEditor.background#151D1E
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#151D1E
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#3c3c3c
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#222222
quickInput.foreground#cccccc
settings.dropdownBackground#313131
settings.dropdownBorder#3c3c3c
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#0D1213
sideBar.border#2b2b2b
sideBar.foreground#cccccc
sideBarSectionHeader.background#0D1213
sideBarSectionHeader.border#2b2b2b
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#0D1213
statusBar.border#2b2b2b
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#2ea043
statusBar.foreground#cccccc
statusBar.noFolderBackground#151D1E
statusBarItem.focusBorder#2ea043
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
tab.activeBackground#151D1E
tab.activeBorder#151D1E
tab.activeBorderTop#2ea043
tab.activeForeground#ffffff
tab.border#2b2b2b
tab.hoverBackground#151D1E
tab.inactiveBackground#0D1213
tab.inactiveForeground#9d9d9d
tab.lastPinnedBorder#cccccc33
tab.selectedBackground#222222
tab.selectedBorderTop#2ea043
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorder#151D1E
tab.unfocusedActiveBorderTop#2b2b2b
tab.unfocusedHoverBackground#151D1E
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#2ea043
textBlockQuote.background#2b2b2b
textBlockQuote.border#616161
textCodeBlock.background#2b2b2b
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3c3c3c
textPreformat.foreground#d0d0d0
textSeparator.foreground#21262d
titleBar.activeBackground#0D1213
titleBar.activeForeground#cccccc
titleBar.border#2b2b2b
titleBar.inactiveBackground#151D1E
titleBar.inactiveForeground#9d9d9d
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#2b2b2b
widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#F8F8F2CF	—
variable.object, variable.other.object	#9bbbff	—
comment	#88846F	italic
string	#e6db74bf	—
punctuation.definition.template-expression, punctuation.section.embedded	#F92672CF	—
meta.template.expression	#F8F8F2CF	—
constant.numeric	#AE81FFCF	—
constant.language	#AE81FFCF	—
constant.character, constant.other	#AE81FFCF	—
variable	#F8F8F2CF
keyword	#F92672CF	—
storage	#F92672CF
storage.type	#66D9EFCF	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#A6E22EBF	underline
entity.other.inherited-class	#A6E22EBF	italic underline
entity.name.function	#A6E22EBF
variable.parameter	#FD971FCF	italic
entity.name.tag	#F92672CF
entity.other.attribute-name	#A6E22EBF
support.function	#66D9EFCF
support.constant	#66D9EFCF
support.type, support.class	#66D9EFCF	italic
support.other.variable	—
invalid	#F44747CF
invalid.deprecated	#F44747CF	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672CF	—
markup.inserted	#A6E22EBF	—
markup.changed	#e6db74bf	—
constant.numeric.line-number.find-in-files - match	#AE81FFA0	—
entity.name.filename.find-in-files	#e6db74bf	—
markup.quote	#F92672CF	—
markup.list	#e6db74bf	—
markup.bold, markup.italic	#66D9EFCF	—
markup.inline.raw	#FD971FCF
markup.heading	#A6E22EBF	—
markup.heading.setext	#A6E22EBF	bold
markup.heading.markdown	—	bold
markup.quote.markdown	#75715E	italic
markup.bold.markdown	—	bold
string.other.link.title.markdown,string.other.link.description.markdown	#AE81FFCF	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#e6db74bf	—
markup.italic.markdown	—	italic
markup.strikethrough	—	strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#F8F8F2CF	—
punctuation.definition.list.begin.markdown	#A6E22EBF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747CF	—
token.debug-token	#B267E6	—
variable.language	#FD971FCF	—

VS Code preview

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

Buzzokai Dimmed — Buzzokai Reversed 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#383a49
activityBar.activeBorder#0078d4
activityBar.background#181818
activityBar.border#2b2b2b
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#868686
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#616161
badge.foreground#f8f8f8
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#026ec1
button.secondaryBackground#313131
button.secondaryForeground#cccccc
button.secondaryHoverBackground#3c3c3c
chat.slashCommandBackground#34414b
chat.slashCommandForeground#40a6ff
checkbox.background#313131
checkbox.border#3c3c3c
debugToolBar.background#181818
descriptionForeground#9d9d9d
dropdown.background#313131
dropdown.border#3c3c3c
dropdown.foreground#cccccc
dropdown.listBackground#1b1b1b
editor.background#1b1b1b
editor.findMatchBackground#9e6a03
editor.foreground#cccccc
editor.inactiveSelectionBackground#3a3d41fa
editor.selectionHighlightBackground#add6ff26
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2b2b2b
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#f85149
focusBorder#0078d4
foreground#cccccc
icon.foreground#cccccc
input.background#313131
input.border#3c3c3c
input.foreground#cccccc
input.placeholderForeground#989898
inputOption.activeBackground#2489db82
inputOption.activeBorder#2488db
keybindingLabel.foreground#cccccc
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#1b1b1b
menu.border#454545
menu.foreground#cccccc
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#1b1b1b
notificationCenterHeader.foreground#cccccc
notifications.background#1b1b1b
notifications.border#2b2b2b
notifications.foreground#cccccc
panel.background#181818
panel.border#2b2b2b
panelInput.border#2b2b2b
panelTitle.activeBorder#0078d4
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#9d9d9d
peekViewEditor.background#1b1b1b
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#1b1b1b
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#3c3c3c
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#222222
quickInput.foreground#cccccc
settings.dropdownBackground#313131
settings.dropdownBorder#3c3c3c
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#181818
sideBar.border#2b2b2b
sideBar.foreground#cccccc
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2b2b2b
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#181818
statusBar.border#2b2b2b
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0078d4
statusBar.foreground#cccccc
statusBar.noFolderBackground#1b1b1b
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1b1b1b
tab.activeBorder#1b1b1b
tab.activeBorderTop#0078d4
tab.activeForeground#ffffff
tab.border#2b2b2b
tab.hoverBackground#1b1b1b
tab.inactiveBackground#181818
tab.inactiveForeground#9d9d9d
tab.lastPinnedBorder#cccccc33
tab.selectedBackground#222222
tab.selectedBorderTop#6caddf
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorder#1b1b1b
tab.unfocusedActiveBorderTop#2b2b2b
tab.unfocusedHoverBackground#1b1b1b
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#0078d4
textBlockQuote.background#2b2b2b
textBlockQuote.border#616161
textCodeBlock.background#2b2b2b
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3c3c3c
textPreformat.foreground#d0d0d0
textSeparator.foreground#21262d
titleBar.activeBackground#181818
titleBar.activeForeground#cccccc
titleBar.border#2b2b2b
titleBar.inactiveBackground#1b1b1b
titleBar.inactiveForeground#9d9d9d
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#2b2b2b
widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4CF	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#88846F	italic
constant.language	#569CD6CF	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#B5CEA8CF	—
constant.regexp	#646695CF	—
entity.name.tag	#569CD6CF	—
entity.name.tag.css, entity.name.tag.less	#D7BA7DCF	—
entity.other.attribute-name	#9CDCFECF	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#D7BA7DCF	—
invalid	#F44747	—
markup.underline	—	underline
markup.bold	#569CD6CF	bold
markup.heading	#569CD6CF	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#B5CEA8CF	—
markup.deleted	#CE9178CF	—
markup.changed	#569CD6CF	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796E6	—
markup.inline.raw	#CE9178CF	—
punctuation.definition.tag	#569CD6CF	—
meta.preprocessor, entity.name.function.preprocessor	#569CD6CF	—
meta.preprocessor.string	#CE9178CF	—
meta.preprocessor.numeric	#B5CEA8CF	—
meta.structure.dictionary.key.python	#9CDCFECF	—
meta.diff.header	#569CD6CF	—
storage	#569CD6CF	—
storage.type	#569CD6CF	italic
storage.modifier, keyword.operator.noexcept	#569CD6CF	—
string, meta.embedded.assembly	#CE9178CF	—
string.tag	#CE9178CF	—
string.value	#CE9178CF	—
string.regexp	#D16969CF	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#569CD6CF	—
meta.template.expression	#D4D4D4CF	—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded	#9CDCFECF	—
keyword	#569CD6CF	—
keyword.control	#569CD6CF	—
keyword.operator	#D4D4D4CF	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#569CD6CF	—
keyword.other.unit	#B5CEA8CF	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569CD6CF	—
support.function.git-rebase	#9CDCFECF	—
constant.sha.git-rebase	#B5CEA8CF	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#D4D4D4CF	—
variable.language	#569CD6CF	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#DCDCAACF	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#4EC9B0CF	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#4EC9B0CF	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#C586C0CF	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#9CDCFECF	—
variable.other.constant, variable.other.enummember	#4FC1FFCF	—
meta.object-literal.key	#9CDCFECF	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CE9178CF	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#CE9178CF	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#D16969CF	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAACF	—
keyword.operator.quantifier.regexp	#D7BA7DCF	—
constant.character, constant.other.option	#569CD6CF	—
constant.character.escape	#D7BA7DCF	—
entity.name.label	#C8C8C8CF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

VS Code preview

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

Buzzokai Dimmed — Buzzokai Shopify Blue

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#383a49
activityBar.activeBorder#0078d4
activityBar.background#0B101F
activityBar.border#2b2b2b
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#868686
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#616161
badge.foreground#f8f8f8
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#026ec1
button.secondaryBackground#313131
button.secondaryForeground#cccccc
button.secondaryHoverBackground#3c3c3c
chat.slashCommandBackground#34414b
chat.slashCommandForeground#40a6ff
checkbox.background#313131
checkbox.border#3c3c3c
debugToolBar.background#0B101F
descriptionForeground#9d9d9d
dropdown.background#313131
dropdown.border#3c3c3c
dropdown.foreground#cccccc
dropdown.listBackground#101B2E
editor.background#101B2E
editor.findMatchBackground#9e6a03
editor.foreground#cccccc
editor.inactiveSelectionBackground#3a3d41fa
editor.selectionHighlightBackground#add6ff26
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#0B101F
editorGroupHeader.tabsBorder#2b2b2b
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#f85149
focusBorder#0078d4
foreground#cccccc
icon.foreground#cccccc
input.background#313131
input.border#3c3c3c
input.foreground#cccccc
input.placeholderForeground#989898
inputOption.activeBackground#2489db82
inputOption.activeBorder#2488db
keybindingLabel.foreground#cccccc
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#101B2E
menu.border#454545
menu.foreground#cccccc
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#101B2E
notificationCenterHeader.foreground#cccccc
notifications.background#101B2E
notifications.border#2b2b2b
notifications.foreground#cccccc
panel.background#0B101F
panel.border#2b2b2b
panelInput.border#2b2b2b
panelTitle.activeBorder#0078d4
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#9d9d9d
peekViewEditor.background#101B2E
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#101B2E
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#3c3c3c
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#222222
quickInput.foreground#cccccc
settings.dropdownBackground#313131
settings.dropdownBorder#3c3c3c
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#0B101F
sideBar.border#2b2b2b
sideBar.foreground#cccccc
sideBarSectionHeader.background#0B101F
sideBarSectionHeader.border#2b2b2b
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#0B101F
statusBar.border#2b2b2b
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0078d4
statusBar.foreground#cccccc
statusBar.noFolderBackground#101B2E
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
tab.activeBackground#101B2E
tab.activeBorder#101B2E
tab.activeBorderTop#0078d4
tab.activeForeground#ffffff
tab.border#2b2b2b
tab.hoverBackground#101B2E
tab.inactiveBackground#0B101F
tab.inactiveForeground#9d9d9d
tab.lastPinnedBorder#cccccc33
tab.selectedBackground#222222
tab.selectedBorderTop#6caddf
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorder#101B2E
tab.unfocusedActiveBorderTop#2b2b2b
tab.unfocusedHoverBackground#101B2E
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#0078d4
textBlockQuote.background#2b2b2b
textBlockQuote.border#616161
textCodeBlock.background#2b2b2b
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3c3c3c
textPreformat.foreground#d0d0d0
textSeparator.foreground#21262d
titleBar.activeBackground#0B101F
titleBar.activeForeground#cccccc
titleBar.border#2b2b2b
titleBar.inactiveBackground#101B2E
titleBar.inactiveForeground#9d9d9d
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#2b2b2b
widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D4D4D4CF	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4CF	—
comment	#8b8b8b	italic
constant	#00f4b9
constant.numeric	#60EA4ECC
keyword	#859DD6
entity	#859DD6
entity.other.attribute-name	#859DD6	—
declaration.tag, meta.tag	#ffffff
declaration.tag entity, meta.tag entity	#b0d8a3
storage	#569CD6	bold
string	#E4918F
support	#00D98F
variable	#E7F972CC	italic
invalid	#ffffffff	—
entity.other.inherited-class	#4EC9B0	underline
constant.character	#569CD6	—
string constant, constant.character.escape	#D7BA7DCF
string.regexp	#D16969CF	—
string variable	#edef7dff	—
support.function	#f3f973
support.constant, support.variable	#eb939aff
declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string	#73817dff
meta.selector.css entity.name.tag	#aa5507ff
meta.selector.css entity.other.attribute-name.id	#fec758ff	—
meta.selector.css entity.other.attribute-name.class	#41a83eff
support.type.property-name.css	#96dd3bff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#ffe862ff	italic
meta.property-value support.constant.named-color.css, meta.property-value constant	#ffe862ff
meta.preprocessor.at-rule keyword.control.at-rule	#fd6209ff	—
meta.constructor.argument.css	#ec9799ff
meta.diff, meta.diff.header	#f8f8f8ff	italic
markup.deleted	#ec9799ff	—
markup.changed	#f8f8f8ff	—
markup.inserted	#41a83eff	—
markup.quote	#f12727ff	—
markup.list	#ff6262ff	—
markup.bold, markup.italic	#fb9a4bff	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#cd8d8dff
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section	#fec758ff	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, .format.placeholder	#ec0d1e	—

VS Code preview

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

Buzzokai Dimmed — Buzzokai Shopify Green

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#383a49
activityBar.activeBorder#2ea043
activityBar.background#0D1213
activityBar.border#2b2b2b
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#868686
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#616161
badge.foreground#f8f8f8
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#026ec1
button.secondaryBackground#313131
button.secondaryForeground#cccccc
button.secondaryHoverBackground#3c3c3c
chat.slashCommandBackground#34414b
chat.slashCommandForeground#40a6ff
checkbox.background#313131
checkbox.border#3c3c3c
debugToolBar.background#0D1213
descriptionForeground#9d9d9d
dropdown.background#313131
dropdown.border#3c3c3c
dropdown.foreground#cccccc
dropdown.listBackground#151D1E
editor.background#151D1E
editor.findMatchBackground#9e6a03
editor.foreground#cccccc
editor.inactiveSelectionBackground#3a3d41fa
editor.selectionHighlightBackground#add6ff26
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#0D1213
editorGroupHeader.tabsBorder#2b2b2b
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#f85149
focusBorder#2ea043
foreground#cccccc
icon.foreground#cccccc
input.background#313131
input.border#3c3c3c
input.foreground#cccccc
input.placeholderForeground#989898
inputOption.activeBackground#2489db82
inputOption.activeBorder#2ea043
keybindingLabel.foreground#cccccc
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
menu.background#151D1E
menu.border#454545
menu.foreground#cccccc
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#151D1E
notificationCenterHeader.foreground#cccccc
notifications.background#151D1E
notifications.border#2b2b2b
notifications.foreground#cccccc
panel.background#0D1213
panel.border#2b2b2b
panelInput.border#2b2b2b
panelTitle.activeBorder#2ea043
panelTitle.activeForeground#cccccc
panelTitle.inactiveForeground#9d9d9d
peekViewEditor.background#151D1E
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#151D1E
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#3c3c3c
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#222222
quickInput.foreground#cccccc
settings.dropdownBackground#313131
settings.dropdownBorder#3c3c3c
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#0D1213
sideBar.border#2b2b2b
sideBar.foreground#cccccc
sideBarSectionHeader.background#0D1213
sideBarSectionHeader.border#2b2b2b
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#0D1213
statusBar.border#2b2b2b
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#2ea043
statusBar.foreground#cccccc
statusBar.noFolderBackground#151D1E
statusBarItem.focusBorder#2ea043
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
tab.activeBackground#151D1E
tab.activeBorder#151D1E
tab.activeBorderTop#2ea043
tab.activeForeground#ffffff
tab.border#2b2b2b
tab.hoverBackground#151D1E
tab.inactiveBackground#0D1213
tab.inactiveForeground#9d9d9d
tab.lastPinnedBorder#cccccc33
tab.selectedBackground#222222
tab.selectedBorderTop#2ea043
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorder#151D1E
tab.unfocusedActiveBorderTop#2b2b2b
tab.unfocusedHoverBackground#151D1E
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#2ea043
textBlockQuote.background#2b2b2b
textBlockQuote.border#616161
textCodeBlock.background#2b2b2b
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3c3c3c
textPreformat.foreground#d0d0d0
textSeparator.foreground#21262d
titleBar.activeBackground#0D1213
titleBar.activeForeground#cccccc
titleBar.border#2b2b2b
titleBar.inactiveBackground#151D1E
titleBar.inactiveForeground#9d9d9d
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#2b2b2b
widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D4D4D4CF	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4CF	—
comment	#8b8b8b	italic
constant	#00f4b9
constant.numeric	#60EA4ECC
keyword	#859DD6
entity	#859DD6
entity.other.attribute-name	#859DD6	—
declaration.tag, meta.tag	#ffffff
declaration.tag entity, meta.tag entity	#b0d8a3
storage	#569CD6	bold
string	#E4918F
support	#00D98F
variable	#00f4b9	italic
invalid	#ffffffff	—
entity.other.inherited-class	#4EC9B0	underline
constant.character	#569CD6	—
string constant, constant.character.escape	#D7BA7DCF
string.regexp	#D16969CF	—
string variable	#edef7dff	—
support.function	#f2f973cc
support.constant, support.variable	#eb939aff
declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string	#73817dff
meta.selector.css entity.name.tag	#aa5507ff
meta.selector.css entity.other.attribute-name.id	#fec758ff	—
meta.selector.css entity.other.attribute-name.class	#41a83eff
support.type.property-name.css	#96dd3bcc
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#ffe862cc	italic
meta.property-value support.constant.named-color.css, meta.property-value constant	#ffe862cc
meta.preprocessor.at-rule keyword.control.at-rule	#fd6209ff	—
meta.constructor.argument.css	#ec9799ff
meta.diff, meta.diff.header	#f8f8f8ff	italic
markup.deleted	#ec9799ff	—
markup.changed	#f8f8f8ff	—
markup.inserted	#41a83ecc	—
markup.quote	#f12727ff	—
markup.list	#ff6262ff	—
markup.bold, markup.italic	#fb9a4bff	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#cd8d8dff
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section	#fec758ff	bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, .format.placeholder	#ec0d1e	—