Mariana by Ryan

Name: Mariana by Ryan
Author: Ryan Olson

Publisher: Ryan OlsonThemes in package: 7

Port of the default Sublime Text 4 theme

Open in VS Code GitHub

Color themes

VS Code preview

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

Mariana by Ryan — Mariana

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#1c2228
activityBarBadge.background#99c794
activityBarBadge.foreground#1c2228
badge.background#99c794
badge.foreground#1c2228
button.background#393e42
button.foreground#ffffff
dropdown.background#393e42
dropdown.foreground#ffffff
editor.background#303841
editor.foreground#d8dee9
editor.lineHighlightBackground#59667399
editor.selectionBackground#59667399
editor.selectionHighlightBorder#647382
editorBracketHighlight.foreground1#f9ae58
editorBracketHighlight.foreground2#c695c6
editorBracketHighlight.foreground3#5fb4b4
editorBracketMatch.background#f9ae5800
editorBracketMatch.border#f9ae58
editorCursor.foreground#f9ae58
editorGroup.emptyBackground#1c2228
editorGroupHeader.tabsBackground#1c2228
editorGutter.addedBackground#99c794
editorGutter.deletedBackground#ec5f66
editorGutter.modifiedBackground#f9ae58
editorIndentGuide.activeBackground1#47515b
editorIndentGuide.activeBackground2#47515b
editorIndentGuide.activeBackground3#47515b
editorIndentGuide.activeBackground4#47515b
editorIndentGuide.activeBackground5#47515b
editorIndentGuide.activeBackground6#47515b
editorIndentGuide.background1#47515b99
editorIndentGuide.background2#47515b99
editorIndentGuide.background3#47515b99
editorIndentGuide.background4#47515b99
editorIndentGuide.background5#47515b99
editorIndentGuide.background6#47515b99
editorLineNumber.foreground#828b96
editorSuggestWidget.background#39424c
editorSuggestWidget.focusHighlightForeground#ffffff
editorSuggestWidget.foreground#f7f7f7
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#616870
editorSuggestWidget.selectedForeground#f7f7f7
editorWidget.background#1c2228
focusBorder#5c99d6
input.background#393e42
input.foreground#ffffff
list.activeSelectionBackground#454a4e
list.activeSelectionForeground#ffffff
list.hoverBackground#292f35
list.inactiveSelectionBackground#454a4e
list.inactiveSelectionForeground#ffffff
progressBar.background#5c99d6
sideBar.background#1c2228
sideBarSectionHeader.background#1c2228
statusBar.background#171c22
statusBar.debuggingBackground#f9ae58
statusBar.debuggingForeground#1c2228
statusBar.foreground#c1c3c6
statusBar.noFolderBackground#c695c6
statusBar.noFolderForeground#1c2228
tab.inactiveBackground#1c2228
terminal.ansiBlack#000000
terminal.ansiBlue#6699cc
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#5c99d6
terminal.ansiBrightCyan#5fb4b4
terminal.ansiBrightGreen#99c794
terminal.ansiBrightMagenta#c695c6
terminal.ansiBrightRed#f97b58
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f9ae58
terminal.ansiCyan#5fb4b4
terminal.ansiGreen#99c794
terminal.ansiMagenta#c695c6
terminal.ansiRed#ec5f66
terminal.ansiWhite#f7f7f7
terminal.ansiYellow#f9ae58
terminal.background#303841
textLink.foreground#5c99d6
titleBar.activeBackground#1c2228
titleBar.inactiveBackground#1c2228

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a6acb9	—
string, support.type.property-name.json	#99c794	—
punctuation.definition - punctuation.definition.numeric.base	#5fb4b4	—
constant.numeric	#f9ae58	—
storage.type.numeric	#c695c6	italic
constant.language	#ec5f66	italic
constant.character, constant.other	#c695c6	—
variable.member	#ec5f66	—
keyword - keyword.operator, keyword.operator.word	#c695c6	—
keyword.control	#c695c6	—
keyword.operator	#f97b58	—
punctuation.separator, punctuation.terminator	#a6acb9	—
punctuation.section	#ffffff	—
punctuation.accessor	#a6acb9	—
punctuation.definition.annotation	#5fb4b4	—
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js	#5fb4b4	—
storage	#ec5f66	—
storage.type	#c695c6	italic
entity.name.function	#5fb4b4	—
meta.function-call entity.name.function	#6699cc	—
entity.name - (entity.name.section \| entity.name.tag \| entity.name.label)	#f9ae58	—
entity.name.type - string.entity.name.type	#f9ae58	—
entity.name.package - string.entity.name.package	#f9ae58	—
entity.other.inherited-class	#5fb4b4	italic
variable.parameter	#f9ae58	—
variable.language	#ec5f66	italic
entity.name.tag, support.class.component	#ec5f66	—
entity.other.attribute-name	#c695c6	—
variable.function, variable.annotation	#6699cc	—
support.function, support.macro	#6699cc	italic
support.constant	#c695c6	italic
support.type, support.class	#6699cc	italic
invalid	#ec5f66	bold
invalid.deprecated	#f9ae58	bold
entity.name.tag.yaml	#5fb4b4	—
source.yaml string.unquoted	#d8dee9	—
markup.heading	—	bold
markup.heading punctuation.definition.heading	#f97b58	—
markup.heading.1 punctuation.definition.heading	#ec5f66	—
string.other.link, markup.underline.link	#6699cc	—
markup.bold	—	bold
markup.italic	—	italic
markup.underline	—	underline
markup.italic markup.bold \| markup.bold markup.italic	—	italic bold
markup.underline markup.bold \| markup.bold markup.underline	—	bold underline
markup.underline markup.italic \| markup.italic markup.underline	—	italic underline
markup.bold markup.italic markup.underline \| markup.bold markup.underline markup.italic \| markup.italic markup.bold markup.underline \| markup.italic markup.underline markup.bold \| markup.underline markup.bold markup.italic \| markup.underline markup.italic markup.bold	—	bold italic underline
punctuation.definition.thematic-break	#f9ae58	—
markup.list.numbered.bullet	#99c794	—
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item	#f9ae58	—
markup.raw	—	—
markup.raw.inline	—	—
(text punctuation.definition.italic \| text punctuation.definition.bold)	#c695c6	—
meta.diff, meta.diff.header	#c695c6	—
markup.deleted	#ec5f66	—
markup.inserted	#99c794	—
markup.changed	#f9ae58	—
support.type.property-name - support.type.property-name.json	#d8dee9	—
constant.numeric.line-number.match	#ec5f66	—
message.error	#ec5f66	—
diff.deleted	—	—
diff.deleted.char	—	—
diff.inserted	—	—
diff.inserted.char	—	—

