Thynaptic Color Themes

Name: Thynaptic Color Themes
Author: Thynaptic

Publisher: ThynapticThemes in package: 6

A collection of dark and light color themes for Visual Studio Code by Thynaptic. Includes Thynaptic Dark, Thynaptic Dim, and Thynaptic Sand themes.

Open in VS Code GitHub

Color themes

VS Code preview

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

Thynaptic Color Themes — Thynaptic Sand (Base)

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#F7F3EA
activityBar.foreground#0A0A0A
activityBar.inactiveForeground#6B6B6B
activityBarBadge.background#0A0A0A
activityBarBadge.foreground#F3EFE7
button.background#0A0A0A
button.foreground#F3EFE7
button.hoverBackground#0A0A0A
descriptionForeground#6B6B6B
dropdown.background#FBF8F1
dropdown.border#DDD6C8
dropdown.foreground#0A0A0A
editor.background#F3EFE7
editor.findMatchBackground#FE9A0038
editor.findMatchHighlightBackground#FE9A001F
editor.foreground#0A0A0A
editor.inactiveSelectionBackground#0A0A0A14
editor.lineHighlightBackground#0A0A0A0A
editor.selectionBackground#0A0A0A1F
editor.wordHighlightBackground#0A0A0A0F
editor.wordHighlightStrongBackground#0A0A0A17
editorBracketMatch.background#0A0A0A0F
editorBracketMatch.border#0A0A0A4C
editorCursor.foreground#0A0A0A
editorError.foreground#FF2056
editorGroup.border#DDD6C8
editorInfo.foreground#0A0A0A
editorLineNumber.activeForeground#0A0A0A
editorLineNumber.foreground#6B6B6B
editorWarning.foreground#FE9A00
focusBorder#0A0A0A
foreground#0A0A0A
gitDecoration.addedResourceForeground#0A0A0A
gitDecoration.deletedResourceForeground#FF2056
gitDecoration.modifiedResourceForeground#FE9A00
input.background#FBF8F1
input.border#DDD6C8
input.foreground#0A0A0A
list.activeSelectionBackground#0A0A0A14
list.activeSelectionForeground#0A0A0A
list.focusBackground#0A0A0A12
list.hoverBackground#0A0A0A0A
list.inactiveSelectionBackground#0A0A0A0F
panel.border#DDD6C8
peekView.border#DDD6C8
peekViewEditor.background#F3EFE7
peekViewResult.background#F7F3EA
progressBar.background#0A0A0A
sideBar.background#F7F3EA
sideBar.border#DDD6C8
sideBar.foreground#0A0A0A
sideBarSectionHeader.background#F7F3EA
sideBarSectionHeader.foreground#0A0A0A
statusBar.background#F7F3EA
statusBar.debuggingBackground#FE9A00
statusBar.debuggingForeground#F3EFE7
statusBar.foreground#0A0A0A
statusBar.noFolderBackground#F7F3EA
tab.activeBackground#F3EFE7
tab.activeForeground#0A0A0A
tab.border#DDD6C8
tab.inactiveBackground#F7F3EA
tab.inactiveForeground#6B6B6B
terminal.ansiBlack#0A0A0A
terminal.ansiBlue#0A0A0A
terminal.ansiBrightBlack#6B6B6B
terminal.ansiBrightBlue#0A0A0A
terminal.ansiBrightCyan#6B6B6B
terminal.ansiBrightGreen#0A0A0A
terminal.ansiBrightMagenta#0A0A0A
terminal.ansiBrightRed#FF2056
terminal.ansiBrightWhite#FBF8F1
terminal.ansiBrightYellow#FE9A00
terminal.ansiCyan#6B6B6B
terminal.ansiGreen#0A0A0A
terminal.ansiMagenta#0A0A0A
terminal.ansiRed#FF2056
terminal.ansiWhite#F3EFE7
terminal.ansiYellow#FE9A00
terminal.background#F3EFE7
terminal.foreground#0A0A0A
terminalCursor.foreground#0A0A0A
titleBar.activeBackground#F7F3EA
titleBar.activeForeground#0A0A0A
titleBar.inactiveBackground#F7F3EA
titleBar.inactiveForeground#6B6B6B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B6B6B	—
string, punctuation.definition.string	#FE9A00	—
constant.numeric	#FE9A00	—
keyword, storage.type, storage.modifier	#0A0A0A	—
entity.name.function, support.function, meta.function-call	#0A0A0A	—
entity.name.type, support.type, support.class	#0A0A0A	—
variable, meta.object-literal.key	#0A0A0A	—