Acme, Go Playground Themes

Name: Acme, Go Playground Themes
Author: Aaqa Ishtyaq

Publisher: Aaqa IshtyaqThemes in package: 3

Acme Theme, Go Playground Theme, Go Source Theme. Themes that mimics acme, go playground (play.golang.org) and go source (golang.org/src/)

Open in VS Code GitHub

Color themes

VS Code preview

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

Acme, Go Playground Themes — Acme

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.background#eaffff
activityBar.border#000000
activityBar.dropBackground#99994c
activityBar.foreground#000000
activityBarBadge.background#8888cc
activityBarBadge.foreground#000000
badge.background#8888cc
badge.foreground#000000
button.background#eaffff
button.foreground#000000
editor.background#ffffea
editor.foreground#000000
editor.hoverHighlightBackground#ffffea
editor.inactiveSelectionBackground#eeee9e
editor.selectionBackground#eeee9e
editor.selectionHighlightBackground#eeee9e
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#000000
editorBracketHighlight.foreground3#000000
editorBracketHighlight.foreground4#000000
editorBracketHighlight.foreground5#000000
editorBracketHighlight.foreground6#000000
editorBracketHighlight.unexpectedBracket.foreground#db6165
editorGroupHeader.tabsBackground#eaffff
editorSuggestWidget.selectedForeground#eaffff
input.background#eaffff
input.border#000000
input.foreground#000000
input.placeholderForeground#000000
list.focusHighlightForeground#eaffff
panel.background#ffffea
quickInputList.focusForeground#eaffff
scrollbarSlider.activeBackground#99994c
scrollbarSlider.background#99994c
scrollbarSlider.hoverBackground#99994c
selection.background#ffffea
sideBar.background#eaffff
sideBar.border#000000
sideBar.dropBackground#99994c
sideBar.foreground#000000
sideBarSectionHeader.background#eaffff
statusBar.background#eaffff
statusBar.border#000000
statusBar.foreground#000000
tab.activeBackground#eaffff
tab.activeBorder#000000
tab.activeBorderTop#eaffff
tab.activeForeground#000000
tab.border#eaffff
tab.hoverBackground#ffffea
tab.hoverBorder#eaffff
tab.inactiveBackground#eaffff
tab.inactiveForeground#000000
terminal.ansiBlack#000000
terminal.ansiBlue#000000
terminal.ansiBrightBlack#eeee9e
terminal.ansiBrightBlue#000000
terminal.ansiBrightCyan#000000
terminal.ansiBrightGreen#000000
terminal.ansiBrightMagenta#000000
terminal.ansiBrightRed#000000
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#000000
terminal.ansiCyan#000000
terminal.ansiGreen#000000
terminal.ansiMagenta#000000
terminal.ansiRed#000000
terminal.ansiWhite#000000
terminal.ansiYellow#000000
terminal.background#ffffea
terminal.foreground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

VS Code preview

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

