Skip to main content
Tsukuyomi & Reply | Coding Theme
Home Theme VS Code Tsukuyomi & Reply Two VS Code color themes inspired by Japanese seascape imagery. Tsukuyomi (dark) — a night sea of iridescent light with a glowing torii. Reply (light) — a warm sunlit seaside with a vermilion torii.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
// ===== Reply — 暖かな陽だまり・夕映えの海辺(Reply のMVイメージ) ===== activityBar.activeBorder #D6452C activityBar.background #EFE5D1 activityBar.foreground #3A3340 activityBar.inactiveForeground #8A7E62 activityBarBadge.background #D6452C tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #7A7050 italic keyword, keyword.control, storage.type, storage.modifier, keyword.other, modifier #6B53AE — keyword.operator, keyword.operator.expression, keyword.operator.new #6A5F4E — entity.name.function, support.function, meta.function-call.generic, variable.function #C9531C —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
Tsukuyomi & Reply — Reply main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBarBadge.foreground #FFFFFF
badge.background #D6452C
badge.foreground #FFFFFF
breadcrumb.activeSelectionForeground #137F7E
breadcrumb.focusForeground #3A3340
breadcrumb.foreground #8A7E62
breadcrumbPicker.background #F4EBD9
button.background #D6452C
button.foreground #FFFFFF
button.hoverBackground #BE3D27
button.secondaryBackground #EFDFC1
button.secondaryForeground #3A3340
descriptionForeground #8A7E62
diffEditor.insertedTextBackground #4F8A2F1F
diffEditor.removedTextBackground #C53A281A
dropdown.background #F4EBD9
dropdown.border #DCCDB0
dropdown.foreground #3A3340
editor.background #FBF6EC
editor.findMatchBackground #F4C84ACC
editor.findMatchBorder #CFA12E
editor.findMatchHighlightBackground #F4C84A66
editor.findRangeHighlightBackground #F4C84A2E
editor.foreground #3A3340
editor.inactiveSelectionBackground #F1E6C2
editor.lineHighlightBackground #F3E9D3
editor.lineHighlightBorder #00000000
editor.selectionBackground #F6E2A0
editor.selectionHighlightBackground #8A7E621C
editor.wordHighlightBackground #8A7E6224
editor.wordHighlightStrongBackground #8A7E6233
editorBracketHighlight.foreground1 #C9531C
editorBracketHighlight.foreground2 #137F7E
editorBracketHighlight.foreground3 #6B53AE
editorBracketHighlight.foreground4 #C24A86
editorBracketHighlight.foreground5 #4F8A2F
editorBracketHighlight.foreground6 #8F680C
editorBracketHighlight.unexpectedBracket.foreground #C53A28
editorBracketMatch.background #F6D9B0
editorBracketMatch.border #137F7E
editorCodeLens.foreground #8A7E62
editorCursor.background #FFFFFF
editorCursor.foreground #C9531C
editorError.foreground #C53A28
editorGroup.border #DCCDB0
editorGroupHeader.noTabsBackground #EFE5D1
editorGroupHeader.tabsBackground #EFE5D1
editorGutter.addedBackground #4F8A2F
editorGutter.deletedBackground #C53A28
editorGutter.modifiedBackground #2A72BE
editorHint.foreground #137F7E
editorHoverWidget.background #F4EBD9
editorHoverWidget.border #DCCDB0
editorIndentGuide.activeBackground1 #D2BF9C
editorIndentGuide.background1 #EBDFC8
editorInfo.foreground #2A72BE
editorLineNumber.activeForeground #C9531C
editorLineNumber.foreground #8E8366
editorRuler.foreground #EBDFC8
editorSuggestWidget.background #F4EBD9
editorSuggestWidget.border #DCCDB0
editorSuggestWidget.highlightForeground #137F7E
editorSuggestWidget.selectedBackground #EFDFC1
editorWarning.foreground #9A720F
editorWhitespace.foreground #E2D4BB
editorWidget.background #F4EBD9
editorWidget.border #DCCDB0
errorForeground #C53A28
focusBorder #2A72BE
foreground #4A4250
gitDecoration.conflictingResourceForeground #C9531C
gitDecoration.deletedResourceForeground #C53A28
gitDecoration.ignoredResourceForeground #A89A7E
gitDecoration.modifiedResourceForeground #8F680C
gitDecoration.untrackedResourceForeground #4F8A2F
icon.foreground #8A7E62
input.background #F4EBD9
input.border #DCCDB0
input.foreground #3A3340
input.placeholderForeground #8A7E62
inputOption.activeBorder #137F7E
inputValidation.errorBackground #FADCD5
inputValidation.errorBorder #C53A28
list.activeSelectionBackground #EFDFC1
list.activeSelectionForeground #3A3340
list.errorForeground #C53A28
list.focusBackground #EFDFC1
list.highlightForeground #137F7E
list.hoverBackground #EEE3CF
list.inactiveSelectionBackground #EADFCB
list.warningForeground #9A720F
minimap.findMatchHighlight #F4C84ACC
minimap.selectionHighlight #F6E2A0
minimapSlider.activeBackground #A9876048
minimapSlider.background #A9876018
minimapSlider.hoverBackground #A9876030
panel.background #F1E8D6
panel.border #DCCDB0
panelTitle.activeBorder #D6452C
panelTitle.activeForeground #3A3340
panelTitle.inactiveForeground #8A7E62
peekView.border #C24A86
peekViewEditor.background #F8F1E3
peekViewResult.background #F3EBDB
peekViewResult.selectionBackground #EFDFC1
peekViewTitle.background #F4EBD9
progressBar.background #137F7E
scrollbar.shadow #0000001F
scrollbarSlider.activeBackground #A9876066
scrollbarSlider.background #A9876022
scrollbarSlider.hoverBackground #A9876044
selection.background #F6E2A0
sideBar.background #F1E8D6
sideBar.border #DCCDB0
sideBar.foreground #544C5A
sideBarSectionHeader.background #EADFCB
sideBarSectionHeader.foreground #6B53AE
sideBarTitle.foreground #8A7E62
statusBar.background #EFE5D1
statusBar.border #DCCDB0
statusBar.debuggingBackground #C9531C
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #544C5A
statusBar.noFolderBackground #EFE5D1
statusBarItem.prominentBackground #EFDFC1
statusBarItem.remoteBackground #137F7E
statusBarItem.remoteForeground #FFFFFF
tab.activeBackground #FBF6EC
tab.activeBorder #FBF6EC
tab.activeBorderTop #D6452C
tab.activeForeground #3A3340
tab.border #E2D4BB
tab.hoverBackground #F4EBD9
tab.inactiveBackground #EFE5D1
tab.inactiveForeground #8A7E62
terminal.ansiBlack #544C5A
terminal.ansiBlue #2A72BE
terminal.ansiBrightBlack #8A7E62
terminal.ansiBrightBlue #245FA0
terminal.ansiBrightCyan #0F6E6D
terminal.ansiBrightGreen #447A28
terminal.ansiBrightMagenta #AC3F76
terminal.ansiBrightRed #B23320
terminal.ansiBrightWhite #3A3340
terminal.ansiBrightYellow #86640C
terminal.ansiCyan #137F7E
terminal.ansiGreen #4F8A2F
terminal.ansiMagenta #C24A86
terminal.ansiRed #C53A28
terminal.ansiWhite #DCCDB0
terminal.ansiYellow #9A720F
terminal.background #FBF6EC
terminal.foreground #3A3340
terminalCursor.background #FFFFFF
terminalCursor.foreground #C9531C
textBlockQuote.background #F4EBD9
textBlockQuote.border #D6452C
textLink.activeForeground #BE3D27
textLink.foreground #2A72BE
textPreformat.foreground #8F680C
titleBar.activeBackground #EFE5D1
titleBar.activeForeground #4A4250
titleBar.border #DCCDB0
titleBar.inactiveBackground #EFE5D1
titleBar.inactiveForeground #8A7E62
tree.indentGuidesStroke #D2BF9C entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class, entity.name.namespace
string, string.quoted, string.template, punctuation.definition.string #137F7E —
string.regexp, constant.character.escape, constant.other.placeholder #4F8A2F —
constant.numeric, constant.language, constant.language.boolean, constant.language.null #CE4242 —
constant.other, variable.other.constant, entity.name.constant, support.constant #8F680C —
variable, variable.other, variable.other.readwrite, meta.definition.variable.name #3A3340 —
variable.other.property, variable.other.object.property, support.variable.property, meta.property, variable.object.property #3A3340 —
variable.parameter, meta.parameter #5E5544 italic
variable.language, variable.language.this, keyword.other.this #C9531C italic
entity.name.tag, punctuation.definition.tag #D6452C —
entity.other.attribute-name #2A72BE italic
support.type.property-name, support.type.property-name.json, meta.object-literal.key, support.type.property-name.css #8F680C —
punctuation, meta.brace, punctuation.separator, punctuation.terminator, punctuation.definition.parameters, meta.delimiter #6A5F4E —
meta.decorator, entity.name.function.decorator, punctuation.decorator #C24A86 italic
support.type.primitive, support.type.builtin #6B53AE —
tag.css, support.constant.property-value.css, constant.numeric.css #CE4242 —
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown #C9531C bold
markup.italic #6B53AE italic
markup.inline.raw, markup.raw.block, markup.fenced_code #137F7E —
markup.quote #4F8A2F italic
markup.underline.link, string.other.link, markup.link #2A72BE underline
invalid, invalid.illegal #C53A28 underline
entity.name.label #C24A86 —
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
README.md
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 $
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}!`;
}