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 — Glacial

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#D8DEE9
activityBar.foreground#1446A0
activityBarBadge.background#88C0D0
activityBarBadge.foreground#000
badge.background#88C0D0
badge.foreground#000
bookmarks.lineBackground#D8DEE980
breadcrumb.background#E5E8EE
breadcrumb.focusForeground#1446A0
breadcrumb.foreground#1D3354a0
button.background#3678B5
button.secondaryBackground#3678B5
debugConsole.errorForeground#DB162F
debugConsole.infoForeground#1D3354
debugConsole.sourceForeground#1D3354a0
debugConsole.warningForeground#8B551E
debugToolBar.background#BFD0E0F6
descriptionForeground#2F4858
diffEditor.removedLineBackground#ff000001
disabledForeground#1D3354b0
dropdown.background#E5E8EE
dropdown.border#BFD0E0
dropdown.foreground#1D3354
editor.background#ECEFF4
editor.findMatchBackground#F2D488b0
editor.findMatchHighlightBackground#B3F2C360
editor.foreground#1D3354d0
editor.hoverHighlightBackground#BFD0E0
editor.inactiveSelectionBackground#B3F2C360
editor.lineHighlightBackground#C2C8DF80
editor.lineHighlightBorder#BFD0E0a0
editor.rangeHighlightBackground#8B85C140
editor.selectionBackground#B3DCF2b0
editor.selectionHighlightBorder#B3DCF2
editor.wordHighlightBackground#C2C8DF70
editorCursor.foreground#4C56D9
editorError.foreground#DB162F
editorGroup.border#BFD0E0
editorGroupHeader.noTabsBackground#D8DEE9
editorGroupHeader.tabsBackground#D8DEE9
editorGutter.background#ECEFF4
editorInlayHint.background#BFD0E060
editorInlayHint.foreground#1D3354A0
editorLineNumber.activeForeground#4C56D9
editorLineNumber.foreground#C2C8DFd0
editorLink.activeForeground#1446A0
editorMarkerNavigation.background#BFD0E0
editorMarkerNavigationError.background#DB162F
editorMarkerNavigationError.headerBackground#BFD0E0
editorMarkerNavigationWarning.background#AE5831
editorMarkerNavigationWarning.headerBackground#BFD0E0
editorStickyScroll.background#E5E8EEa0
editorStickyScrollHover.background#BFD0E0a0
editorSuggestWidget.background#D8DEE9F0
editorSuggestWidget.border#D8DEE930
editorSuggestWidget.focusHighlightForeground#D90368b0
editorSuggestWidget.foreground#1D3354
editorSuggestWidget.highlightForeground#48a0b0
editorWarning.foreground#AE5831
editorWidget.background#D8DEE9F0
editorWidget.border#BFD0E0a0
editorWidget.foreground#1D3354
errorForeground#ec5368
extensionIcon.verifiedForeground#48a0b0
focusBorder#BFD0E0
foreground#1D3354
gitDecoration.addedResourceForeground#297424
gitDecoration.ignoredResourceForeground#1D3354c0
gitDecoration.modifiedResourceForeground#6B6825
gitDecoration.renamedResourceForeground#DB162F
gitDecoration.stageModifiedResourceForeground#945B2C
gitDecoration.untrackedResourceForeground#437128
icon.foreground#1446A0
input.background#E5E8EE
input.border#BFD0E0
input.foreground#1D3354
input.placeholderForeground#1D3354C0
inputOption.activeBackground#BFD0E0
inputOption.activeBorder#D8DEE9a0
inputOption.activeForeground#1446A0
inputOption.hoverBackground#BFD0E0
inputValidation.errorBackground#ddbbbb
inputValidation.infoBackground#BFD0E0F0
inputValidation.infoBorder#BFD0E0
keybindingLabel.background#BFD0E0
keybindingLabel.border#BFD0E0c0
keybindingLabel.bottomBorder#BFD0E0c0
keybindingLabel.foreground#2F4858
list.dropBackground#BFD0E0a0
list.errorForeground#f57183
list.focusHighlightForeground#D90368b0
list.highlightForeground#48a0b0
list.hoverBackground#BFD0E0a0
list.hoverForeground#1D3354
list.inactiveSelectionBackground#BFD0E0c0
list.warningForeground#EF7B45
markdown.extension.editor.codeSpan.background#BFD0E080
markdown.extension.editor.codeSpan.border#00000000
menu.background#D8DEE9F0
menu.foreground#1D3354
menu.separatorBackground#BFD0E0
notifications.background#BFD0E0
panel.background#E5E8EE
panelTitle.activeForeground#2F4858
peekViewEditor.background#415D9120
peekViewEditor.matchHighlightBackground#dcb659a0
peekViewEditorStickyScroll.background#E5E8EEa0
peekViewResult.background#E5E8EE
peekViewResult.lineForeground#1D3354
peekViewResult.matchHighlightBackground#dcb659a0
peekViewResult.selectionForeground#1D3354
peekViewTitleDescription.foreground#1D3354
peekViewTitleLabel.foreground#1446A0
problemsErrorIcon.foreground#DB162F
problemsWarningIcon.foreground#AE5831
quickInput.background#D8DEE9F0
quickInput.foreground#1D3354D0
quickInputList.focusBackground#BFD0E0
quickInputList.focusForeground#1D3354
scrollbar.shadow#31476E80
settings.focusedRowBackground#BFD0E040
settings.headerForeground#3678B5
settings.modifiedItemIndicator#6E8EA9
settings.rowHoverBackground#BFD0E020
sideBar.background#E5E8EE
sideBar.border#BFD0E0
sideBar.foreground#1D3354
sideBarSectionHeader.background#D8DEE9
sideBarSectionHeader.foreground#3678B5
statusBar.background#D8DEE9
statusBar.debuggingBackground#F0955Cb0
statusBar.debuggingForeground#1D3354e0
statusBar.foreground#1446A0
statusBar.noFolderBackground#E5E8EE
tab.activeBackground#D8DEE9
tab.activeBorder#4B83CD
tab.activeForeground#1446A0
tab.activeModifiedBorder#D8DEE9A0
tab.border#BFD0E0
tab.hoverBackground#BFD0E0
tab.inactiveBackground#D8DEE9
tab.inactiveForeground#1D3354A0
tab.inactiveModifiedBorder#D8DEE9A0
tab.lastPinnedBorder#1446A0
tab.unfocusedActiveBorder#4B83CD
tab.unfocusedActiveForeground#1446A0af
tab.unfocusedInactiveBackground#D8DEE9
tab.unfocusedInactiveForeground#1D3354A0
terminal.ansiBlack#000000
terminal.ansiBlue#1446A0
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#3678B5
terminal.ansiBrightCyan#12EAEA
terminal.ansiBrightGreen#1EFFBC
terminal.ansiBrightRed#DB162F
terminal.ansiBrightWhite#1D3354
terminal.ansiBrightYellow#7A28CB
terminal.ansiCyan#59dcb7
terminal.ansiGreen#0FFF95
terminal.ansiRed#B41025
terminal.ansiYellow#dcb659
terminalCommandDecoration.defaultBackground#1D3354
terminalCommandDecoration.successBackground#2D9F00
textLink.activeForeground#5863F8
textLink.foreground#6D72C3
textPreformat.foreground#0D6B70
titleBar.activeBackground#D8DEE9
titleBar.activeForeground#1446A0
titleBar.inactiveBackground#D8DEE9
toolbar.hoverBackground#BFD0E0
tree.inactiveIndentGuidesStroke#1D335460
tree.indentGuidesStroke#1446A0c0
welcomePage.background#D8DEE9
welcomePage.tileBackground#E5E8EE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator.range.rust	—	bold
keyword.operator, punctuation	#364958d0	—
string.quoted, punctuation.definition.string, string.source.cmake	#32936F	—
constant.character.escape.python	#5863F8	—
entity.name.scope-resolution.cpp, keyword.control.directive.include.c	#786241	—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.single.basic.line.toml	#786241	—
punctuation.definition.table.toml, punctuation.definition.array.table.toml, support.type.property-name.toml, entity.name.tag.css, entity.other.attribute-name.class.css, entity.name.tag.custom.scss, entity.other.attribute-name, punctuation.section.embedded.begin.hugo, punctuation.section.embedded.end.hugo	#364958D0	—
support.type.property-name.table.toml, support.type.property-name.array.toml, entity.name.section.markdown, entity.name.tag.yaml	#1446A0	—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#1446A0	—
comment, punctuation.definition.comment	#7D8F7A	italic
comment.block	—
constant.numeric, constant.language.json, constant.language.boolean, constant.language.boolean.toml, entity.name.tag.html, entity.name.type.rust, support.class.component.js, support.class.component.tsx, support.class.component.js.jsx, entity.name.type.class.mermaid	#8A3258	—
storage.type.built-in.primitive.c, storage.type.primitive.cpp, storage.type.class, storage.type.struct.declare.cpp, storage.type.function.python, source.mermaid, keyword.control.mermaid, entity.name.variable.field.mermaid	#1A3A3A	—
keyword.control, keyword.operator.logical.python	#09814A	—
keyword.local.lua, keyword.other.rust, storage.modifier.c, storage.type.mermaid	#5863F8	—
meta.function.c, support.function.misc.scss, entity.name.function.rust, entity.name.function.call.cpp, entity.name.function.c, entity.name.function.definition.cpp, entity.name.function.js, meta.function-call.python, keyword.cmake, entity.name.function.mermaid	#275DAD	—
meta.function-call.arguments.python	#1D3354D0	italic
entity.name.function.member.cpp	#275DAD	italic
meta.macro.rust	#D90368	—
meta.paragraph.markdown	#1D3354e0	—
markup.quote.markdown	—	italic
punctuation.definition.heading.markdown	#EF7B45	—
punctuation.definition.list.begin.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown	#364958D0	—
string.other.link.title.markdown, string.other.link.description.markdown	#78356A	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#35783B	—
punctuation.definition.markdown	#000	italic bold
markup.bold.markdown, punctuation.definition.bold.markdown	#1D3354	bold
markup.italic.markdown, punctuation.definition.italic.markdown, fenced_code.block.language.markdown	#1D3354E0	italic
markup.fenced_code.block.markdown	#24245fd0	—
entity.name.command.shell, keyword.other.shell, constant.other.option	#0D6B70	—
markup.raw.block.markdown	#816435	italic
markup.inline.raw	#0D6B70	—
markup.list.unnumbered.markdown meta.paragraph.markdown	#1D3354	—
markup.list.unnumbered.markdown markup.list.unnumbered.markdown meta.paragraph.markdown	#464C54e0	—
support.function.builtin.shell	#0D6B70	—
keyword.other.unit, punctuation.definition.constant.css	#1D3354D0	—
variable.scss	#D90368	—
support.type.property-name.css, support.type.vendored.property-name.css	#275DAD	—
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.js.jsx, entity.other.attribute-name.tsx	#0D6B70	—
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#1D3354D0	—

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