MonoLisa for VS Code

Name: MonoLisa for VS Code
Author: MonoLisa

Publisher: MonoLisaThemes in package: 4

Preview MonoLisa, get the Trial, apply editor presets, and use MonoLisa website color themes.

Open in VS Code

Color themes

VS Code preview

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

MonoLisa for VS Code — MonoLisa 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#122a40
activityBar.foreground#cce5ff
activityBarBadge.background#e8c44a
activityBarBadge.foreground#122a40
badge.background#82b8ff
badge.foreground#122a40
button.background#e8c44a
button.foreground#122a40
button.hoverBackground#82b8ff
dropdown.background#122a40
dropdown.border#5c7a9c6b
editor.background#122a40
editor.findMatchBackground#e8c44a61
editor.findMatchHighlightBackground#82b8ff38
editor.foreground#cce5ff
editor.inactiveSelectionBackground#82b8ff2e
editor.lineHighlightBackground#cce5ff0f
editor.selectionBackground#82b8ff52
editorCursor.foreground#e8c44a
editorIndentGuide.activeBackground1#82b8ff6b
editorIndentGuide.background1#5c7a9c33
editorLineNumber.activeForeground#cce5ff
editorLineNumber.foreground#5c7a9c
editorWidget.background#122a40
editorWidget.border#5c7a9c6b
focusBorder#e8c44a
input.background#122a40
input.border#5c7a9c6b
input.foreground#cce5ff
list.activeSelectionBackground#82b8ff52
list.activeSelectionForeground#cce5ff
list.hoverBackground#82b8ff2e
panel.background#122a40
panel.border#5c7a9c6b
sideBar.background#122a40
sideBar.border#5c7a9c6b
sideBar.foreground#cce5ff
sideBarTitle.foreground#cce5ff
statusBar.background#e8c44a
statusBar.foreground#122a40
statusBar.noFolderBackground#82b8ff
tab.activeBackground#122a40
tab.activeForeground#cce5ff
tab.border#5c7a9c6b
tab.inactiveBackground#5c7a9c59
tab.inactiveForeground#5c7a9c
terminal.ansiBlack#122a40
terminal.ansiBlue#82b8ff
terminal.ansiBrightBlack#5c7a9c
terminal.ansiBrightBlue#fff6e6
terminal.ansiBrightCyan#6eb8d4
terminal.ansiBrightGreen#b8d4a0
terminal.ansiBrightMagenta#e8c44a
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#cce5ff
terminal.ansiBrightYellow#e18d5f
terminal.ansiCyan#6eb8d4
terminal.ansiGreen#b8d4a0
terminal.ansiMagenta#e8c44a
terminal.ansiRed#cd3131
terminal.ansiWhite#cce5ff
terminal.ansiYellow#e18d5f
terminal.background#122a40
terminal.foreground#cce5ff
titleBar.activeBackground#122a40
titleBar.activeForeground#cce5ff
titleBar.border#5c7a9c6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#cce5ff	—
comment, punctuation.definition.comment	#5c7a9c	italic
keyword, storage, storage.type	#e8c44a	italic bold
constant.numeric, constant.language, support.constant	#e18d5f	—
string, constant.other.symbol	#b8d4a0	—
variable, variable.other, support.variable	#e2cb7a	—
entity.name.function, support.function	#fff6e6	—
entity.name.type, support.class, entity.name.class	#82b8ff	—
entity.name.tag, punctuation.definition.tag	#e18d5f	—
entity.other.attribute-name	#82b8ff	—
variable.other.property, support.type.property-name	#6eb8d4	—
keyword.operator, punctuation, meta.brace	#c8a87a	—
meta, meta.object-literal.key	#9ab8d4	—

VS Code preview

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

