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 Light)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#C9BDA0
activityBar.border#A89880
activityBar.foreground#B8266A
activityBar.inactiveForeground#6B5A45
activityBarBadge.background#B8266A
activityBarBadge.foreground#FFFFFF
badge.background#B8266A
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#B8266A
breadcrumb.background#C9BDA0
breadcrumb.focusForeground#1A1612
breadcrumb.foreground#5A4A38
breadcrumbPicker.background#C9BDA0
button.background#B8266A
button.foreground#FFFFFF
button.hoverBackground#D42F7A
button.secondaryBackground#6B5A45
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#7A6A55
debugIcon.breakpointDisabledForeground#8A7A65
debugIcon.breakpointForeground#A83D45
debugIcon.continueForeground#4A7C59
debugIcon.pauseForeground#CC5C2A
debugIcon.restartForeground#4A7C59
debugIcon.startForeground#4A7C59
debugIcon.stepIntoForeground#2E6B8A
debugIcon.stepOutForeground#2E6B8A
debugIcon.stepOverForeground#2E6B8A
debugIcon.stopForeground#A83D45
debugToolBar.background#BEB196
descriptionForeground#5A4A38
diffEditor.insertedLineBackground#4A7C5920
diffEditor.insertedTextBackground#4A7C5930
diffEditor.removedLineBackground#A83D4520
diffEditor.removedTextBackground#A83D4530
diffEditorGutter.insertedLineBackground#4A7C5940
diffEditorGutter.removedLineBackground#A83D4540
dropdown.background#E0D5BC
dropdown.border#A89880
dropdown.foreground#1A1612
editor.background#D5CAAE
editor.findMatchBackground#CC5C2A50
editor.findMatchBorder#CC5C2A
editor.findMatchHighlightBackground#CC5C2A30
editor.foreground#1A1612
editor.inactiveSelectionBackground#B8266A20
editor.lineHighlightBackground#C9BDA060
editor.lineHighlightBorder#A8988050
editor.selectionBackground#B8266A40
editor.selectionHighlightBackground#CC5C2A30
editor.wordHighlightBackground#8B2EB830
editor.wordHighlightStrongBackground#8B2EB850
editorBracketMatch.background#B8266A30
editorBracketMatch.border#B8266A
editorCursor.foreground#B8266A
editorError.foreground#A83D45
editorGroupHeader.border#A89880
editorGroupHeader.noTabsBackground#C9BDA0
editorGroupHeader.tabsBackground#C9BDA0
editorHint.foreground#4A7C59
editorHoverWidget.background#C9BDA0
editorHoverWidget.border#A89880
editorIndentGuide.activeBackground#8A7A65
editorIndentGuide.background#A8988050
editorInfo.foreground#2E6B8A
editorLineNumber.activeForeground#B8266A
editorLineNumber.foreground#8A7A65
editorRuler.foreground#A89880
editorSuggestWidget.background#C9BDA0
editorSuggestWidget.border#A89880
editorSuggestWidget.foreground#1A1612
editorSuggestWidget.highlightForeground#B8266A
editorSuggestWidget.selectedBackground#B8266A40
editorWarning.foreground#CC5C2A
editorWhitespace.foreground#A8988060
editorWidget.background#C9BDA0
editorWidget.border#A89880
editorWidget.foreground#1A1612
errorForeground#A83D45
focusBorder#B8266A80
foreground#1A1612
gitDecoration.addedResourceForeground#4A7C59
gitDecoration.conflictingResourceForeground#CC5C2A
gitDecoration.deletedResourceForeground#A83D45
gitDecoration.ignoredResourceForeground#8A7A65
gitDecoration.modifiedResourceForeground#7A4A1F
gitDecoration.stageDeletedResourceForeground#A83D45
gitDecoration.stageModifiedResourceForeground#7A4A1F
gitDecoration.untrackedResourceForeground#4A7C59
icon.foreground#B8266A
input.background#E0D5BC
input.border#A89880
input.foreground#1A1612
input.placeholderForeground#8A7A65
inputOption.activeBackground#B8266A30
inputOption.activeBorder#B8266A
inputValidation.errorBackground#A83D4530
inputValidation.errorBorder#A83D45
inputValidation.infoBackground#2E6B8A30
inputValidation.infoBorder#2E6B8A
inputValidation.warningBackground#CC5C2A30
inputValidation.warningBorder#CC5C2A
list.activeSelectionBackground#B8266A40
list.activeSelectionForeground#1A1612
list.focusBackground#B8266A30
list.focusForeground#1A1612
list.highlightForeground#B8266A
list.hoverBackground#C9BDA080
list.hoverForeground#1A1612
list.inactiveSelectionBackground#A8988060
list.inactiveSelectionForeground#1A1612
menu.background#C9BDA0
menu.foreground#1A1612
menu.selectionBackground#B8266A40
menu.selectionForeground#1A1612
menu.separatorBackground#A89880
menubar.selectionBackground#B8266A40
menubar.selectionForeground#1A1612
minimap.errorHighlight#A83D45
minimap.findMatchHighlight#CC5C2A80
minimap.selectionHighlight#B8266A60
minimap.warningHighlight#CC5C2A
minimapGutter.addedBackground#4A7C59
minimapGutter.deletedBackground#A83D45
minimapGutter.modifiedBackground#7A4A1F
notificationCenter.border#A89880
notifications.background#C9BDA0
notifications.border#A89880
notifications.foreground#1A1612
notificationsErrorIcon.foreground#A83D45
notificationsInfoIcon.foreground#2E6B8A
notificationsWarningIcon.foreground#CC5C2A
panel.background#C9BDA0
panel.border#A89880
panelTitle.activeBorder#B8266A
panelTitle.activeForeground#1A1612
panelTitle.inactiveForeground#6B5A45
peekView.border#B8266A
peekViewEditor.background#D5CAAE
peekViewEditor.matchHighlightBackground#CC5C2A40
peekViewResult.background#C9BDA0
peekViewResult.fileForeground#1A1612
peekViewResult.lineForeground#5A4A38
peekViewResult.matchHighlightBackground#CC5C2A40
peekViewResult.selectionBackground#B8266A40
peekViewResult.selectionForeground#1A1612
peekViewTitle.background#BEB196
peekViewTitleDescription.foreground#5A4A38
peekViewTitleLabel.foreground#1A1612
problemsErrorIcon.foreground#A83D45
problemsInfoIcon.foreground#2E6B8A
problemsWarningIcon.foreground#CC5C2A
progressBar.background#B8266A
quickInput.background#C9BDA0
quickInput.foreground#1A1612
quickInputList.focusBackground#B8266A40
quickInputList.focusForeground#1A1612
scrollbarSlider.activeBackground#6B5A45A0
scrollbarSlider.background#A8988060
scrollbarSlider.hoverBackground#8A7A6580
sideBar.background#C9BDA0
sideBar.border#A89880
sideBar.foreground#1A1612
sideBarSectionHeader.background#BEB196
sideBarSectionHeader.border#A89880
sideBarSectionHeader.foreground#8B2EB8
sideBarTitle.foreground#1A1612
statusBar.background#B8266A
statusBar.border#8B1A4A
statusBar.debuggingBackground#A83D45
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#6B5A45
statusBar.noFolderForeground#FFFFFF
tab.activeBackground#D5CAAE
tab.activeBorder#B8266A
tab.activeBorderTop#B8266A
tab.activeForeground#1A1612
tab.border#A89880
tab.hoverBackground#E0D5BC
tab.inactiveBackground#C9BDA0
tab.inactiveForeground#5A4A38
terminal.ansiBlack#1A1612
terminal.ansiBlue#2E6B8A
terminal.ansiBrightBlack#6B5A45
terminal.ansiBrightBlue#3E8BAA
terminal.ansiBrightCyan#3E9A9A
terminal.ansiBrightGreen#5A9C69
terminal.ansiBrightMagenta#AB3ED8
terminal.ansiBrightRed#CC4D55
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#A87A18
terminal.ansiCyan#2E7A7A
terminal.ansiGreen#4A7C59
terminal.ansiMagenta#8B2EB8
terminal.ansiRed#A83D45
terminal.ansiWhite#D5CAAE
terminal.ansiYellow#8B6914
terminal.background#C9BDA0
terminal.foreground#1A1612
terminal.selectionBackground#B8266A40
terminalCursor.foreground#B8266A
titleBar.activeBackground#C9BDA0
titleBar.activeForeground#1A1612
titleBar.border#A89880
titleBar.inactiveBackground#D5CAAE
titleBar.inactiveForeground#6B5A45

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A5A5A	italic
string, string.quoted, string.template	#7A4A1F	—
constant.character.escape, string.regexp	#A85A2F	—
keyword, storage.type, storage.modifier	#8B2EB8	—
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export	#8B2EB8	bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical	#B8266A	—
variable, variable.other	#A83D45	—
variable.parameter, meta.function.parameters	#8B5A30	italic
variable.language, variable.language.this, variable.language.self	#B8266A	italic
variable.other.property, variable.other.object.property	#6B4A28	—
constant, constant.language, constant.language.boolean	#6B5A10	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex	#6B5A10	—
entity.name.function, meta.function-call, support.function	#A83D45	—
entity.name.function.definition, meta.function entity.name.function	#8B2A35	bold
entity.name.class, entity.name.type.class, support.class	#6B5A10	bold
entity.name.type, support.type, entity.name.type.interface, entity.name.type.alias	#2E6B8A	—
entity.name.namespace, entity.name.type.module	#2E6B8A	—
meta.object-literal.key, support.type.property-name.json	#8B5A30	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition	#6B5A45	—
punctuation.definition.block, punctuation.section, meta.brace	#5A4A38	—
entity.name.tag, punctuation.definition.tag	#A83D45	—
entity.other.attribute-name	#8B5A30	italic
support.type.property-name.css, meta.property-name.css	#2E6B8A	—
support.constant.property-value.css, meta.property-value.css	#7A4A1F	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#8B2EB8	—
markup.heading, entity.name.section.markdown	#8B2EB8	bold
markup.bold	#A83D45	bold
markup.italic	#A83D45	italic
markup.underline.link, string.other.link	#2E6B8A	underline
markup.inline.raw, markup.fenced_code, markup.raw.block	#7A4A1F	—
markup.quote	#5A5A5A	italic
markup.list, punctuation.definition.list	#B8266A	—
storage, storage.type.function, storage.type.class	#8B2EB8	—
support, support.constant, support.variable	#2E6B8A	—
invalid, invalid.illegal	#FFFFFF	—
invalid.deprecated	#FFFFFF	—

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