Aurora Borealis Studio Theme

Name: Aurora Borealis Studio Theme
Author: lohsebhipolg2s

Publisher: lohsebhipolg2sThemes in package: 2

A mesmerizing VS Code theme inspired by the Northern Lights with ethereal greens, mystical purples, and arctic blues

Open in VS Code GitHub

Color themes

VS Code preview

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

Aurora Borealis Studio Theme — Aurora Borealis

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#64FFDA20
activityBar.activeBorder#64FFDA
activityBar.background#0F1B2E
activityBar.foreground#64FFDA
activityBar.inactiveForeground#78909C
activityBarBadge.background#B388FF
activityBarBadge.foreground#FFFFFF
badge.background#64FFDA
badge.foreground#0B1426
breadcrumb.activeSelectionForeground#E8F4FD
breadcrumb.background#0B1426
breadcrumb.focusForeground#64FFDA
breadcrumb.foreground#78909C
breadcrumbPicker.background#1A2332
button.background#64FFDA
button.foreground#0B1426
button.hoverBackground#4FD1C7
button.secondaryBackground#B388FF
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#9C64F7
diffEditor.insertedTextBackground#64FFDA20
diffEditor.removedTextBackground#FF6B9D20
dropdown.background#1A2332
dropdown.border#37474F
dropdown.foreground#E8F4FD
editor.background#0B1426
editor.findMatchBackground#FFE08260
editor.findMatchHighlightBackground#FFE08230
editor.findRangeHighlightBackground#64FFDA20
editor.foldBackground#37474F20
editor.foreground#E8F4FD
editor.hoverHighlightBackground#37474F30
editor.lineHighlightBorder#37474F40
editor.rangeHighlightBackground#64FFDA20
editor.selectionBackground#64FFDA30
editor.selectionHighlightBackground#64FFDA20
editor.wordHighlightBackground#82B1FF30
editor.wordHighlightStrongBackground#B388FF30
editorBracketHighlight.foreground1#64FFDA
editorBracketHighlight.foreground2#B388FF
editorBracketHighlight.foreground3#82B1FF
editorBracketHighlight.foreground4#FFE082
editorBracketHighlight.foreground5#FF8A80
editorBracketHighlight.foreground6#84FFFF
editorBracketHighlight.unexpectedBracket.foreground#FF6B9D
editorError.foreground#FF6B9D
editorGroup.border#37474F
editorGroup.dropBackground#64FFDA20
editorGroupHeader.tabsBackground#0F1B2E
editorGutter.addedBackground#64FFDA
editorGutter.deletedBackground#FF6B9D
editorGutter.modifiedBackground#FFE082
editorHoverWidget.background#1A2332
editorHoverWidget.border#37474F
editorInfo.foreground#82B1FF
editorLineNumber.activeForeground#64FFDA
editorLineNumber.foreground#546E7A
editorLink.activeForeground#82B1FF
editorOverviewRuler.addedForeground#64FFDA
editorOverviewRuler.border#37474F
editorOverviewRuler.deletedForeground#FF6B9D
editorOverviewRuler.errorForeground#FF6B9D
editorOverviewRuler.infoForeground#82B1FF
editorOverviewRuler.modifiedForeground#FFE082
editorOverviewRuler.selectionHighlightForeground#64FFDA80
editorOverviewRuler.warningForeground#FFE082
editorOverviewRuler.wordHighlightForeground#82B1FF80
editorOverviewRuler.wordHighlightStrongForeground#B388FF80
editorSuggestWidget.background#1A2332
editorSuggestWidget.foreground#E8F4FD
editorSuggestWidget.selectedBackground#64FFDA30
editorWarning.foreground#FFE082
editorWidget.background#1A2332
editorWidget.border#37474F
errorForeground#FF6B9D
focusBorder#64FFDA
foreground#E8F4FD
gitDecoration.conflictingResourceForeground#B388FF
gitDecoration.deletedResourceForeground#FF6B9D
gitDecoration.ignoredResourceForeground#546E7A
gitDecoration.modifiedResourceForeground#FFE082
gitDecoration.untrackedResourceForeground#64FFDA
input.background#1A2332
input.border#37474F
input.foreground#E8F4FD
input.placeholderForeground#78909C
inputOption.activeBorder#64FFDA
inputValidation.errorBorder#FF6B9D
inputValidation.infoBorder#82B1FF
inputValidation.warningBorder#FFE082
list.activeSelectionBackground#64FFDA20
list.activeSelectionForeground#64FFDA
list.dropBackground#64FFDA30
list.errorForeground#FF6B9D
list.focusBackground#37474F40
list.highlightForeground#64FFDA
list.hoverBackground#37474F20
list.inactiveSelectionBackground#37474F30
list.warningForeground#FFE082
panel.background#0F1B2E
panel.border#37474F
panelTitle.activeBorder#64FFDA
panelTitle.activeForeground#64FFDA
panelTitle.inactiveForeground#78909C
progressBar.background#64FFDA
selection.background#64FFDA40
settings.checkboxBackground#1A2332
settings.checkboxBorder#37474F
settings.checkboxForeground#64FFDA
settings.dropdownBackground#1A2332
settings.dropdownBorder#37474F
settings.dropdownForeground#E8F4FD
settings.headerForeground#64FFDA
settings.modifiedItemIndicator#FFE082
settings.numberInputBackground#1A2332
settings.numberInputBorder#37474F
settings.numberInputForeground#E8F4FD
settings.textInputBackground#1A2332
settings.textInputBorder#37474F
settings.textInputForeground#E8F4FD
sideBar.background#0F1B2E
sideBarSectionHeader.background#1A2332
sideBarSectionHeader.border#37474F
sideBarTitle.foreground#E8F4FD
statusBar.background#0F1B2E
statusBar.debuggingBackground#B388FF
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#E8F4FD
statusBar.noFolderBackground#37474F
statusBar.noFolderForeground#E8F4FD
statusBarItem.prominentBackground#64FFDA
statusBarItem.prominentForeground#0B1426
statusBarItem.prominentHoverBackground#4FD1C7
statusBarItem.remoteBackground#B388FF
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#0B1426
tab.activeBorderTop#64FFDA
tab.activeForeground#E8F4FD
tab.border#37474F
tab.inactiveBackground#0F1B2E
tab.inactiveForeground#78909C
terminal.ansiBlack#1A2332
terminal.ansiBlue#82B1FF
terminal.ansiBrightBlack#37474F
terminal.ansiBrightBlue#A7C7FF
terminal.ansiBrightCyan#B2DFDB
terminal.ansiBrightGreen#B9F6CA
terminal.ansiBrightMagenta#D1C4E9
terminal.ansiBrightRed#FF8A80
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFF59D
terminal.ansiCyan#84FFFF
terminal.ansiGreen#64FFDA
terminal.ansiMagenta#B388FF
terminal.ansiRed#FF6B9D
terminal.ansiWhite#E8F4FD
terminal.ansiYellow#FFE082
terminal.background#0B1426
terminal.foreground#E8F4FD
titleBar.activeBackground#0F1B2E
titleBar.activeForeground#E8F4FD
titleBar.inactiveBackground#0B1426
titleBar.inactiveForeground#78909C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#64FFDA	—
comment, punctuation.definition.comment	#546E7A	italic
comment keyword.codetag.notation, comment.block.documentation keyword	#82B1FF	—
string	#64FFDA	—
punctuation.definition.string.begin, punctuation.definition.string.end	#4FD1C7	—
constant, variable.other.constant	#B388FF	—
constant.numeric	#FFE082	—
keyword, storage.type, storage.modifier	#FF8A80	bold
entity.name.function, meta.function-call	#82B1FF	—
variable.parameter	#D1C4E9	italic
entity.name.type.class, entity.name.class	#B388FF	—
entity.name.type, storage.type	#A7C7FF	italic
variable	#E8F4FD	—
variable.language	#FF8A80	italic
entity.name.tag	#FF8A80	—
entity.other.attribute-name	#82B1FF	italic
meta.selector	#B388FF	—
support.type.property-name	#64FFDA	—
keyword.operator	#84FFFF	—
punctuation	#B2DFDB	—
string.regexp	#FFE082	—
markup.heading	#64FFDA	bold
markup.bold	#E8F4FD	bold
markup.italic	#D1C4E9	italic
markup.underline.link	#82B1FF	—
markup.inline.raw	#B388FF	—
invalid	#FF6B9D	underline
invalid.deprecated	#FF8A80	strikethrough

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