Extensão do Aron

Name: Extensão do Aron
Author: Aron Alvarenga

Publisher: Aron AlvarengaThemes in package: 3

Conforto visual, leitura ergonômica, temas Kindle e pausas para descanso ocular.

Open in VS Code GitHub

Color themes

VS Code preview

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

Extensão do Aron — Extensão do Aron Sepia Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#141210
activityBar.foreground#A89888
badge.background#8B6914
badge.foreground#F5F0E6
dropdown.background#252018
dropdown.foreground#D4C8B8
editor.background#1E1A16
editor.foreground#D4C8B8
editor.inactiveSelectionBackground#2E2824
editor.lineHighlightBackground#2A2520
editor.selectionBackground#3D3530
editorCursor.foreground#D4A574
editorIndentGuide.activeBackground1#5C534A
editorIndentGuide.background1#3D3530
editorLineNumber.activeForeground#8A7F74
editorLineNumber.foreground#5C534A
editorWhitespace.foreground#3D3530
input.background#252018
input.border#3D3530
input.foreground#D4C8B8
list.activeSelectionBackground#3D3530
list.hoverBackground#2A2520
panel.background#181512
panel.border#3D3530
scrollbarSlider.background#5C534A66
scrollbarSlider.hoverBackground#7A6F6388
sideBar.background#181512
sideBar.foreground#A89888
statusBar.background#141210
statusBar.foreground#A89888
tab.activeBackground#1E1A16
tab.activeForeground#D4C8B8
tab.inactiveBackground#181512
tab.inactiveForeground#7A6F63
titleBar.activeBackground#181512
titleBar.activeForeground#D4C8B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A6F63	italic
string, string.quoted	#A8B88A	—
constant.numeric, constant.language	#D4A574	—
keyword, storage.type, storage.modifier	#C4A882	—
entity.name.function, support.function	#8AA8B8	—
entity.name.type, entity.name.class, support.type, support.class	#B8A8C4	—
variable, variable.other	#C4B8A8	—
variable.parameter	#A89888	—
entity.name.tag	#C4A882	—
entity.other.attribute-name	#D4A574	—
punctuation, meta.brace	#8A7F74	—
invalid	#C47872	—

VS Code preview

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

