Earth

Name: Earth
Author: Nayan

Publisher: NayanThemes in package: 5

Earth Theme with variants of Angel, Ghost, Human, Land, and Water.

Open in VS Code GitHub

Color themes

VS Code preview

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

Earth — Earth - Angel

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#eeeeee
activityBar.border#dddddd
activityBar.foreground#000000
activityBarBadge.background#075b13
activityBarBadge.foreground#ffffff
badge.background#cccccc
badge.foreground#000000
dropdown.background#dddddd
dropdown.foreground#000000
dropdown.listBackground#dddddd
editor.background#e7e7e7
editor.foreground#111111
editorCursor.foreground#555555
editorGroupHeader.tabsBackground#e3e3e3
editorHoverWidget.background#cccccc
editorHoverWidget.border#aaaaaa
editorLineNumber.foreground#555555
editorLink.activeForeground#222222
editorSuggestWidget.background#032222
editorSuggestWidget.border#032222
editorSuggestWidget.foreground#aaaaaa
editorSuggestWidget.highlightForeground#eeeeee
editorSuggestWidget.selectedBackground#193147
editorWidget.background#cccccc
editorWidget.border#aaaaaa
errorForeground#d02613
input.background#cccccc
input.border#cccccc
input.foreground#111111
list.activeSelectionBackground#00000022
list.activeSelectionForeground#000000
list.dropBackground#00000022
list.focusBackground#00000022
list.focusForeground#000000
list.highlightForeground#222222
list.hoverBackground#00000022
list.hoverForeground#000000
list.inactiveSelectionBackground#00000022
list.inactiveSelectionForeground#333333
menu.background#dddddd
menu.foreground#111111
menu.selectionBorder#dddddd
menu.selectionForeground#000000
menubar.selectionBorder#e3e3e3
notificationCenter.border#cccccc
notificationCenterHeader.background#eeeeee
notificationCenterHeader.foreground#000000
notificationLink.foreground#0E639C
notifications.background#dddddd
notifications.border#cccccc
notifications.foreground#111111
notificationToast.border#cccccc
panel.background#e7e7e7
panel.border#cccccc
panelTitle.activeBorder#777777
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#777777
peekView.border#cccccc
peekViewEditor.background#032222
peekViewEditorGutter.background#032222
peekViewResult.background#032222
peekViewResult.lineForeground#eeeeee
peekViewResult.selectionBackground#dddddd
peekViewResult.selectionForeground#000000
peekViewTitle.background#cccccc
peekViewTitleDescription.foreground#555555
peekViewTitleLabel.foreground#000000
sideBar.background#ececec
sideBar.border#dddddd
sideBar.foreground#444444
sideBarSectionHeader.background#dddddd
sideBarSectionHeader.border#dddddd
sideBarSectionHeader.foreground#222222
sideBarTitle.foreground#222222
statusBar.background#bbbbbb
statusBar.border#bbbbbb
statusBar.debuggingBackground#CC6633
statusBar.debuggingBorder#CC6633
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#CC6633
statusBar.noFolderBorder#cccccc
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#00000022
statusBarItem.hoverBackground#00000022
statusBarItem.prominentBackground#CC6633
statusBarItem.prominentHoverBackground#00000022
statusBarItem.remoteBackground#075b13
statusBarItem.remoteForeground#eeeeee
tab.activeBackground#e7e7e7
tab.activeBorder#e7e7e7
tab.activeForeground#000000
tab.border#dddddd
tab.inactiveBackground#dddddd
tab.inactiveForeground#444444
tab.unfocusedActiveForeground#000000
tab.unfocusedInactiveForeground#444444
titleBar.activeBackground#e3e3e3
titleBar.activeForeground#222222
titleBar.border#e3e3e3
titleBar.inactiveBackground#cccccc
titleBar.inactiveForeground#444444
walkThrough.embeddedEditorBackground#e7e7e7
welcomePage.buttonBackground#e7e7e7
welcomePage.buttonHoverBackground#00000022
widget.shadow#14151A26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block.preprocessor, comment.documentation, comment.block.documentation	#448C27	italic
variable, string constant.other.placeholder	#7A3E9D	—
variable.other.object.property	#BB6622	—
variable.other.object	#222222	—
constant.other.color	#000000	—
invalid, invalid.illegal	#660000	—
keyword, storage.type	#2e9f20	—
keyword.operator	#ff4e00	—
storage.modifier	#0077ff	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#222222	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#225599	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#9900ff	—
meta.block variable.other	#dd4466	—
support.other.variable, string.other.link	#dd2299	—
constant.numeric, constant.language	#ee7711	—
support.constant, constant.character, constant.escape, keyword.other.var, keyword.other.await	#8811bb	—
variable.parameter, keyword.other.unit, keyword.other	#007777	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#c65000	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ad320c	—
entity.name.variable.property	#ff5003	—
entity.name.variable.parameter	#222222	—
support.type	#215e41	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#215e41	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#f80e36	—
variable.language	#ac6006	italic
entity.name.method.js	#ac6006	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#ac6006	—
entity.other.attribute-name	#7600c5	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#f97803	italic
entity.other.attribute-name.class	#f97803	—
source.sass keyword.control	#0040c7	—
markup.inserted	#48af00	—
markup.deleted	#000000	—
markup.changed	#000000	—
string.regexp	#4B83CD	—
constant.character.escape	#777777	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#144dc6	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#6800ad	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#066a8c	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e73b08	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d51434	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a72409	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#082460	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a00c14	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7004b7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2c4901	—
text.html.markdown, punctuation.definition.list_item.markdown	#025b5b	—
text.html.markdown markup.inline.raw.markdown	#461368	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#15588d	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#3f6706	—
markup.italic	#ac131b	italic
markup.bold, markup.bold string	#ac131b	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#ac131b	bold
markup.underline	#b6320b	underline
markup.quote punctuation.definition.blockquote.markdown	#063c67	—
markup.quote	—	italic
string.other.link.title.markdown	#550b71	—
string.other.link.description.title.markdown	#7f0857	—
constant.other.reference.link.markdown	#644204	—
markup.raw.block	#4b0b75	—
markup.raw.block.fenced.markdown	#ffffff50	—
punctuation.definition.fenced.markdown	#ffffff50	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#222222	—
variable.language.fenced.markdown	#05416f	—
meta.separator	#005292	bold
markup.table	#07670c	—

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