Monokai Accents

Name: Monokai Accents
Author: tw

Publisher: twThemes in package: 8

A dark Monokai theme with choice of accent color.

GitHub

Color themes

VS Code preview

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

Monokai Accents — Monokai +Yellow

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.activeBorder#cc8e25
activityBar.background#2a2a2a
activityBar.border#242424
activityBar.dropBackground#cccccc22
activityBar.foreground#cccccc
activityBar.inactiveForeground#666666
activityBarBadge.background#cc8e25
activityBarBadge.foreground#ffffffe7
badge.background#cc8e25
badge.foreground#ffffffe7
breadcrumb.activeSelectionForeground#fab73b
breadcrumb.focusForeground#fab73b
breadcrumb.foreground#cccccccc
breadcrumbPicker.background#2a2a2a
button.background#cc8e25
button.foreground#ffffffe7
debugExceptionWidget.background#2a2a2a
debugExceptionWidget.border#fc618d
debugIcon.breakpointCurrentStackframeForeground#7bd88f
debugIcon.breakpointDisabledForeground#fc618d66
debugIcon.breakpointForeground#fc618d
debugIcon.breakpointStackframeForeground#7bd88f77
debugIcon.breakpointUnverifiedForeground#8c8c8c
debugIcon.continueForeground#75c0fc
debugIcon.disconnectForeground#fc618d
debugIcon.pauseForeground#75c0fc
debugIcon.restartForeground#7bd88f
debugIcon.startForeground#7bd88f
debugIcon.stepBackForeground#75c0fc
debugIcon.stepIntoForeground#75c0fc
debugIcon.stepOutForeground#75c0fc
debugIcon.stepOverForeground#75c0fc
debugIcon.stopForeground#fc618d
debugToolBar.background#2a2a2a
debugToolBar.border#444444
descriptionForeground#f6f6f6
diffEditor.border#444444
diffEditor.insertedTextBackground#7bd88f22
diffEditor.removedTextBackground#c2403822
dropdown.background#1f1f1f
dropdown.border#1a1a1a
dropdown.foreground#f6f6f6
editor.background#242424
editor.findMatchBackground#cc8e2599
editor.findMatchBorder#f0dcbe88
editor.findMatchHighlightBackground#cc8e2566
editor.findRangeHighlightBackground#cc8e2522
editor.focusedStackFrameHighlightBackground#7bd88f22
editor.foreground#f6f6f6
editor.hoverHighlightBackground#cc8e2533
editor.lineHighlightBackground#303030
editor.rangeHighlightBackground#cc8e2522
editor.selectionBackground#404040
editor.selectionHighlightBackground#cc8e2533
editor.snippetFinalTabstopHighlightBackground#f6f6f6
editor.snippetFinalTabstopHighlightBorder#cc8e2599
editor.snippetTabstopHighlightBackground#f6f6f622
editor.stackFrameHighlightBackground#7bd88f33
editor.wordHighlightBackground#cc8e2533
editor.wordHighlightStrongBackground#cc8e2566
editor.wordHighlightStrongBorder#f0dcbe66
editorBracketMatch.background#f0dcbe22
editorBracketMatch.border#f0dcbe44
editorCodeLens.foreground#f6f6f666
editorCursor.background#2a2a2a
editorCursor.foreground#b6b6b6
editorError.foreground#fc618d
editorGroup.border#2a2a2a
editorGroup.dropBackground#f6f6f622
editorGroup.emptyBackground#242424
editorGroupHeader.noTabsBackground#2a2a2a
editorGroupHeader.tabsBackground#2a2a2a
editorGutter.addedBackground#7bd88f
editorGutter.deletedBackground#c24038
editorGutter.modifiedBackground#75c0fc
editorHint.border#444444
editorHint.foreground#666666
editorHoverWidget.background#2a2a2a
editorHoverWidget.border#444444
editorHoverWidget.foreground#f6f6f6
editorIndentGuide.activeBackground#f6f6f644
editorIndentGuide.background#f6f6f622
editorInfo.foreground#00809b
editorLightBulb.foreground#cca700
editorLightBulbAutoFix.foreground#00809b
editorLineNumber.foreground#666666
editorLink.activeForeground#fab73b
editorMarkerNavigation.background#2a2a2a
editorMarkerNavigationError.background#fc618d
editorMarkerNavigationInfo.background#00809b
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.addedForeground#7bd88f
editorOverviewRuler.border#444444
editorOverviewRuler.bracketMatchForeground#f6f6f6
editorOverviewRuler.deletedForeground#c24038
editorOverviewRuler.errorForeground#fc618d
editorOverviewRuler.findMatchForeground#cc8e25
editorOverviewRuler.infoForeground#00809b
editorOverviewRuler.modifiedForeground#75c0fc
editorOverviewRuler.warningForeground#cca700
editorOverviewRuler.wordHighlightForeground#cc8e2566
editorOverviewRuler.wordHighlightStrongForeground#cc8e25
editorPane.background#2a2a2a
editorRuler.foreground#f6f6f622
editorSuggestWidget.background#2a2a2a
editorSuggestWidget.border#444444
editorSuggestWidget.foreground#f6f6f6
editorSuggestWidget.highlightForeground#ffffffe7
editorSuggestWidget.selectedBackground#cc8e25
editorUnnecessaryCode.opacity#000000c0
editorWarning.foreground#cca700
editorWhitespace.foreground#f6f6f622
editorWidget.background#242424
editorWidget.border#444444
editorWidget.resizeBorder#cc8e25
error.foreground#fc618d
errorForeground#fc618d
errorLens.errorBackground#fc618d11
errorLens.errorForeground#fc618d
errorLens.hintBackground#66666611
errorLens.hintForeground#666666
errorLens.infoBackground#00809b11
errorLens.infoForeground#00809b
errorLens.warningBackground#cca70011
errorLens.warningForeground#cca700
extensionButton.prominentBackground#cc8e25
extensionButton.prominentForeground#f6f6f6
extensionButton.prominentHoverBackground#f0dcbe
focusBorder#cc8e25
foreground#cccccc
gitDecoration.addedResourceForeground#7bd88f
gitDecoration.conflictingResourceForeground#cca700
gitDecoration.deletedResourceForeground#c24038
gitDecoration.ignoredResourceForeground#777777
gitDecoration.modifiedResourceForeground#75c0fc
gitDecoration.submoduleResourceForeground#777777
gitDecoration.untrackedResourceForeground#777777
gitlens.gutterBackgroundColor#303030
gitlens.gutterForegroundColor#f6f6f666
gitlens.gutterUncommittedForegroundColor#666666
gitlens.lineHighlightBackgroundColor#7bd88f22
gitlens.lineHighlightOverviewRulerColor#7bd88f22
icon.foreground#cccccc
input.background#1f1f1f
input.border#444444
input.placeholderForeground#f6f6f666
inputOption.activeBorder#cc8e25
inputValidation.errorBackground#fc618d
inputValidation.errorBorder#cc8e25
inputValidation.errorForeground#f6f6f6e7
inputValidation.infoBackground#00809b
inputValidation.infoBorder#cc8e25
inputValidation.infoForeground#f6f6f6e7
inputValidation.warningBackground#cca700
inputValidation.warningBorder#cc8e25
inputValidation.warningForeground#f6f6f6e7
lintlens.annotationColor#f6f6f633
list.activeSelectionBackground#cc8e25dd
list.activeSelectionForeground#f6f6f6e7
list.dropBackground#f6f6f622
list.errorForeground#fc618d
list.focusBackground#cc8e25
list.focusForeground#f6f6f6e7
list.highlightForeground#cccccc
list.hoverBackground#cc8e2533
list.inactiveSelectionBackground#cccccc22
list.inactiveSelectionForeground#cccccc
list.warningForeground#cca700
listFilterWidget.background#cc8e2599
listFilterWidget.noMatchesOutline#fd971f
listFilterWidget.outline#f0dcbe88
menu.background#2a2a2a
menu.border#444444
menu.foreground#f6f6f6
menu.selectionBackground#cc8e25
menu.selectionForeground#f6f6f6
menu.separatorBackground#444444
menubar.selectionBackground#cc8e25
menubar.selectionForeground#f6f6f6
merge.commonHeaderBackground#cccccc22
merge.currentHeaderBackground#7bd88f22
merge.incomingHeaderBackground#75c0fc22
minimap.errorHighlight#fc618d
minimap.findMatchHighlight#cc8e25
minimap.selectionHighlight#f6f6f644
minimap.warningHighlight#cca700
minimapGutter.addedBackground#7bd88f
minimapGutter.deletedBackground#c24038
minimapGutter.modifiedBackground#75c0fc
notificationCenter.border#2a2a2a
notificationCenterHeader.background#2a2a2a
notificationCenterHeader.foreground#cccccc
notificationLink.foreground#fab73b
notifications.background#2a2a2a
notifications.border#2a2a2a
notifications.foreground#cccccc
notificationsErrorIcon.foreground#fab73b
notificationsInfoIcon.foreground#fab73b
notificationsWarningIcon.foreground#fab73b
notificationToast.border#2a2a2a
panel.background#2a2a2a
panel.border#242424
panel.dropBackground#f6f6f622
panelTitle.activeBorder#cc8e25
panelTitle.activeForeground#f6f6f6
peekView.border#cc8e25dd
peekViewEditor.background#2a2a2a
peekViewEditor.matchHighlightBackground#cc8e2599
peekViewEditorGutter.background#2a2a2a
peekViewResult.background#2a2a2a
peekViewResult.fileForeground#f6f6f6
peekViewResult.lineForeground#f6f6f6
peekViewResult.matchHighlightBackground#cc8e2599
peekViewResult.selectionBackground#cc8e25dd
peekViewResult.selectionForeground#f6f6f6
peekViewTitle.background#2a2a2a
peekViewTitleDescription.foreground#cccccc
peekViewTitleLabel.foreground#f6f6f6
pickerGroup.border#444444
pickerGroup.foreground#fab73b
problemsErrorIcon.foreground#fc618d
problemsInfoIcon.foreground#00809b
problemsWarningIcon.foreground#cca700
progressBar.background#cc8e25
quickInput.background#2a2a2a
quickInput.foreground#f6f6f6
scrollbar.shadow#000000
scrollbarSlider.activeBackground#91919180
scrollbarSlider.background#66666680
scrollbarSlider.hoverBackground#75757580
selection.background#f6f6f622
settings.checkboxBackground#2a2a2a
settings.dropdownBackground#2a2a2a
settings.headerForeground#f6f6f6
settings.modifiedItemIndicator#cc8e25
settings.numberInputBackground#2a2a2a
settings.textInputBackground#2a2a2a
sideBar.background#2a2a2a
sideBar.border#242424
sideBar.dropBackground#f6f6f622
sideBar.foreground#f6f6f6
sideBarSectionHeader.background#2a2a2a
sideBarTitle.foreground#cccccccc
statusBar.background#2a2a2a
statusBar.border#242424
statusBar.debuggingBackground#2a2a2a
statusBar.debuggingBorder#242424
statusBar.foreground#cccccc
statusBar.noFolderBackground#2a2a2a
statusBarItem.hoverBackground#cccccc22
statusBarItem.remoteBackground#cc8e25
statusBarItem.remoteForeground#f6f6f6
symbolIcon.arrayForeground#f6f6f6
symbolIcon.booleanForeground#ff80f4
symbolIcon.classForeground#a6e22e
symbolIcon.constantForeground#ff80f4
symbolIcon.constructorForeground#65d7fd
symbolIcon.fieldForeground#fd971f
symbolIcon.functionForeground#a6e22e
symbolIcon.interfaceForeground#75c0fc
symbolIcon.methodForeground#a6e22e
symbolIcon.moduleForeground#f6f6f6
symbolIcon.namespaceForeground#f82e76
symbolIcon.propertyForeground#65d7fd
symbolIcon.stringForeground#ffee99
symbolIcon.structForeground#f6f6f6
symbolIcon.variableForeground#fd971f
tab.activeBackground#242424
tab.activeBorderTop#cc8e25
tab.activeForeground#f6f6f6
tab.activeModifiedBorder#cc8e25
tab.border#2a2a2a
tab.inactiveBackground#2a2a2a
tab.inactiveForeground#cccccccc
terminal.ansiBlack#222222
terminal.ansiBlue#fd9353
terminal.ansiBrightBlack#69676c
terminal.ansiBrightBlue#fd9353
terminal.ansiBrightCyan#5ad4e6
terminal.ansiBrightGreen#7bd88f
terminal.ansiBrightMagenta#948ae3
terminal.ansiBrightRed#fc618d
terminal.ansiBrightWhite#f7f1ff
terminal.ansiBrightYellow#fce566
terminal.ansiCyan#5ad4e6
terminal.ansiGreen#7bd88f
terminal.ansiMagenta#948ae3
terminal.ansiRed#fc618d
terminal.ansiWhite#f7f1ff
terminal.ansiYellow#fce566
terminal.background#2a2a2a
terminal.border#242424
terminal.foreground#cccccc
terminal.selectionBackground#f6f6f622
terminalCursor.foreground#b6b6b6
textBlockQuote.background#2a2a2a
textBlockQuote.border#cc8e25
textCodeBlock.background#303030
textLink.activeForeground#fab73b
textLink.foreground#fab73b
textPreformat.foreground#cccccc
textSeparator.foreground#444444
titleBar.activeBackground#2a2a2a
titleBar.activeForeground#cccccccc
titleBar.border#242424
titleBar.inactiveBackground#1f1f1f
titleBar.inactiveForeground#666666
tree.indentGuidesStroke#f6f6f644
walkThrough.embeddedEditorBackground#2a2a2a
welcomePage.buttonBackground#2a2a2a
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#a6e22e	—
comment, string.comment	#8c8c8c	—
constant.language	#ff80f4	—
constant.numeric	#ff80f4	—
constant.character, constant.other	#ff80f4	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace	#f6f6f6	—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded	#ff80f4	—
entity.other.inherited-class	#a6e22e	italic underline
keyword, keyword.operator.logical, keyword.operator.constructor	#f82e76	—
keyword.operator	#f82e76	—
variable.language	#f82e76	—
punctuation.definition.array, punctuation.definition.begin, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.end, punctuation.definition.parameters, punctuation.definition.tag, punctuation.section, punctuation.separator.dictionary, punctuation.terminator	#f6f6f6	—
storage	#f82e76	—
string, string.template	#ffee99	—
text	#f6f6f6	—
storage.type	#65d7fd	—
entity.name.function, support.function	#a6e22e	—
variable.parameter, entity.name.variable.parameter, parameter.variable	#fd971f	italic
entity.name.tag, entity.name.tag.class.js	#f82e76	—
entity.name.tag.class, entity.name.tag.id	#65d7fd	—
entity.other.attribute-name	#a6e22e	—
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block	#75c0fc	—
variable.object.property, variable.other, variable.other.block, variable.other.property	#f6f6f6	—
storage.modifier.import, storage.modifier.package	#75c0fc	—
entity.name.function-call	#f6f6f6	—
function.support.builtin, function.support.core	#a6e22e	—
support.constant	#ff80f4	—
support.type, support.variable	#65d7fd	—
support.dictionary.json	#65d7fd	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#65d7fd	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#a6e22e	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass	#1e95bf	—
variable.css, variable.scss, variable.less, variable.sass	#fd971f	—
function.css, function.scss, function.less, function.sass	#a6e22e	—
unit.css, unit.scss, unit.less, unit.sass	#ff80f4	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#ffee99	—
support.other.variable	f8f8f2
invalid	#f6f6f6	—
invalid.deprecated	#f6f6f6	—
support.type.property-name.json	#65d7fd	—
string.detected-link	#75c0fc	—
constant.numeric.line-number.find-in-files - match	#88d1d8A0	—
markup.changed	#ffee99	—
markup.deleted	#f82e76	—
meta.diff, meta.diff.header	#75715E	—
markup.inserted	#a6e22e	—
entity.name.filename.find-in-files	#ffee99	—
markup.raw.block.markdown, markup.raw.inline.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#ffee99	—
markup.bold.markdown	#fd971f	bold
markup.italic, markup.italic.markdown	#fd971f	italic
markup.fenced_code.block.markdown	#ffee99	—
markup.heading.1.markdown	#5faa86	bold
markup.heading.2.markdown	#7bd88f	bold
markup.heading.3.markdown	#78e6d0	bold
markup.heading.4.markdown	#66d6ed	bold
markup.heading.5.markdown	#02BDD3	bold
markup.heading.6.markdown	#0294a5	bold
markup.heading.7.markdown	#008BFF	bold
punctuation.definition.heading.markdown	#c1e4d3	bold
markup.underline.link.markdown	#75c0fc	—
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#f6f6f6	—
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.raw.markdown	#ff80f4	—
punctuation.definition.list, punctuation.definition.list.begin.markdown	#ff80f4	bold
markup.quote.markdown	#fd971f	—
meta.separator.markdown	#ff80f4	bold
markup.strikethrough.markdown	#636363	—
entity.name.type	#dfbafd	—
source.swift	#f6f6f6	—
storage.type.swift	#f82e76	—
variable.other.swift	#65d7fd	—

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