Exa - Theme Pack

Name: Exa - Theme Pack
Author: Andrew Stone

Publisher: Andrew StoneThemes in package: 4

Get your own theme

GitHub

Color themes

VS Code preview

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

Exa - Theme Pack — Tundra Dusk

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

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#F4CC67
activityBar.background#0c1426
activityBar.foreground#D8DEE9
activityBarBadge.background#7AC2D1
activityBarBadge.foreground#31476E
badge.background#7AC2D1
badge.foreground#132145
bookmarks.lineBackground#253B7A34
bookmarks.lineBorder#F2E3D545
bookmarks.overviewRuler#3B7CF289
debugToolBar.background#132145F6
descriptionForeground#D8DEE9d0
disabledForeground#D8DEE9aa
dropdown.background#132145
dropdown.border#F2E3D545
dropdown.foreground#ECEFF4
editor.background#0c1426
editor.findMatchBackground#9C004EA0
editor.findMatchHighlightBackground#1446A0a0
editor.findRangeHighlightBackground#BF616A90
editor.foldBackground#181b2680
editor.foreground#D8DEE9d0
editor.hoverHighlightBackground#5F758E60
editor.inactiveSelectionBackground#253B7A60
editor.lineHighlightBackground#132145
editor.selectionBackground#9C004E80
editor.selectionHighlightBackground#1446A070
editor.wordHighlightBackground#1E304000
editorCursor.foreground#fe820f
editorError.foreground#FD788B
editorGroup.emptyBackground#0c142645
editorGroupHeader.border#D8DEE945
editorGroupHeader.noTabsBackground#0c1426
editorGroupHeader.tabsBackground#0c1426
editorGroupHeader.tabsBorder#D8DEE945
editorGutter.addedBackground#0FFF95
editorGutter.modifiedBackground#267ffd
editorInlayHint.background#ffffff10
editorInlayHint.foreground#d8dee974
editorLineNumber.activeForeground#fe820f
editorLineNumber.foreground#d8dee974
editorOverviewRuler.background#13214545
editorOverviewRuler.modifiedForeground#267ffd
editorSuggestWidget.focusHighlightForeground#B48EAD
editorSuggestWidget.highlightForeground#7AC2D1
editorWarning.foreground#FBF2C0b0
editorWidget.background#132145f0
editorWidget.foreground#D9E5FFd0
extensionButton.prominentBackground#253B7A
extensionButton.prominentForeground#ECEFF4
extensionButton.prominentHoverBackground#0c1426
extensionIcon.starForeground#FF9028
extensionIcon.verifiedForeground#f5c03c
focusBorder#F2E3D545
foreground#D9E5FFd0
gitDecoration.modifiedResourceForeground#BEFFC7
gitDecoration.stageModifiedResourceForeground#0FFF95b0
gitDecoration.untrackedResourceForeground#CBEFB6
icon.foreground#F2D488
input.background#132145
input.border#F2E3D545
input.foreground#ECEFF4cc
inputOption.activeBackground#253B7A
inputOption.activeBorder#F2E3D545
inputOption.activeForeground#F2D488
inputOption.hoverBackground#31476E
keybindingLabel.background#0c1426a0
keybindingLabel.border#F2E3D545
keybindingLabel.bottomBorder#F2E3D545
keybindingLabel.foreground#D8DEE9
list.focusHighlightForeground#B48EAD
list.highlightForeground#7AC2D1
list.hoverBackground#253B7Aaa
list.hoverForeground#ECEFF4
list.inactiveSelectionBackground#1D3354
list.warningForeground#F0955C
markdown.extension.editor.codeSpan.border#00000000
minimap.background#132145cd
minimap.findMatchHighlight#5C80BCa0
minimap.foregroundOpacity#000000ff
minimap.selectionHighlight#D81E5Ba0
minimapSlider.background#00000050
panel.background#0c1426
panelTitle.activeBorder#F2D488
panelTitle.activeForeground#F2D488
panelTitle.inactiveForeground#ECEFF490
quickInputList.focusBackground#0c1426bb
scrollbarSlider.background#D8DEE920
scrollbarSlider.hoverBackground#D8DEE930
searchEditor.findMatchBackground#4900e8
searchEditor.textInputBorder#F2E3D545
settings.headerBorder#31476E
settings.headerForeground#D8DEE9
settings.sashBorder#31476E
sideBar.background#132145
sideBar.border#0c1426
sideBar.foreground#D8DEE9
sideBarSectionHeader.background#0c1426
sideBarSectionHeader.border#5E81AC45
sideBarSectionHeader.foreground#ECEFF4
sideBarTitle.foreground#ECEFF4
statusBar.background#0c1426
statusBar.debuggingBackground#BA160C
statusBar.debuggingForeground#ECEFF4
statusBar.foreground#D8DEE9
statusBar.noFolderBackground#31476E
statusBarItem.activeBackground#0c1426
tab.activeBackground#0c1426
tab.activeBorder#F4CC67
tab.activeForeground#F2D488
tab.activeModifiedBorder#D8DEE9a0
tab.border#D8DEE945
tab.hoverBackground#132145aa
tab.inactiveBackground#0c1426
tab.inactiveForeground#D8DEE9a0
tab.inactiveModifiedBorder#D8DEE9a0
tab.unfocusedActiveBackground#0c1426
tab.unfocusedActiveBorder#F2D488aa
tab.unfocusedActiveForeground#F2D488bc
tab.unfocusedInactiveForeground#D8DEE9a0
terminal.ansiBlack#000000
terminal.ansiBlue#68A9FF
terminal.ansiBrightBlack#a1a1a1
terminal.ansiBrightBlue#8CDAFF
terminal.ansiBrightCyan#A5FFFA
terminal.ansiBrightGreen#B3EBAB
terminal.ansiBrightMagenta#F970CD
terminal.ansiBrightRed#FD788B
terminal.ansiBrightWhite#D8DEE9
terminal.ansiBrightYellow#FFCA14
terminal.ansiCyan#0D9480
terminal.ansiGreen#25BA58
terminal.ansiMagenta#FE97E1
terminal.ansiRed#FDB0BA
terminal.ansiWhite#d4ccb9
terminal.ansiYellow#F4CC67
terminal.background#0c1426
terminal.border#5E81AC
terminal.dropBackground#5E81AC56
terminal.foreground#D8DEE9
terminal.inactiveSelectionBackground#D8DEE934
terminal.selectionBackground#D8DEE934
terminal.tab.activeBorder#F4CC67
terminalCommandDecoration.defaultBackground#fe820f
terminalCommandDecoration.errorBackground#FD788B
terminalCommandDecoration.successBackground#00ff5551
terminalCursor.foreground#fe820f
textLink.activeForeground#F2D488
textLink.foreground#6EBCBB
textPreformat.foreground#ff9100
titleBar.activeBackground#0c1426
titleBar.activeForeground#F2D488
titleBar.inactiveBackground#0c1426
toolbar.activeBackground#253B7A
toolbar.hoverBackground#31476E
tree.tableColumnsBorder#F2E3D520

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string.quoted, punctuation.definition.string, string.quoted.single.shell, string.quoted.double.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.source.cmake	#7FB685	—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.single.literal.line.toml, string.quoted.single.basic.line.toml	#c7bbad	—
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#D8DEE9b0	—
support.type.property-name, support.type.vendored.property-name.css	#81A1C1	—
punctuation.definition.table.toml, punctuation.definition.array.table.toml	#CEA646	—
keyword.local.lua, storage.modifier.c, keyword.declaration.trait.rust, storage.type.rust, storage.type.function.python, keyword.operator.new.cpp, storage.type.ts	#E5C880	—
storage.modifier.declaration.python	#DD7758e0	—
entity.name.function.c, entity.name.function.python, support.function.misc.scss, entity.name.command.shell, keyword.cmake	#91BEEA	—
constant.numeric, constant.language, keyword.operator.quantifier.regexp	#b48ead	—
storage.type.class, storage.type.struct.declare.cpp, storage.type.js	#DA4167	—
keyword.control, keyword.operator.logical.python	#7AC2D1	—
comment, punctuation.definition.comment	#d8dee990	italic
comment.block	—
punctuation.definition.heading, punctuation.definition.quote, meta.separator.markdown, punctuation.section.embedded.begin.hugo, punctuation.section.embedded.end.hugo, entity.name.tag.css, entity.other.attribute-name, punctuation.definition.evaluation.parens.begin.shell, punctuation.definition.evaluation.parens.end.shell, punctuation.section.bracket.curly.variable.begin.shell, punctuation.section.bracket.curly.variable.end.shell, entity.name.tag.yaml	#F2D488	—
entity.name.section.markdown	#81A1C1	bold
string.other.link.title.markdown	#B48EAD	—
markup.underline.link	#64ACAB	—
markup.list.unnumbered.markdown	#8CB1BC	—
markup.bold.markdown	#D9E5FFd0	bold
markup.italic.markdown	—	italic
markup.strikethrough.markdown	#f45b58b0	—
markup.fenced_code.block.markdown	#d8dee9d0	—
punctuation.definition.markdown, fenced_code.block.language	#D8DEE9	bold
markup.raw.block.markdown	#EFB294	italic
markup.inline.raw, punctuation.definition.raw.markdown	#EFB294	—
string.regexp	#FB767E	—
entity.name.tag.html	#C6B8AD	—
entity.other.attribute-name.html	#b48ead	—
variable.scss	#EFB294	—
punctuation.definition.entity.css, punctuation.definition.constant.css, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, meta.property-value.scss, meta.property-name.scss, meta.paragraph.markdown, punctuation.definition.link, punctuation.definition.metadata, punctuation.section.keyframes.begin.scss, punctuation.section.keyframes.end.scss, punctuation.brackets, punctuation.comma, punctuation.semi, punctuation.terminator.statement.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.definition.logical-expression.shell, punctuation.section.arguments.begin.bracket.round.c, punctuation.section.arguments.end.bracket.round.c, keyword.operator.arrow, keyword.operator.access, keyword.operator.key-value, keyword.operator.namespace, keyword.operator.bitwise.shift.cpp, keyword.operator.assignment.cpp, keyword.other.unit, keyword.operator.redirect.shell, storage.type.built-in.primitive.c, storage.type.primitive.cpp, punctuation.definition.directive.c, keyword.control.directive.include.c	#D8DEE9d0	—
meta.attribute.python	#EF8160	—
entity.name.function.macro.rust, entity.name.function.preprocessor.cpp, meta.preprocessor.macro.cpp	#F37458	—
storage.source.cmake	#F37458	italic
entity.name.type.trait.rust	#09C473	—
entity.name.module.rust, entity.name.namespace.rust	#B48EAD	—
support.function.builtin.shell	#25BA58	—
keyword.other.shell, punctuation.definition.list	#E5C880	—
constant.other.option.dash.shell, constant.other.option	#D9E5FF	—

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