Hypersubatomic

Name: Hypersubatomic
Author: Neil Panchal

Publisher: Neil PanchalThemes in package: 1

Hypersubatomic is a high contrast UI and syntax theme for VSCode

Open in VS Code GitHub

VS Code preview

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

Hypersubatomic — Hypersubatomic

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#090B10
activityBar.border#00000060
activityBar.foreground#8F93A2
activityBarBadge.background#00ae6b
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#464B5D
breadcrumb.activeSelectionForeground#00ae6b
breadcrumb.background#0F111A
breadcrumb.focusForeground#8F93A2
breadcrumb.foreground#4B526D
breadcrumbPicker.background#090B10
button.background#717CB450
debugToolBar.background#0F111A
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#0F111A
dropdown.border#FFFFFF10
editor.background#0F111A
editor.foreground#8F93A2
editor.lineHighlightBackground#00000050
editor.selectionBackground#717CB450
editor.selectionHighlightBackground#717CB450
editor.wordHighlightBackground#2f0168
editorBracketMatch.background#00000000
editorBracketMatch.border#300089
editorCursor.foreground#ffc200
editorError.foreground#ed3f00
editorGroup.border#00000030
editorGroupHeader.tabsBackground#0F111A
editorGutter.addedBackground#C3E88D60
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#82AAFF60
editorHoverWidget.background#0F111A
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground#3B3F51
editorIndentGuide.background#3B3F5170
editorInfo.foreground#00a1b4
editorLineNumber.activeForeground#4B526D
editorLineNumber.foreground#3B3F5180
editorLink.activeForeground#8F93A2
editorMarkerNavigation.background#8F93A205
editorOverviewRuler.border#0F111A
editorOverviewRuler.errorForeground#f2283c
editorOverviewRuler.infoForeground#00a1b4
editorOverviewRuler.warningForeground#ffc200
editorRuler.foreground#3B3F51
editorSuggestWidget.background#0F111A
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#8F93A2
editorSuggestWidget.highlightForeground#00ae6b
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#ffc200
editorWhitespace.foreground#8F93A240
editorWidget.background#090B10
editorWidget.resizeBorder#277dff
extensionButton.prominentBackground#C3E88D90
extensionButton.prominentHoverBackground#C3E88D
focusBorder#FFFFFF00
gitDecoration.conflictingResourceForeground#8F93A2
gitDecoration.deletedResourceForeground#8F93A2
gitDecoration.ignoredResourceForeground#8F93A2
gitDecoration.modifiedResourceForeground#8F93A2
gitDecoration.untrackedResourceForeground#8F93A2
input.background#1A1C25
input.border#FFFFFF10
input.foreground#EEFFFF
input.placeholderForeground#8F93A260
inputValidation.errorBorder#f2283c
inputValidation.infoBorder#82AAFF50
inputValidation.warningBorder#ffc200
list.activeSelectionBackground#090B10
list.activeSelectionForeground#ffc200
list.focusBackground#8F93A220
list.focusForeground#8F93A2
list.highlightForeground#ffc200
list.hoverBackground#090B10
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#00ae6b
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#0F111A
menu.foreground#8F93A2
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#00ae6b
menu.separatorBackground#8F93A2
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#00ae6b
notificationLink.foreground#00ae6b
notifications.background#0F111A
notifications.foreground#8F93A2
panel.background#090B10
panel.border#00000060
panel.dropBackground#8F93A2
panelTitle.activeBorder#00ae6b
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#8F93A2
peekView.border#00000030
peekViewEditor.background#8F93A205
peekViewEditor.matchHighlightBackground#717CB450
peekViewEditorGutter.background#8F93A205
peekViewResult.background#8F93A205
peekViewResult.matchHighlightBackground#717CB450
peekViewResult.selectionBackground#4B526D70
peekViewTitle.background#8F93A205
peekViewTitleDescription.foreground#8F93A260
pickerGroup.foreground#00ae6b
progressBar.background#00a1b4
scrollbar.shadow#0F111A00
scrollbarSlider.activeBackground#00ae6b
scrollbarSlider.background#8F93A220
scrollbarSlider.hoverBackground#8F93A210
selection.background#8F93A2
settings.checkboxBackground#090B10
settings.checkboxForeground#8F93A2
settings.dropdownBackground#090B10
settings.dropdownForeground#8F93A2
settings.headerForeground#00ae6b
settings.modifiedItemIndicator#00ae6b
settings.numberInputBackground#090B10
settings.numberInputForeground#8F93A2
settings.textInputBackground#090B10
settings.textInputForeground#8F93A2
sideBar.background#090B10
sideBar.border#383a3f
sideBar.foreground#8F93A2
sideBarSectionHeader.background#090B10
sideBarSectionHeader.border#00000060
sideBarTitle.foreground#8F93A2
statusBar.background#090B10
statusBar.border#00000060
statusBar.debuggingBackground#ffc200
statusBar.debuggingForeground#000000
statusBar.foreground#4B526D
statusBar.noFolderBackground#0F111A
statusBarItem.hoverBackground#464B5D20
tab.activeBackground#272937
tab.activeBorder#875afb
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#4B526D
tab.border#0F111A
tab.inactiveBackground#0F111A
tab.inactiveForeground#8F93A2
tab.unfocusedActiveBorder#464B5D
tab.unfocusedActiveForeground#8F93A2
terminal.ansiBlack#000000
terminal.ansiBlue#277dff
terminal.ansiBrightBlack#464B5D
terminal.ansiBrightBlue#277dff
terminal.ansiBrightCyan#00a1b4
terminal.ansiBrightGreen#00ae6b
terminal.ansiBrightMagenta#875afb
terminal.ansiBrightRed#f2283c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffc200
terminal.ansiCyan#00a1b4
terminal.ansiGreen#00ae6b
terminal.ansiMagenta#875afb
terminal.ansiRed#f2283c
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffc200
textLink.activeForeground#8F93A2
textLink.foreground#00a1b4
titleBar.activeBackground#090B10
titleBar.activeForeground#8F93A2
titleBar.border#00000060
titleBar.inactiveBackground#090B10
titleBar.inactiveForeground#4B526D
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source	#99a5ba	—
comment.line, comment.block, punctuation.definition.comment, string.quoted.docstring, string.quoted.double.block	#42577e	—
constant.numeric	#875afb	—
constant.character, constant.other, constant.language, keyword.other.unit, variable.parameter	#f2283c	—
entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, entity.name.type, entity.name.impl, entity.name.class.forward-decl, entity.other.inhereted-class, entity.name.namespace	#ff7a00	—
entity.name.function, entity.name.function.constructor, entity.name.function.destructor	#f2283c	—
invalid, invalid.illegal	#f2283c	—
string.regexp	#00a1b4	—
keyword, storage.type, storage.modifier	#00ae6b	—
keyword.control, keyword.conditional, keyword.import, punctuation.definition.keyword, keyword.control.c, keyword.control.c++, keyword.operator.c++, keyword.operator.compound.ccpp, keyword.operator.logical.ccpp, keyword.operator.bitwise.ccpp, keyword.operator.comparison.ccpp, keyword.operator.arithetic.ccpp	#875afb	—
keyword.operator, keywrod.operator.word, keyword.logical, keyword.bitwise, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.arithmetic, source.c++ meta.function.c meta.block.c keyword.operator.c, source.c++ meta.class-struct-block.c++ keyword.operator.c++	#0093FF	—
markup.heading	#ffc200	—
markup.list.unnumbered, markup.list.unnumbered	#00ae6b	—
markup.bold	—	bold
markup.italic	—	italic
markup.deleted	#f2283c	—
markup.inserted	#00ae6b	—
markup.changed	#ffc200	—
markup.underline.link	#277dff	—
markup.quote	#875afb	italic
markup.raw, markup.inline.raw, markup.raw.inline, markup.raw.block, markup.other	#00a1b4	—
variable, string constant.other.placeholder	#eef6ff	—
variable.language, variable.other	#ffc200	—
string, string, meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.c++ meta.function.c meta.block.c string.quoted.double.c constant.other.placeholder.c	#f2283c	—
constant.character.escape.c	#d72e82	—
raw.string prefix, raw.string begin, raw.string end	#d72e82	—
raw.string	#d72e82	—
entity.name.tag	#ffc200	—
storage.type	#0093FF	—
keyword.other, support.function.builtin, meta.function-call support.type, storage.type.c	#00ae6b	—
meta.function-call, meta.function-call variable.language, meta.item-access, meta.item-access variable.language, entity.other.attribute-name, entity.name.function, support.function, source.c++ meta.function.c meta.block.c meta.function-call.c support.function.any-method.c, source.c++ meta.function.c meta.block.c meta.function-call.c support.function.any-method.c, source.c++ meta.class-struct-block.c++ entity.name.type.c++, meta.class-struct.c++ entity.name.type.c++	#00ae6b	—
meta.function-call.arguments, meta.function-call.arguments variable.language, meta.item-access.arguments, meta.function.c meta.block.c meta.function-call.c	#bebebe	—
meta.function-call punctuation.definition.arguments.begin, meta.function-call punctuation.definition.arguments.end, meta.item-access punctuation.definition.arguments.begin, meta.item-access punctuation.definition.arguments.end	#b3b3b3	—
meta.preprocessor.c.include, meta.preprocessor.c.include keyword.control.import.include.c, meta.preprocessor.c, meta.preprocessor.c keyword.control.import.c, meta.preprocessor.macro.c, meta.preprocessor.macro.c keyword.control.import.define.c	#6C35FF	—
entity.name.function.preprocessor.c, string.quoted.double.include.c, string.quoted.other.lt-gt.include.c	#00ae6b	—
storage.modifier.c, storage.modifier.c++	#f2283c	—
semi_colon.ccpp	#BABABA	—
semi_colon.eol.ccpp	#BABABA	—
open.curly.bracket.ccpp, close.curly.bracket.ccpp, open.round.bracket.ccpp, close.round.bracket.ccpp, open.angle.bracket.ccpp, close.angle.bracket.ccpp, open.curly.bracket.ovr.ccpp, close.curly.bracket.ovr.ccpp	#BABABA	—
open.curly.bracket.block, close.curly.bracket	#BABABA	—
coma.ccpp, semi_colon.ccpp	#BABABA	—
period.ccpp	#BABABA	—
keyword.operator.arithmetic.ccpp, keyword.operator.comparison.ccpp, keyword.operator.bitwise.ccpp, keyword.operator.logical.ccpp, keyword.operator.compound.ccpp	#BABABA	—
pointer.c, pointer.ccpp, address.c, address.ccpp, array.ccpp	#f2283c	—
deconstructor.ccpp	#ff7a00	italic
variable	#d72e82	—
storage type	#ff7a00	—
member.initializer	#8fa0bf	—
support.type.exception	#e54545	—
invalid	#F92672	—
invalid.deprecated	#AE81FF	—
meta.structure.dictionary.json string.quoted.double.json	#bfbfbf	—
meta.diff, meta.diff.header	#ffc200	—
constant.numeric.line-number.find-in-files - match	#AE81FFA0	—
entity.name.filename.find-in-files	#ffc200	—

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