Monokai Seti

Name: Monokai Seti
Author: Aditya Mukherjee

Publisher: Aditya MukherjeeThemes in package: 2

A derivative of Monokai Seti (for Atom) for Visual Studio Code

GitHub

Color themes

VS Code preview

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

Monokai Seti — Monokai Seti Dark

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.background#15191b
activityBar.border#1d242c
activityBar.foreground#777777
activityBarBadge.background#314559
activityBarBadge.foreground#fff
badge.background#42505e
badge.foreground#fff
button.background#777777AA
button.foreground#fff
button.hoverBackground#777777BB
debugExceptionWidget.background#14191f
debugExceptionWidget.border#1d242c
debugToolBar.background#14191f
diffEditor.insertedTextBackground#c2d94c44
diffEditor.removedTextBackground#f0717844
dropdown.background#14191f
editor.background#15191b
editor.findMatchBackground#77777733
editor.findMatchHighlightBackground#ffe25c
editor.findRangeHighlightBackground#77777733
editor.foreground#d1d4d3
editor.lineHighlightBackground#1f2830
editor.rangeHighlightBackground#151a1f
editor.selectionBackground#253340
editor.wordHighlightBackground#77777733
editor.wordHighlightStrongBackground#77777733
editorBracketMatch.border#35404c
editorCursor.foreground#888
editorError.foreground#dc322f
editorGroup.background#14191f
editorGroup.border#1d242c
editorGroupHeader.noTabsBackground#15191b
editorGroupHeader.tabsBackground#15191b
editorGroupHeader.tabsBorder#1d242c
editorGutter.addedBackground#c2d94c
editorGutter.deletedBackground#dc322f
editorGutter.modifiedBackground#66D9EF
editorHoverWidget.background#14191f
editorHoverWidget.border#1d242c
editorIndentGuide.background#35404c
editorLineNumber.activeForeground#587289
editorLineNumber.foreground#35404c
editorLink.activeForeground#777777
editorLink.foreground#777777
editorOverviewRuler.border#1d242c
editorOverviewRuler.errorForeground#dc322f
editorOverviewRuler.warningForeground#777777
editorRuler.foreground#1d242c
editorSuggestWidget.background#14191f
editorSuggestWidget.border#1d242c
editorSuggestWidget.highlightForeground#777777
editorSuggestWidget.selectedBackground#191f26
editorWarning.foreground#777777
editorWhitespace.foreground#35404c
editorWidget.background#14191f
extensionButton.prominentBackground#777777AA
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#777777BB
focusBorder#7777778A
foreground#d1d4d3
input.background#14191f
input.border#7777774C
input.foreground#d1d4d3
input.placeholderForeground#7777778A
inputOption.activeBorder#7777778A
inputValidation.errorBackground#15191b
inputValidation.errorBorder#dc322f
inputValidation.infoBackground#15191b
inputValidation.infoBorder#66D9EF
inputValidation.warningBackground#15191b
inputValidation.warningBorder#FD971F
list.activeSelectionBackground#1d242c
list.activeSelectionForeground#d1d4d3
list.focusAndSelectionBackground#1d242c
list.focusAndSelectionForeground#d1d4d3
list.focusBackground#191f26
list.focusForeground#d1d4d3
list.highlightForeground#dddddd
list.hoverBackground#191f26
list.hoverForeground#d1d4d3
list.inactiveSelectionBackground#15191b
list.inactiveSelectionForeground#d1d4d3
notification.background#1d242c
panel.background#15191b
panel.border#1d242c
panelTitle.activeBorder#777777
panelTitle.activeForeground#d1d4d3
panelTitle.inactiveForeground#777777
peekView.border#1d242c
peekViewEditor.background#14191f
peekViewEditor.matchHighlightBackground#77777733
peekViewResult.background#14191f
peekViewResult.fileForeground#777777
peekViewResult.matchHighlightBackground#77777733
peekViewTitle.background#14191f
peekViewTitleDescription.foreground#777777
peekViewTitleLabel.foreground#777777
pickerGroup.border#1d242c
pickerGroup.foreground#777777
progressBar.background#777777
scrollbar.shadow#00000011
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#253340fd
sideBar.background#090b0d
sideBar.border#1d242c
sideBarSectionHeader.background#151a1f
sideBarSectionHeader.foreground#777777
sideBarTitle.foreground#cccccc
statusBar.background#14191f
statusBar.border#1d242c
statusBar.debuggingBackground#14191f
statusBar.debuggingForeground#777777
statusBar.foreground#888
statusBar.noFolderBackground#14191f
statusBarItem.activeBackground#1d242c
statusBarItem.hoverBackground#191f26
statusBarItem.prominentBackground#1d242c
statusBarItem.prominentHoverBackground#191f26
tab.activeBackground#14191f
tab.activeBorder#66D9EF
tab.activeForeground#d1d4d3
tab.border#1d242c
tab.inactiveBackground#15191b
tab.inactiveForeground#777777
tab.unfocusedActiveBorder#777777
tab.unfocusedActiveForeground#d1d4d3AA
tab.unfocusedInactiveForeground#777777
terminal.ansiBlack#1d242c
terminal.ansiBlue#66D9EF
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffee99
terminal.ansiCyan#95e6cb
terminal.ansiGreen#c2d94c
terminal.ansiMagenta#ca30c7
terminal.ansiRed#FD971F
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#FD971F
terminal.background#15191b
terminal.foreground#d1d4d3
textBlockQuote.background#14191f
textLink.activeForeground#777777
textLink.foreground#777777
textPreformat.foreground#d1d4d3
titleBar.activeBackground#15191b
titleBar.activeForeground#777777
titleBar.border#1d242c
titleBar.inactiveBackground#15191b
titleBar.inactiveForeground#777777
walkThrough.embeddedEditorBackground#14191f
welcomeOverlay.foreground#d1d4d3
welcomePage.quickLinkBackground#191f26
welcomePage.quickLinkHoverBackground#1d242c
widget.shadow#000000b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d1d4d3ff	—
comment, punctuation.definition.comment	#555555	—
variable	#d1d4d3	—
keyword, storage.type, storage.modifier	#F92672	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution	#E7C547	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#66D9EF	—
meta.tag.jsx	#d1d4d3	—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level, support.function	#A6E22E	—
support.other.variable, string.other.link	#F07178	—
constant.numeric, constant.language, constant.character, variable.other.constant	#AE81FF	—
variable.parameter, keyword.other.unit	#FFEE99	—
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#FFEE99	normal
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#66D9EF	—
entity.name.module, entity.name.type.module, variable.import.parameter.js, variable.other.class.js	#66D9EF	—
variable.language	#66D9EF	italic
invalid	#dc322f	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#66D9EF90	—
entity.other.attribute-name	#B8CC52	—
markup.inserted	#B8CC52	—
markup.deleted	#66D9EF	—
markup.changed	#FD971F	—
string.regexp, constant.character.escape	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#B8CC52	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E6B673	italic
source.js constant.other.object.key.js string.unquoted.label.js	#66D9EF	italic
entity.name.method.js	#E6B673	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#E6B673	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#FFEE99	underline
markup.strike	#E6B673	strike
markup.quote	#E7C547	italic
markup.fenced_code.block.markdown	#FD971F	—
markup.table	#66D9EF	—
text.html.markdown, punctuation.definition.list_item.markdown	#d1d4d3	—
text.html.markdown markup.inline.raw.string.markdown	#66D9EF	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#B8CC52	—
markup.quote, punctuation.definition.blockquote.markdown	#E7C547	italic
string.other.link.title.markdown	#E6B673	underline
markup.raw.block.fenced.markdown	#d1d4d3	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#66D9EF	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#66D9EF	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#dc322f	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#dc322f	—
token.debug-token	#b267e6	—

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