Pale Fire

Name: Pale Fire
Author: matklad

Publisher: matkladThemes in package: 4

Emacs-inspired zenburn variation

GitHub

Color themes

VS Code preview

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

Pale Fire — Pale Fire

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.activeBorder#E0E0C9
activityBar.background#393939
activityBar.foreground#E0E0C9
activityBar.inactiveForeground#717171
activityBarBadge.background#9AC3E4
activityBarBadge.foreground#404040
badge.background#636363
badge.foreground#E0E0C9
button.background#9AC3E4
button.foreground#404040
button.hoverBackground#E0E0C9
checkbox.background#2E2E2E
checkbox.border#505050
debugIcon.breakpointForeground#E4AEAD
diffEditor.insertedTextBackground#779A7733
diffEditor.removedTextBackground#B3808033
dropdown.border#505050
dropdown.foreground#E0E0C9
editor.background#404040
editor.findMatchBackground#9AC3E466
editor.findMatchHighlightBackground#9AC3E444
editor.foldBackground#9AC3E422
editor.foreground#E0E0C9
editor.hoverHighlightBackground#505050
editor.lineHighlightBackground#393939
editor.rangeHighlightBackground#9AC3E422
editor.selectionBackground#9AC3E433
editor.selectionHighlightBackground#636363
editor.symbolHighlightBackground#636363
editor.wordHighlightBackground#636363
editor.wordHighlightStrongBackground#636363
editorCursor.foreground#FEFEE7
editorError.foreground#E4AEAD
editorGroup.border#636363
editorGroup.dropBackground#9AC3E422
editorGroupHeader.noTabsBackground#484848
editorGroupHeader.tabsBackground#2E2E2E
editorGutter.addedBackground#95B995
editorGutter.background#505050
editorGutter.deletedBackground#D49E9E
editorGutter.modifiedBackground#B9AF80
editorIndentGuide.activeBackground#636363
editorIndentGuide.background#505050
editorInfo.foreground#9AC3E4
editorInlayHint.background#00000000
editorInlayHint.foreground#9E9E9E
editorLightBulb.foreground#EADFAF
editorLineNumber.activeForeground#9E9E9E
editorLineNumber.foreground#717171
editorLink.activeForeground#9AC3E4
editorOverviewRuler.addedForeground#A5C9A5
editorOverviewRuler.border#636363
editorOverviewRuler.deletedForeground#E4AEAD
editorOverviewRuler.errorForeground#E4AEAD
editorOverviewRuler.findMatchForeground#9AC3E488
editorOverviewRuler.infoForeground#9AC3E4
editorOverviewRuler.modifiedForeground#C9BE8F
editorOverviewRuler.rangeHighlightForeground#9AC3E433
editorWarning.foreground#DFB497
editorWidget.background#393939
editorWidget.border#505050
errorLens.errorBackground#B3808033
errorLens.errorForeground#F5BEBD
errorLens.hintBackground#779A7733
errorLens.hintForeground#B4D9B4
errorLens.infoBackground#6D94B433
errorLens.infoForeground#AAD3F5
errorLens.warningBackground#AE856A33
errorLens.warningForeground#F0C3A6
focusBorder#636363
foreground#E0E0C9
gitDecoration.ignoredResourceForeground#717171
gitDecoration.modifiedResourceForeground#D9CF9F
gitDecoration.untrackedResourceForeground#B4D9B4
input.background#2E2E2E
input.border#505050
input.foreground#E0E0C9
input.placeholderForeground#717171
list.activeSelectionBackground#505050
list.activeSelectionForeground#E0E0C9
list.errorForeground#E4AEAD
list.focusBackground#505050
list.highlightForeground#C5E2FA
list.hoverBackground#404040
list.inactiveSelectionBackground#484848
list.warningForeground#DFB497
minimap.errorHighlight#E4AEAD
minimap.findMatchHighlight#9AC3E466
minimap.selectionHighlight#9AC3E433
minimap.warningHighlight#DFB497
minimapGutter.addedBackground#95B995
minimapGutter.deletedBackground#D49E9E
minimapGutter.modifiedBackground#B9AF80
panel.background#484848
panel.border#636363
panelTitle.activeForeground#E0E0C9
peekView.border#717171
peekViewEditor.background#404040
peekViewEditor.matchHighlightBackground#9AC3E466
peekViewResult.background#393939
peekViewResult.fileForeground#E0E0C9
peekViewResult.lineForeground#E0E0C999
peekViewResult.matchHighlightBackground#9AC3E444
peekViewResult.selectionBackground#505050
peekViewResult.selectionForeground#E0E0C9
peekViewTitle.background#393939
peekViewTitleDescription.foreground#9AC3E4
peekViewTitleLabel.foreground#FEFEE7
progressBar.background#9AC3E4
scrollbar.shadow#00000088
selection.background#9AC3E433
settings.headerForeground#FEFEE7
settings.modifiedItemIndicator#9AC3E4
sideBar.background#393939
sideBar.foreground#E0E0C9
sideBarTitle.foreground#FEFEE7
statusBar.background#2E2E2E
statusBar.debuggingBackground#2E2E2E
statusBar.debuggingForeground#CFA488
statusBar.foreground#95B995
statusBar.noFolderBackground#2E2E2E
symbolIcon.classForeground#7CBBBE
symbolIcon.constantForeground#C5E2FA
symbolIcon.enumeratorForeground#7CBBBE
symbolIcon.enumeratorMemberForeground#C5E2FA
symbolIcon.fieldForeground#DFB497
symbolIcon.functionForeground#9CDBDE
symbolIcon.interfaceForeground#8CCBCE
symbolIcon.keywordForeground#EADFAF
symbolIcon.methodForeground#9CDBDE
symbolIcon.moduleForeground#C4EAC4
symbolIcon.namespaceForeground#C4EAC4
symbolIcon.propertyForeground#DFB497
symbolIcon.structForeground#7CBBBE
symbolIcon.typeParameterForeground#7CBBBE
symbolIcon.variableForeground#E0E0C9
tab.activeForeground#E0E0C9
tab.border#404040
tab.inactiveBackground#2E2E2E
tab.inactiveForeground#717171
terminal.ansiBlack#2E2E2E
terminal.ansiBlue#8BB3D4
terminal.ansiBrightBlack#9E9E9E
terminal.ansiBrightBlue#AAD3F5
terminal.ansiBrightCyan#9CDBDE
terminal.ansiBrightGreen#B4D9B4
terminal.ansiBrightMagenta#D4C5F2
terminal.ansiBrightRed#F5BEBD
terminal.ansiBrightWhite#FEFEE7
terminal.ansiBrightYellow#D9CF9F
terminal.ansiCyan#7CBBBE
terminal.ansiGreen#95B995
terminal.ansiMagenta#B4A5D1
terminal.ansiRed#D49E9E
terminal.ansiWhite#E0E0C9
terminal.ansiYellow#B9AF80
terminal.foreground#E0E0C9
terminal.selectionBackground#9AC3E433
terminalCursor.foreground#FEFEE7
textLink.activeForeground#9AC3E4
textLink.foreground#9AC3E4
textPreformat.foreground#E0E0C9
titleBar.activeBackground#393939
titleBar.activeForeground#E0E0C9
titleBar.inactiveBackground#393939
titleBar.inactiveForeground#717171
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.tag, keyword.operator.expression, keyword.operator.new, keyword.operator.wordlike, keyword.type.elm, keyword.type.go, keyword, keyword.operator.logical.python, keyword.operator.in, punctuation.definition.heading, storage.modifier, storage.type.class, storage.type.enum, storage.type.function.python, storage.type.function.ts, storage.type.function, storage.type.interface.ts, storage.type.js, storage.type.local.java, storage.type.def.groovy, storage.type.namespace, storage.type.property, storage.type.rust, storage.type.struct, storage.type.ts, storage.type.type, variable.language.self, variable.language.special.self, variable.language.this	#EADFAF	bold
constant.numeric, keyword.other.unit	#B4D9B4	—
constant.character, punctuation.definition.char, punctuation.definition.string, string	#D49E9E	—
variable	#E0E0C9	—
variable.other.enummember	#C5E2FA	—
constant, entity.name.constant, variable.other.metavariable, support.constant	#C5E2FA	—
entity.name.function, entity.name.function-call, meta.function-call.generic.python, support.function, entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml	#9CDBDE	—
entity.name.type, storage.type, support.class, support.type	#7CBBBE	—
keyword.type, storage.type.boolean.go, storage.type.built-in, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.primitive, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go, support.type, variable.other.metavariable.specifier	#8CCBCE	—
entity.name.type.parameter, variable.type	#F0C3A6	—
entity.name.field, entity.name.record.field, entity.name.variable.field, meta.attribute.python, punctuation.support.type.property-name, support.type.property-name, support.type.vendored.property-name, variable.other.member, variable.other.object.property, variable.other.property	#DFB497	—
entity.name.tag.toml, entity.name.tag.yaml	#DFB497
entity.name.module, entity.name.namespace, entity.name.type.namespace, storage.modifier.import, storage.modifier.package, support.module, entity.name.type.module, variable.other.constant.elixir	#C4EAC4	—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir	#9AC3E4	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, entity.name.type.lifetime, punctuation.definition.lifetime	#DFB497	italic
constant.character.escape	#9AC3E4	—
constant.character.format.placeholder, constant.other.placeholder, punctuation.section.embedded, punctuation.definition.template-expression	#9AC3E4	—
comment, punctuation.definition.comment	#779A77	—
comment.line.documentation	#95B995	—
entity.name.function.decorator, punctuation.brackets.attribute, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, storage.modifier.attribute, storage.type.annotation	#9AC3E4	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#7CBBBE	—
keyword.other.unsafe	#B38080	—
keyword.operator.logical.rust, keyword.operator, storage.modifier.pointer, storage.type.function.arrow, punctuation, keyword.control.flow.block-scalar.literal.yaml	#E0E0C9
markup.italic	—	italic
markup.bold	—	bold
markup.heading	—	bold
punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.separator.key-value.markdown, punctuation.separator.key-value.markdown, fenced_code.block.language.markdown, constant.other.reference.link.markdown, meta.link.inline.markdown, meta.link.reference.def.markdown, punctuation.definition.asciidoc, punctuation.separator.asciidoc, support.asciidoc, markup.heading.asciidoc, markup.heading.marker.asciidoc, markup.list.bullet.asciidoc, markup.link.asciidoc, markup.other.url.asciidoc, markup.other.anchor.asciidoc, support.constant.asciidoc, constant.asciidoc, entity.name.function.asciidoc	#95B995	—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc	#E0E0C9	—
markup.inserted, punctuation.definition.inserted.diff	#A5C9A5	—
markup.deleted, punctuation.definition.deleted.diff	#E4AEAD	—
markup.changed	#DFB497	—
punctuation.definition.range.diff, meta.diff.range	#9AC3E4	—
comment.line.number-sign.git-commit, punctuation.definition.comment.git-commit, meta.diff.index, meta.diff.header	#717171	—
meta.diff.header.to-file, meta.diff.header.from-file	#FEFEE7	bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#8CCBCE	—
meta.mutable	—	underline
magit.header	#EADFAF	bold
magit.subheader	—	bold
magit.entity	#9E9E9E	—
invalid.deprecated.line-too-long.git-commit	#DFB497	—
invalid.illegal.line-too-long.git-commit	#E4AEAD	—

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