Mariana

Name: Mariana
Author: mightbesimon

Publisher: mightbesimonThemes in package: 1

I already tried the other ones

GitHub

VS Code preview

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

Mariana — Mariana

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#99c794
activityBar.background#1c2126
activityBar.dropBorder#99c794
activityBarBadge.background#ec5f66
badge.background#ec5f66
button.background#99c794
button.foreground#1c2126
button.hoverBackground#99c794c0
button.secondaryBackground#f9ae58
button.secondaryForeground#1c2126
button.secondaryHoverBackground#f9ae58c0
diffEditor.insertedTextBackground#99c794
diffEditor.removedTextBackground#f97b58
dropdown.background#293038
dropdown.listBackground#293038
editor.background#303841
editor.findMatchBackground#fac76140
editor.findMatchHighlightBackground#303841
editor.findMatchHighlightBorder#5fb4b4
editor.findRangeHighlightBackground#303841
editor.findRangeHighlightBorder#5fb4b4
editor.foreground#d8dee9
editor.hoverHighlightBackground#576675bf
editor.inactiveSelectionBackground#576675bf
editor.lineHighlightBackground#576675bf
editor.rangeHighlightBackground#303841
editor.rangeHighlightBorder#5fb4b4
editor.selectionBackground#576675bf
editor.selectionHighlightBackground#303841
editor.selectionHighlightBorder#5fb4b4
editor.symbolHighlightBackground#303841
editor.symbolHighlightBorder#5fb4b4
editorBracketMatch.background#576675bf
editorBracketMatch.border#5fb4b4
editorCursor.foreground#f9ae58
editorError.background#ec5f6640
editorError.foreground#ec5f66
editorGroup.border#1c2126
editorGroup.dropBackground#1c2126
editorGroupHeader.noTabsBackground#1c2126
editorGroupHeader.tabsBackground#1c2126
editorGutter.addedBackground#99c794
editorGutter.deletedBackground#ec5f66
editorGutter.modifiedBackground#f9ae58
editorHint.foreground#99c794
editorIndentGuide.background#576675bf
editorInfo.background#6699cc40
editorInfo.foreground#6699cc
editorLineNumber.activeForeground#d8dee9c0
editorLineNumber.foreground#a6adb9c0
editorOverviewRuler.addedForeground#99c794
editorOverviewRuler.bracketMatchForeground#5fb4b4
editorOverviewRuler.currentContentForeground#99c794
editorOverviewRuler.deletedForeground#ec5f66
editorOverviewRuler.errorForeground#ec5f66
editorOverviewRuler.findMatchForeground#fac76140
editorOverviewRuler.incomingContentForeground#f9ae58
editorOverviewRuler.infoForeground#6699cc
editorOverviewRuler.modifiedForeground#f9ae58
editorOverviewRuler.rangeHighlightForeground#fac76140
editorOverviewRuler.selectionHighlightForeground#fac76140
editorOverviewRuler.warningForeground#fac761
editorOverviewRuler.wordHighlightForeground#fac76140
editorOverviewRuler.wordHighlightStrongForeground#fac76140
editorPane.background#1c2126
editorRuler.foreground#576675bf
editorSuggestWidget.focusHighlightForeground#5fb4b4
editorSuggestWidget.highlightForeground#5fb4b4e0
editorWarning.background#fac76140
editorWarning.foreground#fac761
editorWhitespace.foreground#627384
editorWidget.background#1c2126
editorWidget.border#00000000
focusBorder#00000000
foreground#d8dee9
gitDecoration.addedResourceForeground#99c794
gitDecoration.modifiedResourceForeground#f9ae58
gitDecoration.renamedResourceForeground#f9ae58
gitDecoration.stageDeletedResourceForeground#99c794
gitDecoration.stageModifiedResourceForeground#99c794
gitDecoration.untrackedResourceForeground#f9ae58
input.background#293038
input.foreground#d8dee9
input.placeholderForeground#627384
inputOption.activeBackground#99c794
inputOption.activeForeground#303841
inputOption.hoverBackground#99c79480
inputValidation.errorBackground#ec5f66c0
inputValidation.errorBorder#ec5f66
inputValidation.infoBackground#6699ccc0
inputValidation.infoBorder#6699cc
inputValidation.warningBackground#fac761c0
inputValidation.warningBorder#fac761
list.activeSelectionBackground#303841
list.dropBackground#99c79480
list.errorForeground#ec5f66
list.focusBackground#f9ae5840
list.focusOutline#f9ae5880
list.hoverBackground#293038
list.inactiveSelectionBackground#303841
list.warningForeground#fac761
listFilterWidget.background#99c794
listFilterWidget.noMatchesOutline#ec5f66
listFilterWidget.outline#99c794
merge.currentContentBackground#FAB76340
merge.currentHeaderBackground#FAB76370
merge.incomingContentBackground#A3CE9E40
merge.incomingHeaderBackground#A3CE9E70
minimap.background#303841e0
minimap.errorHighlight#ec5f66
minimap.findMatchHighlight#5fb4b4
minimap.selectionHighlight#576675bf
minimap.selectionOccurrenceHighlight#576675bf
minimap.warningHighlight#fac761
minimapGutter.addedBackground#99c794
minimapGutter.deletedBackground#ec5f66
minimapGutter.modifiedBackground#f9ae58
notebook.cellEditorBackground#293038
notebook.cellStatusBarItemHoverBackground#303841
notebook.cellToolbarSeparator#576675bf
notebook.editorBackground#303841
notebook.focusedCellBorder#99c794
notebook.inactiveFocusedCellBorder#576675bf
notificationCenterHeader.background#00000080
panel.background#181c20
panel.border#00000000
panelTitle.activeBorder#99c794
peekView.border#6699cc
peekViewEditor.background#1c2126c0
peekViewEditor.matchHighlightBackground#1c2126c0
peekViewEditor.matchHighlightBorder#5fb4b4
peekViewResult.background#1c2126c0
peekViewTitle.background#1c2126c0
problemsErrorIcon.foreground#ec5f66
problemsInfoIcon.foreground#6699cc
problemsWarningIcon.foreground#fac761
progressBar.background#1c2126
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#a6adb9
scrollbarSlider.background#576675bf
scrollbarSlider.hoverBackground#627384
selection.background#576675bf
settings.checkboxBackground#1c2126c0
settings.checkboxBorder#181c20
settings.focusedRowBackground#99c79440
settings.focusedRowBorder#99c79480
settings.headerForeground#99c794
settings.modifiedItemIndicator#f9ae58
settings.rowHoverBackground#293038
sideBar.background#1c2126
sideBar.foreground#d8dee9
sideBarSectionHeader.background#00000000
sideBarTitle.foreground#a6adb9
statusBar.background#181c20
statusBar.debuggingBackground#f9ae58
statusBar.debuggingForeground#181c20
statusBar.focusBorder#00000000
statusBar.foreground#d8dee9
statusBar.noFolderBackground#293038
statusBarItem.activeBackground#303841a0
statusBarItem.hoverBackground#30384160
statusBarItem.remoteBackground#181c20
tab.activeBackground#303841
tab.activeBorderTop#1c2126
tab.activeForeground#d8dee9
tab.border#00000000
tab.hoverBackground#30384180
tab.hoverForeground#d8dee9
tab.inactiveBackground#1c2126
tab.inactiveForeground#a6adb9
tab.unfocusedActiveBorderTop#1c2126
tab.unfocusedActiveForeground#a6adb9
tab.unfocusedHoverForeground#d8dee9
terminal.ansiBlack#1c2126
terminal.ansiBlue#6699cc
terminal.ansiBrightBlack#293038
terminal.ansiBrightBlue#6699cc
terminal.ansiBrightCyan#5fb4b4
terminal.ansiBrightGreen#99c794
terminal.ansiBrightMagenta#c695c6
terminal.ansiBrightRed#ec5f66
terminal.ansiBrightWhite#d8dee9
terminal.ansiBrightYellow#fac761
terminal.ansiCyan#5fb4b4
terminal.ansiGreen#99c794
terminal.ansiMagenta#c695c6
terminal.ansiRed#ec5f66
terminal.ansiWhite#a6adb9
terminal.ansiYellow#fac761
terminal.selectionBackground#6699ccc0
terminal.tab.activeBorder#99c794
terminalCursor.background#d8dee9
terminalCursor.foreground#f9ae5880
textBlockQuote.background#576675bf
textBlockQuote.border#5fb4b4
textLink.activeForeground#6699ccc0
textLink.foreground#6699cc
textPreformat.foreground#f97b58
titleBar.activeBackground#1c2126
titleBar.activeForeground#d8dee9
titleBar.inactiveBackground#1c2126
titleBar.inactiveForeground#a6adb9
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition	#a6adb9	—
string	#99c794	—
punctuation.definition, -punctuation.definition.numeric.base	#5fb4b4	—
constant.numeric	#f9ae58	—
constant.language	#ec5f66	italic
constant.character, constant.other	#c695c6	—
variable.member	#ec5f66	—
keyword, keyword.operator.word, keyword.operator.new	#c695c6	—
keyword.operator	#f97b58	—
punctuation.separator, punctuation.terminator	#a6adb9	—
punctuation.section	#d8dee9	—
punctuation.accessor	#a6adb9	—
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	—
entity.name, -entity.name.section, -entity.name.tag, -entity.name.label	#f9ae58	—
entity.other.inherited-class	#5fb4b4	italic underline
variable.parameter	#f9ae58	—
variable.language	#ec5f66	italic
entity.name.tag	#ec5f66	—
entity.other.attribute-name	#c695c6	—
variable.function, variable.annotation, meta.function-call.generic	#6699cc	—
support.function, support.macro	#6699cc	italic
support.constant	#c695c6	italic
support.type, support.class	#6699cc	—
invalid	#ec5f66	—
invalid.deprecated	#f9ae58	—
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	—	bold italic
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, meta.separator.markdown	#f9ae58	—
markup.list.numbered.bullet, markup.list.numbered punctuation.definition.list.begin.markdown	#99c794	—
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown	#f9ae58	—
markup.inline.raw, fenced_code.block.language.markdown	#c695c6	—
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	#d8dee9	—
constant.numeric.line-number.match	#ec5f66	—
message.error	#ec5f66	—
meta.object-literal.key	#6699cc	—
log.error	#ec5f66	bold
log.info	#99c794	bold
log.debug	#6699cc	bold
log.warning	#f9ae58	bold

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