Monospace Theme

Name: Monospace Theme
Author: Keksi

Publisher: KeksiThemes in package: 4

A minimalistic Visual Studio Code theme with subtle purple accents.

GitHub

Color themes

VS Code preview

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

Monospace Theme — Monospace Dark

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...

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#a87ffbff
activityBar.background#171f2bff
activityBar.border#333e4fff
activityBar.foreground#d9dfe7ff
activityBar.inactiveForeground#738295ff
activityBarBadge.background#a87ffbff
activityBarBadge.foreground#000000ff
badge.background#603bceff
badge.foreground#e0ccffff
breadcrumb.activeSelectionForeground#a4afbdff
breadcrumb.focusForeground#d9dfe7ff
breadcrumb.foreground#8b98a9ff
breadcrumbPicker.background#171f2bff
button.background#a87ffbff
button.foreground#000000ff
button.hoverBackground#b895fdff
button.secondaryBackground#475365ff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#5d6a7dff
checkbox.background#1f2939ff
checkbox.border#3d495aff
checkbox.foreground#d9dfe7ff
commandCenter.activeBackground#1f2939ff
commandCenter.activeBorder#3d495aff
commandCenter.activeForeground#d9dfe7ff
commandCenter.background#171f2bff
commandCenter.border#333e4fff
commandCenter.foreground#8b98a9ff
commandCenter.inactiveBorder#333e4fff
commandCenter.inactiveForeground#738295ff
debugToolBar.background#1f2939ff
descriptionForeground#8b98a9ff
diffEditor.insertedTextBackground#17975f40
diffEditor.removedTextBackground#df404740
dropdown.background#1f2939ff
dropdown.border#3d495aff
dropdown.foreground#d9dfe7ff
dropdown.listBackground#10151dff
editor.background#171f2bff
editor.findMatchBackground#83431466
editor.findMatchBorder#ffa23eff
editor.findMatchHighlightBackground#83431499
editor.findMatchHighlightBorder#834314ff
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#1c2533ff
editor.foreground#d9dfe7ff
editor.inactiveSelectionBackground#264dcb4d
editor.lineHighlightBackground#1f2939ff
editor.linkedEditingBackground#4d21bb99
editor.selectionBackground#264dcb80
editor.selectionHighlightBackground#333e4f99
editor.selectionHighlightBorder#333e4fff
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#882d0066
editor.wordHighlightBorder#882d00ff
editor.wordHighlightStrongBackground#882d0099
editor.wordHighlightStrongBorder#882d00ff
editorBracketHighlight.foreground1#85cdf1ff
editorBracketHighlight.foreground2#ffd395ff
editorBracketHighlight.foreground3#bd9cfeff
editorBracketHighlight.foreground4#85cdf1ff
editorBracketHighlight.foreground5#ffd395ff
editorBracketHighlight.foreground6#bd9cfeff
editorBracketMatch.background#004b5e99
editorBracketMatch.border#004b5eff
editorCodeLens.foreground#8b98a9ff
editorCursor.foreground#e0ccffff
editorError.foreground#fc8f8eff
editorGhostText.foreground#5d6a7dff
editorGroup.border#333e4fff
editorGroupHeader.tabsBackground#10151dff
editorGroupHeader.tabsBorder#333e4fff
editorGutter.addedBackground#17975f80
editorGutter.deletedBackground#df4047ff
editorGutter.foldingControlForeground#8b98a9ff
editorGutter.modifiedBackground#3c60ddff
editorHint.foreground#66ce98ff
editorIndentGuide.activeBackground#475365ff
editorIndentGuide.background#333e4fff
editorInfo.foreground#a2b6ffff
editorInlayHint.background#73829533
editorInlayHint.foreground#8b98a9ff
editorInlayHint.typeBackground#73829533
editorInlayHint.typeForeground#8b98a9ff
editorLightBulb.foreground#ffc26eff
editorLineNumber.activeForeground#d9dfe7ff
editorLineNumber.foreground#475365ff
editorLink.activeForeground#a87ffbff
editorOverviewRuler.border#000000ff
editorWarning.foreground#ffc26eff
editorWhitespace.foreground#475365ff
editorWidget.background#10151dff
editorWidget.border#5d6a7dff
errorForeground#f76769ff
focusBorder#8964e8ff
foreground#d9dfe7ff
gitDecoration.addedResourceForeground#17b877ff
gitDecoration.conflictingResourceForeground#ffc26eff
gitDecoration.deletedResourceForeground#f76769ff
gitDecoration.ignoredResourceForeground#738295ff
gitDecoration.modifiedResourceForeground#708fffff
gitDecoration.submoduleResourceForeground#738295ff
gitDecoration.untrackedResourceForeground#17b877ff
icon.foreground#d9dfe7ff
input.background#1f2939ff
input.border#3d495aff
input.foreground#d9dfe7ff
input.placeholderForeground#8b98a9ff
inputOption.activeBorder#8964e8ff
inputValidation.errorBorder#f76769ff
keybindingLabel.background#171f2bff
keybindingLabel.border#333e4fff
keybindingLabel.bottomBorder#333e4fff
keybindingLabel.foreground#d9dfe7ff
list.activeSelectionBackground#1f2939ff
list.activeSelectionForeground#d9dfe7ff
list.errorForeground#fa7b7cff
list.focusBackground#340099ff
list.hoverBackground#141b25ff
list.hoverForeground#d9dfe7ff
list.inactiveFocusBackground#34009999
list.inactiveSelectionBackground#1f2939ff
list.inactiveSelectionForeground#d9dfe7ff
list.warningForeground#ffb256ff
menu.background#10151dff
menu.border#3d495aff
menu.foreground#d9dfe7ff
menu.selectionBackground#1f2939ff
menu.selectionForeground#d9dfe7ff
menu.separatorBackground#333e4fff
notificationCenterHeader.background#1f2939ff
notificationCenterHeader.foreground#738295ff
notifications.background#242e3fff
notifications.border#333e4fff
notifications.foreground#d9dfe7ff
notificationsErrorIcon.foreground#f76769ff
notificationsInfoIcon.foreground#8b98a9ff
notificationsWarningIcon.foreground#ffa23eff
panel.background#10151dff
panel.border#333e4fff
panelInput.border#333e4fff
panelSection.border#333e4fff
panelSectionHeader.background#0000
panelSectionHeader.foreground#d9dfe7ff
panelTitle.activeBorder#a87ffbff
panelTitle.activeForeground#d9dfe7ff
panelTitle.inactiveForeground#a4afbdff
peekView.border#a87ffbff
peekViewEditor.background#10151dff
peekViewEditor.matchHighlightBackground#83431466
peekViewEditor.matchHighlightBorder#ffa23e4d
peekViewResult.background#080a0eff
peekViewResult.matchHighlightBackground#83431466
peekViewResult.selectionBackground#333e4fff
pickerGroup.border#475365ff
pickerGroup.foreground#d9dfe7ff
problemsErrorIcon.foreground#f76769ff
problemsInfoIcon.foreground#8b98a9ff
problemsWarningIcon.foreground#ffa23eff
progressBar.background#8964e8ff
quickInput.background#10151dff
quickInput.foreground#d9dfe7ff
quickInputTitle.background#10151dff
sash.hoverBorder#a87ffbff
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#d9dfe7ff
settings.modifiedItemIndicator#5173f1ff
sideBar.background#10151dff
sideBar.border#333e4fff
sideBar.foreground#d9dfe7ff
sideBarSectionHeader.background#10151dff
sideBarSectionHeader.border#333e4fff
sideBarSectionHeader.foreground#d9dfe7ff
sideBarTitle.foreground#d9dfe7ff
statusBar.background#1f2939ff
statusBar.border#333e4fff
statusBar.debuggingBackground#891524ff
statusBar.debuggingForeground#ffffffff
statusBar.foreground#a4afbdff
statusBar.noFolderBackground#1f2939ff
statusBarItem.prominentBackground#282e34
tab.activeBackground#171f2bff
tab.activeBorder#171f2bff
tab.activeBorderTop#a87ffbff
tab.activeForeground#d9dfe7ff
tab.border#333e4fff
tab.hoverBackground#171f2bff
tab.inactiveBackground#10151dff
tab.inactiveForeground#a4afbdff
tab.unfocusedActiveBorder#171f2bff
tab.unfocusedActiveBorderTop#333e4fff
tab.unfocusedActiveForeground#738295ff
tab.unfocusedHoverBackground#1f2939ff
tab.unfocusedHoverForeground#a4afbdff
tab.unfocusedInactiveForeground#738295ff
terminal.ansiBlack#738295ff
terminal.ansiBlue#708fffff
terminal.ansiBrightBlack#8b98a9ff
terminal.ansiBrightBlue#a2b6ffff
terminal.ansiBrightCyan#71c2eeff
terminal.ansiBrightGreen#66ce98ff
terminal.ansiBrightMagenta#c8aaffff
terminal.ansiBrightRed#fc8f8eff
terminal.ansiBrightWhite#fafbfeff
terminal.ansiBrightYellow#ffc26eff
terminal.ansiCyan#25a6e9ff
terminal.ansiGreen#17b877ff
terminal.ansiMagenta#a87ffbff
terminal.ansiRed#f76769ff
terminal.ansiWhite#a4afbdff
terminal.ansiYellow#ffa23eff
terminal.foreground#a4afbdff
terminal.tab.activeBorder#a87ffbff
terminalCursor.background#5d6a7dff
terminalCursor.foreground#c8aaffff
textBlockQuote.background#1f2939ff
textBlockQuote.border#475365ff
textCodeBlock.background#333e4fff
textLink.activeForeground#c8aaffff
textLink.foreground#b895fdff
textPreformat.foreground#a4afbdff
textSeparator.foreground#5d6a7dff
titleBar.activeBackground#171f2bff
titleBar.activeForeground#d9dfe7ff
titleBar.border#333e4fff
titleBar.inactiveBackground#10151dff
titleBar.inactiveForeground#738295ff
tree.indentGuidesStroke#333e4fff
welcomePage.buttonBackground#333e4fff
welcomePage.buttonHoverBackground#475365ff
widget.shadow#080a0e4d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#7f8d9fff	—
constant, entity.name.constant, variable.other.constant, variable.language	#92a9ffff	—
entity, entity.name	#bd9cfeff	—
variable.parameter.function	#d9dfe7ff	—
entity.name.tag	#77d5a3ff	—
keyword	#fd8da3ff	—
storage, storage.type	#fd8da3ff	—
annotation	#fd8da3ff	—
storage.modifier.package, storage.modifier.import, storage.type.java	#d9dfe7ff	—
string, punctuation.definition.string, string punctuation.section.embedded source	#77d5a3ff	—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string punctuation.section.embedded source	#85cdf1ff	—
support	#92a9ffff	—
support.type.property-name	#85cdf1ff	—
meta.property-name	#92a9ffff	—
variable	#ffd395ff	—
variable.other	#d9dfe7ff	—
invalid.broken	#ffc6d0ff	italic
invalid.deprecated	#ffc6d0ff	italic
invalid.illegal	#ffc6d0ff	italic
invalid.unimplemented	#ffc6d0ff	italic
carriage-return	#1f2939ff	italic underline
message.error	#ffc6d0ff	—
string source	#d9dfe7ff	—
string variable	#92a9ffff	—
source.regexp, string.regexp	#77d5a3ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#77d5a3ff	—
string.regexp constant.character.escape	#77d5a3ff	bold
support.constant	#92a9ffff	—
support.variable	#92a9ffff	—
meta.module-reference	#92a9ffff	—
punctuation.definition.list.begin.markdown	#ffd395ff	—
markup.heading, markup.heading entity.name	#92a9ffff	bold
markup.quote	#77d5a3ff	—
markup.italic	#d9dfe7ff	italic
markup.bold	#d9dfe7ff	bold
markup.raw	#92a9ffff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffc6d0ff	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#77d5a3ff	—
markup.changed, punctuation.definition.changed	#ffd395ff	—
markup.ignored, markup.untracked	#333e4fff	—
meta.diff.range	#bd9cfeff	bold
meta.diff.header	#92a9ffff	—
meta.separator	#92a9ffff	bold
meta.output	#92a9ffff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#9ca7b6ff	—
brackethighlighter.unmatched	#ffc6d0ff	—
constant.other.reference.link, string.other.link	#77d5a3ff	underline
—	—	—
fenced_code.block.language	#92a9ffff	—
markup.inline.raw.string.markdown	#77d5a3ff	—
markup.bold, punctuation.definition.bold	#ffd395ff	bold
markup.italic, punctuation.definition.italic	#85cdf1ff	italic
markup.strikethrough, punctuation.definition.strikethrough	#ffc6d0ff	strikethrough

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