Aurora Dark Theme

Name: Aurora Dark Theme
Author: Aurora-Theme

Publisher: Aurora-ThemeThemes in package: 3

A sleek and modern dark theme for Visual Studio Code.

GitHub

Color themes

VS Code preview

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

Aurora Dark Theme — Aurora Theme

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#a277ff
activityBar.background#15141b
activityBar.foreground#a277ff
activityBarBadge.background#a277ff
activityBarBadge.foreground#15141b
breadcrumb.activeSelectionForeground#a277ff
breadcrumb.focusForeground#edecee
breadcrumb.foreground#454158
button.background#c979ff
button.foreground#ffffff
button.hoverBackground#a277ff
button.secondaryBackground#3d375e7f
button.secondaryForeground#edecee
button.secondaryHoverBackground#3d375eb3
diffEditor.diagonalFill#45415833
diffEditor.insertedTextBackground#61ffca15
diffEditor.removedTextBackground#ff79c615
editor.background#15141b
editor.foreground#edecee
editor.hoverHighlightBackground#3d375e4d
editor.inactiveSelectionBackground#3d375e4d
editor.lineHighlightBackground#1c1b22
editor.lineHighlightBorder#1c1b22
editor.selectionBackground#3d375e7f
editor.selectionHighlightBackground#3d375e4d
editor.selectionHighlightBorder#4d4d4d
editor.wordHighlightBackground#3d375e7f
editorBracketMatch.background#3d375e7f
editorBracketMatch.border#a277ff
editorCursor.foreground#a277ff
editorHoverWidget.background#15141b
editorHoverWidget.border#3d375e7f
editorHoverWidget.foreground#edecee
editorIndentGuide.activeBackground#454158
editorIndentGuide.background1#29263c
editorLineNumber.activeForeground#6d6d6d
editorLineNumber.foreground#454158
editorSuggestWidget.background#15141b
editorSuggestWidget.border#3d375e7f
editorSuggestWidget.foreground#edecee
editorSuggestWidget.highlightForeground#a277ff
editorSuggestWidget.selectedBackground#3d375e7f
editorSuggestWidget.selectedForeground#a277ff
extensionBadge.remoteBackground#a277ff
extensionBadge.remoteForeground#15141b
extensionButton.background#a277ff
extensionButton.foreground#ffffff
extensionButton.hoverBackground#15141b
extensionButton.prominentBackground#50fa7b
extensionButton.prominentForeground#15141b
extensionButton.prominentHoverBackground#66ff8c
gitDecoration.addedResourceForeground#61ffca
gitDecoration.conflictingResourceForeground#ffca85
gitDecoration.deletedResourceForeground#ff79c6
gitDecoration.ignoredResourceForeground#454158
gitDecoration.modifiedResourceForeground#82e2ff
gitDecoration.untrackedResourceForeground#a277ff
input.background#15141b
input.border#3d375e7f
input.foreground#edecee
input.placeholderForeground#454158
list.activeSelectionBackground#3d375e7f
list.activeSelectionForeground#a277ff
list.activeSelectionIconForeground#a277ff
list.filterMatchBackground#3d375e4d
list.filterMatchBorder#a277ff
list.focusBackground#3d375e7f
list.focusForeground#a277ff
list.highlightForeground#61ffca
list.hoverBackground#3d375e4d
list.inactiveSelectionBackground#3d375e4d
list.inactiveSelectionForeground#edecee
menu.background#15141b
menu.foreground#edecee
menu.selectionBackground#3d375e7f
menu.selectionBorder#00000000
menu.selectionForeground#a277ff
menu.separatorBackground#454158
menubar.selectionBackground#3d375e7f
menubar.selectionBorder#00000000
menubar.selectionForeground#a277ff
minimap.background#110f18
minimap.errorHighlight#ff79c6
minimap.findMatchHighlight#a277ff
minimap.warningHighlight#ffca85
minimapSlider.activeBackground#a277ff
minimapSlider.background#3d375e4d
minimapSlider.hoverBackground#3d375e7f
notificationCenter.border#3d375e7f
notificationCenterHeader.background#15141b
notificationCenterHeader.foreground#edecee
notifications.background#15141b
notifications.border#3d375e7f
notifications.foreground#edecee
notificationToast.border#3d375e7f
panel.background#110f18
panel.border#3d375e7f
panelTitle.activeBorder#a277ff
panelTitle.activeForeground#a277ff
panelTitle.inactiveForeground#454158
peekView.border#a277ff
peekViewEditor.background#110f18
peekViewEditor.matchHighlightBackground#3d375e7f
peekViewResult.background#15141b
peekViewResult.matchHighlightBackground#3d375e7f
peekViewResult.selectionBackground#3d375e7f
peekViewTitle.background#15141b
peekViewTitleDescription.foreground#454158
quickInput.background#15141b
quickInput.foreground#edecee
quickInputList.focusBackground#3d375e7f
quickInputList.focusForeground#a277ff
searchEditor.findMatchBackground#3d375e7f
searchEditor.findMatchBorder#a277ff
sideBar.background#110f18
sideBar.foreground#edecee
sideBarSectionHeader.background#15141b
sideBarSectionHeader.foreground#edecee
statusBar.background#110f18
statusBar.debuggingBackground#61ffca
statusBar.debuggingForeground#15141b
statusBar.foreground#edecee
tab.activeBackground#15141b
tab.activeBorderTop#a277ff
tab.activeForeground#a277ff
tab.inactiveBackground#110f18
tab.inactiveForeground#454158
terminal.background#15141b
terminal.foreground#edecee
terminalCursor.background#a277ff
terminalCursor.foreground#a277ff
titleBar.activeBackground#110f18
titleBar.activeForeground#edecee
titleBar.inactiveBackground#110f18
titleBar.inactiveForeground#454158

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6d6d6d	italic
string, constant.other.symbol	#82e2ff	—
keyword, storage.type, storage.modifier	#a277ff	bold
variable, variable.other.readwrite	#ffca85	—
entity.name.function, support.function	#61ffca	—
constant.numeric	#ffca85	—
variable.language	#a277ff	italic
entity.name.type, support.type	#82e2ff	bold
storage, keyword.declaration	#a277ff	italic
entity.name.tag	#61ffca	bold
support.class.component	#ff79c6	bold
entity.other.attribute-name.class, meta.class.tailwind, meta.attribute.class.html string	#50fa7b
meta.attribute.class.html punctuation, meta.attribute.class.html entity.other.attribute-name	#98c379	italic
meta.property-value.css, support.constant.property-value.css	#61ffca	—
punctuation.definition.template-expression, punctuation.section.embedded	#a277ff	—
punctuation.definition.typeparameters, punctuation.definition.bracket	#61ffca	—
keyword.operator	#61ffca	—
meta.interface, meta.type.declaration	#82e2ff	—
support.type.primitive	#82e2ff	italic
meta.object-literal.key	#61ffca	—
meta.brace	#61ffca	—
punctuation.definition.block	#61ffca	—
string variable, template-expression	#ffca85	—
entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.html	#ff79c6	italic
meta.tag.attributes variable.other, meta.tag.attributes meta.embedded.expression, meta.tag.attributes string.quoted	#bd93f9	—
meta.jsx.children, meta.tag.attributes constant.numeric	#f1fa8c	—
support.class.component	#50fa7b	bold
meta.tag.attributes variable.other.readwrite, meta.tag.attributes meta.object-literal.key	#8be9fd	—
punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.object, punctuation.curlybrace, meta.brace.curly, punctuation.definition.parameters, punctuation.section.function.begin, punctuation.section.function.end	#f064b3	—
meta.objectliteral.js punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end	#ff79c6	—

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