Traditional Japanese Theme

Name: Traditional Japanese Theme
Author: Adrià Forcada

Publisher: Adrià ForcadaThemes in package: 6

A beautiful dark VS Code theme pack inspired by traditional Japanese palettes and aesthetics.

Open in VS Code GitHub

Color themes

VS Code preview

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

Traditional Japanese Theme — Traditional Japanese Shrine

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#1d0f0f
activityBar.inactiveForeground#b47f6f
activityBarBadge.background#d6453a
activityBarBadge.foreground#16090a
badge.background#3b1613
button.background#d6453a
button.foreground#16090a
button.hoverBackground#e25c4d
debugToolBar.background#22100f
descriptionForeground#d3b3a0
dropdown.background#24100f
dropdown.border#321410
editor.background#16090a
editor.findMatchBackground#d6453a44
editor.findMatchHighlightBackground#f0c25326
editor.foreground#f8ece1
editor.hoverHighlightBackground#642a2144
editor.inactiveSelectionBackground#3d171288
editor.lineHighlightBackground#22100f
editor.selectionBackground#5b241f
editor.selectionHighlightBackground#5b241f88
editor.wordHighlightBackground#642a2144
editor.wordHighlightStrongBackground#642a2188
editorBracketMatch.background#28110f
editorBracketMatch.border#f0c253
editorCursor.foreground#f8ece1
editorGutter.addedBackground#779c6088
editorGutter.background#16090a
editorGutter.deletedBackground#d6453a88
editorGutter.modifiedBackground#f0c25388
editorIndentGuide.activeBackground#472018
editorIndentGuide.background#2a100e
editorLineNumber.activeForeground#f0c253
editorLineNumber.foreground#9d6354
editorLink.activeForeground#d6453a
editorWhitespace.foreground#2a100e
editorWidget.background#24100f
editorWidget.border#321410
focusBorder#f0c253
foreground#f8ece1
gitDecoration.addedResourceForeground#779c60
gitDecoration.deletedResourceForeground#d6453a
gitDecoration.ignoredResourceForeground#5a2b25
gitDecoration.modifiedResourceForeground#f0c253
gitDecoration.untrackedResourceForeground#8ab173
input.background#24100f
input.border#321410
input.placeholderForeground#b47f6f
list.activeSelectionBackground#2e1211
list.focusHighlightForeground#f0c253
list.highlightForeground#f0c253
list.hoverBackground#25100f
list.inactiveSelectionBackground#1f0d0d
list.inactiveSelectionForeground#ebd0bf
notifications.background#24100f
panel.background#1d0f0f
panel.border#361612
panelTitle.inactiveForeground#b47f6f
peekView.border#f0c253
peekViewEditor.background#22100f
peekViewEditor.matchHighlightBackground#d6453a44
peekViewResult.background#1d0f0f
peekViewResult.matchHighlightBackground#f0c25344
quickInput.background#24100f
scrollbarSlider.activeBackground#f0c25366
scrollbarSlider.background#56211c88
scrollbarSlider.hoverBackground#56211ccc
selection.background#5b241f
sideBar.background#1a0e0e
sideBar.foreground#ebd0bf
sideBarSectionHeader.background#24110f
statusBar.background#1d0f0f
statusBar.debuggingBackground#f0c253
statusBar.debuggingForeground#16090a
statusBar.noFolderBackground#1d0f0f
statusBarItem.hoverBackground#3d1713
tab.activeBackground#341513
tab.activeBorder#f0c253
tab.border#16090a
tab.hoverBackground#24100f
tab.inactiveBackground#1a0e0e
tab.inactiveForeground#b47f6f
tab.unfocusedActiveForeground#ebd0bf
tab.unfocusedInactiveForeground#9d6a5d
terminal.ansiBlack#200d0c
terminal.ansiBlue#7f6b8a
terminal.ansiBrightBlack#321410
terminal.ansiBrightBlue#9a86a3
terminal.ansiBrightCyan#abc2c4
terminal.ansiBrightGreen#f48c4e
terminal.ansiBrightMagenta#e693a5
terminal.ansiBrightRed#e25c4d
terminal.ansiBrightWhite#fff4ea
terminal.ansiBrightYellow#f6ce6d
terminal.ansiCyan#9da7ad
terminal.ansiGreen#e0713b
terminal.ansiMagenta#d27a8c
terminal.ansiRed#d6453a
terminal.ansiYellow#f0c253
terminal.background#16090a
titleBar.activeBackground#1d0f0f
titleBar.inactiveBackground#281311
titleBar.inactiveForeground#b47f6f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#a47c6b	—
constant.numeric, constant.language, support.constant	#e08654	—
entity.name.function, support.function	#f27c56	—
entity.name.tag, support.type.property-name	#d84d42	—
entity.name.type, support.type, support.class	#f0a25e	—
entity.other.attribute-name, meta.tag.attribute-name, support.class.component	#8ab173	—
entity.other.attribute-name.class	#f0a25e	—
entity.other.attribute-name.id	#d27a8c	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#f0c253	—
invalid	#ffffff	—
keyword, storage.type, storage.modifier	#d84d42	bold
markup.bold	#f27c56	bold
markup.heading	#f0c253	bold
markup.italic	#d27a8c	italic
markup.link	#f0c253	—
meta.brace	#d8b49f	—
meta.property-name	#f0c253	—
punctuation	#d8b49f	—
string, punctuation.definition.string	#f6d07c	—
support.constant.property-value	#e08654	—
variable.language	#d84d42	—
variable.other.constant, constant.other	#f0c253	—