Tokyo Nightlife

Name: Tokyo Nightlife
Author: mambroz27

Publisher: mambroz27Themes in package: 1

A dark theme for Visual Studio Code inspired by Tokyo Night focused on readability.

Open in VS Code GitHub

VS Code preview

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

Tokyo Nightlife — Tokyo Nightlife

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#16161e
activityBar.border#101014
activityBar.foreground#c8d3f5
activityBar.inactiveForeground#565f89
activityBarBadge.background#3d59a1
activityBarBadge.foreground#ffffff
badge.background#3d59a1
badge.foreground#c8d3f5
button.background#3d59a1dd
button.foreground#ffffff
button.hoverBackground#3d59a1aa
button.secondaryBackground#3b3e52
charts.blue#7aa2f7
charts.foreground#9aa5ce
charts.green#9ece6a
charts.lines#16161e
charts.orange#ff9e64
charts.purple#bb9af7
charts.red#f7768e
charts.yellow#e0af68
checkbox.border#3b4261
debugConsole.errorForeground#f7768e
debugConsole.infoForeground#7dcfff
debugConsole.sourceForeground#9aa5ce
debugConsole.warningForeground#e0af68
debugIcon.breakpointForeground#f7768e
debugTokenExpression.boolean#ff9e64
debugTokenExpression.name#7aa2f7
debugTokenExpression.number#ff9e64
debugTokenExpression.string#9ece6a
debugTokenExpression.value#c8d3f5
descriptionForeground#6e7aa8
diffEditor.insertedLineBackground#41a6b520
diffEditor.insertedTextBackground#41a6b520
diffEditor.removedLineBackground#db4b4b22
diffEditor.removedTextBackground#db4b4b22
disabledForeground#565f89
dropdown.background#14141b
dropdown.border#3b4261
dropdown.foreground#9aa5ce
dropdown.listBackground#16161e
editor.background#1a1b26
editor.findMatchBackground#3d59a166
editor.findMatchBorder#e0af68
editor.findMatchHighlightBackground#3d59a144
editor.foldBackground#1e202e88
editor.foreground#c8d3f5
editor.inactiveSelectionBackground#515c7e25
editor.lineHighlightBackground#1e202e
editor.selectionBackground#3d59a166
editor.selectionHighlightBackground#515c7e44
editor.wordHighlightBackground#515c7e44
editor.wordHighlightStrongBackground#515c7e55
editorBracketHighlight.foreground1#7dcfff
editorBracketHighlight.foreground2#e0af68
editorBracketHighlight.foreground3#bb9af7
editorBracketHighlight.foreground4#73daca
editorBracketHighlight.foreground5#9ece6a
editorBracketHighlight.foreground6#7aa2f7
editorBracketHighlight.unexpectedBracket.foreground#f7768e
editorBracketMatch.background#16161e
editorBracketMatch.border#3d59a1
editorCodeLens.foreground#565f89
editorCursor.foreground#c0caf5
editorError.foreground#f7768e
editorGhostText.foreground#565f89
editorGroup.border#101014
editorGroupHeader.noTabsBackground#16161e
editorGroupHeader.tabsBackground#16161e
editorGroupHeader.tabsBorder#101014
editorGutter.addedBackground#1c5957
editorGutter.deletedBackground#823c41
editorGutter.modifiedBackground#394b70
editorHint.foreground#73daca
editorHoverWidget.background#16161e
editorHoverWidget.border#101014
editorIndentGuide.activeBackground1#3b4261
editorIndentGuide.background1#242535
editorInfo.foreground#7dcfff
editorInlayHint.background#1e202e
editorInlayHint.foreground#6e7aa8
editorLineNumber.activeForeground#a9b1d6
editorLineNumber.foreground#3b4261
editorOverviewRuler.border#101014
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.infoForeground#7dcfff
editorOverviewRuler.warningForeground#e0af68
editorRuler.foreground#242535
editorSuggestWidget.background#16161e
editorSuggestWidget.border#101014
editorSuggestWidget.highlightForeground#7aa2f7
editorSuggestWidget.selectedBackground#242738
editorWarning.foreground#e0af68
editorWhitespace.foreground#3b4261
editorWidget.background#16161e
editorWidget.border#101014
editorWidget.foreground#9aa5ce
errorForeground#f7768e
focusBorder#545c7e55
foreground#9aa5ce
gitDecoration.addedResourceForeground#9ece6a
gitDecoration.conflictingResourceForeground#e0af68
gitDecoration.deletedResourceForeground#f7768e
gitDecoration.ignoredResourceForeground#565f89
gitDecoration.modifiedResourceForeground#7aa2f7
gitDecoration.untrackedResourceForeground#9ece6a
icon.foreground#9aa5ce
input.background#14141b
input.border#3b4261
input.foreground#c8d3f5
input.placeholderForeground#565f89
inputOption.activeBackground#3d59a144
inputOption.activeForeground#c0caf5
inputValidation.errorBackground#85353e
inputValidation.errorBorder#963c47
inputValidation.errorForeground#c8d3f5
inputValidation.infoBackground#3d59a15c
inputValidation.infoBorder#3d59a1
inputValidation.infoForeground#c8d3f5
inputValidation.warningBackground#e0af68
inputValidation.warningBorder#c2985b
inputValidation.warningForeground#16161e
list.activeSelectionBackground#2a2e42
list.activeSelectionForeground#c8d3f5
list.activeSelectionIconForeground#c8d3f5
list.dropBackground#1e202e
list.errorForeground#f7768e
list.focusBackground#1c1d29
list.focusForeground#c8d3f5
list.highlightForeground#7aa2f7
list.hoverBackground#1a1c28
list.hoverForeground#c8d3f5
list.inactiveSelectionBackground#1c1d29
list.inactiveSelectionForeground#b6bfe6
list.warningForeground#e0af68
menu.background#16161e
menu.border#101014
menu.foreground#9aa5ce
menu.selectionBackground#2a2e42
menu.selectionForeground#c8d3f5
menu.separatorBackground#3b4261
notificationCenterHeader.background#101014
notificationLink.foreground#7aa2f7
notifications.background#16161e
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#7dcfff
notificationsWarningIcon.foreground#e0af68
panel.background#16161e
panel.border#101014
panelTitle.activeForeground#c8d3f5
panelTitle.inactiveForeground#565f89
progressBar.background#3d59a1
sash.hoverBorder#3d59a1
scrollbar.shadow#00000033
sideBar.background#16161e
sideBar.border#101014
sideBar.foreground#9aa5ce
sideBarSectionHeader.background#16161e
sideBarSectionHeader.border#101014
sideBarSectionHeader.foreground#a9b1d6
sideBarTitle.foreground#c8d3f5
statusBar.background#16161e
statusBar.border#101014
statusBar.debuggingBackground#3d59a1
statusBar.debuggingForeground#ffffff
statusBar.foreground#9aa5ce
statusBarItem.hoverBackground#242738
statusBarItem.remoteBackground#3d59a1
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1a1b26
tab.activeBorder#3d59a1
tab.activeForeground#c8d3f5
tab.border#101014
tab.hoverForeground#c8d3f5
tab.inactiveBackground#16161e
tab.inactiveForeground#6e7aa8
tab.unfocusedActiveForeground#c8d3f5
tab.unfocusedInactiveForeground#6e7aa8
terminal.ansiBlack#3b4261
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#565f89
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#7dcfff
terminal.ansiBrightGreen#9ece6a
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#dce2ff
terminal.ansiBrightYellow#e0af68
terminal.ansiCyan#7dcfff
terminal.ansiGreen#9ece6a
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#c8d3f5
terminal.ansiYellow#e0af68
terminal.background#1a1b26
terminal.foreground#c8d3f5
textBlockQuote.background#16161e
textCodeBlock.background#16161e
textLink.activeForeground#7dcfff
textLink.foreground#7aa2f7
textPreformat.foreground#9ece6a
textSeparator.foreground#3b4261
titleBar.activeBackground#16161e
titleBar.activeForeground#9aa5ce
titleBar.border#101014
titleBar.inactiveBackground#16161e
titleBar.inactiveForeground#565f89
tree.indentGuidesStroke#2b2b3b
widget.shadow#00000055
window.activeBorder#101014
window.inactiveBorder#101014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#c8d3f5	—
emphasis	—	italic
strong	—	bold
header	#7aa2f7	—
comment, punctuation.definition.comment	#6c7599	italic
comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup	#7f8bb8	—
constant.language, variable.language	#bb9af7	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#ff9e64	—
constant.regexp	#7dcfff	—
entity.name.tag	#7aa2f7	—
entity.name.tag.css, entity.name.tag.less	#e0af68	—
entity.other.attribute-name	#7dcfff	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#e0af68	—
invalid	#f7768e	—
invalid.deprecated	#bb9af7	—
markup.underline	—	underline
markup.bold	#7aa2f7	bold
markup.heading	#7aa2f7	bold
markup.italic	#bb9af7	italic
markup.strikethrough	—	strikethrough
markup.inserted	#9ece6a	—
markup.deleted	#e0af68	—
markup.changed	#7aa2f7	—
punctuation.definition.quote.begin.markdown	#6c7599	—
punctuation.definition.list.begin.markdown	#7dcfff	—
markup.inline.raw	#9ece6a	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#7dcfff	bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#61bdf2	bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#7aa2f7	bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown, heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown, heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#8ea0d0	bold
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#73daca	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#89ddff	—
meta.preprocessor, entity.name.function.preprocessor	#bb9af7	—
meta.preprocessor.string	#9ece6a	—
meta.preprocessor.numeric	#ff9e64	—
meta.structure.dictionary.key.python	#7dcfff	—
meta.diff.header	#7aa2f7	—
storage, storage.type, storage.modifier, keyword.operator.noexcept	#bb9af7	—
string, meta.embedded.assembly, string.tag, string.value, string constant.character	#9ece6a	—
string.regexp	#b4f9f8	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#89ddff	—
meta.template.expression	#c8d3f5	—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded	#7dcfff	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#ff9e64	—
keyword	#bb9af7	—
keyword.control	#bb9af7	—
keyword.operator	#c8d3f5	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#bb9af7	—
keyword.other.unit	#ff9e64	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#bb9af7	—
support.function.git-rebase	#7dcfff	—
constant.sha.git-rebase	#ff9e64	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#c8d3f5	—
punctuation, punctuation.definition.tag, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, meta.block, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.dictionary	#9abdf5	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function-call entity.name.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function, variable.function	#7aa2f7	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, entity.other.inherited-class, storage.type.error.go, storage.type.cs, storage.type.generic.cs, storage.type.generic.java, storage.type.java, storage.type.object.array.java	#73daca	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, punctuation.separator.namespace.ruby	#73daca	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#c0caf5	—
variable.parameter, meta.function.parameters variable, variable.parameter.function.language.special, entity.name.variable.parameter	#e0af68	—
meta.object-literal.key, string.unquoted.label.js, variable.object.property, meta.definition.property variable.other.readwrite, variable.other.property, variable.other.definition, entity.name.variable.property, entity.name.variable.field	#7dcfff	—
support.type.primitive, storage.type.primitive, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.rune.go, storage.type.primitive.java, storage.type.primitive.array.java	#bb9af7	—
variable.other.constant, constant.other, constant.character.escape	#ff9e64	—
entity.name.label	#c8d3f5	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator, storage.type.annotation.java, punctuation.definition.annotation.java	#7aa2f7	—
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default	#89ddff	—
keyword.other.DML	#89ddff	—
keyword.control.at-rule.include, keyword.control.at-rule.mixin, keyword.control.at-rule.extend, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss	#bb9af7	—
source.json meta.structure.dictionary.json support.type.property-name.json	#7aa2f7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#73daca	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7dcfff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#bb9af7	—
source.env	#7aa2f7	—