Maya React Color Theme

Name: Maya React Color Theme
Author: yathink3

Publisher: yathink3Themes in package: 4

Theme is a sleek, modern extension that enhances readability and reduces eye strain.

Open in VS Code GitHub

Color themes

VS Code preview

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

Maya React Color Theme — Theme - Pure

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#141519
activityBar.border#0b0c0e
activityBar.foreground#9aa1ac
activityBar.inactiveForeground#4c5767
activityBarBadge.background#9aa1ac
activityBarBadge.foreground#141519
badge.background#9aa1ac
badge.foreground#141519
breadcrumbPicker.background#1b1d22
button.background#9aa1ac
button.foreground#141519
contrastActiveBorder#00000000
debugExceptionWidget.background#282c33
debugExceptionWidget.border#0b0c0e
debugToolBar.background#282c33
descriptionForeground#bbbbbb
diffEditor.border#0b0c0e
diffEditor.diagonalFill#282c33
diffEditor.insertedTextBackground#37ae6f30
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#c1383830
diffEditor.removedTextBorder#00000000
dropdown.background#1b1d22
dropdown.border#4c5767aa
dropdown.foreground#bbbbbb
editor.background#1b1d22
editor.findMatchBackground#9aa1acaa
editor.findMatchBorder#9aa1ac
editor.findMatchHighlightBackground#9aa1ac40
editor.findMatchHighlightBorder#9aa1ac
editor.foreground#bbbbbb
editor.hoverHighlightBackground#9aa1ac40
editor.inactiveSelectionBackground#9aa1ac50
editor.lineHighlightBackground#9aa1ac0c
editor.lineHighlightBorder#9aa1ac1a
editor.rangeHighlightBackground#9aa1ac20
editor.selectionBackground#9aa1ac40
editor.selectionForeground#9aa1ac
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#4c5767
editor.wordHighlightBackground#9aa1ac20
editor.wordHighlightStrongBackground#9aa1ac50
editorBracketMatch.background#9aa1ac30
editorBracketMatch.border#9aa1ac96
editorCodeLens.foreground#bbbbbb
editorCursor.foreground#d39e17
editorGroup.border#0b0c0e
editorGroup.dropBackground#9aa1ac15
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#1b1d22
editorGroupHeader.tabsBackground#141519
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#37ae6fcc
editorGutter.background#1b1d22
editorGutter.commentRangeForeground#282c33
editorGutter.deletedBackground#c13838cc
editorGutter.modifiedBackground#3398dbcc
editorHoverWidget.background#282c33
editorHoverWidget.border#141519
editorIndentGuide.activeBackground#4c5767bb
editorIndentGuide.background#4c576730
editorLineNumber.activeForeground#bbbbbbbb
editorLineNumber.foreground#4c5767
editorLink.activeForeground#bbbbbb
editorMarkerNavigation.background#141519
editorMarkerNavigationError.background#c1383890
editorMarkerNavigationInfo.background#3398db90
editorMarkerNavigationWarning.background#d26d3290
editorOverviewRuler.border#0b0c0e
editorOverviewRuler.commonContentForeground#d39e17
editorOverviewRuler.currentContentForeground#c13838
editorOverviewRuler.incomingContentForeground#37ae6f
editorSuggestWidget.background#1b1d22
editorSuggestWidget.border#0b0c0e
editorSuggestWidget.foreground#bbbbbb
editorSuggestWidget.highlightForeground#d39e17
editorSuggestWidget.selectedBackground#9aa1ac4d
editorWarning.border#00000000
editorWarning.foreground#d39e17
editorWhitespace.foreground#4c576740
editorWidget.background#282c33
editorWidget.resizeBorder#9aa1ac50
errorForeground#c13838
extensionButton.prominentBackground#9aa1ac9d
extensionButton.prominentForeground#141519
extensionButton.prominentHoverBackground#9aa1ac
focusBorder#1b1d22
foreground#bbbbbb
gitDecoration.conflictingResourceForeground#9aa1ac
gitDecoration.deletedResourceForeground#c13838
gitDecoration.ignoredResourceForeground#4c5767
gitDecoration.modifiedResourceForeground#3398db
gitDecoration.untrackedResourceForeground#37ae6f
icon.foreground#bbbbbb
input.background#00000000
input.border#4c5767aa
input.foreground#bbbbbb
input.placeholderForeground#4c5767
inputOption.activeBorder#9aa1ac
inputValidation.errorBackground#282c33
inputValidation.errorBorder#d39e17
inputValidation.infoBackground#282c33
inputValidation.infoBorder#9aa1ac
inputValidation.warningBackground#282c33
inputValidation.warningBorder#d39e17
list.activeSelectionBackground#9aa1ac45
list.activeSelectionForeground#bbbbbb
list.dropBackground#9aa1ac15
list.errorForeground#c13838
list.focusBackground#9aa1acaa
list.focusForeground#bbbbbb
list.highlightForeground#d39e17
list.hoverBackground#4c576720
list.hoverForeground#bbbbbb
list.inactiveSelectionBackground#9aa1ac45
list.warningForeground#d26d32
menu.background#282c33
menu.border#282c33
menu.foreground#bbbbbb
menu.selectionBackground#9aa1ac20
menu.separatorBackground#0b0c0e
menubar.selectionBackground#282c33
menubar.selectionForeground#bbbbbb
merge.border#0b0c0e
merge.commonContentBackground#d39e1730
merge.commonHeaderBackground#d39e1780
merge.currentContentBackground#37ae6f30
merge.currentHeaderBackground#37ae6f80
merge.incomingContentBackground#3398db30
merge.incomingHeaderBackground#3398db80
notificationCenterHeader.background#282c33
notificationCenterHeader.foreground#bbbbbb
notificationLink.foreground#d39e17
notifications.background#282c33
notifications.border#9aa1ac50
notifications.foreground#bbbbbb
panel.background#1b1d22
panel.border#0b0c0e
panelInput.border#4c5767
panelSection.border#0b0c0e
panelSectionHeader.background#4c576720
panelSectionHeader.border#0b0c0e
panelSectionHeader.foreground#bbbbbb
panelTitle.activeBorder#9aa1ac
panelTitle.activeForeground#9aa1ac
panelTitle.inactiveForeground#4c5767
peekView.border#9aa1ac
peekViewEditor.background#282c3340
peekViewEditor.matchHighlightBackground#282c3340
peekViewEditorGutter.background#282c3340
peekViewResult.background#282c3340
peekViewResult.fileForeground#bbbbbb
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#282c33
peekViewResult.selectionBackground#282c33
peekViewResult.selectionForeground#bbbbbb
peekViewTitle.background#0b0c0e
peekViewTitleDescription.foreground#bbbbbb
peekViewTitleLabel.foreground#bbbbbb
pickerGroup.border#0b0c0e
pickerGroup.foreground#bbbbbb
progressBar.background#d39e17
scrollbar.shadow#0b0c0e
scrollbarSlider.activeBackground#4c576790
scrollbarSlider.background#4c576750
scrollbarSlider.hoverBackground#4c576790
selection.background#bbbbbb80
settings.headerForeground#9aa1ac
settings.modifiedItemIndicator#9aa1ac
sideBar.background#141519
sideBar.border#0b0c0e
sideBar.foreground#bbbbbb
sideBarSectionHeader.background#141519
sideBarSectionHeader.border#0b0c0e
sideBarSectionHeader.foreground#bbbbbb
sideBarTitle.foreground#4c5767
statusBar.background#141519
statusBar.border#0b0c0e
statusBar.debuggingBackground#9aa1ac44
statusBar.debuggingForeground#bbbbbb
statusBar.foreground#bbbbbb
statusBar.noFolderBackground#0b0c0e
statusBar.noFolderBorder#9aa1ac
statusBar.noFolderForeground#bbbbbb
statusBarItem.activeBackground#282c33
statusBarItem.hoverBackground#bbbbbb15
statusBarItem.prominentBackground#0b0c0e
statusBarItem.prominentHoverBackground#282c33
tab.activeBackground#1b1d22
tab.activeBorderTop#9aa1ac
tab.activeForeground#9aa1ac
tab.border#00000000
tab.hoverBackground#1b1d22cc
tab.hoverBorder#00000000
tab.inactiveBackground#141519
tab.inactiveForeground#4c5767
tab.unfocusedActiveForeground#bbbbbb
tab.unfocusedHoverBackground#9aa1ac10
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#bbbbbb
terminal.ansiBlack#370067
terminal.ansiBlue#bd1c98
terminal.ansiBrightBlack#627e99
terminal.ansiBrightBlue#8b56bf
terminal.ansiBrightCyan#20bcff
terminal.ansiBrightGreen#24966e
terminal.ansiBrightMagenta#bf568b
terminal.ansiBrightRed#bf8b56
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#bfa656
terminal.ansiCyan#2f7ecd
terminal.ansiGreen#07d258
terminal.ansiMagenta#bf568b
terminal.ansiRed#bf8b56
terminal.ansiWhite#ffffff
terminal.ansiYellow#e3b625
terminal.background#141519
terminal.foreground#e6d7f4
terminalCursor.background#cbd6e2
terminalCursor.foreground#cbd6e2
textBlockQuote.background#3398db34
textBlockQuote.border#3398dbb9
textCodeBlock.background#3398db34
textLink.activeForeground#3398db
textLink.foreground#3398db
textPreformat.foreground#d39e17
textSeparator.foreground#9aa1ac
titleBar.activeBackground#141519
titleBar.activeForeground#4c5767
titleBar.border#0b0c0e
titleBar.inactiveBackground#0b0c0e
titleBar.inactiveForeground#4c5767
tree.indentGuidesStroke#bbbbbb30
walkThrough.embeddedEditorBackground#1b1d22
widget.shadow#0b0c0e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bbbbbbff	—
comment, string.comment	#5c6370	italic
string	#e5c07b	—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#c678dd	—
string.template.js	#e5c07b	—
meta.template.expression.js	#abb2bf	—
constant.numeric	#c678dd	—
string.embedded.begin, string.embedded.end	#c678dd	—
string.embedded	#98c379	—
constant.language	#56b6c2	—
constant.character, constant.other	#56b6c2	—
variable.language	#e06c75	—
variable.readwrite, variable.readwrite.other.block	#61afef	—
keyword, keyword.operator.logical, keyword.operator.constructor	#e06c75	—
keyword.operator	#e06c75	—
storage	#e06c75	—
storage.type	#56b6c2	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#61afef	—
variable.other.object	#61afef	—
variable.other.property, variable.other.block	#abb2bf	—
entity.other.inherited-class	#98c379	—
entity.name.function, support.function	#98c379	—
variable.parameter	#d19a66	italic
entity.name.function-call	#abb2bf	—
function.support.builtin, function.support.core	#98c379	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#e06c75	—
entity.name.tag.class, entity.name.tag.id	#56b6c2	—
entity.other.attribute-name	#98c379	italic
support.constant	#56b6c2	—
support.type, support.variable	#56b6c2	—
support.dictionary.json	#56b6c2	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#abb2bf	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#98c379	—
variable.css, variable.scss, variable.less, variable.sass	#56b6c2	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#e5c07b	—
unit.css, unit.scss, unit.less, unit.sass	#c678dd	—
function.css, function.scss, function.less, function.sass	#56b6c2	—
support.other.variable	—
invalid	#F8F8F0	—
invalid.deprecated	#F8F8F0	—
structure.dictionary.property-name.json	#56b6c2	—
string.detected-link	#61afef	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#c678dd	—
markup.inserted	#e5c07b	—
markup.changed	#e5c07b	—
constant.numeric.line-number.find-in-files - match	#56b6c2A0	—
entity.name.filename.find-in-files	#e5c07b	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown	#696969	none
markup.underline.link.markdown	#61afef	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#696969	none
markup.heading.markdown	#e06c75	bold
punctuation.definition.heading.markdown	#696969	none
markup.quote.markdown	#98c379	—
meta.separator.markdown	#c678dd	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#56b6c2	—
punctuation.definition.list_item.markdown	#ffffff	bold
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
punctuation.definition.block, punctuation.definition.tag	#ffffff	—

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