Extensão do Aron — Extensão do Aron Warm Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#D9CC9E
activityBar.border#C8BA98
activityBar.foreground#5C523C
activityBar.inactiveForeground#8A7D62
activityBarBadge.background#B8A060
activityBarBadge.foreground#4A3F32
badge.background#B8A060
badge.foreground#4A3F32
breadcrumb.activeSelectionForeground#6E5E3E
breadcrumb.focusForeground#4A3F32
breadcrumb.foreground#8A7D62
breadcrumbPicker.background#DFD2A8
button.background#B8A060
button.foreground#4A3F32
button.hoverBackground#A89450
button.secondaryBackground#DACEA2
button.secondaryForeground#4A3F32
button.secondaryHoverBackground#CFC08E
descriptionForeground#8A7D62
diffEditor.insertedLineBackground#6B734833
diffEditor.insertedTextBackground#6B734822
diffEditor.removedLineBackground#A0584833
diffEditor.removedTextBackground#A0584822
dropdown.background#DACEA2
dropdown.border#B8AA82
dropdown.foreground#4A3F32
editor.background#E5D9B4
editor.findMatchBackground#CFC08EAA
editor.findMatchHighlightBackground#DACEA288
editor.foreground#4A3F32
editor.hoverHighlightBackground#DACEA266
editor.inactiveSelectionBackground#DACEA2
editor.lineHighlightBackground#DDD0A4
editor.lineHighlightBorder#C8BA9866
editor.selectionBackground#D4C896
editor.selectionHighlightBackground#CFC08E88
editor.wordHighlightBackground#DACEA266
editor.wordHighlightStrongBackground#CFC08E88
editorBracketMatch.background#CFC08E88
editorBracketMatch.border#B8A060
editorCursor.foreground#6E5E3E
editorError.foreground#A05848
editorGroup.border#C8BA98
editorGroupHeader.noTabsBackground#DFD2A8
editorGroupHeader.tabsBackground#DACEA2
editorGutter.addedBackground#6B7348
editorGutter.background#E5D9B4
editorGutter.deletedBackground#A05848
editorGutter.modifiedBackground#B8A060
editorHoverWidget.background#DFD2A8
editorHoverWidget.border#C8BA98
editorHoverWidget.foreground#4A3F32
editorIndentGuide.activeBackground1#B8A878
editorIndentGuide.background1#CFC098
editorInfo.foreground#5A6E62
editorLineNumber.activeForeground#7A6E52
editorLineNumber.foreground#A89878
editorLink.activeForeground#8A7228
editorOverviewRuler.addedForeground#6B7348
editorOverviewRuler.border#C8BA9800
editorOverviewRuler.deletedForeground#A05848
editorOverviewRuler.modifiedForeground#B8A060
editorRuler.foreground#C8BA98
editorSuggestWidget.background#DFD2A8
editorSuggestWidget.border#C8BA98
editorSuggestWidget.foreground#4A3F32
editorSuggestWidget.highlightForeground#8A7228
editorSuggestWidget.selectedBackground#CFC08E
editorWarning.foreground#9A7848
editorWhitespace.foreground#C8BA9866
editorWidget.background#DFD2A8
editorWidget.border#C8BA98
editorWidget.foreground#4A3F32
errorForeground#A05848
focusBorder#B8A06088
foreground#4A3F32
gitDecoration.conflictingResourceForeground#8A7228
gitDecoration.deletedResourceForeground#A05848
gitDecoration.ignoredResourceForeground#A89878
gitDecoration.modifiedResourceForeground#9A7848
gitDecoration.untrackedResourceForeground#6B7348
icon.foreground#7A6E52
input.background#DACEA2
input.border#B8AA82
input.foreground#4A3F32
input.placeholderForeground#8A7D62
inputOption.activeBorder#B8A060
list.activeSelectionBackground#CFC08E
list.activeSelectionForeground#4A3F32
list.errorForeground#A05848
list.focusBackground#CFC08E
list.highlightForeground#8A7228
list.hoverBackground#D8CC9E
list.inactiveSelectionBackground#DACEA2
list.warningForeground#9A7848
menu.background#DFD2A8
menu.border#C8BA98
menu.foreground#4A3F32
menu.selectionBackground#CFC08E
menu.selectionForeground#4A3F32
menubar.selectionBackground#CFC08E88
menubar.selectionForeground#4A3F32
merge.commonHeaderBackground#CFC08E44
merge.currentHeaderBackground#6B734844
merge.incomingHeaderBackground#5A6E7244
mergeEditor.change.background#CFC08E33
minimap.background#DFD2A8
minimap.errorHighlight#A05848
minimap.findMatchHighlight#B8A060AA
minimap.selectionHighlight#CFC08EAA
minimap.warningHighlight#9A7848
notificationCenter.border#C8BA98
notificationCenterHeader.background#D9CC9E
notificationCenterHeader.foreground#4A3F32
notificationLink.foreground#8A7228
notifications.background#DFD2A8
notifications.border#C8BA98
notifications.foreground#4A3F32
panel.background#E0D4AC
panel.border#C8BA98
panelSection.border#C8BA98
panelTitle.activeForeground#4A3F32
panelTitle.inactiveForeground#8A7D62
peekView.border#B8A060
peekViewEditor.background#E0D4AC
peekViewEditor.matchHighlightBackground#CFC08EAA
peekViewResult.background#DFD2A8
peekViewResult.selectionBackground#CFC08E
peekViewTitle.background#D9CC9E
peekViewTitleDescription.foreground#8A7D62
peekViewTitleLabel.foreground#4A3F32
pickerGroup.border#C8BA98
pickerGroup.foreground#8A7228
quickInput.background#DFD2A8
quickInput.foreground#4A3F32
quickInputTitle.background#D9CC9E
scrollbar.shadow#4A3F3210
scrollbarSlider.activeBackground#8A7D6299
scrollbarSlider.background#B8A87855
scrollbarSlider.hoverBackground#A8986877
selection.background#CFC08E99
settings.checkboxBackground#DACEA2
settings.checkboxForeground#4A3F32
settings.dropdownBackground#DACEA2
settings.dropdownForeground#4A3F32
settings.headerForeground#4A3F32
settings.modifiedItemIndicator#B8A060
settings.textInputBackground#DACEA2
settings.textInputForeground#4A3F32
sideBar.background#DFD2A8
sideBar.border#C8BA98
sideBar.foreground#5C523C
sideBarSectionHeader.background#D9CC9E
sideBarSectionHeader.border#C8BA98
sideBarSectionHeader.foreground#6E5E3E
sideBarTitle.foreground#4A3F32
statusBar.background#D9CC9E
statusBar.border#C8BA98
statusBar.debuggingBackground#B8A060
statusBar.foreground#5C523C
statusBar.noFolderBackground#D9CC9E
statusBarItem.hoverBackground#CFC08E88
tab.activeBackground#E5D9B4
tab.activeBorder#B8A060
tab.activeBorderTop#B8A060
tab.activeForeground#4A3F32
tab.border#C8BA98
tab.hoverBackground#DDD0A4
tab.inactiveBackground#DACEA2
tab.inactiveForeground#8A7D62
terminal.ansiBlack#4A3F32
terminal.ansiBlue#5A6E72
terminal.ansiBrightBlack#8A7D62
terminal.ansiBrightBlue#6A7E82
terminal.ansiBrightCyan#7E8A72
terminal.ansiBrightGreen#7B8358
terminal.ansiBrightMagenta#8A7858
terminal.ansiBrightRed#B06858
terminal.ansiBrightWhite#F0E6C8
terminal.ansiBrightYellow#B08858
terminal.ansiCyan#6E7A62
terminal.ansiGreen#6B7348
terminal.ansiMagenta#7A6848
terminal.ansiRed#A05848
terminal.ansiWhite#E5D9B4
terminal.ansiYellow#9A7848
terminal.background#DFD2A8
terminal.foreground#4A3F32
textLink.activeForeground#6E5E3E
textLink.foreground#8A7228
titleBar.activeBackground#DFD2A8
titleBar.activeForeground#4A3F32
titleBar.border#C8BA98
titleBar.inactiveBackground#DACEA2
titleBar.inactiveForeground#8A7D62
widget.shadow#4A3F3220

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8C7D62	italic
string, string.quoted, string.template	#6B7348	—
constant.numeric, constant.language, constant.character	#9A7848	—
constant.other, support.constant	#94704A	—
keyword, storage.type, storage.modifier, keyword.control	#8A7228	bold
entity.name.function, support.function, meta.function-call	#5A6E62	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.type, support.class	#7A6848	—
entity.name.namespace, entity.name.module	#7A6848	—
variable, variable.other, meta.definition.variable	#524838	—
variable.parameter, meta.parameter	#6E6450	—
variable.language, variable.other.constant	#94704A	—
entity.name.tag, meta.tag	#8A7228	—
entity.other.attribute-name	#9A7848	—
punctuation, meta.brace, punctuation.separator	#7A6E52	—
keyword.operator, punctuation.accessor	#8A7D62	—
string.regexp	#94704A	—
markup.heading, markup.bold	#6E5E3E	bold
markup.italic	#6E6450	italic
markup.quote	#8C7D62	italic
markup.raw, markup.inline.raw	#6B7348	—
markup.underline.link	#8A7228	—
support.property, meta.property-name	#9A7848	—
invalid, invalid.illegal	#A05848	—
invalid.deprecated	#9A7848	strikethrough

