Monokai Plus Ultra

Name: Monokai Plus Ultra
Author: k3v5

Publisher: k3v5Themes in package: 8

Themes

Open in VS Code

Color themes

VS Code preview

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

Monokai Plus Ultra — Monokai Plus

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#272822
activityBar.foreground#f8f8f2
badge.background#75715e
badge.foreground#f8f8f2
button.background#75715e
debugToolBar.background#1e1f1c
diffEditor.insertedTextBackground#4b661680
diffEditor.removedTextBackground#90274a70
dropdown.background#414339
dropdown.listBackground#1e1f1c
editor.background#272822
editor.foreground#f8f8f2
editor.lineHighlightBackground#3e3d32
editor.selectionBackground#878b9180
editor.selectionHighlightBackground#575b6180
editor.wordHighlightBackground#4a4a7680
editor.wordHighlightStrongBackground#6a6a9680
editorCursor.foreground#f8f8f0
editorGroup.border#34352f
editorGroup.dropBackground#41433980
editorGroupHeader.tabsBackground#1e1f1c
editorHoverWidget.background#414339
editorHoverWidget.border#75715e
editorLineNumber.activeForeground#c2c2bf
editorLineNumber.foreground#90908a
editorSuggestWidget.background#272822
editorSuggestWidget.border#75715e
editorWhitespace.foreground#464741
editorWidget.background#1e1f1c
focusBorder#99947c
input.background#414339
inputOption.activeBorder#75715e
inputValidation.errorBackground#90274a
inputValidation.errorBorder#f92672
inputValidation.infoBackground#546190
inputValidation.infoBorder#819aff
inputValidation.warningBackground#848528
inputValidation.warningBorder#e2e22e
list.activeSelectionBackground#75715e
list.dropBackground#414339
list.highlightForeground#f8f8f2
list.hoverBackground#3e3d32
list.inactiveSelectionBackground#414339
menu.background#1e1f1c
menu.foreground#cccccc
minimap.selectionHighlight#878b9180
panel.border#414339
panelTitle.activeBorder#75715e
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#75715e
peekView.border#75715e
peekViewEditor.background#272822
peekViewEditor.matchHighlightBackground#75715e
peekViewResult.background#1e1f1c
peekViewResult.matchHighlightBackground#75715e
peekViewResult.selectionBackground#414339
peekViewTitle.background#1e1f1c
pickerGroup.foreground#75715e
ports.iconRunningProcessForeground#ccccc7
progressBar.background#75715e
quickInputList.focusBackground#414339
selection.background#878b9180
settings.focusedRowBackground#4143395a
sideBar.background#1e1f1c
sideBarSectionHeader.background#272822
statusBar.background#414339
statusBar.debuggingBackground#75715e
statusBar.noFolderBackground#414339
statusBarItem.remoteBackground#ac6218
tab.border#1e1f1c
tab.inactiveBackground#34352f
tab.inactiveForeground#ccccc7
tab.lastPinnedBorder#414339
terminal.ansiBlack#333333
terminal.ansiBlue#6a7ec8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#819aff
terminal.ansiBrightCyan#66d9ef
terminal.ansiBrightGreen#52f97a
terminal.ansiBrightMagenta#a992f0
terminal.ansiBrightRed#f92672
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#e2e22e
terminal.ansiCyan#56adbc
terminal.ansiGreen#86b42b
terminal.ansiMagenta#8c6bc8
terminal.ansiRed#c4265e
terminal.ansiWhite#e3e3dd
terminal.ansiYellow#b3b42b
titleBar.activeBackground#1e1f1c
widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#F8F8F2	—
comment	#88846F	—
string	#FFC324	—
punctuation.definition.template-expression, punctuation.section.embedded	#F92672	—
meta.template.expression	#F8F8F2	—
constant.numeric	#a992f0	—
constant.language	#a992f0	—
constant.character, constant.other	#a992f0	—
variable	#F8F8F2
keyword	#F92672	—
storage	#F92672
storage.type	#66D9EF	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#52f97a	underline bold
entity.other.inherited-class, punctuation.separator.namespace.ruby	#52f97a	italic underline bold
entity.name.function	#52f97a	bold
entity.name.tag	#F92672	bold
entity.other.attribute-name	#52f97a	underline
support.function	#66D9EF	bold
support.constant	#66D9EF	bold
support.type, support.class	#66D9EF	italic bold
storage.type	#66D9EF	italic bold
keyword	#F92672	bold
storage	#F92672	bold
storage.type	#66D9EF	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#52f97a	underline
entity.other.inherited-class, punctuation.separator.namespace.ruby	#52f97a	italic underline
entity.name.function	#52f97a
variable.parameter	#FF9E00	italic
variable.other.readwrite	#FFFFFF
variable.other.object	#FF9E00
entity.name.tag	#F92672
entity.other.attribute-name	#52f97a
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
support.other.variable	—
invalid	#F44747
invalid.deprecated	#F44747	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#52f97a	—
markup.changed	#FFC324	—
constant.numeric.line-number.find-in-files - match	#a992f0A0	—
entity.name.filename.find-in-files	#FFC324	—
markup.quote	#F92672	—
markup.list	#FFC324	—
markup.bold, markup.italic	#66D9EF	—
markup.inline.raw	#FF9E00
markup.heading	#52f97a	bold
markup.heading.setext	#52f97a	bold underline
markup.heading.markdown	—	bold underline
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.bold, markup.italic	#66D9EF	bold italic
markup.inline.raw	#FF9E00
markup.heading	#52f97a	—
markup.heading.setext	#52f97a	bold
markup.heading.markdown	—	bold
markup.quote.markdown	#75715E	italic
markup.bold.markdown	—	bold
string.other.link.title.markdown,string.other.link.description.markdown	#a992f0	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#FFC324	—
markup.italic.markdown	—	italic
markup.strikethrough	—	strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#F8F8F2	—
punctuation.definition.list.begin.markdown	#52f97a	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
variable.language	#FF9E00	—

