Tokyo Night Horizon

Name: Tokyo Night Horizon
Author: Mario Paraschiv

Publisher: Mario ParaschivThemes in package: 3

A clean Visual Studio Code theme with Horizon's syntax highlighting that celebrates the lights of Downtown Tokyo at night.

GitHub

Color themes

VS Code preview

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

Tokyo Night Horizon — Tokyo Night Horizon

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#16161e
activityBar.foreground#787c99
activityBar.inactiveForeground#3b3e52
activityBarBadge.background#3d59a1
activityBarBadge.foreground#fff
badge.background#7e83b230
badge.foreground#acb0d0
breadcrumb.activeSelectionForeground#a9b1d6
breadcrumb.background#16161e
breadcrumb.focusForeground#a9b1d6
breadcrumb.foreground#515670
breadcrumbPicker.background#16161e
button.background#3d59a1dd
button.foreground#ffffff
button.hoverBackground#3d59a1AA
charts.blue#7aa2f7
charts.foreground#9AA5CE
charts.green#41a6b5
charts.lines#16161e
charts.orange#ff9e64
charts.purple#9d7cd8
charts.red#f7768e
charts.yellow#e0af68
debugConsole.errorForeground#bb616b
debugConsole.infoForeground#787c99
debugConsole.sourceForeground#787c99
debugConsole.warningForeground#c49a5a
debugConsoleInputIcon.foreground#73daca
debugExceptionWidget.background#101014
debugExceptionWidget.border#963c47
debugTokenExpression.boolean#ff9e64
debugTokenExpression.error#bb616b
debugTokenExpression.name#7dcfff
debugTokenExpression.number#ff9e64
debugTokenExpression.string#9ece6a
debugTokenExpression.value#9aa5ce
debugToolBar.background#101014
debugView.stateLabelBackground#14141b
debugView.stateLabelForeground#787c99
debugView.valueChangedHighlight#3d59a1aa
descriptionForeground#515670
diffEditor.insertedTextBackground#41a6b515
diffEditor.removedTextBackground#db4b4b22
dropdown.background#14141b
dropdown.foreground#787c99
dropdown.listBackground#14141b
editor.background#1a1b26
editor.findMatchBackground#3d59a166
editor.findMatchBorder#e0af68
editor.findMatchHighlightBackground#3d59a166
editor.findRangeHighlightBackground#515c7e33
editor.focusedStackFrameHighlightBackground#73daca20
editor.foldBackground#1111174a
editor.foreground#a9b1d6
editor.inactiveSelectionBackground#515c7e25
editor.lineHighlightBackground#1e202e
editor.rangeHighlightBackground#515c7e20
editor.selectionBackground#515c7e40
editor.selectionHighlightBackground#515c7e44
editor.stackFrameHighlightBackground#E2BD3A20
editor.wordHighlightBackground#515c7e44
editor.wordHighlightStrongBackground#515c7e55
editorBracketHighlight.foreground1#698cd6
editorBracketHighlight.foreground2#68b3de
editorBracketHighlight.foreground3#9a7ecc
editorBracketHighlight.foreground4#25aac2
editorBracketHighlight.foreground5#80a856
editorBracketHighlight.foreground6#c49a5a
editorBracketHighlight.unexpectedBracket.foreground#db4b4b
editorBracketMatch.background#16161e
editorBracketMatch.border#42465d
editorBracketPairGuide.activeBackground1#698cd6
editorBracketPairGuide.activeBackground2#68b3de
editorBracketPairGuide.activeBackground3#9a7ecc
editorBracketPairGuide.activeBackground4#25aac2
editorBracketPairGuide.activeBackground5#80a856
editorBracketPairGuide.activeBackground6#c49a5a
editorCodeLens.foreground#484f70
editorCursor.foreground#c0caf5
editorError.foreground#db4b4b
editorGroup.border#101014
editorGroup.dropBackground#1e202e
editorGroupHeader.border#101014
editorGroupHeader.noTabsBackground#16161e
editorGroupHeader.tabsBackground#16161e
editorGroupHeader.tabsBorder#101014
editorGutter.addedBackground#164846
editorGutter.deletedBackground#823c41
editorGutter.modifiedBackground#394b70
editorHint.foreground#0da0ba
editorHoverWidget.background#16161e
editorHoverWidget.border#101014
editorIndentGuide.activeBackground#363b54
editorIndentGuide.background#1e202e
editorInfo.foreground#0da0ba
editorLightBulb.foreground#e0af68
editorLightBulbAutoFix.foreground#e0af68
editorLineNumber.activeForeground#737aa2
editorLineNumber.foreground#363b54
editorLink.activeForeground#acb0d0
editorMarkerNavigation.background#16161e
editorOverviewRuler.addedForeground#164846
editorOverviewRuler.border#101014
editorOverviewRuler.bracketMatchForeground#101014
editorOverviewRuler.deletedForeground#703438
editorOverviewRuler.errorForeground#db4b4b
editorOverviewRuler.findMatchForeground#a9b1d644
editorOverviewRuler.infoForeground#1abc9c
editorOverviewRuler.modifiedForeground#394b70
editorOverviewRuler.rangeHighlightForeground#a9b1d644
editorOverviewRuler.selectionHighlightForeground#a9b1d622
editorOverviewRuler.warningForeground#e0af68
editorOverviewRuler.wordHighlightForeground#bb9af755
editorOverviewRuler.wordHighlightStrongForeground#bb9af766
editorPane.background#16161e
editorRuler.foreground#101014
editorSuggestWidget.background#16161e
editorSuggestWidget.border#101014
editorSuggestWidget.highlightForeground#6183bb
editorSuggestWidget.selectedBackground#20222c
editorWarning.foreground#e0af68
editorWhitespace.foreground#363b54
editorWidget.background#16161e
editorWidget.resizeBorder#545c7e33
errorForeground#515670
extensionBadge.remoteBackground#3d59a1
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#3d59a1DD
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#3d59a1AA
focusBorder#545c7e33
foreground#787c99
gitDecoration.addedResourceForeground#449dab
gitDecoration.conflictingResourceForeground#bb7a61
gitDecoration.deletedResourceForeground#914c54
gitDecoration.ignoredResourceForeground#515670
gitDecoration.modifiedResourceForeground#6183bb
gitDecoration.renamedResourceForeground#449dab
gitDecoration.stageDeletedResourceForeground#914c54
gitDecoration.stageModifiedResourceForeground#6183bb
gitDecoration.untrackedResourceForeground#449dab
gitlens.gutterForegroundColor#444b6a
gitlens.gutterUncommittedForegroundColor#444b6a
gitlens.trailingLineForegroundColor#444b6a
icon.foreground#787c99
input.background#14141b
input.border#0f0f14
input.foreground#a9b1d6
input.placeholderForeground#787c998A
inputOption.activeBackground#3d59a144
inputOption.activeForeground#c0caf5
inputValidation.errorBackground#85353e
inputValidation.errorBorder#963c47
inputValidation.errorForeground#bbc2e0
inputValidation.infoBackground#0da0ba
inputValidation.infoBorder#0db9d7
inputValidation.infoForeground#000000
inputValidation.warningBackground#c2985b
inputValidation.warningBorder#e0af68
inputValidation.warningForeground#000000
list.activeSelectionBackground#202330
list.activeSelectionForeground#a9b1d6
list.deemphasizedForeground#787c99
list.dropBackground#1e202e
list.errorForeground#bb616b
list.focusBackground#1c1d29
list.focusForeground#a9b1d6
list.highlightForeground#668ac4
list.hoverBackground#13131a
list.hoverForeground#a9b1d6
list.inactiveSelectionBackground#1c1d29
list.inactiveSelectionForeground#a9b1d6
list.invalidItemForeground#c97018
list.warningForeground#c49a5a
listFilterWidget.background#101014
listFilterWidget.noMatchesOutline#a6333f
listFilterWidget.outline#3d59a1
menu.background#16161e
menu.border#101014
menu.foreground#787c99
menu.selectionBackground#1e202e
menu.selectionForeground#a9b1d6
menu.separatorBackground#101014
menubar.selectionBackground#1e202e
menubar.selectionBorder#1b1e2e
menubar.selectionForeground#a9b1d6
merge.currentContentBackground#007a7544
merge.currentHeaderBackground#007a75aa
merge.incomingContentBackground#3d59a144
merge.incomingHeaderBackground#3d59a1aa
minimapGutter.addedBackground#1C5957
minimapGutter.deletedBackground#944449
minimapGutter.modifiedBackground#425882
notificationCenterHeader.background#101014
notificationLink.foreground#6183bb
notifications.background#101014
notificationsErrorIcon.foreground#bb616b
notificationsInfoIcon.foreground#0da0ba
notificationsWarningIcon.foreground#bba461
panel.background#16161e
panel.border#101014
panelInput.border#16161e
panelTitle.activeBorder#16161e
panelTitle.activeForeground#787c99
panelTitle.inactiveForeground#42465d
peekView.border#101014
peekViewEditor.background#16161e
peekViewEditor.matchHighlightBackground#3d59a166
peekViewResult.background#101014
peekViewResult.fileForeground#787c99
peekViewResult.lineForeground#a9b1d6
peekViewResult.matchHighlightBackground#3d59a166
peekViewResult.selectionBackground#3d59a133
peekViewResult.selectionForeground#a9b1d6
peekViewTitle.background#101014
peekViewTitleDescription.foreground#787c99
peekViewTitleLabel.foreground#a9b1d6
pickerGroup.border#101014
pickerGroup.foreground#a9b1d6
progressBar.background#3d59a1
sash.hoverBorder#29355a
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#868bc422
scrollbarSlider.background#868bc415
scrollbarSlider.hoverBackground#868bc410
selection.background#515c7e40
settings.headerForeground#6183bb
sideBar.background#16161e
sideBar.border#101014
sideBar.dropBackground#1e202e
sideBar.foreground#787c99
sideBarSectionHeader.background#16161e
sideBarSectionHeader.border#101014
sideBarSectionHeader.foreground#a9b1d6
sideBarTitle.foreground#787c99
statusBar.background#16161e
statusBar.border#101014
statusBar.debuggingBackground#16161e
statusBar.debuggingForeground#787c99
statusBar.foreground#787c99
statusBar.noFolderBackground#16161e
statusBarItem.activeBackground#101014
statusBarItem.hoverBackground#20222c
statusBarItem.prominentBackground#101014
statusBarItem.prominentHoverBackground#20222c
tab.activeBackground#16161e
tab.activeBorder#3d59a1
tab.activeForeground#a9b1d6
tab.activeModifiedBorder#1a1b26
tab.border#101014
tab.hoverForeground#a9b1d6
tab.inactiveBackground#16161e
tab.inactiveForeground#787c99
tab.inactiveModifiedBorder#1f202e
tab.lastPinnedBorder#222333
tab.unfocusedActiveBorder#1f202e
tab.unfocusedActiveForeground#a9b1d6
tab.unfocusedHoverForeground#a9b1d6
tab.unfocusedInactiveForeground#787c99
terminal.ansiBlack#363b54
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#363b54
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#7dcfff
terminal.ansiBrightGreen#41a6b5
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#acb0d0
terminal.ansiBrightYellow#e0af68
terminal.ansiCyan#7dcfff
terminal.ansiGreen#41a6b5
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#787c99
terminal.ansiYellow#e0af68
terminal.background#16161e
terminal.foreground#787c99
terminal.selectionBackground#515c7e30
textBlockQuote.background#16161e
textCodeBlock.background#16161e
textLink.activeForeground#7dcfff
textLink.foreground#6183bb
textPreformat.foreground#9699a8
textSeparator.foreground#363b54
titleBar.activeBackground#16161e
titleBar.activeForeground#787c99
titleBar.border#101014
titleBar.inactiveBackground#16161e
titleBar.inactiveForeground#787c99
tree.indentGuidesStroke#2b2b3b
walkThrough.embeddedEditorBackground#16161e
widget.shadow#ffffff00
window.activeBorder#0d0f17
window.inactiveBorder#0d0f17

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, source.python punctuation.definition.comment	#BBBBBB4D	italic
constant	#F09483E6	—
constant.character.escape	#25B0BCE6	—
entity.name	#FAC29AE6	—
entity.name.function, entity.name.function.python, meta.function-call.generic.python	#60c5ff	—
entity.name.tag	#E95678E6
entity.name.type, storage.type.cs	#FAC29AE6	—
entity.other.attribute-name	#F09483E6
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#25B0BCE6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
entity.name.variable, variable, meta.attribute.python, meta.member.access.python, source.python, source.python meta.function-call.arguments, source.python entity.other.inherited-class	#E95678E6	—
source.python meta.function-call, source.python punctuation.definition.parameters, source.python punctuation.definition.arguments, source.python meta.function.parameters, source.python punctuation.parenthesis, source.python definition.arguments, source.python punctuation.definition, source.python punctuation.section.class, source.python punctuation.section.function	#A9B1D6	—
keyword	#B877DBE6
keyword.operator	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#B877DBE6	—
keyword.other.unit	#F09483E6	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#E95678E6	—
markup.bold	#B877DBE6	bold
markup.italic	#25B0BCE6	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#FAB795E6	—
storage	#B877DBE6
string.quoted, string.template, punctuation.definition.string	#FAB795E6	—
string.regexp	#F09483E6	—
string.other.link	#F09483E6	—
support	#FAC29AE6	—
support.function	#60c5ff	—
support.variable	#E95678E6	—
support.type.property-name, meta.object-literal.key	#E95678E6	—
support.type.property-name.css	#BBBBBB	—
variable.language	#FAC29AE6	italic
variable.parameter	—	italic
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#E95678B3
punctuation.separator	#BBBBBB	—
punctuation.definition.template-expression	#B877DBE6	—
punctuation.section.embedded	#B877DBE6	—
punctuation.definition.list	#F09483E6	—

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}!`;
}