Lighthouse In The Dark

Name: Lighthouse In The Dark
Author: Code Time

Publisher: Code TimeThemes in package: 4

A retro 80s neon theme with light and dark versions.

GitHub

Color themes

VS Code preview

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

Lighthouse In The Dark — Lighthouse In The Dark (Rose Island Dark)

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#2A1E16
activityBar.border#3D2E22
activityBar.foreground#FF6B9D
activityBar.inactiveForeground#A8997C
activityBarBadge.background#FF6B9D
activityBarBadge.foreground#1E1410
badge.background#FF6B9D
badge.foreground#1E1410
breadcrumb.activeSelectionForeground#FF6B9D
breadcrumb.background#251A14
breadcrumb.focusForeground#F5F0E8
breadcrumb.foreground#A8997C
breadcrumbPicker.background#251A14
button.background#FF6B9D
button.foreground#1E1410
button.hoverBackground#FF8BB0
button.secondaryBackground#3D2E22
button.secondaryForeground#F5F0E8
button.secondaryHoverBackground#4D3E32
debugIcon.breakpointDisabledForeground#6B5A45
debugIcon.breakpointForeground#FF6B9D
debugIcon.continueForeground#98C379
debugIcon.pauseForeground#FFB86C
debugIcon.restartForeground#98C379
debugIcon.startForeground#98C379
debugIcon.stepIntoForeground#61AFEF
debugIcon.stepOutForeground#61AFEF
debugIcon.stepOverForeground#61AFEF
debugIcon.stopForeground#FF6B9D
debugToolBar.background#2A1E16
descriptionForeground#A8997C
diffEditor.insertedLineBackground#98C37920
diffEditor.insertedTextBackground#98C37930
diffEditor.removedLineBackground#FF6B9D20
diffEditor.removedTextBackground#FF6B9D30
diffEditorGutter.insertedLineBackground#98C37940
diffEditorGutter.removedLineBackground#FF6B9D40
dropdown.background#2A1E16
dropdown.border#3D2E22
dropdown.foreground#F5F0E8
editor.background#1E1410
editor.findMatchBackground#FFB86C50
editor.findMatchBorder#FFB86C
editor.findMatchHighlightBackground#FFB86C30
editor.foreground#F5F0E8
editor.inactiveSelectionBackground#FF6B9D20
editor.lineHighlightBackground#2A1E16
editor.lineHighlightBorder#3D2E2200
editor.selectionBackground#FF6B9D40
editor.selectionHighlightBackground#FFB86C25
editor.wordHighlightBackground#FF00FF30
editor.wordHighlightStrongBackground#FF00FF50
editorBracketMatch.background#FF6B9D30
editorBracketMatch.border#FF6B9D
editorCursor.foreground#FF6B9D
editorError.foreground#FF6B9D
editorGroupHeader.border#3D2E22
editorGroupHeader.noTabsBackground#251A14
editorGroupHeader.tabsBackground#251A14
editorHint.foreground#98C379
editorHoverWidget.background#251A14
editorHoverWidget.border#3D2E22
editorIndentGuide.activeBackground#5A4838
editorIndentGuide.background#3D2E2280
editorInfo.foreground#61AFEF
editorLineNumber.activeForeground#FF6B9D
editorLineNumber.foreground#6B5A45
editorRuler.foreground#3D2E22
editorSuggestWidget.background#251A14
editorSuggestWidget.border#3D2E22
editorSuggestWidget.foreground#F5F0E8
editorSuggestWidget.highlightForeground#FF6B9D
editorSuggestWidget.selectedBackground#FF6B9D40
editorWarning.foreground#FFB86C
editorWhitespace.foreground#3D2E2280
editorWidget.background#251A14
editorWidget.border#3D2E22
editorWidget.foreground#F5F0E8
errorForeground#FF6B9D
focusBorder#FF6B9D80
foreground#F5F0E8
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#FF6B9D
gitDecoration.deletedResourceForeground#FF6B9D
gitDecoration.ignoredResourceForeground#6B5A45
gitDecoration.modifiedResourceForeground#FFB86C
gitDecoration.stageDeletedResourceForeground#FF6B9D
gitDecoration.stageModifiedResourceForeground#FFB86C
gitDecoration.untrackedResourceForeground#98C379
icon.foreground#FF6B9D
input.background#2A1E16
input.border#3D2E22
input.foreground#F5F0E8
input.placeholderForeground#6B5A45
inputOption.activeBackground#FF6B9D30
inputOption.activeBorder#FF6B9D
inputValidation.errorBackground#FF6B9D30
inputValidation.errorBorder#FF6B9D
inputValidation.infoBackground#61AFEF30
inputValidation.infoBorder#61AFEF
inputValidation.warningBackground#FFB86C30
inputValidation.warningBorder#FFB86C
list.activeSelectionBackground#FF6B9D40
list.activeSelectionForeground#F5F0E8
list.focusBackground#FF6B9D30
list.focusForeground#F5F0E8
list.highlightForeground#FF6B9D
list.hoverBackground#2A1E1680
list.hoverForeground#F5F0E8
list.inactiveSelectionBackground#3D2E2260
list.inactiveSelectionForeground#F5F0E8
menu.background#251A14
menu.foreground#F5F0E8
menu.selectionBackground#FF6B9D40
menu.selectionForeground#F5F0E8
menu.separatorBackground#3D2E22
menubar.selectionBackground#FF6B9D40
menubar.selectionForeground#F5F0E8
minimap.errorHighlight#FF6B9D
minimap.findMatchHighlight#FFB86C80
minimap.selectionHighlight#FF6B9D60
minimap.warningHighlight#FFB86C
minimapGutter.addedBackground#98C379
minimapGutter.deletedBackground#FF6B9D
minimapGutter.modifiedBackground#FFB86C
notificationCenter.border#3D2E22
notifications.background#251A14
notifications.border#3D2E22
notifications.foreground#F5F0E8
notificationsErrorIcon.foreground#FF6B9D
notificationsInfoIcon.foreground#61AFEF
notificationsWarningIcon.foreground#FFB86C
panel.background#251A14
panel.border#3D2E22
panelTitle.activeBorder#FF6B9D
panelTitle.activeForeground#F5F0E8
panelTitle.inactiveForeground#A8997C
peekView.border#FF6B9D
peekViewEditor.background#1E1410
peekViewEditor.matchHighlightBackground#FFB86C40
peekViewResult.background#251A14
peekViewResult.fileForeground#F5F0E8
peekViewResult.lineForeground#A8997C
peekViewResult.matchHighlightBackground#FFB86C40
peekViewResult.selectionBackground#FF6B9D40
peekViewResult.selectionForeground#F5F0E8
peekViewTitle.background#2A1E16
peekViewTitleDescription.foreground#A8997C
peekViewTitleLabel.foreground#F5F0E8
problemsErrorIcon.foreground#FF6B9D
problemsInfoIcon.foreground#61AFEF
problemsWarningIcon.foreground#FFB86C
progressBar.background#FF6B9D
quickInput.background#251A14
quickInput.foreground#F5F0E8
quickInputList.focusBackground#FF6B9D40
quickInputList.focusForeground#F5F0E8
scrollbarSlider.activeBackground#8A7A65A0
scrollbarSlider.background#5A483860
scrollbarSlider.hoverBackground#6B5A4580
sideBar.background#251A14
sideBar.border#3D2E22
sideBar.foreground#F5F0E8
sideBarSectionHeader.background#2A1E16
sideBarSectionHeader.border#3D2E22
sideBarSectionHeader.foreground#FF6B9D
sideBarTitle.foreground#F5F0E8
statusBar.background#FF6B9D
statusBar.border#CC5580
statusBar.debuggingBackground#FFB86C
statusBar.debuggingForeground#1E1410
statusBar.foreground#1E1410
statusBar.noFolderBackground#3D2E22
statusBar.noFolderForeground#F5F0E8
tab.activeBackground#1E1410
tab.activeBorder#FF6B9D
tab.activeBorderTop#FF6B9D
tab.activeForeground#F5F0E8
tab.border#3D2E22
tab.hoverBackground#2A1E16
tab.inactiveBackground#251A14
tab.inactiveForeground#A8997C
terminal.ansiBlack#1E1410
terminal.ansiBlue#61AFEF
terminal.ansiBrightBlack#6B5A45
terminal.ansiBrightBlue#8BCEFF
terminal.ansiBrightCyan#7DD6E2
terminal.ansiBrightGreen#B8E89D
terminal.ansiBrightMagenta#FF66FF
terminal.ansiBrightRed#FF8BB0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD89C
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#FF00FF
terminal.ansiRed#FF6B9D
terminal.ansiWhite#F5F0E8
terminal.ansiYellow#FFB86C
terminal.background#1E1410
terminal.foreground#F5F0E8
terminal.selectionBackground#FF6B9D40
terminalCursor.foreground#FF6B9D
titleBar.activeBackground#2A1E16
titleBar.activeForeground#F5F0E8
titleBar.border#3D2E22
titleBar.inactiveBackground#251A14
titleBar.inactiveForeground#A8997C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A8997C	italic
string, string.quoted, string.template	#FFB86C	—
constant.character.escape, string.regexp	#FFD89C	—
keyword, storage.type, storage.modifier	#FF00FF	—
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export	#FF00FF	bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical	#FF6B9D	—
variable, variable.other	#FF6B9D	—
variable.parameter, meta.function.parameters	#E5C07B	italic
variable.language, variable.language.this, variable.language.self	#FF00FF	italic
variable.other.property, variable.other.object.property	#E5C07B	—
constant, constant.language, constant.language.boolean	#E5C07B	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex	#FFB86C	—
entity.name.function, meta.function-call, support.function	#FF6B9D	—
entity.name.function.definition, meta.function entity.name.function	#FF8BB0	bold
entity.name.class, entity.name.type.class, support.class	#E5C07B	bold
entity.name.type, support.type, entity.name.type.interface, entity.name.type.alias	#61AFEF	—
entity.name.namespace, entity.name.type.module	#61AFEF	—
meta.object-literal.key, support.type.property-name.json	#E5C07B	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition	#A8997C	—
punctuation.definition.block, punctuation.section, meta.brace	#C4B59A	—
entity.name.tag, punctuation.definition.tag	#FF6B9D	—
entity.other.attribute-name	#FFB86C	italic
support.type.property-name.css, meta.property-name.css	#61AFEF	—
support.constant.property-value.css, meta.property-value.css	#FFB86C	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FF00FF	—
markup.heading, entity.name.section.markdown	#FF00FF	bold
markup.bold	#FF6B9D	bold
markup.italic	#FF6B9D	italic
markup.underline.link, string.other.link	#61AFEF	underline
markup.inline.raw, markup.fenced_code, markup.raw.block	#FFB86C	—
markup.quote	#A8997C	italic
markup.list, punctuation.definition.list	#FF6B9D	—
storage, storage.type.function, storage.type.class	#FF00FF	—
support, support.constant, support.variable	#61AFEF	—
invalid, invalid.illegal	#1E1410	—
invalid.deprecated	#1E1410	—

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