VS Code preview

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

Mariana by Ryan — Quiet 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#ededf5
activityBar.foreground#705697
activityBarBadge.background#705697
badge.background#448c27
badge.foreground#ffffff
button.background#4b83cd
dropdown.background#f5f5f5
editor.background#f5f5f5
editor.findMatchBackground#fef935
editor.findMatchHighlightBackground#fef93533
editor.findRangeHighlightBackground#dcdcdc55
editor.foreground#333333
editor.inactiveSelectionBackground#dcdcdcaa
editor.lineHighlightBackground#e4f6d4
editor.selectionBackground#c1f5b0
editor.selectionHighlightBackground#c1f5b044
editor.selectionHighlightBorder#c1f5b0
editor.wordHighlightBackground#c1f5b044
editor.wordHighlightStrongBackground#c1f5b044
editorCursor.foreground#aaaaaa
editorGroup.dropBackground#c9d0d988
editorIndentGuide.activeBackground#dcdcdc
editorIndentGuide.background#ebebeb
editorLineNumber.activeForeground#333333
editorLineNumber.foreground#aaaaaa
editorLink.activeForeground#4b83cd
editorRuler.foreground#ebebeb
editorWhitespace.foreground#ebebeb
errorForeground#660000
focusBorder#a6b39b
inputOption.activeBorder#adafb7
inputValidation.errorBackground#ffeaea
inputValidation.errorBorder#f1897f
inputValidation.infoBackground#f2fcff
inputValidation.infoBorder#4ec1e5
inputValidation.warningBackground#fffee2
inputValidation.warningBorder#ffe055
list.activeSelectionBackground#4b83cd
list.activeSelectionForeground#ffffff
list.focusBackground#91b3e0
list.highlightForeground#7a3e9d
list.hoverBackground#e0e0e0
list.inactiveFocusBackground#91b3e0
list.inactiveSelectionBackground#91b3e0
list.inactiveSelectionForeground#ffffff
panel.background#f5f5f5
peekView.border#705697
peekViewEditor.background#f2f8fc
peekViewEditor.matchHighlightBackground#c2dfe3
peekViewResult.background#f2f8fc
peekViewResult.matchHighlightBackground#93c6d6
peekViewTitle.background#f2f8fc
pickerGroup.border#749351
pickerGroup.foreground#a6b39b
progressBar.background#705697
selection.background#c1f5b0
sideBar.background#f2f2f2
sideBarSectionHeader.background#e0e9f6
statusBar.background#705697
statusBar.debuggingBackground#705697
statusBar.noFolderBackground#705697
statusBarItem.remoteBackground#4e3c69
titleBar.activeBackground#c4b7d7
walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#AAAAAA	—
comment.keyword, keyword.codetag, keyword.phpdoc	#AAAAAA	bold
invalid.deprecated	—	—
invalid.illegal	#660000	—
keyword.operator	#777777	—
keyword, keyword.operator.expression, keyword.control.at-rule.css, source.php storage.modifier, source.php storage.type	#4B83CD	—
punctuation.definition.keyword, keyword.control.at-rule.css punctuation	#91B3E0	—
keyword.operator.new	#7A3E9D	—
storage, storage.type, storage.modifier, support.type	#7A3E9D	—
constant.language, support.constant, variable.language, variable.language.this	#AB6526	—
variable, support.variable	#7A3E9D	—
punctuation.definition.variable	#B19BBD	—
entity.name.function, entity.name.class, entity.method.name, support.function, meta.function-call	#AA3731	—
entity.name.function, entity.name.class, entity.method.name	—	bold
meta.function-call.arguments	#333333	—
entity.name.type, entity.other.inherited-class, support.class	#AA3731	bold
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#AB6526	—
string, string.quoted, punctuation.definition.string, string.regexp, storage.type.string	#448C27	—
constant.character.escape	#AB6526	—
string.regex	#333333	—
string.regexp keyword, string.regexp keyword.operator, string.regexp constant, string.regexp constant.character, string.regexp punctuation	#7A3E9D	—
constant.other.symbol	#AB6526	—
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#AB6526	—
punctuation, punctuation.separator	#777777	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor entity.other.attribute-name	#AAAAAA	—
meta.tag, entity.attribute-name, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.other.attribute-name.html, punctuation.separator.key-value.html	#91B3E0	—
entity.name.tag	#4B83CD	—
meta.tag string.quoted, meta.tag punctuation.definition.string	#448C27	—
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, selector.css, entity.name.selector, entity.other.attribute-name.id.css, source.css entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.parent-selector, entity.other.attribute-name.pseudo-element, punctuation.definition.entity.css, entity.id.scss, entity.tag.scss, entity.class.scss, entity.pseudo-class.scss, entity.parent-selector.scss, entity.pseudo-element.scss, punctuation.separator.list.css, meta.property-list keyword.operator.less, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, entity.name.function.scss	#7A3E9D	—
meta.property-name, support.type.property-name	#AB6526	—
meta.property-value, source.css keyword.other, source.css constant, source.css constant.numeric, source.css constant.numeric punctuation, meta.property-value support.constant	#448C27	—
source.css variable, source.css.less variable, source.css.scss variable	#AA3731	—
keyword.other.important	—	bold
variable.js, source.js variable, source.js support.variable, source.js support.type	#333333	—
entity.name.function.js	—
source.embedded	—	—
punctuation.support.type.property-name	#AB6526	—
source.php	—	—
punctuation.section.embedded.metatag.php	#AA3731	bold
entity.name.function.decorator, meta.function.decorator punctuation.definition, meta.function.decorator string.quoted, meta.function.decorator punctuation.definition.string, meta.function.decorator meta.function-call.arguments, meta.function.decorator variable.parameter, meta.function.decorator keyword.operator	#AAAAAA	—
source.python variable.parameter	#333333	—
source.python support.type	#333333	—
source.python meta.function-call support.type	#AA3731	—
markup.changed	—	—
markup.deleted	—	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	—	—
meta.link, meta.image.inline	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#333333	bold
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.inline.raw	#777777	—
markdown.punctuation, markdown.link punctuation, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.metadata.markdown	#448C27	—
string.other.link.description.markdown, string.other.link.title.markdown	#7A3E9D	—
meta.diff.range, meta.diff.index, meta.separator	—	—
meta.diff.header.from-file	—	—
meta.diff.header.to-file	—	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

