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.
// ===== Tsukuyomi — 夜の海に舞う虹色の光、流れるオーロラ、ただ一点灯る鳥居 ===== activityBar.activeBorder #FFA24C activityBar.background #081020 activityBar.foreground #DCE6F2 activityBar.inactiveForeground #566880 activityBarBadge.background #FFA24C tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #6E85A2 italic keyword, keyword.control, storage.type, storage.modifier, keyword.other, modifier #8FA6FF — keyword.operator, keyword.operator.expression, keyword.operator.new #7488A4 — entity.name.function, support.function, meta.function-call.generic, variable.function #FFA24C —
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 — Tsukuyomi main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.foreground #0B1424
badge.background #FFA24C
badge.foreground #0B1424
breadcrumb.activeSelectionForeground #36E0D8
breadcrumb.focusForeground #DCE6F2
breadcrumb.foreground #6E7E96
breadcrumbPicker.background #101B2E
button.background #FFA24C
button.foreground #0B1424
button.hoverBackground #FFB870
button.secondaryBackground #1E3450
button.secondaryForeground #DCE6F2
descriptionForeground #6E85A2
diffEditor.insertedTextBackground #79E6B01A
diffEditor.removedTextBackground #FF6D6D1A
dropdown.background #101B2E
dropdown.border #22344E
dropdown.foreground #DCE6F2
editor.background #0B1424
editor.findMatchBackground #F4CF6A55
editor.findMatchHighlightBackground #F4CF6A2A
editor.foreground #DCE6F2
editor.inactiveSelectionBackground #192C42
editor.lineHighlightBackground #121F34
editor.lineHighlightBorder #00000000
editor.selectionBackground #234567
editor.selectionHighlightBackground #36E0D81C
editor.wordHighlightBackground #234567
editor.wordHighlightStrongBackground #2D5078
editorBracketHighlight.foreground1 #FFA24C
editorBracketHighlight.foreground2 #36E0D8
editorBracketHighlight.foreground3 #8FA6FF
editorBracketHighlight.foreground4 #FF6FC2
editorBracketHighlight.foreground5 #79E6B0
editorBracketHighlight.foreground6 #F4CF6A
editorBracketHighlight.unexpectedBracket.foreground #FF6D6D
editorBracketMatch.background #234567
editorBracketMatch.border #36E0D8
editorCodeLens.foreground #6E7E96
editorCursor.background #0B1424
editorCursor.foreground #FFA24C
editorError.foreground #FF6D6D
editorGroup.border #1B2C44
editorGroupHeader.noTabsBackground #081020
editorGroupHeader.tabsBackground #081020
editorGutter.addedBackground #79E6B0
editorGutter.deletedBackground #FF6D6D
editorGutter.modifiedBackground #6FB4FF
editorHint.foreground #36E0D8
editorHoverWidget.background #101B2E
editorHoverWidget.border #22344E
editorIndentGuide.activeBackground1 #2E4E70
editorIndentGuide.background1 #152338
editorInfo.foreground #6FB4FF
editorLineNumber.activeForeground #FFA24C
editorLineNumber.foreground #4A5C78
editorRuler.foreground #152338
editorSuggestWidget.background #101B2E
editorSuggestWidget.border #22344E
editorSuggestWidget.highlightForeground #36E0D8
editorSuggestWidget.selectedBackground #1E3450
editorWarning.foreground #F4CF6A
editorWhitespace.foreground #1B2C44
editorWidget.background #101B2E
editorWidget.border #22344E
errorForeground #FF6D6D
focusBorder #36E0D8
foreground #C3CEDE
gitDecoration.conflictingResourceForeground #FFA24C
gitDecoration.deletedResourceForeground #FF8A8A
gitDecoration.ignoredResourceForeground #4A5C78
gitDecoration.modifiedResourceForeground #F4CF6A
gitDecoration.untrackedResourceForeground #79E6B0
icon.foreground #8294B2
input.background #101B2E
input.border #22344E
input.foreground #DCE6F2
input.placeholderForeground #6E7E96
inputOption.activeBorder #36E0D8
inputValidation.errorBackground #3A1622
inputValidation.errorBorder #FF6D6D
list.activeSelectionBackground #1E3450
list.activeSelectionForeground #FFFFFF
list.errorForeground #FF6D6D
list.focusBackground #1E3450
list.highlightForeground #36E0D8
list.hoverBackground #101B2E
list.inactiveSelectionBackground #14223A
list.warningForeground #F4CF6A
minimap.findMatchHighlight #F4CF6A88
minimap.selectionHighlight #234567
minimapSlider.activeBackground #36E0D844
minimapSlider.background #36E0D818
minimapSlider.hoverBackground #36E0D82E
panel.background #081020
panel.border #1B2C44
panelTitle.activeBorder #FFA24C
panelTitle.activeForeground #DCE6F2
panelTitle.inactiveForeground #6E7E96
peekView.border #FFA24C
peekViewEditor.background #0A1220
peekViewResult.background #081020
peekViewResult.selectionBackground #1E3450
peekViewTitle.background #101B2E
progressBar.background #36E0D8
scrollbar.shadow #00000080
scrollbarSlider.activeBackground #36E0D855
scrollbarSlider.background #36E0D81F
scrollbarSlider.hoverBackground #36E0D83A
selection.background #234567
sideBar.background #081020
sideBar.border #1B2C44
sideBar.foreground #AAB7CD
sideBarSectionHeader.background #0B1424
sideBarSectionHeader.foreground #8FA6FF
sideBarTitle.foreground #8294B2
statusBar.background #081020
statusBar.border #1B2C44
statusBar.debuggingBackground #FFA24C
statusBar.debuggingForeground #0B1424
statusBar.foreground #AAB7CD
statusBar.noFolderBackground #081020
statusBarItem.prominentBackground #1E3450
statusBarItem.remoteBackground #36E0D8
statusBarItem.remoteForeground #0B1424
tab.activeBackground #0B1424
tab.activeBorder #0B1424
tab.activeBorderTop #FFA24C
tab.activeForeground #DCE6F2
tab.border #081020
tab.hoverBackground #101B2E
tab.inactiveBackground #081020
tab.inactiveForeground #6E7E96
terminal.ansiBlack #1B2C44
terminal.ansiBlue #6FB4FF
terminal.ansiBrightBlack #4A5C78
terminal.ansiBrightBlue #92C6FF
terminal.ansiBrightCyan #6BECE4
terminal.ansiBrightGreen #97ECC4
terminal.ansiBrightMagenta #FF8FD2
terminal.ansiBrightRed #FF9090
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFDD86
terminal.ansiCyan #36E0D8
terminal.ansiGreen #79E6B0
terminal.ansiMagenta #FF6FC2
terminal.ansiRed #FF6D6D
terminal.ansiWhite #DCE6F2
terminal.ansiYellow #F4CF6A
terminal.background #0B1424
terminal.foreground #DCE6F2
terminalCursor.background #0B1424
terminalCursor.foreground #FFA24C
textBlockQuote.background #101B2E
textBlockQuote.border #FFA24C
textLink.activeForeground #FFB870
textLink.foreground #36E0D8
textPreformat.foreground #F4CF6A
titleBar.activeBackground #081020
titleBar.activeForeground #C3CEDE
titleBar.border #1B2C44
titleBar.inactiveBackground #081020
titleBar.inactiveForeground #6E7E96
tree.indentGuidesStroke #22344E 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 #36E0D8 —
string.regexp, constant.character.escape, constant.other.placeholder #79E6B0 —
constant.numeric, constant.language, constant.language.boolean, constant.language.null #F4CF6A —
constant.other, variable.other.constant, entity.name.constant, support.constant #F4CF6A —
variable, variable.other, variable.other.readwrite, meta.definition.variable.name #DCE6F2 —
variable.other.property, variable.other.object.property, support.variable.property, meta.property, variable.object.property #DCE6F2 —
variable.parameter, meta.parameter #BFD0EC italic
variable.language, variable.language.this, keyword.other.this #FFA24C italic
entity.name.tag, punctuation.definition.tag #FF6D6D —
entity.other.attribute-name #6FB4FF italic
support.type.property-name, support.type.property-name.json, meta.object-literal.key, support.type.property-name.css #C9A6FF —
punctuation, meta.brace, punctuation.separator, punctuation.terminator, punctuation.definition.parameters, meta.delimiter #627490 —
meta.decorator, entity.name.function.decorator, punctuation.decorator #FF6FC2 italic
support.type.primitive, support.type.builtin #8FA6FF —
tag.css, support.constant.property-value.css, constant.numeric.css #F4CF6A —
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown #FFA24C bold
markup.italic #8FA6FF italic
markup.inline.raw, markup.raw.block, markup.fenced_code #36E0D8 —
markup.quote #79E6B0 italic
markup.underline.link, string.other.link, markup.link #6FB4FF underline
invalid, invalid.illegal #FF6D6D underline
entity.name.label #FF6FC2 —
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}!`;
}