MonoLisa for VS Code — MonoLisa Dawn

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#dce7f0
activityBar.foreground#1f3447
activityBarBadge.background#7b5700
activityBarBadge.foreground#dce7f0
badge.background#245d94
badge.foreground#dce7f0
button.background#7b5700
button.foreground#dce7f0
button.hoverBackground#245d94
dropdown.background#ffffff
dropdown.border#485f725c
editor.background#dce7f0
editor.findMatchBackground#7b570061
editor.findMatchHighlightBackground#245d9438
editor.foreground#1f3447
editor.inactiveSelectionBackground#245d9424
editor.lineHighlightBackground#1f344714
editor.selectionBackground#245d943d
editorCursor.foreground#7b5700
editorIndentGuide.activeBackground1#245d946b
editorIndentGuide.background1#485f7233
editorLineNumber.activeForeground#1f3447
editorLineNumber.foreground#485f72
editorWidget.background#ffffff
editorWidget.border#485f725c
focusBorder#7b5700
input.background#ffffff
input.border#485f725c
input.foreground#1f3447
list.activeSelectionBackground#245d943d
list.activeSelectionForeground#1f3447
list.hoverBackground#245d9424
panel.background#dce7f0
panel.border#485f725c
sideBar.background#c8d7e3
sideBar.border#485f725c
sideBar.foreground#1f3447
sideBarTitle.foreground#1f3447
statusBar.background#7b5700
statusBar.foreground#dce7f0
statusBar.noFolderBackground#245d94
tab.activeBackground#dce7f0
tab.activeForeground#1f3447
tab.border#485f725c
tab.inactiveBackground#c8d7e3
tab.inactiveForeground#485f72
terminal.ansiBlack#dce7f0
terminal.ansiBlue#245d94
terminal.ansiBrightBlack#485f72
terminal.ansiBrightBlue#344f6a
terminal.ansiBrightCyan#17666a
terminal.ansiBrightGreen#35692f
terminal.ansiBrightMagenta#7b5700
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#1f3447
terminal.ansiBrightYellow#9a3f22
terminal.ansiCyan#17666a
terminal.ansiGreen#35692f
terminal.ansiMagenta#7b5700
terminal.ansiRed#cd3131
terminal.ansiWhite#1f3447
terminal.ansiYellow#9a3f22
terminal.background#dce7f0
terminal.foreground#1f3447
titleBar.activeBackground#dce7f0
titleBar.activeForeground#1f3447
titleBar.border#485f725c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#1f3447	—
comment, punctuation.definition.comment	#485f72	italic
keyword, storage, storage.type	#7b5700	italic bold
constant.numeric, constant.language, support.constant	#9a3f22	—
string, constant.other.symbol	#35692f	—
variable, variable.other, support.variable	#6f5b20	—
entity.name.function, support.function	#344f6a	—
entity.name.type, support.class, entity.name.class	#245d94	—
entity.name.tag, punctuation.definition.tag	#914526	—
entity.other.attribute-name	#245d94	—
variable.other.property, support.type.property-name	#17666a	—
keyword.operator, punctuation, meta.brace	#68533b	—
meta, meta.object-literal.key	#3f607d	—

VS Code preview

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

MonoLisa for VS Code — MonoLisa Dusk

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#26394b
activityBar.foreground#e1edf7
activityBarBadge.background#f0c94c
activityBarBadge.foreground#26394b
badge.background#8fc1ff
badge.foreground#26394b
button.background#f0c94c
button.foreground#26394b
button.hoverBackground#8fc1ff
dropdown.background#26394b
dropdown.border#8fa6ba6b
editor.background#26394b
editor.findMatchBackground#f0c94c61
editor.findMatchHighlightBackground#8fc1ff38
editor.foreground#e1edf7
editor.inactiveSelectionBackground#8fc1ff2e
editor.lineHighlightBackground#e1edf70f
editor.selectionBackground#8fc1ff52
editorCursor.foreground#f0c94c
editorIndentGuide.activeBackground1#8fc1ff6b
editorIndentGuide.background1#8fa6ba33
editorLineNumber.activeForeground#e1edf7
editorLineNumber.foreground#8fa6ba
editorWidget.background#26394b
editorWidget.border#8fa6ba6b
focusBorder#f0c94c
input.background#26394b
input.border#8fa6ba6b
input.foreground#e1edf7
list.activeSelectionBackground#8fc1ff52
list.activeSelectionForeground#e1edf7
list.hoverBackground#8fc1ff2e
panel.background#26394b
panel.border#8fa6ba6b
sideBar.background#26394b
sideBar.border#8fa6ba6b
sideBar.foreground#e1edf7
sideBarTitle.foreground#e1edf7
statusBar.background#f0c94c
statusBar.foreground#26394b
statusBar.noFolderBackground#8fc1ff
tab.activeBackground#26394b
tab.activeForeground#e1edf7
tab.border#8fa6ba6b
tab.inactiveBackground#8fa6ba59
tab.inactiveForeground#8fa6ba
terminal.ansiBlack#26394b
terminal.ansiBlue#8fc1ff
terminal.ansiBrightBlack#8fa6ba
terminal.ansiBrightBlue#f5ecdc
terminal.ansiBrightCyan#79c6d6
terminal.ansiBrightGreen#aed69b
terminal.ansiBrightMagenta#f0c94c
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e1edf7
terminal.ansiBrightYellow#ef9a70
terminal.ansiCyan#79c6d6
terminal.ansiGreen#aed69b
terminal.ansiMagenta#f0c94c
terminal.ansiRed#cd3131
terminal.ansiWhite#e1edf7
terminal.ansiYellow#ef9a70
terminal.background#26394b
terminal.foreground#e1edf7
titleBar.activeBackground#26394b
titleBar.activeForeground#e1edf7
titleBar.border#8fa6ba6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#e1edf7	—
comment, punctuation.definition.comment	#8fa6ba	italic
keyword, storage, storage.type	#f0c94c	italic bold
constant.numeric, constant.language, support.constant	#ef9a70	—
string, constant.other.symbol	#aed69b	—
variable, variable.other, support.variable	#e2cd82	—
entity.name.function, support.function	#f5ecdc	—
entity.name.type, support.class, entity.name.class	#8fc1ff	—
entity.name.tag, punctuation.definition.tag	#ef9970	—
entity.other.attribute-name	#8fc1ff	—
variable.other.property, support.type.property-name	#79c6d6	—
keyword.operator, punctuation, meta.brace	#cfad83	—
meta, meta.object-literal.key	#adc5d9	—

