Mariana Pro

Name: Mariana Pro
Author: ricky.normandeau

Publisher: ricky.normandeauThemes in package: 3

A complete color theme for VS Code based on Sublime Text's Mariana Syntax and Adaptive UI

GitHub

Color themes

VS Code preview

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

Mariana Pro — Mariana Pro (Warm)

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#2b2624
activityBar.dropBackground#3d3734
activityBar.foreground#ffffffdd
activityBarBadge.background#EE6A6Fcc
activityBarBadge.foreground#ffffffdd
badge.background#EE6A6Fcc
badge.foreground#ffffffdd
button.background#6699cc
button.foreground#ffffffdd
button.hoverBackground#6699cc70
diffEditor.insertedTextBackground#A3CE9E40
diffEditor.removedTextBackground#EE6A6F40
dropdown.background#2b2624
dropdown.listBackground#2b2624
editor.background#3d3734
editor.findMatchBackground#ffe4d414
editor.findMatchHighlightBackground#ffe4d414
editor.findRangeHighlightBackground#ffe4d414
editor.foreground#ffffffdd
editor.hoverHighlightBackground#ffe4d414
editor.inactiveSelectionBackground#ffe4d430
editor.lineHighlightBackground#ffe4d407
editor.lineHighlightBorder#ffe4d407
editor.rangeHighlightBackground#ffe4d414
editor.selectionBackground#ffe4d430
editor.selectionHighlightBackground#ffe4d414
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorCursor.foreground#ffffffdd
editorError.border#00000000
editorError.foreground#EE6A6F
editorGroup.border#00000040
editorGroup.dropBackground#2b2624
editorGroupHeader.noTabsBackground#2b2624
editorGroupHeader.tabsBackground#2b2624
editorGutter.addedBackground#A3CE9E
editorGutter.deletedBackground#EE6A6F
editorGutter.modifiedBackground#ebcb8b
editorIndentGuide.background#ffe4d414
editorInfo.foreground#A3CE9E
editorLineNumber.foreground#ffe4d430
editorOverviewRuler.addedForeground#A3CE9E
editorOverviewRuler.border#ffe4d414
editorOverviewRuler.bracketMatchForeground#ffe4d430
editorOverviewRuler.currentContentForeground#ffe4d430
editorOverviewRuler.deletedForeground#EE6A6F
editorOverviewRuler.errorForeground#EE6A6F
editorOverviewRuler.findMatchForeground#ffe4d430
editorOverviewRuler.incomingContentForeground#ffe4d430
editorOverviewRuler.infoForeground#ffe4d430
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#ffe4d430
editorOverviewRuler.selectionHighlightForeground#ffe4d430
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#ffe4d430
editorOverviewRuler.wordHighlightStrongForeground#ffe4d430
editorSuggestWidget.background#2b2624
editorWarning.border#00000000
editorWarning.foreground#FAB763
editorWhitespace.foreground#ffe4d430
editorWidget.background#2b2624
editorWidget.border#ffe4d430
extensionButton.prominentBackground#6699cc
extensionButton.prominentForeground#ffffffdd
extensionButton.prominentHoverBackground#6699cc70
focusBorder#ffe4d430
foreground#ffffffdd
gitDecoration.conflictingResourceForeground#EE6A6F
gitDecoration.deletedResourceForeground#EE6A6F
gitDecoration.modifiedResourceForeground#ebcb8b
gitDecoration.submoduleResourceForeground#ffffff70
gitDecoration.untrackedResourceForeground#ffffff70
input.background#3d3734
input.border#ffe4d414
input.foreground#ffffffdd
input.placeholderForeground#ffffff70
list.activeSelectionBackground#ffe4d414
list.activeSelectionForeground#ffffffdd
list.dropBackground#ffe4d414
list.errorForeground#EE6A6F
list.focusBackground#ffe4d414
list.focusForeground#ffffffdd
list.highlightForeground#ffffffdd
list.hoverBackground#ffe4d407
list.hoverForeground#ffffffdd
list.inactiveSelectionBackground#ffe4d407
list.inactiveSelectionForeground#ffffffdd
list.warningForeground#FAB763
merge.currentContentBackground#FAB76340
merge.currentHeaderBackground#FAB76370
merge.incomingContentBackground#A3CE9E40
merge.incomingHeaderBackground#A3CE9E70
notificationCenterHeader.background#2b2624
notificationCenterHeader.foreground#ffffffdd
panel.background#211D1C
panel.border#ffe4d414
panelTitle.activeBorder#6699cc
peekView.border#6699cc
peekViewEditor.background#2b2624
peekViewEditor.matchHighlightBackground#ffe4d430
peekViewEditorGutter.background#2b2624
peekViewResult.background#3d3734
peekViewTitle.background#2b2624
pickerGroup.border#6699cc
pickerGroup.foreground#6699cc
progressBar.background#2b2624
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#ffe4d430
scrollbarSlider.background#ffe4d414
scrollbarSlider.hoverBackground#ffe4d430
selection.background#ffffff30
sideBar.background#2b2624
sideBar.foreground#ffffffdd
sideBarSectionHeader.background#211D1C
sideBarSectionHeader.foreground#ffffffdd
sideBarTitle.foreground#ffffffdd
statusBar.background#211D1C
statusBar.border#ffe4d414
statusBar.debuggingBackground#6699cc
statusBar.debuggingForeground#ffffffdd
statusBar.foreground#ffffffdd
statusBar.noFolderBackground#ffe4d414
statusBar.noFolderForeground#ffffffdd
statusBarItem.activeBackground#ffe4d414
statusBarItem.hoverBackground#ffe4d407
statusBarItem.prominentBackground#ffe4d414
statusBarItem.prominentHoverBackground#ffe4d407
tab.activeBackground#3d3734
tab.activeBorder#3d3734
tab.activeForeground#ffffffdd
tab.border#ffffff10
tab.inactiveBackground#ffe4d407
tab.inactiveForeground#ffffff70
tab.unfocusedActiveBorder#3d3734
tab.unfocusedActiveForeground#ffffff70
tab.unfocusedInactiveForeground#ffffff70
terminal.ansiBlack#ffffffdd
terminal.ansiBlue#6699cc
terminal.ansiBrightBlack#ffffffdd
terminal.ansiBrightBlue#6699cc
terminal.ansiBrightCyan#6699cc
terminal.ansiBrightGreen#A3CE9E
terminal.ansiBrightMagenta#c594c5
terminal.ansiBrightRed#EE6A6F
terminal.ansiBrightYellow#FAB763
terminal.ansiCyan#6699cc
terminal.ansiGreen#A3CE9E
terminal.ansiMagenta#c594c5
terminal.ansiRed#EE6A6F
terminal.ansiWhite#ffffffdd
terminal.ansiYellow#FAB763
terminal.selectionBackground#ffffff30
terminalCursor.background#ffffff30
terminalCursor.foreground#ffffffdd
textLink.activeForeground#6699cc
textLink.foreground#6699cc
textPreformat.foreground#6699cc
titleBar.activeBackground#2b2624
titleBar.activeForeground#ffffffdd
titleBar.inactiveBackground#2b2624
titleBar.inactiveForeground#ffffff70
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ffffff70	—
string	#A3CE9E	—
punctuation.definition	#5fb3b3	—
constant.numeric	#FAB763	—
constant.language	#EE6A6F	italic
constant.character, constant.other	#c594c5	—
variable.member	#EE6A6F	—
keyword, keyword.operator.word, keyword.control, keyword.operator.new.js	#c594c5	—
string.template.js meta.template.expression.js meta.embedded.line.js	#ffffffdd	—
keyword.operator	#FA8763	—
punctuation.separator, punctuation.terminator	#ffffff70	—
punctuation.section	#ffffffdd	—
punctuation.accessor	#ffffff70	—
punctuation.definition.annotation	#5fb3b3	—
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js	#5fb3b3	—
storage	#EE6A6F	—
storage.type	#c594c5	italic
entity.name.function	#5fb3b3	—
meta.object-literal.key.js	#6699cc	—
entity.name	#FAB763	—
entity.other.inherited-class	#5fb3b3	italic underline
variable.parameter	#FAB763
variable.language	#EE6A6F	italic
entity.name.tag	#EE6A6F
entity.other.attribute-name	#c594c5	—
variable.function, variable.annotation	#6699cc
support.function, support.macro	#6699cc	italic
support.constant	#c594c5	italic
support.type, support.class	#6699cc	—
invalid	#ffffff70	—
invalid.deprecated	#ffffffdd	—
entity.name.tag.yaml	#5fb3b3	—
source.yaml string.unquoted	#ffffffdd	—
markup.heading	—	bold
markup.heading punctuation.definition.heading	#EE6A6F	—
markup.heading.1 punctuation.definition.heading	#EE6A6F	—
string.other.link, markup.underline.link	#6699cc	—
markup.bold	—	bold
markup.italic	—	italic
markup.italic markup.bold \| markup.bold markup.italic	—	bold italic
punctuation.definition.thematic-break	#FAB763	—
markup.list.numbered.bullet	#A3CE9E	—
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item	#FAB763	—
(text punctuation.definition.italic \| text punctuation.definition.bold)	#c594c5	—
meta.diff, meta.diff.header	#c594c5	—
markup.deleted	#EE6A6F	—
markup.inserted	#A3CE9E	—
markup.changed	#ebcb8b	—
support.type.property-name	#ffffffdd
constant.numeric.line-number.match	#EE6A6F	—
message.error	#EE6A6F	—

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