VS Code preview

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

Monokai Plus Ultra — Monokai Plus Ultra

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#F8F8F2
comment	#88846F	italic
string	#89e8f8
string punctuation.definition.string	#89e8f8	bold
constant.numeric	#52f97a
constant.language	#52f97a	bold
constant.character, constant.other	#52f97a
variable	#F8F8F2
variable.language	#FFC324	italic
keyword	#F92672	bold
keyword.operator	#F92672
storage	#F92672
storage.type	#66D9EF	italic
entity.name.type, entity.name.class	#a992f0	underline
entity.name.namespace	#a992f0	italic underline
entity.other.inherited-class	#a992f0	italic underline
entity.name.function	#a992f0
meta.function entity.name.function	#a992f0	bold
variable.parameter	#FFC324	italic
variable.other.object, variable.other.object.ts, variable.other.property.ts	#FFC324
variable.other.object.property, variable.other.property	#FFFFFF
entity.name.tag	#F92672	bold
entity.other.attribute-name	#a992f0
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
invalid	#F44747	underline wavy
invalid.deprecated	#F44747	strikethrough
markup.heading	#a992f0	bold
markup.bold	#F8F8F2	bold
markup.italic	#F8F8F2	italic
markup.raw.inline	#FFC324
markup.underline.link	#89e8f8	underline
entity.other.attribute-name.html	#a992f0	italic
support.type.property-name.css	#66D9EF
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2
meta.structure.dictionary.json meta.structure.dictionary.value	#89e8f8

VS Code preview

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

Monokai Plus Ultra — Monokai Plus Ultra alternated

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.

button.background#a992f0
button.foreground#FFFFFF
button.hoverBackground#b8a4f3
descriptionForeground#A1A1AA
disabledForeground#6B6B6B
errorForeground#F92672
focusBorder#FFC324
foreground#E1E1E6
input.background#252525
input.border#383838
input.foreground#E1E1E6
inputOption.activeBorder#a992f0
inputValidation.errorBackground#5C1D1D
inputValidation.errorBorder#F92672
inputValidation.infoBackground#1D3B5C
inputValidation.infoBorder#66D9EF
inputValidation.warningBackground#5C4A1D
inputValidation.warningBorder#FFC324
selection.background#52525B
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6A6A6A	italic
string	#52f97a	—
keyword	#F92672	bold
entity.name.function, support.function	#52f97a	—
variable, variable.parameter	#E1E1E6	—
constant.numeric	#a992f0	—
entity.name.type	#66D9EF	—

VS Code preview

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

