Skip to main content
Home Theme VS Code Theme Wagaku A minimally colorful theme inspired by the album art of Yoen Waso Emaki
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #2B3022 activityBar.background #161A11 activityBar.foreground #e21339 activityBar.inactiveForeground #960E27 activityBarBadge.background #e21339 activityBarBadge.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source, variable.other.property, entity.name.scope-resolution, variable, meta.paragraph, entity.name.section #E5D7D8 — entity.name.tag #E5D7D8 — markup.italic, punctuation.definition.italic #E5D7D8 italic markup.bold, punctuation.definition.bold #E5D7D8 bold comment, punctuation.definition.comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Theme Wagaku — Wagaku Midnight
badge.background #2B3022
button.background #960E27
diffEditor.diagonalFill #2B3022
diffEditor.insertedTextBackground #69D4E230
diffEditor.removedTextBackground #91998530
dropdown.background #161A11
dropdown.listBackground #161A11
editor.background #161A11
editor.findMatchBackground #69D4E2B0
editor.findMatchHighlightBackground #69D4E280
editor.foldBackground #E0E2DF1B
editor.hoverHighlightBackground #E0E2DF1B
editor.lineHighlightBorder #2B3022
editor.selectionBackground #960E27B0
editor.selectionHighlightBackground #960E2780
editor.wordHighlightBackground #E0E2DF1B
editor.wordHighlightStrongBackground #E0E2DF1B
editorBracketMatch.background #960E271B
editorBracketMatch.border #e21339
editorCursor.foreground #E0E2DF
editorGroup.border #2B3022
editorGroup.dropBackground #2B302280
editorGroupHeader.noTabsBackground #2B3022
editorGroupHeader.tabsBackground #2B3022
editorGutter.addedBackground #69D4E2B0
editorGutter.deletedBackground #919985B0
editorGutter.modifiedBackground #E2C200B0
editorHoverWidget.background #161A11
editorHoverWidget.border #919985
editorHoverWidget.foreground #E0E2DF
editorHoverWidget.statusBarBackground #161A11
editorIndentGuide.activeBackground #919985
editorIndentGuide.background #404533
editorLineNumber.activeForeground #e21339
editorLineNumber.foreground #960E27
editorOverviewRuler.border #2B3022
editorOverviewRuler.bracketMatchForeground #e21339B0
editorOverviewRuler.findMatchForeground #69D4E2B0
editorOverviewRuler.rangeHighlightForeground #E0E2DFB0
editorOverviewRuler.selectionHighlightForeground #960E27B0
editorOverviewRuler.wordHighlightForeground #E0E2DFB0
editorOverviewRuler.wordHighlightStrongForeground #E0E2DFB0
editorSuggestWidget.background #161A11
editorSuggestWidget.border #919985
editorSuggestWidget.foreground #E0E2DF
editorSuggestWidget.highlightForeground #e21339
editorSuggestWidget.selectedBackground #960E27B0
editorWhitespace.foreground #404533
errorForeground #FF94A4
focusBorder #919985
foreground #E0E2DF
gitDecoration.addedResourceForeground #69D4E2
gitDecoration.conflictingResourceForeground #d1bae5
gitDecoration.deletedResourceForeground #919985
gitDecoration.ignoredResourceForeground #919985
gitDecoration.modifiedResourceForeground #E2C200
gitDecoration.stageDeletedResourceForeground #919985
gitDecoration.stageModifiedResourceForeground #E2C200
gitDecoration.untrackedResourceForeground #69D4E2
list.activeSelectionBackground #960E27B0
list.dropBackground #161A1180
list.focusBackground #960E27
list.hoverBackground #960E27
list.inactiveSelectionBackground #960E27B0
menu.border #919985
menu.separatorBackground #919985
merge.currentContentBackground #69D4E230
merge.currentHeaderBackground #69D4E268
merge.incomingContentBackground #d1bae530
merge.incomingHeaderBackground #d1bae568
minimap.background #2B3022
minimap.findMatchHighlight #69D4E2B0
minimap.selectionHighlight #960E27B0
minimapGutter.addedBackground #69D4E2B0
minimapGutter.modifiedBackground #E2C200B0
minimapSlider.activeBackground #960E27B0
minimapSlider.background #960E2780
minimapSlider.hoverBackground #960E2780
panel.background #2B3022
panel.border #2B3022
peekView.border #960E27
peekViewEditor.background #960E271B
peekViewResult.background #161A11
peekViewResult.selectionBackground #960E27B0
peekViewTitle.background #960E271B
peekViewTitleDescription.foreground #E0E2DF
peekViewTitleLabel.foreground #E0E2DF
pickerGroup.foreground #E0E2DF
quickInput.background #161A11
scrollbarSlider.activeBackground #960E27B0
scrollbarSlider.background #960E2768
scrollbarSlider.hoverBackground #960E2780
selection.background #960E27B0
settings.modifiedItemIndicator #960E27
sideBar.background #2B3022
sideBar.border #2B3022
sideBarSectionHeader.background #2B3022
statusBar.background #2B3022
statusBar.debuggingBackground #2B3022
statusBar.debuggingForeground #E0E2DF
statusBar.foreground #E0E2DF
statusBar.noFolderBackground #2B3022
tab.activeBackground #161A11
tab.activeForeground #E0E2DF
tab.border #2B3022
tab.inactiveBackground #2B3022
tab.inactiveForeground #E0E2DF
titleBar.activeBackground #960E27
titleBar.activeForeground #E0E2DF punctuation, storage.modifier.pointer, storage.modifier.reference, meta.brace #E5D7D8 —
entity.name.function.operator #E5D7D8 —
variable.parameter, variable.other.enummember #E5D7D8 —
keyword, keyword.operator.cast, keyword.operator.delete, keyword.operator.new, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.alignas, constant.language, variable.language.this, entity.other.attribute, storage, meta.preprocessor, punctuation.definition.directive, entity.name.function.preprocessor, variable.language.special.self, variable.parameter.function.language.special.self, keyword.operator.expression.typeof, keyword.operator.expression.in, keyword.operator.expression.of #69D4E2 —
entity.name.type, support.type #ED755A —
punctuation.definition.decorator #ED755A —
entity.name.function, support.function #E2C200 —
constant.numeric, keyword.other.unit, keyword.other.unit.suffix, string, constant.character, constant.other, punctuation.definition.string, markup.inline.raw.string, punctuation.definition.raw #d1bae5 —
fenced_code.block.language, punctuation.definition.markdown #d1bae5 —
support.type.property-name, punctuation.support.type.property-name #E2C200 —
entity.name.section.markdown, punctuation.definition.heading, markup.heading.setext #E2C200 —
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 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
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*
Button.tsx
31
$
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 } !` ;
}
Theme Wagaku | Coding Theme