Acme, Go Playground Themes — Go - Playground

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.background#FFFFDD
activityBar.border#000000
activityBar.dropBackground#99994c
activityBar.foreground#000000
activityBarBadge.background#8888cc
activityBarBadge.foreground#000000
badge.background#8888cc
badge.foreground#000000
button.background#FFFFDD
button.foreground#000000
editor.background#FFFFDD
editor.foreground#000000
editor.hoverHighlightBackground#FFFFDD
editor.inactiveSelectionBackground#D4D4C6
editor.selectionBackground#B2D7F0
editor.selectionHighlightBackground#B2D7F0
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#000000
editorBracketHighlight.foreground3#000000
editorBracketHighlight.foreground4#000000
editorBracketHighlight.foreground5#000000
editorBracketHighlight.foreground6#000000
editorBracketHighlight.unexpectedBracket.foreground#db6165
editorGroupHeader.tabsBackground#FFFFDD
editorSuggestWidget.selectedForeground#FFFFDD
input.background#FFFFDD
input.border#000000
input.foreground#000000
input.placeholderForeground#000000
list.focusHighlightForeground#FFFFDD
panel.background#FFFFDD
quickInputList.focusForeground#FFFFDD
scrollbarSlider.activeBackground#99994c
scrollbarSlider.background#99994c
scrollbarSlider.hoverBackground#99994c
selection.background#FFFFDD
sideBar.background#FFFFDD
sideBar.border#000000
sideBar.dropBackground#99994c
sideBar.foreground#000000
sideBarSectionHeader.background#FFFFDD
statusBar.background#FFFFDD
statusBar.border#000000
statusBar.foreground#000000
tab.activeBackground#FFFFDD
tab.activeBorder#000000
tab.activeBorderTop#FFFFDD
tab.activeForeground#000000
tab.border#FFFFDD
tab.hoverBackground#FFFFDD
tab.hoverBorder#FFFFDD
tab.inactiveBackground#FFFFDD
tab.inactiveForeground#000000
terminal.ansiBlack#000000
terminal.ansiBlue#000000
terminal.ansiBrightBlack#D4D4C6
terminal.ansiBrightBlue#000000
terminal.ansiBrightCyan#000000
terminal.ansiBrightGreen#000000
terminal.ansiBrightMagenta#000000
terminal.ansiBrightRed#000000
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#000000
terminal.ansiCyan#000000
terminal.ansiGreen#000000
terminal.ansiMagenta#000000
terminal.ansiRed#000000
terminal.ansiWhite#000000
terminal.ansiYellow#000000
terminal.background#FFFFDD
terminal.foreground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle

VS Code preview

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

Acme, Go Playground Themes — Go - Sources

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.background#EFEFEF
activityBar.border#000000
activityBar.dropBackground#D4D4C6
activityBar.foreground#000000
activityBarBadge.background#8888cc
activityBarBadge.foreground#000000
badge.background#8888cc
badge.foreground#000000
button.background#EFEFEF
button.foreground#000000
editor.background#EFEFEF
editor.foreground#000000
editor.hoverHighlightBackground#EFEFEF
editor.inactiveSelectionBackground#D4D4C6
editor.selectionBackground#B2D7F0
editor.selectionHighlightBackground#B2D7F0
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#000000
editorBracketHighlight.foreground3#000000
editorBracketHighlight.foreground4#000000
editorBracketHighlight.foreground5#000000
editorBracketHighlight.foreground6#000000
editorBracketHighlight.unexpectedBracket.foreground#db6165
editorGroupHeader.tabsBackground#EFEFEF
editorSuggestWidget.selectedForeground#EFEFEF
input.background#EFEFEF
input.border#000000
input.foreground#000000
input.placeholderForeground#000000
list.focusHighlightForeground#EFEFEF
panel.background#EFEFEF
quickInputList.focusForeground#EFEFEF
scrollbarSlider.activeBackground#D4D4C6
scrollbarSlider.background#D4D4C6
scrollbarSlider.hoverBackground#D4D4C6
selection.background#EFEFEF
sideBar.background#EFEFEF
sideBar.border#000000
sideBar.dropBackground#D4D4C6
sideBar.foreground#000000
sideBarSectionHeader.background#EFEFEF
statusBar.background#EFEFEF
statusBar.border#000000
statusBar.foreground#000000
tab.activeBackground#EFEFEF
tab.activeBorder#000000
tab.activeBorderTop#EFEFEF
tab.activeForeground#000000
tab.border#EFEFEF
tab.hoverBackground#EFEFEF
tab.hoverBorder#EFEFEF
tab.inactiveBackground#EFEFEF
tab.inactiveForeground#000000
terminal.ansiBlack#000000
terminal.ansiBlue#000000
terminal.ansiBrightBlack#D4D4C6
terminal.ansiBrightBlue#000000
terminal.ansiBrightCyan#000000
terminal.ansiBrightGreen#000000
terminal.ansiBrightMagenta#000000
terminal.ansiBrightRed#000000
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#000000
terminal.ansiCyan#000000
terminal.ansiGreen#000000
terminal.ansiMagenta#000000
terminal.ansiRed#000000
terminal.ansiWhite#000000
terminal.ansiYellow#000000
terminal.background#EFEFEF
terminal.foreground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle