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 High Contrast

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#EAEAD3
activityBar.background#2E2E2E
activityBar.foreground#EAEAD3
activityBar.inactiveForeground#838383
activityBarBadge.background#92C4EC
activityBarBadge.foreground#383838
badge.background#6D6D6D
badge.foreground#EAEAD3
button.background#92C4EC
button.foreground#383838
button.hoverBackground#EAEAD3
checkbox.background#1E1E1E
checkbox.border#505050
debugIcon.breakpointForeground#ECAAAA
diffEditor.insertedTextBackground#6A956B33
diffEditor.removedTextBackground#B3757633
dropdown.border#505050
dropdown.foreground#EAEAD3
editor.background#383838
editor.findMatchBackground#92C4EC66
editor.findMatchHighlightBackground#92C4EC44
editor.foldBackground#92C4EC22
editor.foreground#EAEAD3
editor.hoverHighlightBackground#505050
editor.lineHighlightBackground#2E2E2E
editor.rangeHighlightBackground#92C4EC22
editor.selectionBackground#92C4EC33
editor.selectionHighlightBackground#6D6D6D
editor.symbolHighlightBackground#6D6D6D
editor.wordHighlightBackground#6D6D6D
editor.wordHighlightStrongBackground#6D6D6D
editorCursor.foreground#FEFEE7
editorError.foreground#ECAAAA
editorGroup.border#6D6D6D
editorGroup.dropBackground#92C4EC22
editorGroupHeader.noTabsBackground#444444
editorGroupHeader.tabsBackground#1E1E1E
editorGutter.addedBackground#8DB98D
editorGutter.background#505050
editorGutter.deletedBackground#D99898
editorGutter.modifiedBackground#B9AC72
editorIndentGuide.activeBackground#6D6D6D
editorIndentGuide.background#505050
editorInfo.foreground#92C4EC
editorInlayHint.background#00000000
editorInlayHint.foreground#C9C9C9
editorLightBulb.foreground#F1E4A8
editorLineNumber.activeForeground#C9C9C9
editorLineNumber.foreground#838383
editorLink.activeForeground#92C4EC
editorOverviewRuler.addedForeground#9FCC9F
editorOverviewRuler.border#6D6D6D
editorOverviewRuler.deletedForeground#ECAAAA
editorOverviewRuler.errorForeground#ECAAAA
editorOverviewRuler.findMatchForeground#92C4EC88
editorOverviewRuler.infoForeground#92C4EC
editorOverviewRuler.modifiedForeground#CCBE84
editorOverviewRuler.rangeHighlightForeground#92C4EC33
editorWarning.foreground#E6B18E
editorWidget.background#2E2E2E
editorWidget.border#505050
errorLens.errorBackground#B3757633
errorLens.errorForeground#FFBCBC
errorLens.hintBackground#6A956B33
errorLens.hintForeground#B1DEB1
errorLens.infoBackground#5D8EB433
errorLens.infoForeground#A4D7FF
errorLens.warningBackground#AD7C5A33
errorLens.warningForeground#F9C3A0
focusBorder#6D6D6D
foreground#EAEAD3
gitDecoration.ignoredResourceForeground#838383
gitDecoration.modifiedResourceForeground#DED196
gitDecoration.untrackedResourceForeground#B1DEB1
input.background#1E1E1E
input.border#505050
input.foreground#EAEAD3
input.placeholderForeground#838383
list.activeSelectionBackground#505050
list.activeSelectionForeground#EAEAD3
list.errorForeground#ECAAAA
list.focusBackground#505050
list.highlightForeground#CAE7FF
list.hoverBackground#383838
list.inactiveSelectionBackground#444444
list.warningForeground#E6B18E
minimap.errorHighlight#ECAAAA
minimap.findMatchHighlight#92C4EC66
minimap.selectionHighlight#92C4EC33
minimap.warningHighlight#E6B18E
minimapGutter.addedBackground#8DB98D
minimapGutter.deletedBackground#D99898
minimapGutter.modifiedBackground#B9AC72
panel.background#444444
panel.border#6D6D6D
panelTitle.activeForeground#EAEAD3
peekView.border#838383
peekViewEditor.background#383838
peekViewEditor.matchHighlightBackground#92C4EC66
peekViewResult.background#2E2E2E
peekViewResult.fileForeground#EAEAD3
peekViewResult.lineForeground#EAEAD399
peekViewResult.matchHighlightBackground#92C4EC44
peekViewResult.selectionBackground#505050
peekViewResult.selectionForeground#EAEAD3
peekViewTitle.background#2E2E2E
peekViewTitleDescription.foreground#92C4EC
peekViewTitleLabel.foreground#FEFEE7
progressBar.background#92C4EC
scrollbar.shadow#00000088
selection.background#92C4EC33
settings.headerForeground#FEFEE7
settings.modifiedItemIndicator#92C4EC
sideBar.background#2E2E2E
sideBar.foreground#EAEAD3
sideBarTitle.foreground#FEFEE7
statusBar.background#1E1E1E
statusBar.debuggingBackground#1E1E1E
statusBar.debuggingForeground#D39F7C
statusBar.foreground#8DB98D
statusBar.noFolderBackground#1E1E1E
symbolIcon.classForeground#6CBBBF
symbolIcon.constantForeground#CAE7FF
symbolIcon.enumeratorForeground#6CBBBF
symbolIcon.enumeratorMemberForeground#CAE7FF
symbolIcon.fieldForeground#E6B18E
symbolIcon.functionForeground#91E0E4
symbolIcon.interfaceForeground#7ECDD1
symbolIcon.keywordForeground#F1E4A8
symbolIcon.methodForeground#91E0E4
symbolIcon.moduleForeground#C3F1C3
symbolIcon.namespaceForeground#C3F1C3
symbolIcon.propertyForeground#E6B18E
symbolIcon.structForeground#6CBBBF
symbolIcon.typeParameterForeground#6CBBBF
symbolIcon.variableForeground#EAEAD3
tab.activeForeground#EAEAD3
tab.border#383838
tab.inactiveBackground#1E1E1E
tab.inactiveForeground#838383
terminal.ansiBlack#1E1E1E
terminal.ansiBlue#80B2D9
terminal.ansiBrightBlack#C9C9C9
terminal.ansiBrightBlue#A4D7FF
terminal.ansiBrightCyan#91E0E4
terminal.ansiBrightGreen#B1DEB1
terminal.ansiBrightMagenta#D8C5FC
terminal.ansiBrightRed#FFBCBC
terminal.ansiBrightWhite#FEFEE7
terminal.ansiBrightYellow#DED196
terminal.ansiCyan#6CBBBF
terminal.ansiGreen#8DB98D
terminal.ansiMagenta#B3A1D6
terminal.ansiRed#D99898
terminal.ansiWhite#EAEAD3
terminal.ansiYellow#B9AC72
terminal.foreground#EAEAD3
terminal.selectionBackground#92C4EC33
terminalCursor.foreground#FEFEE7
textLink.activeForeground#92C4EC
textLink.foreground#92C4EC
textPreformat.foreground#EAEAD3
titleBar.activeBackground#2E2E2E
titleBar.activeForeground#EAEAD3
titleBar.inactiveBackground#2E2E2E
titleBar.inactiveForeground#838383
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	#F1E4A8	bold
constant.numeric, keyword.other.unit	#B1DEB1	—
constant.character, punctuation.definition.char, punctuation.definition.string, string	#D99898	—
variable	#EAEAD3	—
variable.other.enummember	#CAE7FF	—
constant, entity.name.constant, variable.other.metavariable, support.constant	#CAE7FF	—
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	#91E0E4	—
entity.name.type, storage.type, support.class, support.type	#6CBBBF	—
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	#7ECDD1	—
entity.name.type.parameter, variable.type	#F9C3A0	—
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	#E6B18E	—
entity.name.tag.toml, entity.name.tag.yaml	#E6B18E
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	#C3F1C3	—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir	#92C4EC	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, entity.name.type.lifetime, punctuation.definition.lifetime	#E6B18E	italic
constant.character.escape	#92C4EC	—
constant.character.format.placeholder, constant.other.placeholder, punctuation.section.embedded, punctuation.definition.template-expression	#92C4EC	—
comment, punctuation.definition.comment	#6A956B	—
comment.line.documentation	#8DB98D	—
entity.name.function.decorator, punctuation.brackets.attribute, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, storage.modifier.attribute, storage.type.annotation	#92C4EC	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#6CBBBF	—
keyword.other.unsafe	#B37576	—
keyword.operator.logical.rust, keyword.operator, storage.modifier.pointer, storage.type.function.arrow, punctuation, keyword.control.flow.block-scalar.literal.yaml	#EAEAD3
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	#8DB98D	—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc	#EAEAD3	—
markup.inserted, punctuation.definition.inserted.diff	#9FCC9F	—
markup.deleted, punctuation.definition.deleted.diff	#ECAAAA	—
markup.changed	#E6B18E	—
punctuation.definition.range.diff, meta.diff.range	#92C4EC	—
comment.line.number-sign.git-commit, punctuation.definition.comment.git-commit, meta.diff.index, meta.diff.header	#838383	—
meta.diff.header.to-file, meta.diff.header.from-file	#FEFEE7	bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#7ECDD1	—
meta.mutable	—	underline
magit.header	#F1E4A8	bold
magit.subheader	—	bold
magit.entity	#C9C9C9	—
invalid.deprecated.line-too-long.git-commit	#E6B18E	—
invalid.illegal.line-too-long.git-commit	#ECAAAA	—

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