Lunar Dark Theme

Name: Lunar Dark Theme
Author: pedro13arthur

Publisher: pedro13arthurThemes in package: 1

A beautiful and comfortable theme to enhance your programming experience

GitHub

VS Code preview

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

Lunar Dark Theme — Lunar Dark Theme

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.activeBorder#434343
activityBar.background#0B0B0B
activityBar.foreground#C1C1C1
activityBarBadge.background#FCCC98
activityBarBadge.foreground#0B0B0B
badge.background#434343
badge.foreground#E0E0E0
breadcrumb.foreground#B0B0B0
breadcrumbPicker.background#292929
button.background#434343
button.foreground#EEEEEE
button.hoverBackground#404040
dropdown.background#131313
dropdown.border#434343
editor.background#131313
editor.findMatchBackground#434343
editor.findMatchBorder#89E0B8
editor.findMatchHighlightBackground#2C2C2C
editor.findMatchHighlightBorder#545454
editor.foreground#E0E0E0
editor.inactiveSelectionBackground#292929
editor.lineHighlightBackground#2C2C2C
editor.selectionBackground#2C2C2C
editor.selectionHighlightBackground#333333
editorBracketHighlight.foreground1#DCAAED
editorBracketHighlight.foreground2#AEA8F7
editorBracketHighlight.foreground3#6FABE9
editorGroup.border#434343
editorGroup.dropBackground#43434360
editorGroupHeader.noTabsBackground#1F1F1F
editorGroupHeader.tabsBackground#1F1F1F
editorHoverWidget.background#232323
editorIndentGuide.activeBackground1#636363
editorIndentGuide.background1#434343
editorLineNumber.activeForeground#E0E0E0
editorLineNumber.foreground#636363
editorSuggestWidget.background#232323
editorSuggestWidget.focusHighlightForeground#FCCC98
editorSuggestWidget.highlightForeground#EEEEEE
editorSuggestWidget.selectedBackground#434343
editorSuggestWidget.selectedForeground#EEEEEE
editorWidget.background#2C2C2C
editorWidget.border#545454
editorWidget.foreground#E0E0E0
focusBorder#636363
foreground#E0E0E0
input.background#131313
input.border#434343
input.placeholderForeground#828282
list.activeSelectionBackground#434343
list.activeSelectionForeground#EEEEEE
list.activeSelectionIconForeground#E0E0E0
list.dropBackground#232323
list.focusBackground#333333
list.focusForeground#E0E0E0
list.hoverBackground#333333
list.hoverForeground#E0E0E0
list.inactiveSelectionBackground#333333
list.inactiveSelectionForeground#E0E0E0
menu.background#2C2C2C
menu.foreground#E0E0E0
minimap.background#1F1F1Fcc
notificationCenter.border#434343
notifications.background#1F1F1F
notifications.border#545454
notifications.foreground#EAEAEA
notificationToast.border#434343
panel.background#131313
panel.border#434343
panelTitle.activeBorder#545454
panelTitle.activeForeground#E0E0E0
panelTitle.inactiveForeground#A0A0A0
pickerGroup.border#434343
pickerGroup.foreground#AACCFF
sash.hoverBorder#A0A0A0
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#8E8E8E
scrollbarSlider.background#43434388
selection.background#404040
sideBar.background#131313
sideBar.border#434343
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#2C2C2C
sideBarTitle.foreground#E0E0E0
statusBar.background#0B0B0B
statusBar.debuggingBackground#89E0B8
statusBar.debuggingForeground#0B0B0B
statusBar.foreground#C1C1C1
statusBarItem.remoteBackground#1A945F
statusBarItem.remoteForeground#E0E0E0
tab.activeBackground#434343
tab.border#131313
tab.hoverBackground#333333
tab.inactiveBackground#292929
tab.lastPinnedBorder#dddddd33
tab.unfocusedActiveBackground#404040
terminal.ansiBlack#131313
terminal.ansiBlue#6FABE9
terminal.ansiCyan#AACCFF
terminal.ansiGreen#AAD390
terminal.ansiMagenta#DCAAED
terminal.ansiRed#F58F7E
terminal.ansiWhite#E0E0E0
terminal.ansiYellow#FCCC98
textLink.activeForeground#E2B87C
textLink.foreground#FCCC98
titleBar.activeBackground#0B0B0B
titleBar.activeForeground#B0B0B0
titleBar.inactiveBackground#030303
titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, support.variable.property	#AACCFF
variable.other.constant	#BDE7FF	—
variable.language	#DCAAED	—
entity.name.function, meta.function-call, meta.function, support.function	#AAD390	italic
invalid.illegal	#F58F7E	—
text	#E0E0E0	—
support.type.property-name, meta.object-literal.key	#AACCFF
string, string.tag, string.value	#FCCC98
constant.language.boolean, constant.language	#DCAAED	—
constant.numeric	#E9DF8F	—
keyword.other.unit	#F1B7A2	—
storage.type, storage.type.function.arrow, variable.other.global.php	#6FABE9
keyword, keyword.control, keyword.operator, storage.modifier, storage.type.function	#AEA8F7	italic
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.combinator, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.logical, keyword.operator.relational, keyword.operator.spread, keyword.operator.ternary, punctuation.definition.parameters, punctuation.separator.key-value, punctuation.separator.dictionary.key-value	#D9D9D9
punctuation.definition, meta.brace, punctuation.section	#C1C1C1
punctuation, punctuation.definition.tag, punctuation.definition.string	#A0A0A0	—
comment, comment.line.double-slash, punctuation.definition.comment	#828282	—
comment	—	italic
variable.argument.css, variable.css	#BDE7FF	—
keyword.other.important.css	#AEA8F7	—
entity.other.attribute-name.class, entity.other.attribute-name.id	#AAD390	italic
entity.name.tag.css, entity.name.tag.custom, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#AAD390	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#89E0B8	—
entity.other.attribute-name.css, support.type.property-name.css, support.type.property-name.media, meta.property-name.css	#AACCFF	—
support.constant.property-value, support.constant.color, constant.other.color, support.constant.font-name.css	#FCCC98	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.variable	#F58F7E	—
entity.name.type.class, entity.name.type, variable.function	#89E0B8
entity.name.tag	#6FABE9	—
entity.other.attribute-name	#AACCFF	—
support.class.component	#89E0B8	—
punctuation.definition.list.begin, punctuation.definition.quote	#6FABE9	—
markup.heading, punctuation.definition.heading	#6FABE9	bold
markup.inline.raw, punctuation.definition.raw	#EDAB8C	—
markup.bold, punctuation.definition.bold	#AACCFF	bold
markup.italic, punctuation.definition.italic	#89E0B8	italic
markup.underline	—	underline
punctuation.definition.strikethrough.markdown, markup.strikethrough	#F58F7E	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}!`;
}