Monokai Plus Ultra — Monokai Plus Ultra gray

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#25282d
activityBar.foreground#d4d4d4
badge.background#4a4a45
badge.foreground#d4d4d4
button.background#4a4a45
debugToolBar.background#1e1e1e
diffEditor.insertedTextBackground#3d4a2e60
diffEditor.removedTextBackground#4a2a3550
dropdown.background#373737
dropdown.listBackground#1e1e1e
editor.background#25282d
editor.foreground#d4d4d4
editor.lineHighlightBackground#323232
editor.selectionBackground#5a5d6350
editor.selectionHighlightBackground#45484d50
editor.wordHighlightBackground#3d3d5550
editor.wordHighlightStrongBackground#4d4d6550
editorCursor.foreground#d4d4d4
editorGroup.border#3a3a3a
editorGroup.dropBackground#37373750
editorGroupHeader.tabsBackground#1e1e1e
editorHoverWidget.background#373737
editorHoverWidget.border#4a4a45
editorLineNumber.activeForeground#9a9a9a
editorLineNumber.foreground#6a6a6a
editorSuggestWidget.background#25282d
editorSuggestWidget.border#4a4a45
editorWhitespace.foreground#3a3a3a
editorWidget.background#1e1e1e
focusBorder#6a6a60
input.background#373737
inputOption.activeBorder#4a4a45
inputValidation.errorBackground#4a2a35
inputValidation.errorBorder#b54d6d
inputValidation.infoBackground#3d455a
inputValidation.infoBorder#6d7d9d
inputValidation.warningBackground#5a5a2a
inputValidation.warningBorder#9d9d4d
list.activeSelectionBackground#4a4a45
list.dropBackground#373737
list.highlightForeground#d4d4d4
list.hoverBackground#323232
list.inactiveSelectionBackground#373737
menu.background#1e1e1e
menu.foreground#b0b0b0
minimap.selectionHighlight#5a5d6350
panel.border#373737
panelTitle.activeBorder#4a4a45
panelTitle.activeForeground#d4d4d4
panelTitle.inactiveForeground#4a4a45
peekView.border#4a4a45
peekViewEditor.background#25282d
peekViewEditor.matchHighlightBackground#4a4a45
peekViewResult.background#1e1e1e
peekViewResult.matchHighlightBackground#4a4a45
peekViewResult.selectionBackground#373737
peekViewTitle.background#1e1e1e
pickerGroup.foreground#4a4a45
ports.iconRunningProcessForeground#b0b0b0
progressBar.background#4a4a45
quickInputList.focusBackground#373737
selection.background#5a5d6350
settings.focusedRowBackground#3737375a
sideBar.background#1e1e1e
sideBarSectionHeader.background#25282d
statusBar.background#373737
statusBar.debuggingBackground#4a4a45
statusBar.noFolderBackground#373737
statusBarItem.remoteBackground#6d4a2a
tab.border#1e1e1e
tab.inactiveBackground#2a2a2a
tab.inactiveForeground#b0b0b0
tab.lastPinnedBorder#373737
terminal.ansiBlack#2a2a2a
terminal.ansiBlue#5d6d8d
terminal.ansiBrightBlack#555555
terminal.ansiBrightBlue#6d7d9d
terminal.ansiBrightCyan#6db9cf
terminal.ansiBrightGreen#9a8dc0
terminal.ansiBrightMagenta#5dc77a
terminal.ansiBrightRed#b54d6d
terminal.ansiBrightWhite#d4d4d4
terminal.ansiBrightYellow#c9c94d
terminal.ansiCyan#4d9daf
terminal.ansiGreen#6d8d3a
terminal.ansiMagenta#7d5d9d
terminal.ansiRed#9d3a5d
terminal.ansiWhite#c4c4c4
terminal.ansiYellow#9d9d3a
titleBar.activeBackground#1e1e1e
widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4	—
comment	#6a6a60	—
string	#79b8c8	—
punctuation.definition.template-expression, punctuation.section.embedded	#B54D6D	—
constant.numeric	#5DC77A	—
constant.language	#5DC77A	—
constant.character, constant.other	#5DC77A	—
variable	#D4D4D4	—
keyword	#B54D6D	—
storage	#B54D6D	—
storage.type	#6DB9CF	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#9A8DC0	underline
entity.other.inherited-class, punctuation.separator.namespace.ruby	#9A8DC0	italic underline
entity.name.function	#9A8DC0	—
variable.parameter	#D8B04D	italic
variable.other.object.ts, variable.other.property.ts, variable.other.object	#D8B04D
variable.other.object.property.ts, variable.other.object.property.ts, variable.other.object	#C4C4C4
variable.other.property.ts, variable.other.property	#C4C4C4
markup.inline.raw	#D8B04D
entity.name.tag	#B54D6D	—
entity.other.attribute-name	#9A8DC0	—
support.function	#6DB9CF	—
support.constant	#6DB9CF	—
support.type, support.class	#6DB9CF	italic
invalid	#C44D4D	—
invalid.deprecated	#C44D4D	—
meta.structure.dictionary.json string.quoted.double.json	#B0B0B0	—
meta.diff, meta.diff.header	#4a4a45	—
markup.deleted	#B54D6D	—
markup.inserted	#9A8DC0	—
markup.changed	#79B8C8	—
markup.quote.markdown	#4a4a45	italic
markup.bold.markdown	—	bold
string.other.link.title.markdown,string.other.link.description.markdown	#5DC77A	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#79B8C8	—
markup.italic.markdown	—	italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#D4D4D4	—
variable.language	#D8B04D	—
token.info-token	#5D8DCF	—
token.warn-token	#B08D3A	—
token.error-token	#C44D4D	—
token.debug-token	#9D5DCF	—