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 Darker

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#EFEFE7
activityBar.background#111111
activityBar.foreground#EFEFE7
activityBar.inactiveForeground#3E3E3E
activityBarBadge.background#74B5E8
activityBarBadge.foreground#161616
badge.background#323232
badge.foreground#EFEFE7
button.background#74B5E8
button.foreground#161616
button.hoverBackground#EFEFE7
checkbox.background#080808
checkbox.border#222222
debugIcon.breakpointForeground#E69495
diffEditor.insertedTextBackground#568E5833
diffEditor.removedTextBackground#B2646633
dropdown.border#222222
dropdown.foreground#EFEFE7
editor.background#161616
editor.findMatchBackground#74B5E866
editor.findMatchHighlightBackground#74B5E844
editor.foldBackground#74B5E822
editor.foreground#EFEFE7
editor.hoverHighlightBackground#222222
editor.lineHighlightBackground#111111
editor.rangeHighlightBackground#74B5E822
editor.selectionBackground#74B5E833
editor.selectionHighlightBackground#323232
editor.symbolHighlightBackground#323232
editor.wordHighlightBackground#323232
editor.wordHighlightStrongBackground#323232
editorCursor.foreground#FCFCF5
editorError.foreground#E69495
editorGroup.border#323232
editorGroup.dropBackground#74B5E822
editorGroupHeader.noTabsBackground#1C1C1C
editorGroupHeader.tabsBackground#080808
editorGutter.addedBackground#75AE77
editorGutter.background#222222
editorGutter.deletedBackground#D58485
editorGutter.modifiedBackground#AF9E51
editorIndentGuide.activeBackground#323232
editorIndentGuide.background#222222
editorInfo.foreground#74B5E8
editorInlayHint.background#00000000
editorInlayHint.foreground#626262
editorLightBulb.foreground#E2D082
editorLineNumber.activeForeground#626262
editorLineNumber.foreground#3E3E3E
editorLink.activeForeground#74B5E8
editorOverviewRuler.addedForeground#85BF86
editorOverviewRuler.border#323232
editorOverviewRuler.deletedForeground#E69495
editorOverviewRuler.errorForeground#E69495
editorOverviewRuler.findMatchForeground#74B5E888
editorOverviewRuler.infoForeground#74B5E8
editorOverviewRuler.modifiedForeground#C0AE61
editorOverviewRuler.rangeHighlightForeground#74B5E833
editorWarning.foreground#DF9D6F
editorWidget.background#111111
editorWidget.border#222222
errorLens.errorBackground#B2646633
errorLens.errorForeground#F8A4A5
errorLens.hintBackground#568E5833
errorLens.hintForeground#96D097
errorLens.infoBackground#4384B533
errorLens.infoForeground#84C6FA
errorLens.warningBackground#AC6D4033
errorLens.warningForeground#F1AD7F
focusBorder#323232
foreground#EFEFE7
gitDecoration.ignoredResourceForeground#3E3E3E
gitDecoration.modifiedResourceForeground#D0BF72
gitDecoration.untrackedResourceForeground#96D097
input.background#080808
input.border#222222
input.foreground#EFEFE7
input.placeholderForeground#3E3E3E
list.activeSelectionBackground#222222
list.activeSelectionForeground#EFEFE7
list.errorForeground#E69495
list.focusBackground#222222
list.highlightForeground#B7D4EB
list.hoverBackground#161616
list.inactiveSelectionBackground#1C1C1C
list.warningForeground#DF9D6F
minimap.errorHighlight#E69495
minimap.findMatchHighlight#74B5E866
minimap.selectionHighlight#74B5E833
minimap.warningHighlight#DF9D6F
minimapGutter.addedBackground#75AE77
minimapGutter.deletedBackground#D58485
minimapGutter.modifiedBackground#AF9E51
panel.background#1C1C1C
panel.border#323232
panelTitle.activeForeground#EFEFE7
peekView.border#3E3E3E
peekViewEditor.background#161616
peekViewEditor.matchHighlightBackground#74B5E866
peekViewResult.background#111111
peekViewResult.fileForeground#EFEFE7
peekViewResult.lineForeground#EFEFE799
peekViewResult.matchHighlightBackground#74B5E844
peekViewResult.selectionBackground#222222
peekViewResult.selectionForeground#EFEFE7
peekViewTitle.background#111111
peekViewTitleDescription.foreground#74B5E8
peekViewTitleLabel.foreground#FCFCF5
progressBar.background#74B5E8
scrollbar.shadow#00000088
selection.background#74B5E833
settings.headerForeground#FCFCF5
settings.modifiedItemIndicator#74B5E8
sideBar.background#111111
sideBar.foreground#EFEFE7
sideBarTitle.foreground#FCFCF5
statusBar.background#080808
statusBar.debuggingBackground#080808
statusBar.debuggingForeground#CE8D5F
statusBar.foreground#75AE77
statusBar.noFolderBackground#080808
symbolIcon.classForeground#3FB0B6
symbolIcon.constantForeground#B7D4EB
symbolIcon.enumeratorForeground#3FB0B6
symbolIcon.enumeratorMemberForeground#B7D4EB
symbolIcon.fieldForeground#DF9D6F
symbolIcon.functionForeground#65D2D8
symbolIcon.interfaceForeground#53C1C7
symbolIcon.keywordForeground#E2D082
symbolIcon.methodForeground#65D2D8
symbolIcon.moduleForeground#A6E1A7
symbolIcon.namespaceForeground#A6E1A7
symbolIcon.propertyForeground#DF9D6F
symbolIcon.structForeground#3FB0B6
symbolIcon.typeParameterForeground#3FB0B6
symbolIcon.variableForeground#EFEFE7
tab.activeForeground#EFEFE7
tab.border#161616
tab.inactiveBackground#080808
tab.inactiveForeground#3E3E3E
terminal.ansiBlack#080808
terminal.ansiBlue#63A5D7
terminal.ansiBrightBlack#626262
terminal.ansiBrightBlue#84C6FA
terminal.ansiBrightCyan#65D2D8
terminal.ansiBrightGreen#96D097
terminal.ansiBrightMagenta#C8B0F6
terminal.ansiBrightRed#F8A4A5
terminal.ansiBrightWhite#FCFCF5
terminal.ansiBrightYellow#D0BF72
terminal.ansiCyan#3FB0B6
terminal.ansiGreen#75AE77
terminal.ansiMagenta#A78FD3
terminal.ansiRed#D58485
terminal.ansiWhite#EFEFE7
terminal.ansiYellow#AF9E51
terminal.foreground#EFEFE7
terminal.selectionBackground#74B5E833
terminalCursor.foreground#FCFCF5
textLink.activeForeground#74B5E8
textLink.foreground#74B5E8
textPreformat.foreground#EFEFE7
titleBar.activeBackground#111111
titleBar.activeForeground#EFEFE7
titleBar.inactiveBackground#111111
titleBar.inactiveForeground#3E3E3E
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	#E2D082	bold
constant.numeric, keyword.other.unit	#96D097	—
constant.character, punctuation.definition.char, punctuation.definition.string, string	#D58485	—
variable	#EFEFE7	—
variable.other.enummember	#B7D4EB	—
constant, entity.name.constant, variable.other.metavariable, support.constant	#B7D4EB	—
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	#65D2D8	—
entity.name.type, storage.type, support.class, support.type	#3FB0B6	—
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	#53C1C7	—
entity.name.type.parameter, variable.type	#F1AD7F	—
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	#DF9D6F	—
entity.name.tag.toml, entity.name.tag.yaml	#DF9D6F
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	#A6E1A7	—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir	#74B5E8	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, entity.name.type.lifetime, punctuation.definition.lifetime	#DF9D6F	italic
constant.character.escape	#74B5E8	—
constant.character.format.placeholder, constant.other.placeholder, punctuation.section.embedded, punctuation.definition.template-expression	#74B5E8	—
comment, punctuation.definition.comment	#568E58	—
comment.line.documentation	#75AE77	—
entity.name.function.decorator, punctuation.brackets.attribute, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, storage.modifier.attribute, storage.type.annotation	#74B5E8	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#3FB0B6	—
keyword.other.unsafe	#B26466	—
keyword.operator.logical.rust, keyword.operator, storage.modifier.pointer, storage.type.function.arrow, punctuation, keyword.control.flow.block-scalar.literal.yaml	#EFEFE7
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	#75AE77	—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc	#EFEFE7	—
markup.inserted, punctuation.definition.inserted.diff	#85BF86	—
markup.deleted, punctuation.definition.deleted.diff	#E69495	—
markup.changed	#DF9D6F	—
punctuation.definition.range.diff, meta.diff.range	#74B5E8	—
comment.line.number-sign.git-commit, punctuation.definition.comment.git-commit, meta.diff.index, meta.diff.header	#3E3E3E	—
meta.diff.header.to-file, meta.diff.header.from-file	#FCFCF5	bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#53C1C7	—
meta.mutable	—	underline
magit.header	#E2D082	bold
magit.subheader	—	bold
magit.entity	#626262	—
invalid.deprecated.line-too-long.git-commit	#DF9D6F	—
invalid.illegal.line-too-long.git-commit	#E69495	—

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