Skip to main content
Tokyo Twilight | Coding Theme
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.background #1c1c1f activityBar.border default activityBar.foreground #ebecf0 activityBarBadge.background #7ecaff activityBarBadge.foreground #111 button.background #7ecaff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #666 — string, string.regexp, constant.other.symbol, support.type.property-name.json, markup.heading.markdown, entity.other.attribute-name.html, constant.other.color.rgb-value.hex.css #7ecaff — constant.keyword.clojure, entity.other.attribute-name, meta.object-literal.key, meta.type.parameters.tsx, variable.object.property.tsx #7ecaff — constant.numeric, constant.character, constant.language.boolean.clojure, constant.language.nil.clojure, keyword.other.unit.px.css, constant.language.json, constant.language.boolean.true, constant.language.boolean.false, constant.language.null, constant.language.undefined
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Tokyo Twilight — Tokyo Twilight
button.foreground
#111
debugToolBar.background #1c1c1f
diffEditor.insertedLineBackground #7effb420
diffEditor.insertedTextBackground #7effb430
diffEditor.removedLineBackground #ff7e8a20
diffEditor.removedTextBackground #ff7e8a30
editor.background #1c1c1f
editor.findMatchBackground #a0a3ac
editor.foreground #ebecf0
editor.inactiveSelectionBackground #7ecaff20
editor.lineHighlightBorder #7ecaff00
editor.selectionBackground #7ecaff30
editor.selectionHighlightBackground default
editor.wordHighlightBackground default
editorBracketMatch.background #3d424c
editorBracketMatch.border #3d424c
editorCursor.background #7ecaff
editorCursor.foreground #7ecaff
editorError.foreground #ff7e8a
editorGroupHeader.border default
editorGroupHeader.tabsBackground #2e3039
editorGutter.addedBackground #7effb4
editorGutter.deletedBackground #ff7e8a
editorGutter.modifiedBackground #7ecaff
editorHoverWidget.foreground #ebecf0
editorInfo.foreground #7ecaff
editorLightBulb.foreground #a0a3ac
editorLineNumber.foreground #4a4a4f
editorLink.activeForeground #7effb4
editorStickyScroll.shadow #00000000
editorSuggestWidget.background #2e3039
editorSuggestWidget.focusHighlightForeground #111
editorSuggestWidget.highlightForeground #7ecaff
editorSuggestWidget.selectedIconForeground #111
editorWarning.foreground #e9dcb3
editorWidget.background #2e3039
focusBorder #7ecaff
gitDecoration.addedResourceForeground #7effb4
gitDecoration.modifiedResourceForeground #7ecaff
gitDecoration.stageDeletedResourceForeground #ff7e8a
gitDecoration.stageModifiedResourceForeground #7ecaff
gitDecoration.untrackedResourceForeground #7effb4
input.background #2e3039
input.foreground #ebecf0
list.activeSelectionBackground #7ecaff
list.activeSelectionForeground #111
list.errorForeground #F7D2B6
list.focusHighlightForeground #111
list.highlightForeground #7ecaff
list.hoverBackground #4f5260
list.warningForeground #7ecaff
minimap.selectionHighlight #7ecaff30
minimapGutter.addedBackground #7effb4
minimapGutter.deletedBackground #ff7e8a
panel.background #1c1c1f
panel.border #505562
panelTitle.activeBorder #7ecaff
panelTitle.activeForeground #7ecaff
peekViewEditor.background #1c1c1f
peekViewEditor.matchHighlightBackground #3d424c
peekViewResult.background #1c1c1f
peekViewResult.matchHighlightBackground #7ecaff50
peekViewResult.selectionBackground #2e3250
peekViewResult.selectionForeground #5f7e97
peekViewTitle.background #7ecaff
peekViewTitleDescription.foreground #111
peekViewTitleLabel.foreground #111
pickerGroup.foreground #7ecaff
progressBar.background #7ecaff
quickInput.background #2e3039
quickInput.foreground #ebecf0
quickInputList.focusIconForeground #111
scmGraph.historyItemRefColor #7ecaff
scmGraph.historyItemRemoteRefColor #7ecaff
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #7ecaff
scrollbarSlider.background #2e3039
scrollbarSlider.hoverBackground #4f5260
sideBar.background #1c1c1f
sideBar.border default
sideBar.foreground #ebecf0
sideBarSectionHeader.background #1c1c1f
sideBarSectionHeader.foreground #7ecaff
sideBarTitle.foreground #ebecf0
statusBar.background #1c1c1f
statusBar.foreground #b9baba
statusBar.noFolderBackground #1c1c1f
tab.activeBackground #1c1c1f
tab.activeBorder #1c1c1f00
tab.activeBorderTop #00000000
tab.activeForeground #ebecf0
tab.border #1c1c1f00
tab.hoverBackground #4a4a4f
tab.inactiveBackground #2e3039
tab.inactiveForeground #a0a3ac
tab.unfocusedActiveBorder #1c1c1f00
tab.unfocusedActiveForeground #a0a3ac
tab.unfocusedInactiveForeground #a0a3ac
terminal.ansiBlack #1c1c1f
terminal.ansiBlue #7ecaff
terminal.ansiBrightBlack #3d424c
terminal.ansiBrightBlue #8dc5f7
terminal.ansiBrightCyan #a6f8eb
terminal.ansiBrightGreen #9eeea9
terminal.ansiBrightMagenta #d8a4f7
terminal.ansiBrightRed #ff7e8a
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ecd28b
terminal.ansiCyan #c8faf2
terminal.ansiGreen #7effb4
terminal.ansiMagenta #e7c7f9
terminal.ansiRed #f7b7b7
terminal.ansiWhite #ebecf0
terminal.ansiYellow #eeddaf
terminal.background #1c1c1f
terminal.foreground #ebecf0
terminal.selectionBackground #505562
terminalCursor.background #505562
textLink.activeForeground #ebecf0
textLink.foreground #7ecaff
titleBar.activeBackground #1c1c1f
titleBar.inactiveBackground #1c1c1f #7effb4
entity.name.tag, entity.name.tag.tsx, entity.global.clojure, entity.name.namespace, entity.name.type.alias.tsx, entity.name.type.class.js, meta.definition.function.js, support.type.primitive.tsx, meta.tag.structure.html entity.name.tag.html, meta.definition.function.js entity.name.function.js, meta.definition.function.tsx entity.name.function.tsx #ffb37e —
variable, variable.css, storage.control.clojure, entity.name.function, entity.name.type.class, entity.name.type, entity.name.variable.clojure, entity.name.tag.html, entity.name.tag, support.constant.property-value.css, entity.other.attribute-name.pseudo-element.css, variable.argument.css #ebecf0 —
punctuation, meta.brace.square.tsx, meta.array.literal.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.block.tsx, meta.arrow.tsx, meta.brace.square.js, meta.array.literal.js, meta.object.member.js, meta.objectliteral.js, meta.block.js, meta.brace.round.js, meta.arrow.js storage.type.function.arrow.js, meta.arrow.tsx storage.type.function.arrow.tsx #666 —
storage.type, keyword.control.flow.js, keyword.control.flow.tsx, keyword.control.conditional.js, keyword.control.conditional.tsx #ebecf0 —
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 } ! ` ;
}