VS Code preview

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

MonoLisa for VS Code — MonoLisa 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#f0f4f8
activityBar.foreground#1a2e42
activityBarBadge.background#b8900b
activityBarBadge.foreground#f0f4f8
badge.background#2968a8
badge.foreground#f0f4f8
button.background#b8900b
button.foreground#f0f4f8
button.hoverBackground#2968a8
dropdown.background#ffffff
dropdown.border#8499ad5c
editor.background#f0f4f8
editor.findMatchBackground#b8900b61
editor.findMatchHighlightBackground#2968a838
editor.foreground#1a2e42
editor.inactiveSelectionBackground#2968a824
editor.lineHighlightBackground#1a2e4214
editor.selectionBackground#2968a83d
editorCursor.foreground#b8900b
editorIndentGuide.activeBackground1#2968a86b
editorIndentGuide.background1#8499ad33
editorLineNumber.activeForeground#1a2e42
editorLineNumber.foreground#8499ad
editorWidget.background#ffffff
editorWidget.border#8499ad5c
focusBorder#b8900b
input.background#ffffff
input.border#8499ad5c
input.foreground#1a2e42
list.activeSelectionBackground#2968a83d
list.activeSelectionForeground#1a2e42
list.hoverBackground#2968a824
panel.background#f0f4f8
panel.border#8499ad5c
sideBar.background#dce4ed
sideBar.border#8499ad5c
sideBar.foreground#1a2e42
sideBarTitle.foreground#1a2e42
statusBar.background#b8900b
statusBar.foreground#f0f4f8
statusBar.noFolderBackground#2968a8
tab.activeBackground#f0f4f8
tab.activeForeground#1a2e42
tab.border#8499ad5c
tab.inactiveBackground#dce4ed
tab.inactiveForeground#8499ad
terminal.ansiBlack#f0f4f8
terminal.ansiBlue#2968a8
terminal.ansiBrightBlack#8499ad
terminal.ansiBrightBlue#2a4460
terminal.ansiBrightCyan#1a7a7a
terminal.ansiBrightGreen#4a7a3a
terminal.ansiBrightMagenta#b8900b
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#1a2e42
terminal.ansiBrightYellow#b84c24
terminal.ansiCyan#1a7a7a
terminal.ansiGreen#4a7a3a
terminal.ansiMagenta#b8900b
terminal.ansiRed#cd3131
terminal.ansiWhite#1a2e42
terminal.ansiYellow#b84c24
terminal.background#f0f4f8
terminal.foreground#1a2e42
titleBar.activeBackground#f0f4f8
titleBar.activeForeground#1a2e42
titleBar.border#8499ad5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#1a2e42	—
comment, punctuation.definition.comment	#8499ad	italic
keyword, storage, storage.type	#b8900b	italic bold
constant.numeric, constant.language, support.constant	#b84c24	—
string, constant.other.symbol	#4a7a3a	—
variable, variable.other, support.variable	#b8900b	—
entity.name.function, support.function	#2a4460	—
entity.name.type, support.class, entity.name.class	#2968a8	—
entity.name.tag, punctuation.definition.tag	#b45025	—
entity.other.attribute-name	#2968a8	—
variable.other.property, support.type.property-name	#1a7a7a	—
keyword.operator, punctuation, meta.brace	#7a6840	—
meta, meta.object-literal.key	#5a7898	—