VS Code preview

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

Mariana by Ryan — Solarized 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#002029
activityBarBadge.background#268bd2
editor.background#002b36
editor.foreground#839496
editor.lineHighlightBackground#073642
editor.selectionBackground#586e7588
editorBracketHighlight.foreground1#268bd2
editorBracketHighlight.foreground2#b58900
editorBracketHighlight.foreground3#d33682
editorCursor.background#002b36
editorGroup.emptyBackground#002029
editorGroupHeader.noTabsBackground#002029
editorGroupHeader.tabsBackground#002029
editorGutter.addedBackground#859900
editorGutter.background#073642
editorGutter.deletedBackground#dc322f
editorGutter.modifiedBackground#b58900
editorLineNumber.activeForeground#839496
editorLineNumber.foreground#586e75
editorSuggestWidget.background#073642
editorSuggestWidget.border#073642
editorSuggestWidget.focusHighlightForeground#eee8d5
editorSuggestWidget.foreground#839496
editorSuggestWidget.highlightForeground#268bd2
editorSuggestWidget.selectedBackground#586e75
editorSuggestWidget.selectedForeground#eee8d5
editorSuggestWidget.selectedIconForeground#eee8d5
editorWidget.background#073642
editorWidget.foreground#839496
gitDecoration.addedResourceForeground#859900
gitDecoration.deletedResourceForeground#dc322f
gitDecoration.modifiedResourceForeground#b58900
input.background#003847
input.foreground#93a1a1
input.placeholderForeground#93a1a1aa
inputOption.activeBorder#2aa19899
inputValidation.errorBackground#571b26
inputValidation.errorBorder#cb4b16
inputValidation.infoBackground#052730
inputValidation.infoBorder#363b5f
inputValidation.warningBackground#5d5938
inputValidation.warningBorder#9d8a5e
list.activeSelectionBackground#073642
list.dropBackground#00445488
list.highlightForeground#2aa198
list.hoverBackground#586e75
list.inactiveSelectionBackground#073642
menu.selectionBackground#586e75
menu.selectionForeground#839496
minimapGutter.addedBackground#859900
minimapGutter.deletedBackground#dc322f
minimapGutter.modifiedBackground#b58900
peekView.border#2b2b4a
peekViewEditor.background#10192c
peekViewEditor.matchHighlightBackground#7744aa40
peekViewResult.background#00212b
peekViewTitle.background#00212b
selection.background#586e75
sideBar.background#002029
sideBarTitle.foreground#93a1a1
statusBar.background#93a1a1
statusBar.foreground#073642
tab.inactiveBackground#002029
terminal.ansiBlack#073642
terminal.ansiBlue#268bd2
terminal.ansiBrightBlack#002b36
terminal.ansiBrightBlue#839496
terminal.ansiBrightCyan#93a1a1
terminal.ansiBrightGreen#586e75
terminal.ansiBrightMagenta#6c71c4
terminal.ansiBrightRed#cb4b16
terminal.ansiBrightWhite#fdf6e3
terminal.ansiBrightYellow#657b83
terminal.ansiCyan#2aa198
terminal.ansiGreen#859900
terminal.ansiMagenta#d33682
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d5
terminal.ansiYellow#b58900
terminal.background#002b36
terminal.foreground#839496
titleBar.activeBackground#002029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.language	#2AA198	—
keyword.operator	#839496	—
constant.numeric	#2AA198	—
keyword, storage.modifier	#859900	—
keyword.control.as, keyword.control.import, keyword.control.from, keyword.control.export	#cb4b16	—
comment	#586E75	italic
string	#2AA198	—
string.regexp	#DC322F	—
storage.type	#b58900	—
constant.character.escape	#DC322F	—
meta.function-call entity.name.function	#268bd2	—
entity.name.tag, support.class.component	#268bd2	—
entity.other.attribute-name	#b58900	—
support.class	#2aa198	—
keyword.operator.new	#859900	—
invalid	#DC322F	—
meta.diff, meta.diff.header	#268BD2	italic
markup.deleted	#DC322F
markup.changed	#CB4B16
markup.inserted	#859900	—
markup.quote	#859900	—
markup.list	#B58900	—
markup.bold, markup.italic	#D33682	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#2AA198
markup.heading	#268BD2	bold
markup.heading.setext	#268BD2
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—