Neo Sploosh

Name: Neo Sploosh
Author: monoooki

Publisher: monoookiThemes in package: 2

Cool blues, soft grays, electric yellow pops for a crisp light-first theme.

GitHub

Color themes

VS Code preview

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

Neo Sploosh — Neo Sploosh 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#181818
activityBar.foreground#00B3FF
activityBarBadge.background#008DC9
activityBarBadge.foreground#111111
badge.background#008DC9
badge.foreground#111111
breadcrumb.focusForeground#7A7A7A
breadcrumb.foreground#555555
button.background#008DC9
button.foreground#0B1A24
button.hoverBackground#40AEDD
button.secondaryBackground#2D2D2D
button.secondaryForeground#F2F2F2
button.secondaryHoverBackground#383838
commandCenter.activeBorder#00000000
commandCenter.border#00000000
commandCenter.hoverBorder#00000000
commandCenter.inactiveBorder#00000000
dropdown.background#1B1B1B
dropdown.border#2E2E2E
dropdown.foreground#C6C6C6
editor.background#1C1C1C
editor.foreground#C6C6C6
editor.inactiveSelectionBackground#262626
editor.lineHighlightBackground#222222
editor.selectionBackground#2C2C2C
editorCursor.foreground#008DC9
editorGroup.border#2E2E2E
editorGroupHeader.noTabsBackground#181818
editorGroupHeader.tabsBackground#181818
editorIndentGuide.activeBackground1#7A7A7A
editorIndentGuide.background1#2E2E2E
editorLineNumber.activeForeground#64C8F2
editorLineNumber.foreground#555555
editorOverviewRuler.border#00000000
editorWhitespace.foreground#2E2E2E
editorWidget.background#1C1C1C
editorWidget.foreground#C6C6C6
explorer.decorations.ignoredForeground#636363
extensionButton.background#008DC9
extensionButton.foreground#111111
extensionButton.hoverBackground#40AEDD
extensionButton.prominentBackground#008DC9
extensionButton.prominentForeground#111111
extensionButton.prominentHoverBackground#40AEDD
focusBorder#008DC9
gitDecoration.ignoredResourceForeground#636363
input.background#1F1F1F
input.border#1F1F1F
input.foreground#F2F2F2
input.placeholderForeground#7A7A7A
keybindingTable.rowsBackground#171717
list.activeSelectionBackground#2C2C2C
list.activeSelectionForeground#F2F2F2
list.focusBackground#2C2C2C
list.highlightForeground#47B8E6
list.hoverBackground#2C2C2C
list.hoverForeground#F2F2F2
list.inactiveSelectionBackground#2D2D2D
notificationCenterHeader.background#181818
notifications.background#1C1C1C
notifications.border#2E2E2E
notifications.foreground#F2F2F2
notificationsErrorIcon.foreground#BE0D22
notificationsInfoIcon.foreground#47B8E6
notificationsWarningIcon.foreground#E4EB17
panel.background#1C1C1C
panel.border#2E2E2E
panelSectionHeader.background#171717
panelTitle.activeForeground#F2F2F2
panelTitle.inactiveForeground#636363
quickInput.background#1F1F1F
quickInput.foreground#E4E4E4
quickInput.list.focusBackground#2C2C2C
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#474747AA
scrollbarSlider.background#30303066
scrollbarSlider.hoverBackground#3A3A3A88
sideBar.background#181818
sideBar.foreground#B3B3B3
sideBarSectionHeader.background#1C1C1C
sideBarSectionHeader.foreground#C6C6C6
statusBar.background#181818
statusBar.debuggingBackground#2C2C2C
statusBar.foreground#C6C6C6
statusBar.noFolderBackground#1F1F1F
statusBarItem.remoteBackground#008DC9
statusBarItem.remoteForeground#F2F2F2
tab.activeBackground#1C1C1C
tab.activeBorderTop#008DC9
tab.activeForeground#F2F2F2
tab.border#00000000
tab.editor-group-tab-background#181818
tab.hoverBackground#1C1C1C
tab.inactiveBackground#181818
tab.inactiveForeground#636363
terminal.ansiBlack#2C2C2C
terminal.ansiBlue#008DC9
terminal.ansiBrightBlack#7A7A7A
terminal.ansiBrightBlue#40AEDD
terminal.ansiBrightCyan#47B8E6
terminal.ansiBrightGreen#F5F97A
terminal.ansiBrightMagenta#64C8F2
terminal.ansiBrightRed#E24858
terminal.ansiBrightWhite#F7F7F7
terminal.ansiBrightYellow#F5F97A
terminal.ansiCyan#47B8E6
terminal.ansiGreen#CBD200
terminal.ansiMagenta#64C8F2
terminal.ansiRed#BE0D22
terminal.ansiWhite#E4E4E4
terminal.ansiYellow#E4EB17
terminal.background#1B1B1B
terminal.foreground#F0F0F0
textLink.foreground#64C8F2
textLink.hoverForeground#64C8F2
titleBar.activeBackground#181818
titleBar.activeForeground#F2F2F2
titleBar.inactiveBackground#181818
titleBar.inactiveForeground#636363

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment, sss	#777777	italic
keyword	#CCCCCC	—
keyword.control	#9f9f9f	—
keyword.operator	#AAAAAA	—
keyword.operator.assignment	#E6E6E6	—
storage, storage.type	#E6E6E6	—
constant, constant.numeric, constant.language, constant.character	#64C8F2	—
string, string.quoted, string.regexp	#CBD200	—
variable, variable.parameter	#0090CC	—
entity.name.function, support.function	#6ED5FF	—
entity.name.type, entity.name.class, support.class	#64C8F2	—
entity.other.attribute-name, meta.annotation	#64C8F2	—
punctuation, operator	#aaa	—
invalid, invalid.deprecated, invalid.illegal	#BE0D22	—
variable.other.property, variable.other.object.property, support.type.property-name	#00B3FF	—
entity.name.tag, support.class.component	#CCCCCC	—
variable.language, variable.language.this, variable.language.super	#6ED5FF	—
entity.name.type.module, support.other.module	#6ED5FF	—
text.html.derivative	#EEEEEE	—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other	#CCCCCC	—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute	#00B3FF	—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html	#CBD200	—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html	#CCCCCC	—
meta.tag.sgml.doctype, comment.block.html	#111111	italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component	#CCCCCC	—
entity.other.attribute-name.js, entity.other.attribute-name.tsx	#00B3FF	—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown	#CCCCCC	bold
markup.bold, markup.bold.markdown	#AAAAAA	bold
markup.italic, markup.italic.markdown	#AAAAAA	italic
string.other.link.title.markdown, markup.underline.link.markdown	#00B3FF	underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown	#CBD200	—
markup.inline.raw.string.markdown, markup.raw.inline.markdown	#64C8F2	—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown	#64C8F2	—
markup.quote, markup.quote.markdown	#64C8F2	italic
markup.list, markup.list.numbered, markup.list.unnumbered	#0090CC	—
meta.separator.markdown	#111111	—
comment.block.html.markdown	#111111	italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown	#CCCCCC	bold
punctuation.definition.list.begin.markdown	#0090CC	—
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#0090CC	—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json	#00B3FF	—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js	#00B3FF	—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call	#6ED5FF	—
variable.other.object.js, variable.other.object.js.jsx	#0090CC	—
support.class.promise.js, support.class.promise.ts	#6ED5FF	—
meta.diff.header.from-file, punctuation.definition.from-file.diff	#AAAAAA	bold
meta.diff.header.to-file, punctuation.definition.to-file.diff	#CBD200	bold
meta.diff.range, meta.diff.index	#00B3FF	—
markup.inserted.diff	#CBD200	—
markup.deleted.diff	#AAAAAA	—
markup.changed.diff	#98E80F	—
meta.diff.context, meta.diff	#CCCCCC	—
punctuation.definition.range.diff	#00B3FF	—
meta.diff.header, meta.separator.diff	#64C8F2	—
punctuation.definition.inserted.diff	#00B3FF	—
support.function.misc.css, meta.function.variable.css	#6ED5FF	—

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