VS Code preview

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

Extensão do Aron — Extensão do Aron Warm Light Night

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#B8AA82
breadcrumb.foreground#A89878
dropdown.background#B8AA82
editor.background#C9BB98
editor.foreground#D4C8AE
editor.lineHighlightBackground#BFB092
editor.selectionBackground#B8AA7888
editorCursor.foreground#E5D9B4
editorLineNumber.activeForeground#B8AA88
editorLineNumber.foreground#8A7D62
editorWidget.background#C0B28E
focusBorder#A8945088
foreground#D4C8AE
input.background#B8AA82
input.foreground#F0E6CC
list.activeSelectionBackground#A89868
list.hoverBackground#B8AA78
menu.background#C0B28E
panel.background#BFB092
panel.border#A89878
quickInput.background#C0B28E
sideBar.background#C0B28E
sideBar.foreground#DACEAE
statusBar.background#B8AA82
statusBar.foreground#E8DCC0
tab.activeBackground#C9BB98
tab.activeForeground#F0E6CC
tab.inactiveBackground#BFB092
tab.inactiveForeground#A89878
terminal.background#C0B28E
terminal.foreground#E8DCC0
titleBar.activeBackground#C0B28E
titleBar.activeForeground#E8DCC0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#9A8E72	italic
string	#8A9870	—
keyword	#C4AA68	—
entity.name.function, support.function	#88A090	—
entity.name.type, support.type	#A89070	—
variable	#DACEAE	—
constant.numeric	#C4A070	—