Monokai X

Name: Monokai X
Author: Say OL

Publisher: Say OLThemes in package: 1

Modification of Monokai Aora

GitHub

VS Code preview

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

Monokai X — Monokai X

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.activeBackground#002222
activityBar.activeBorder#00ffff
activityBar.activeFocusBorder#003333
activityBar.background#001111
activityBar.border#003333
activityBar.dropBorder#00ffff
activityBar.foreground#44ff44
activityBar.inactiveForeground#cccccc
activityBarBadge.background#00ffff
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#44ff44
breadcrumb.background#002222
breadcrumb.focusForeground#44ff44
breadcrumb.foreground#cccccc
breadcrumbPicker.background#001111
button.background#003333
button.border#003333
button.foreground#EEEEEE
button.hoverBackground#004444
button.secondaryBackground#003333
button.secondaryForeground#EEEEEE
button.secondaryHoverBackground#004444
debugConsole.errorForeground#ff44aa
debugConsole.infoForeground#44ff44
debugConsole.sourceForeground#EEEEEE
debugConsole.warningForeground#ffff00
diffEditor.unchangedRegionShadow#00ffff99
dropdown.background#000000
dropdown.border#003333
dropdown.foreground#cccccc
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#004444
editor.findMatchHighlightBackground#222222aa
editor.foreground#44ff44
editor.hoverHighlightBackground#222222aa
editor.lineHighlightBackground#111111
editor.lineHighlightBorder#002222
editor.selectionBackground#002222
editorBracketHighlight.foreground1#FFFF00
editorBracketHighlight.foreground2#aa77ff
editorBracketHighlight.foreground3#FF77FF
editorBracketHighlight.foreground4#44ff44
editorBracketHighlight.foreground5#0077ff
editorBracketHighlight.foreground6#ff77ff
editorCursor.foreground#ffff00
editorError.foreground#ff44aa
editorGroup.border#004444
editorGroupHeader.border#003333
editorGroupHeader.tabsBackground#001111
editorGroupHeader.tabsBorder#003333
editorGutter.background#001111
editorGutter.foldingControlForeground#00ffff
editorHoverWidget.background#001111ee
editorHoverWidget.border#00ffff
editorHoverWidget.foreground#44ff44
editorIndentGuide.activeBackground1#FF77FF
editorIndentGuide.activeBackground2#FF77FF
editorIndentGuide.activeBackground3#FF77FF
editorIndentGuide.activeBackground4#FF77FF
editorIndentGuide.activeBackground5#FF77FF
editorIndentGuide.activeBackground6#FF77FF
editorIndentGuide.background1#EEEEEE
editorIndentGuide.background2#EEEEEE
editorIndentGuide.background3#EEEEEE
editorIndentGuide.background4#EEEEEE
editorIndentGuide.background5#EEEEEE
editorIndentGuide.background6#EEEEEE
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#999999
editorRuler.foreground#EEEEEE
editorStickyScroll.shadow#00ffff99
editorSuggestWidget.background#001111
editorSuggestWidget.border#003333
editorSuggestWidget.foreground#EEEEEE
editorSuggestWidget.selectedBackground#003333
editorWhitespace.foreground#EEEEEE
editorWidget.background#001111
errorForeground#ff44aa
focusBorder#008888
foreground#cccccc
inlineChat.shadow#00ffff99
input.background#000000
input.border#003333
input.foreground#EEEEEE
input.placeholderForeground#00ffff
inputValidation.errorBackground#001111
inputValidation.errorBorder#001111
inputValidation.errorForeground#FF77FF
inputValidation.infoBackground#001111
inputValidation.infoBorder#001111
inputValidation.infoForeground#44ff44
inputValidation.warningBackground#001111
inputValidation.warningBorder#001111
inputValidation.warningForeground#ffbb00
list.activeSelectionBackground#002222
list.activeSelectionForeground#44ff44
list.errorForeground#ff44aa
list.focusAndSelectionOutline#004444
list.focusForeground#44ff44
list.focusHighlightForeground#ffff00
list.hoverBackground#002222
list.hoverForeground#44ff44
list.inactiveSelectionBackground#002222
list.inactiveSelectionForeground#44ff44
listFilterWidget.shadow#00ffff99
menu.background#001111ee
menu.border#001111
menu.foreground#cccccc
menu.selectionBackground#003333
menu.selectionBorder#003333
menu.selectionForeground#44ff44
menu.separatorBackground#003333
menubar.selectionBackground#003333
menubar.selectionBorder#003333
menubar.selectionForeground#00ff00
notebook.cellBorderColor#004444
notebook.cellEditorBackground#000000
notebook.editorBackground#001111
notebook.outputContainerBackgroundColor#002222
notebook.outputContainerBorderColor#004444
panel.background#001111
panel.border#003333
panel.dropBorder#003333
panelInput.border#003333
panelSection.border#003333
panelSection.dropBackground#003333
panelStickyScroll.shadow#00ffff99
panelTitle.activeBorder#00ffff
panelTitle.activeForeground#44ff44
panelTitle.inactiveForeground#00ffff
quickInput.background#001111
quickInput.foreground#cccccc
quickInputList.focusBackground#002222
quickInputList.focusForeground#44ff44
quickInputList.focusIconForeground#EEEEEE
quickInputTitle.background#001111
scrollbar.shadow#00ffff99
scrollbarSlider.activeBackground#EEEEEE77
scrollbarSlider.background#00ffff77
scrollbarSlider.hoverBackground#EEEEEE77
settings.focusedRowBackground#001111
settings.focusedRowBorder#003333
settings.headerForeground#00ffff
settings.textInputBackground#000000
sideBar.background#000000
sideBar.border#003333
sideBar.dropBackground#003333
sideBar.foreground#cccccc
sideBarSectionHeader.background#001111
sideBarSectionHeader.border#003333
sideBarSectionHeader.foreground#44ff44
sideBarStickyScroll.shadow#00ffff99
sideBarTitle.background#001111
sideBarTitle.foreground#ff44aa
statusBar.background#001111
statusBar.border#003333
statusBar.debuggingBackground#001111
statusBar.debuggingBorder#003333
statusBar.debuggingForeground#00ffff
statusBar.focusBorder#003333
statusBar.foreground#00ffff
statusBar.noFolderBackground#001111
statusBar.noFolderBorder#003333
statusBar.noFolderForeground#00ffff
statusBarItem.activeBackground#003333
statusBarItem.focusBorder#003333
statusBarItem.hoverBackground#002222
statusBarItem.hoverForeground#44ff44
statusBarItem.prominentBackground#003333
statusBarItem.prominentForeground#EEEEEE
statusBarItem.remoteBackground#001111
statusBarItem.remoteForeground#00ffff
tab.activeBackground#002222
tab.activeBorder#00ffff
tab.activeForeground#44ff44
tab.border#003333
tab.hoverBackground#002222
tab.hoverForeground#44ff44
tab.inactiveBackground#001111
tab.inactiveForeground#cccccc
terminal.foreground#44ff44
titleBar.activeBackground#001111
titleBar.activeForeground#cccccc
titleBar.border#003333
titleBar.inactiveBackground#001111
titleBar.inactiveForeground#cccccc
toolbar.activeBackground#003333
toolbar.hoverBackground#003333
widget.shadow#00ffff99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percenage, comment.block, comment.block.documentation	#ABABAB
functions, types	#44AAFF
keywords, numbers	#FF44AA
strings	#AAFFCC
variables	#FFAA44
constant, constant.numeric, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal, constant.character, constant.character.escape, constant.other, constant.regexp, constant.rgb-value, constant.language	#FF44AA
entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.selector, entity.name.type, entity.other, entity.other.inherited-class, storage.type.string.python	#44ff44
entity.name.section	#44ff44
entity.name.tag	#FF77FF
entity.other.attribute-name	#00ffff
invalid, invalid.illegal	#00ffff
invalid.deprecated	#ababab	strikethrough
keyword.control, keyword.other, keyword.operator, keyword.declaration	#ff44aa
keyword, keyword.operator.new, keyword.operator.logical	#ffff00
keyword.operator.assignment	#44ff44	bold
keyword.operator.arithmetic, variable.parameter.function.language.special.cls.python, variable.parameter.function.language.special.self.python, variable.language.special.self.python	#FF44AA
keyword.operator.comparison, keyword.operator.bitwise	#FF77FF	bold
markup, markup.changed, markup.deleted, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline	#EEEEEE
markup.heading	#FF0077
markup.bold	#0077ff	bold
markup.inline.raw	#aa77ff
markup.underline.link	#00bbff
meta, meta.block, meta.cast, meta.class, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type, meta.type.annotation	#00ffff
meta.embedded.block	#00ffff
meta	#00ffff
meta.embedded.expression	#0099FF
meta.paragraph	#EEEEEE
meta.link.inline	#44ff44
meta.function	#00ffff
meta.function-call	#44ff44
meta.function-call.arguments	#00ffff
meta.item-access	#00ffff
meta.attribute	#aa77ff
meta.indexed-name, meta.fstring	#00ffff
meta.member.access	#FFFF00	bold
meta.object-literal	#ffbb00
punctuation.definition, punctuation.definition.raw, punctuation.definition.tag, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.terminator.statement	#FFFF00	bold
punctuation.separator.arguments	#44ff44	bold
punctuation.separator.colon, punctuation.separator.parameters, punctuation.section.class.begin, punctuation.section.function.begin	#FFFF00	bold
storage, storage.modifier	#ff44aa
storage.type, storage.type.object	#FF44AA
storage.type.format	#FF44AA
string, string.other, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, string.unquoted, string.interpolated, string.regexp, punctuation.definition.string	#aaffcc
support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable	#0099FF
support.type.property-name	#aa44ff
support.variable.property	#aa77ff
variable, variable.name, variable.parameter	#ffff00
variable.language	#ff44aa
variable.language.this	#ff44aa
variable.other, variable.other.object, variable.other.readwrite	#00ffff
variable.other.object.property	#aa44ff
variable.other.object, variable.other.definition	#00ffff
variable.other.property	#ffbb00
variable.function	#44ff44
source	#ffaa44
markup.fenced_code.block	#00bbff	bold
storage.type.annotation	#ff44aa

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