Monokai Dark Ninja

Name: Monokai Dark Ninja
Author: Marco Angelo

Publisher: Marco AngeloThemes in package: 1

Extra dark theme based on Monokai, with vibrant colours. For Ninjas.

Open in VS Code GitHub

VS Code preview

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

Monokai Dark Ninja — Monokai Dark Ninja

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#000000
activityBar.border#8f8f8f27
activityBar.foreground#b9b9b9
activityBar.inactiveForeground#8f8f8f65
activityBarBadge.background#050505
activityBarBadge.foreground#8f8f8f
badge.background#050505
badge.foreground#8f8f8f
breadcrumb.foreground#8f8f8f
button.background#050505
button.foreground#FFFFFF
button.hoverBackground#050505
checkbox.border#8f8f8f27
contrastActiveBorder#050505
contrastBorder#8f8f8f27
debugExceptionWidget.background#050505
debugExceptionWidget.border#8f8f8f
debugToolBar.background#050505
debugToolBar.border#8f8f8f
diffEditor.insertedTextBackground#31958A55
diffEditor.insertedTextBorder#31958A55
diffEditor.removedTextBackground#892F4688
diffEditor.removedTextBorder#31958A55
dropdown.background#050505
dropdown.border#8f8f8f27
dropdown.foreground#FFFFFF
editor.background#050505
editor.findMatchBackground#6688cc
editor.findMatchBorder#8f8f8f27
editor.findMatchHighlightBackground#eeeeee44
editor.foreground#FFFFFF
editor.inactiveSelectionBackground#6688cc
editor.lineHighlightBorder#8f8f8f27
editor.selectionBackground#6688cc
editor.selectionForeground#070707c18
editorGroup.border#8f8f8f27
editorGroupHeader.border#050505
editorGroupHeader.noTabsBackground#050505
editorGroupHeader.tabsBackground#050505
editorGroupHeader.tabsBorder#8f8f8f27
editorHint.foreground#43B9D8
editorHoverWidget.background#050505
editorHoverWidget.border#8f8f8f27
editorIndentGuide.activeBackground#505050
editorLineNumber.activeForeground#8f8f8f
editorLineNumber.foreground#8f8f8f
editorLink.activeForeground#0063a5
editorMarkerNavigation.background#060621
editorMarkerNavigationError.background#AB395B
editorMarkerNavigationWarning.background#5B7E7A
editorSuggestWidget.background#050505
editorSuggestWidget.border#8f8f8f
editorSuggestWidget.foreground#FFFFFF
editorSuggestWidget.highlightForeground#43B9D8
editorSuggestWidget.selectedBackground#8f8f8f27
editorWidget.background#050505
editorWidget.border#050505
focusBorder#8f8f8f27
foreground#FFFFFF
gitlens.trailingLineBackgroundColor#050505
gitlens.trailingLineForegroundColor#8f8f8f
icon.foreground#ffffff
input.background#050505
input.border#8f8f8f27
input.foreground#FFFFFF
input.placeholderForeground#8f8f8f27
list.activeSelectionBackground#43B9D815
list.hoverBackground#43B9D815
list.inactiveSelectionBackground#8f8f8f15
menu.background#050505
menu.border#8f8f8f27
merge.border#8f8f8f27
notificationCenter.border#8f8f8f
notificationCenterHeader.background#050505
notificationCenterHeader.foreground#FFFFFF
notifications.background#050505
notifications.border#8f8f8f27
notifications.foreground#FFFFFF
panel.background#000000
panel.border#8f8f8f27
panel.dropBorder#8f8f8f
panelSection.border#8f8f8f27
panelTitle.activeForeground#d3d3d3
panelTitle.inactiveForeground#666666
peekView.border#8f8f8f27
peekViewTitle.background#050505
peekViewTitleLabel.foreground#ffffff
quickInput.background#050505
sideBar.background#050505
sideBar.border#8f8f8f27
sideBar.foreground#b3b3b3
sideBarSectionHeader.background#050505
sideBarSectionHeader.border#8f8f8f27
sideBarSectionHeader.foreground#8f8f8f
sideBarTitle.foreground#8f8f8f
statusBar.background#000000
statusBar.border#8f8f8f27
statusBar.debuggingBackground#43B9D815
statusBar.debuggingForeground#8f8f8f
statusBar.foreground#33e7ffc5
statusBar.noFolderBackground#050505
statusBar.noFolderForeground#8f8f8f
tab.activeBackground#050505
tab.activeBorder#050505
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#8f8f8f27
tab.border#8f8f8f27
tab.hoverBorder#8f8f8f27
tab.inactiveBackground#000000
tab.inactiveForeground#6d6d6d
tab.inactiveModifiedBorder#8f8f8f27
tab.unfocusedActiveBorder#050505
tab.unfocusedActiveForeground#FFFFFF
tab.unfocusedInactiveForeground#FFFFFF
terminal.ansiBlack#8f8f8f
terminal.ansiBlue#5ccaef
terminal.ansiBrightBlack#8f8f8f
terminal.ansiBrightBlue#5ccaef
terminal.ansiBrightCyan#a57fff
terminal.ansiBrightGreen#98d800
terminal.ansiBrightMagenta#f57f00
terminal.ansiBrightRed#f82a5d
terminal.ansiBrightWhite#f1f1f1
terminal.ansiBrightYellow#e7dc60
terminal.ansiCyan#a57fff
terminal.ansiGreen#98d800
terminal.ansiMagenta#f57f00
terminal.ansiRed#f82a5d
terminal.ansiWhite#f1f1f1
terminal.ansiYellow#e7dc60
terminal.border#8f8f8f27
titleBar.activeBackground#050505
titleBar.activeForeground#8f8f8f
titleBar.border#8f8f8f27
titleBar.inactiveBackground#050505
titleBar.inactiveForeground#8f8f8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#FFFFFF	—
comment	#5a5a5a	—
string	#E6DB74	—
constant.numeric	#AE81FF	—
constant.language	#AE81FF	—
constant.character, constant.other	#AE81FF	—
variable	—
keyword	#F92672	bold
storage	#F92672	bold
storage.type	#66D9EF	italic
entity.name.class	#A6E22E	underline
entity.other.inherited-class	#A6E22E	italic underline
entity.name.function	#A6E22E
variable.parameter	#FD971F	italic
entity.name.tag	#F92672	bold
entity.other.attribute-name	#A6E22E
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
support.other.variable	—
invalid	#F8F8F0	bold
invalid.deprecated	#F8F8F0	—
meta.structure.dictionary.json, string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
constant.numeric.line-number.find-in-files - match	#AE81FFA0	—
entity.name.filename.find-in-files	#E6DB74	—
variable.language	#A6E22E	—
heading.1.markdown	#A6E22E	bold
punctuation.definition.heading.markdown	#A6E22E	—
entity.name.section.markdown	#A6E22E	—
punctuation.definition.list.begin.markdown	#AE81FF	—
meta.image.inline.markdown	#E6DB74	—
markup.bold.markdown	#FFFFFF	bold
markup.italic.markdown	#FFFFFF	italic
markup.inline.raw.string.markdown	#66D9EF	—
meta.separator.markdown	#5a5a5a	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#AE81FF	—
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma	#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}!`;
}