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 — Azure Dawn

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.background#30456B
activityBar.foreground#F2D488
activityBarBadge.background#98D6E8
activityBarBadge.foreground#000
badge.background#98D6E8
badge.foreground#000
bookmarks.lineBackground#abb2bf30
breadcrumb.background#3D5C85
breadcrumb.focusForeground#F2D488
breadcrumb.foreground#ECEFF4a0
button.background#004E98
button.secondaryBackground#004E98
debugConsole.errorForeground#E8C1D4
debugConsole.infoForeground#D8DEE9
debugConsole.sourceForeground#ECEFF4a0
debugConsole.warningForeground#00ffff
debugToolBar.background#132145F6
descriptionForeground#ECEFF4
disabledForeground#ECEFF4b0
dropdown.background#3D5C85
dropdown.border#31476EF0
dropdown.foreground#ECEFF4
editor.background#30456B
editor.findMatchBackground#BA160Cd0
editor.foreground#CFD5DF
editor.hoverHighlightBackground#7F079960
editor.inactiveSelectionBackground#00434680
editor.lineHighlightBackground#13214580
editor.lineHighlightBorder#2B4570a0
editor.rangeHighlightBackground#BA160C40
editor.selectionBackground#02088760
editor.wordHighlightBackground#7F079940
editorCursor.foreground#FFCA14
editorError.foreground#DB162F
editorGroup.border#abb2bf
editorGroupHeader.noTabsBackground#30456B
editorGroupHeader.tabsBackground#30456B
editorGutter.background#30456B
editorInlayHint.background#415D9180
editorInlayHint.foreground#ECEFF4a0
editorLineNumber.activeForeground#F2D488
editorLineNumber.foreground#C2C8DF80
editorLink.activeForeground#F2D488
editorMarkerNavigation.background#2B4570
editorMarkerNavigationError.background#DB162F
editorMarkerNavigationError.headerBackground#2B4570
editorMarkerNavigationWarning.background#F0955C
editorMarkerNavigationWarning.headerBackground#2B4570
editorStickyScroll.background#3D5C85a0
editorStickyScrollHover.background#253B7Aa0
editorSuggestWidget.background#395c8aF0
editorSuggestWidget.border#D8DEE930
editorSuggestWidget.focusHighlightForeground#DBADD3
editorSuggestWidget.foreground#ECEFF4D0
editorSuggestWidget.highlightForeground#98D6E8
editorWarning.foreground#F0955C
editorWidget.background#395c8aF0
editorWidget.border#abb2bfa0
editorWidget.foreground#ECEFF4
errorForeground#FEA2AC
extensionIcon.verifiedForeground#98D6E8
focusBorder#abb2bf
foreground#CFD5DF
gitDecoration.addedResourceForeground#FFE66D
gitDecoration.ignoredResourceForeground#ECEFF4a0
gitDecoration.modifiedResourceForeground#BEFFC7
gitDecoration.renamedResourceForeground#BDCCFF
gitDecoration.stageModifiedResourceForeground#0FFF95
gitDecoration.untrackedResourceForeground#CBEFB6d0
icon.foreground#F2D488
input.background#3D5C85
input.border#31476EF0
input.foreground#ECEFF4
input.placeholderForeground#ECEFF4C0
inputOption.activeBackground#253B7A
inputOption.activeBorder#D8DEE9a0
inputOption.activeForeground#F2D488
inputOption.hoverBackground#253B7A
inputValidation.errorBackground#ba4450F0
inputValidation.errorForeground#ECEFF4
inputValidation.infoBackground#395c8aF0
inputValidation.infoBorder#31476EF0
keybindingLabel.background#31476E
keybindingLabel.border#132145
keybindingLabel.bottomBorder#132145
keybindingLabel.foreground#ECEFF4
list.dropBackground#253B7Aa0
list.errorForeground#FEA2AC
list.focusHighlightForeground#DBADD3
list.highlightForeground#98D6E8
list.hoverBackground#253B7Aa0
list.hoverForeground#ECEFF4
list.inactiveSelectionBackground#1D3354A0
list.warningForeground#F0955C
markdown.extension.editor.codeSpan.background#2B4162
markdown.extension.editor.codeSpan.border#00000000
menu.background#395c8a
menu.foreground#CFD5DF
menu.separatorBackground#abb2bf
notifications.background#263670
panel.background#30456B
panelTitle.activeForeground#F2D488
peekViewEditor.background#415D91
peekViewEditor.matchHighlightBackground#BA160Ca0
peekViewEditorStickyScroll.background#3D5C85a0
peekViewResult.background#30456B
peekViewResult.lineForeground#ECEFF4a0
peekViewResult.matchHighlightBackground#020887a0
peekViewResult.selectionForeground#ECEFF4
peekViewTitleDescription.foreground#ECEFF4a0
peekViewTitleLabel.foreground#FFCA14
problemsErrorIcon.foreground#DB162F
problemsWarningIcon.foreground#F0955C
quickInput.background#374F7Ad0
quickInput.foreground#ECEFF4e0
quickInputList.focusBackground#2B4570
quickInputList.focusForeground#ECEFF4
scrollbar.shadow#31476E80
settings.focusedRowBackground#253B7A40
settings.headerForeground#e0cd9f
settings.modifiedItemIndicator#6E8EA9
settings.rowHoverBackground#253B7A20
sideBar.background#3D5C85
sideBar.border#253B7A
sideBar.foreground#ECEFF4e0
sideBarSectionHeader.background#30456B
sideBarSectionHeader.foreground#e0cd9f
statusBar.background#30456B
statusBar.debuggingForeground#ECEFF4e0
statusBar.foreground#F2D488
statusBar.noFolderBackground#3D5C85
tab.activeBackground#1D3354A0
tab.activeBorder#FFCA14
tab.activeForeground#F2D488
tab.activeModifiedBorder#D8DEE9A0
tab.border#abb2bf
tab.hoverBackground#253B7A
tab.inactiveBackground#30456B
tab.inactiveForeground#ECEFF4A0
tab.inactiveModifiedBorder#D8DEE9A0
tab.lastPinnedBorder#F2D488
tab.unfocusedActiveBorder#FFCA14
tab.unfocusedActiveForeground#F2D488af
tab.unfocusedInactiveBackground#30456B
tab.unfocusedInactiveForeground#ECEFF4A0
terminal.ansiBlack#000000
terminal.ansiBlue#9AC4F8
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#36b2d4
terminal.ansiBrightCyan#12EAEA
terminal.ansiBrightGreen#1EFFBC
terminal.ansiBrightRed#E8C1D4
terminal.ansiBrightWhite#ECEFF4
terminal.ansiBrightYellow#FFCA14
terminal.ansiCyan#59dcb7
terminal.ansiGreen#0FFF95
terminal.ansiRed#941C2F
terminal.ansiYellow#dcb659
terminalCommandDecoration.defaultBackground#ECEFF4
terminalCommandDecoration.successBackground#1EFFBC
textLink.activeForeground#FFCA14
textLink.foreground#A4DAA8
textPreformat.foreground#FF7900
titleBar.activeBackground#30456B
titleBar.activeForeground#F2D488
titleBar.inactiveBackground#30456B
toolbar.hoverBackground#253B7A
tree.inactiveIndentGuidesStroke#ECEFF460
tree.indentGuidesStroke#F2D488c0
welcomePage.background#30456B
welcomePage.tileBackground#3D5C85

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator.range.rust	—	bold
keyword.operator, punctuation	#CFD5DF	—
string.quoted, punctuation.definition.string, string.source.cmake	#A4DAA8	—
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.single.basic.line.toml	#9AC4F8	—
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	#F2D488	—
support.type.property-name.table.toml, support.type.property-name.array.toml, entity.name.section.markdown	#BBDDFB	—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#F3D9B0	—
comment, punctuation.definition.comment	#abb2bf	italic
comment.block	—
constant.numeric, constant.language.json, constant.language.boolean.toml	#FFBE9E	—
storage.type.built-in.primitive.c, storage.type.class, storage.type.struct.declare.cpp, storage.type.js, storage.type.function.python	#F2D488	—
keyword.control, keyword.operator.logical.python	#65E2BA	—
keyword.local.lua, keyword.other.rust, storage.modifier.c	#E5C880	—
meta.function.c, support.function.misc.scss, entity.name.function.rust, entity.name.function.call.cpp, entity.name.function.definition.cpp, keyword.cmake	#BBDDFB	—
meta.attribute.python	#EFB294	—
string.regexp.quoted.single.python	#FDBDB9	—
entity.name.function.member.cpp	#BBDDFB	italic
meta.macro.rust	#EFB294	—
meta.paragraph.markdown	#D8DEE9	—
markup.quote.markdown	—	italic
punctuation.definition.heading.markdown, 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	#F2D488	—
string.other.link.title.markdown, string.other.link.description.markdown	#DBADD3	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#98D6E8	—
punctuation.definition.markdown	#ffffff	italic bold
markup.bold.markdown, punctuation.definition.bold.markdown	#E8E3D8f0	bold
markup.italic.markdown, punctuation.definition.italic.markdown, fenced_code.block.language.markdown	#E8E3D8f0	italic
markup.fenced_code.block.markdown	#C9C5BCE0	—
markup.raw.block.markdown	#E4B69F	italic
markup.inline.raw	#EFB294	—
support.function.builtin.shell	#0FFF95	—
keyword.other.unit, punctuation.definition.constant.css	#CFD5DF	—
variable.scss	#EFB294	—
support.type.property-name.css	#BBDDFB	—
entity.name.tag.html	#C6B8AD	—
entity.other.attribute-name.html	#A5C5CC	—
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#CFD5DF	—

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