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 Stealth

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#232323
activityBar.foreground#E0E0C9
activityBar.inactiveForeground#3D3D3D
activityBarBadge.background#8BB3D4
activityBarBadge.foreground#262626
badge.background#373737
badge.foreground#E0E0C9
button.background#8BB3D4
button.foreground#262626
button.hoverBackground#E0E0C9
checkbox.background#1E1E1E
checkbox.border#2E2E2E
debugIcon.breakpointForeground#D49E9E
diffEditor.insertedTextBackground#71947133
diffEditor.removedTextBackground#AD7A7A33
dropdown.border#2E2E2E
dropdown.foreground#E0E0C9
editor.background#262626
editor.findMatchBackground#8BB3D466
editor.findMatchHighlightBackground#8BB3D444
editor.foldBackground#8BB3D422
editor.foreground#E0E0C9
editor.hoverHighlightBackground#2E2E2E
editor.lineHighlightBackground#232323
editor.rangeHighlightBackground#8BB3D422
editor.selectionBackground#8BB3D433
editor.selectionHighlightBackground#373737
editor.symbolHighlightBackground#373737
editor.wordHighlightBackground#373737
editor.wordHighlightStrongBackground#373737
editorCursor.foreground#FEFEE7
editorError.foreground#D49E9E
editorGroup.border#373737
editorGroup.dropBackground#8BB3D422
editorGroupHeader.noTabsBackground#2A2A2A
editorGroupHeader.tabsBackground#1E1E1E
editorGutter.addedBackground#89AD89
editorGutter.background#2E2E2E
editorGutter.deletedBackground#C79292
editorGutter.modifiedBackground#ACA274
editorIndentGuide.activeBackground#373737
editorIndentGuide.background#2E2E2E
editorInfo.foreground#8BB3D4
editorInlayHint.background#00000000
editorInlayHint.foreground#515151
editorLightBulb.foreground#D3C899
editorLineNumber.activeForeground#515151
editorLineNumber.foreground#3D3D3D
editorLink.activeForeground#8BB3D4
editorOverviewRuler.addedForeground#95B995
editorOverviewRuler.border#373737
editorOverviewRuler.deletedForeground#D49E9E
editorOverviewRuler.errorForeground#D49E9E
editorOverviewRuler.findMatchForeground#8BB3D488
editorOverviewRuler.infoForeground#8BB3D4
editorOverviewRuler.modifiedForeground#B9AF80
editorOverviewRuler.rangeHighlightForeground#8BB3D433
editorWarning.foreground#CFA488
editorWidget.background#232323
editorWidget.border#2E2E2E
errorLens.errorBackground#AD7A7A33
errorLens.errorForeground#E1ABAA
errorLens.hintBackground#71947133
errorLens.hintForeground#A2C6A2
errorLens.infoBackground#678EAD33
errorLens.infoForeground#97C0E1
errorLens.warningBackground#A87F6433
errorLens.warningForeground#DCB094
focusBorder#373737
foreground#E0E0C9
gitDecoration.ignoredResourceForeground#3D3D3D
gitDecoration.modifiedResourceForeground#C6BB8C
gitDecoration.untrackedResourceForeground#A2C6A2
input.background#1E1E1E
input.border#2E2E2E
input.foreground#E0E0C9
input.placeholderForeground#3D3D3D
list.activeSelectionBackground#2E2E2E
list.activeSelectionForeground#E0E0C9
list.errorForeground#D49E9E
list.focusBackground#2E2E2E
list.highlightForeground#AFCBE3
list.hoverBackground#262626
list.inactiveSelectionBackground#2A2A2A
list.warningForeground#CFA488
minimap.errorHighlight#D49E9E
minimap.findMatchHighlight#8BB3D466
minimap.selectionHighlight#8BB3D433
minimap.warningHighlight#CFA488
minimapGutter.addedBackground#89AD89
minimapGutter.deletedBackground#C79292
minimapGutter.modifiedBackground#ACA274
panel.background#2A2A2A
panel.border#373737
panelTitle.activeForeground#E0E0C9
peekView.border#3D3D3D
peekViewEditor.background#262626
peekViewEditor.matchHighlightBackground#8BB3D466
peekViewResult.background#232323
peekViewResult.fileForeground#E0E0C9
peekViewResult.lineForeground#E0E0C999
peekViewResult.matchHighlightBackground#8BB3D444
peekViewResult.selectionBackground#2E2E2E
peekViewResult.selectionForeground#E0E0C9
peekViewTitle.background#232323
peekViewTitleDescription.foreground#8BB3D4
peekViewTitleLabel.foreground#FEFEE7
progressBar.background#8BB3D4
scrollbar.shadow#00000088
selection.background#8BB3D433
settings.headerForeground#FEFEE7
settings.modifiedItemIndicator#8BB3D4
sideBar.background#232323
sideBar.foreground#E0E0C9
sideBarTitle.foreground#FEFEE7
statusBar.background#1E1E1E
statusBar.debuggingBackground#1E1E1E
statusBar.debuggingForeground#C2977B
statusBar.foreground#89AD89
statusBar.noFolderBackground#1E1E1E
symbolIcon.classForeground#70AEB1
symbolIcon.constantForeground#AFCBE3
symbolIcon.enumeratorForeground#70AEB1
symbolIcon.enumeratorMemberForeground#AFCBE3
symbolIcon.fieldForeground#CFA488
symbolIcon.functionForeground#89C7CB
symbolIcon.interfaceForeground#7CBBBE
symbolIcon.keywordForeground#D3C899
symbolIcon.methodForeground#89C7CB
symbolIcon.moduleForeground#AED3AE
symbolIcon.namespaceForeground#AED3AE
symbolIcon.propertyForeground#CFA488
symbolIcon.structForeground#70AEB1
symbolIcon.typeParameterForeground#70AEB1
symbolIcon.variableForeground#E0E0C9
tab.activeForeground#E0E0C9
tab.border#262626
tab.inactiveBackground#1E1E1E
tab.inactiveForeground#3D3D3D
terminal.ansiBlack#1E1E1E
terminal.ansiBlue#7FA7C7
terminal.ansiBrightBlack#515151
terminal.ansiBrightBlue#97C0E1
terminal.ansiBrightCyan#89C7CB
terminal.ansiBrightGreen#A2C6A2
terminal.ansiBrightMagenta#C0B2DE
terminal.ansiBrightRed#E1ABAA
terminal.ansiBrightWhite#FEFEE7
terminal.ansiBrightYellow#C6BB8C
terminal.ansiCyan#70AEB1
terminal.ansiGreen#89AD89
terminal.ansiMagenta#A799C4
terminal.ansiRed#C79292
terminal.ansiWhite#E0E0C9
terminal.ansiYellow#ACA274
terminal.foreground#E0E0C9
terminal.selectionBackground#8BB3D433
terminalCursor.foreground#FEFEE7
textLink.activeForeground#8BB3D4
textLink.foreground#8BB3D4
textPreformat.foreground#E0E0C9
titleBar.activeBackground#232323
titleBar.activeForeground#E0E0C9
titleBar.inactiveBackground#232323
titleBar.inactiveForeground#3D3D3D
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	#D3C899	bold
constant.numeric, keyword.other.unit	#A2C6A2	—
constant.character, punctuation.definition.char, punctuation.definition.string, string	#C79292	—
variable	#E0E0C9	—
variable.other.enummember	#AFCBE3	—
constant, entity.name.constant, variable.other.metavariable, support.constant	#AFCBE3	—
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	#89C7CB	—
entity.name.type, storage.type, support.class, support.type	#70AEB1	—
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	#7CBBBE	—
entity.name.type.parameter, variable.type	#DCB094	—
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	#CFA488	—
entity.name.tag.toml, entity.name.tag.yaml	#CFA488
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	#AED3AE	—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir	#8BB3D4	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, entity.name.type.lifetime, punctuation.definition.lifetime	#CFA488	italic
constant.character.escape	#8BB3D4	—
constant.character.format.placeholder, constant.other.placeholder, punctuation.section.embedded, punctuation.definition.template-expression	#8BB3D4	—
comment, punctuation.definition.comment	#719471	—
comment.line.documentation	#89AD89	—
entity.name.function.decorator, punctuation.brackets.attribute, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, storage.modifier.attribute, storage.type.annotation	#8BB3D4	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#70AEB1	—
keyword.other.unsafe	#AD7A7A	—
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	#89AD89	—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc	#E0E0C9	—
markup.inserted, punctuation.definition.inserted.diff	#95B995	—
markup.deleted, punctuation.definition.deleted.diff	#D49E9E	—
markup.changed	#CFA488	—
punctuation.definition.range.diff, meta.diff.range	#8BB3D4	—
comment.line.number-sign.git-commit, punctuation.definition.comment.git-commit, meta.diff.index, meta.diff.header	#3D3D3D	—
meta.diff.header.to-file, meta.diff.header.from-file	#FEFEE7	bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#7CBBBE	—
meta.mutable	—	underline
magit.header	#D3C899	bold
magit.subheader	—	bold
magit.entity	#515151	—
invalid.deprecated.line-too-long.git-commit	#CFA488	—
invalid.illegal.line-too-long.git-commit	#D49E9E	—

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