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 Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#EDF2F6
activityBar.foreground#008DC9
activityBarBadge.background#008DC9
activityBarBadge.foreground#FFFFFF
badge.background#008DC9
badge.foreground#FFFFFF
breadcrumb.focusForeground#5B6C78
breadcrumb.foreground#8A97A1
button.background#008DC9
button.foreground#FFFFFF
button.hoverBackground#009FDB
button.secondaryBackground#E3ECF3
button.secondaryForeground#0B1A24
button.secondaryHoverBackground#D0E0EC
commandCenter.activeBorder#00000000
commandCenter.border#00000000
commandCenter.hoverBorder#00000000
dropdown.background#FFFFFF
dropdown.border#D9E1E7
dropdown.foreground#10212D
editor.background#F7F9FB
editor.foreground#10212D
editor.inactiveSelectionBackground#E4EDF4
editor.lineHighlightBackground#F0F4F7
editor.selectionBackground#D9E7F0
editorCursor.foreground#008DC9
editorGroup.border#CDD7DF
editorGroupHeader.noTabsBackground#EDF2F6
editorGroupHeader.tabsBackground#EDF2F6
editorIndentGuide.activeBackground1#5B6C78
editorIndentGuide.background1#CDD7DF
editorLineNumber.activeForeground#2F7AB3
editorLineNumber.foreground#bec6cc
editorOverviewRuler.border#00000000
editorWhitespace.foreground#CDD7DF
editorWidget.background#F7F9FB
editorWidget.foreground#10212D
explorer.decorations.ignoredForeground#6C7B87
extensionButton.background#008DC9
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#009FDB
extensionButton.prominentBackground#008DC9
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#009FDB
focusBorder#008DC9
gitDecoration.ignoredResourceForeground#6C7B87
input.background#FFFFFF
input.border#FFFFFF
input.foreground#051018
input.placeholderForeground#6C7B87
keybindingTable.rowsBackground#CFDAE2
list.activeSelectionBackground#D9E7F0
list.activeSelectionForeground#051018
list.focusBackground#D9E7F0
list.highlightForeground#006EA6
list.hoverBackground#EAF2F8
list.hoverForeground#051018
list.inactiveSelectionBackground#EAF2F8
notificationCenterHeader.background#EDF2F6
notifications.background#F7F9FB
notifications.border#D9E1E7
notifications.foreground#051018
notificationsErrorIcon.foreground#BE0D22
notificationsInfoIcon.foreground#40AEDD
notificationsWarningIcon.foreground#B69F10
panel.background#F7F9FB
panel.border#D9E1E7
panelSectionHeader.background#CFDAE2
panelTitle.activeForeground#051018
panelTitle.inactiveForeground#6C7B87
quickInput.background#FFFFFF
quickInput.foreground#0F1F2A
quickInput.list.focusBackground#D9E7F0
scrollbarSlider.activeBackground#9BB5CBAD
scrollbarSlider.background#C3D3DF66
scrollbarSlider.hoverBackground#B0C3D788
sideBar.background#EDF2F6
sideBar.foreground#5B6C78
sideBarSectionHeader.background#F7F9FB
sideBarSectionHeader.foreground#10212D
statusBar.background#EDF2F6
statusBar.debuggingBackground#E2EAF0
statusBar.foreground#10212D
statusBar.noFolderBackground#FFFFFF
statusBarItem.remoteBackground#008DC9
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#F7F9FB
tab.activeBorderTop#008DC9
tab.activeForeground#051018
tab.border#00000000
tab.editor-group-tab-background#EDF2F6
tab.hoverBackground#F7F9FB
tab.inactiveBackground#EDF2F6
tab.inactiveForeground#6C7B87
terminal.ansiBlack#D9E1E7
terminal.ansiBlue#008DC9
terminal.ansiBrightBlack#A6B4BF
terminal.ansiBrightBlue#009FDB
terminal.ansiBrightCyan#64C8F2
terminal.ansiBrightGreen#57B74F
terminal.ansiBrightMagenta#4694CC
terminal.ansiBrightRed#E24858
terminal.ansiBrightWhite#182938
terminal.ansiBrightYellow#D1BC3C
terminal.ansiCyan#40AEDD
terminal.ansiGreen#3C9B3A
terminal.ansiMagenta#2F7AB3
terminal.ansiRed#BE0D22
terminal.ansiWhite#0B1A24
terminal.ansiYellow#B69F10
terminal.background#FFFFFF
terminal.foreground#0B1A24
textLink.foreground#006EA6
textLink.hoverForeground#006EA6
titleBar.activeBackground#EDF2F6
titleBar.activeForeground#051018
titleBar.inactiveBackground#EDF2F6
titleBar.inactiveForeground#6C7B87

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment, sss	#6F7A82	italic
keyword	#005F86	—
keyword.control	#0E3F5A	—
keyword.operator	#0E3F5A	—
keyword.operator.assignment	#486172	—
storage, storage.type	#008DC9	—
constant, constant.numeric, constant.language, constant.character	#B51224	—
string, string.quoted, string.regexp	#868E00	—
variable, variable.parameter	#004F70	—
entity.name.function, support.function	#006EA6	—
entity.name.type, entity.name.class, support.class	#2F7AB3	—
entity.other.attribute-name, meta.annotation	#B51224	—
punctuation, operator	#73818B	—
invalid, invalid.deprecated, invalid.illegal	#C11124	—
variable.other.property, variable.other.object.property, support.type.property-name	#0070A1	—
entity.name.tag, support.class.component	#B51224	—
variable.language, variable.language.this, variable.language.super	#0087BE	—
entity.name.type.module, support.other.module	#2F7AB3	—
text.html.derivative	#172630	—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other	#B51224	—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute	#005F86	—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html	#868E00	—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html	#73818B	—
meta.tag.sgml.doctype, comment.block.html	#B0B9C0	italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component	#B51224	—
entity.other.attribute-name.js, entity.other.attribute-name.tsx	#005F86	—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown	#005F86	bold
markup.bold, markup.bold.markdown	#B51224	bold
markup.italic, markup.italic.markdown	#B51224	italic
string.other.link.title.markdown, markup.underline.link.markdown	#005F87	underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown	#6E7600	—
markup.inline.raw.string.markdown, markup.raw.inline.markdown	#007EB6	—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown	#007EB6	—
markup.quote, markup.quote.markdown	#B51224	italic
markup.list, markup.list.numbered, markup.list.unnumbered	#73818B	—
meta.separator.markdown	#C6CDD3	—
comment.block.html.markdown	#B0B9C0	italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown	#005F86	bold
punctuation.definition.list.begin.markdown	#73818B	—
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#73818B	—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json	#0070A1	—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js	#0070A1	—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call	#0087BE	—
variable.other.object.js, variable.other.object.js.jsx	#004F70	—
support.class.promise.js, support.class.promise.ts	#0087BE	—
meta.diff.header.from-file, punctuation.definition.from-file.diff	#B51224	bold
meta.diff.header.to-file, punctuation.definition.to-file.diff	#5B8A1C	bold
meta.diff.range, meta.diff.index	#006EA6	—
markup.inserted.diff	#6C931E	—
markup.deleted.diff	#B51224	—
markup.changed.diff	#A18A1A	—
meta.diff.context, meta.diff	#88949E	—
punctuation.definition.range.diff	#006EA6	—
meta.diff.header, meta.separator.diff	#2F7AB3	—
punctuation.definition.inserted.diff	#006EA6	—
support.function.misc.css, meta.function.variable.css	#006EA6	—

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