Null Theme

Name: Null Theme
Author: kimberlycasamina

Publisher: kimberlycasaminaThemes in package: 8

Cyberpunk-inspired theme with bright neon colors, clear contrast, and frameless minimal chrome. Features absolute black and near-black variants.

GitHub

Color themes

VS Code preview

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

Null Theme — Null Theme - Vivid

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.background#0D0D0D
activityBar.border#FF0080
activityBar.foreground#00F5FF
activityBar.inactiveForeground#888888
activityBarBadge.background#FF0080
activityBarBadge.foreground#0D0D0D
badge.background#FF0080
badge.foreground#0D0D0D
breadcrumb.activeSelectionForeground#FF0080
breadcrumb.background#0D0D0D
breadcrumb.focusForeground#00F5FF
breadcrumb.foreground#888888
button.background#FF0080
button.foreground#0D0D0D
button.hoverBackground#FF40A0
dropdown.background#0D0D0D
dropdown.border#FF0080
dropdown.foreground#00F5FF
editor.background#0D0D0D
editor.findMatchBackground#FFFF00AA
editor.findMatchHighlightBackground#FFFF0060
editor.foreground#00F5FF
editor.lineHighlightBackground#1A1A1A
editor.selectionBackground#FF008080
editor.selectionHighlightBackground#00F5FF50
editor.wordHighlightBackground#00FF8060
editor.wordHighlightStrongBackground#FF006680
editorCursor.foreground#FF0080
editorGroupHeader.tabsBackground#0D0D0D
editorGroupHeader.tabsBorder#FF0080
editorIndentGuide.activeBackground#00F5FF
editorIndentGuide.background#444444
editorLineNumber.activeForeground#00F5FF
editorLineNumber.foreground#888888
editorOverviewRuler.addedForeground#00FF80
editorOverviewRuler.border#0D0D0D
editorOverviewRuler.deletedForeground#FF0040
editorOverviewRuler.errorForeground#FF0040
editorOverviewRuler.infoForeground#00F5FF
editorOverviewRuler.modifiedForeground#FFFF00
editorOverviewRuler.warningForeground#FFFF00
editorRuler.foreground#444444
editorWhitespace.foreground#666666
gitDecoration.conflictingResourceForeground#FF8000
gitDecoration.deletedResourceForeground#FF0040
gitDecoration.ignoredResourceForeground#888888
gitDecoration.modifiedResourceForeground#FFFF00
gitDecoration.submoduleResourceForeground#00F5FF
gitDecoration.untrackedResourceForeground#00FF80
input.background#0D0D0D
input.border#FF0080
input.foreground#00F5FF
input.placeholderForeground#888888
inputOption.activeBorder#FF0080
list.activeSelectionBackground#FF008080
list.activeSelectionForeground#00F5FF
list.focusBackground#FF008080
list.hoverBackground#00F5FF40
list.inactiveSelectionBackground#FF008040
menu.background#0D0D0D
menu.foreground#00F5FF
menu.selectionBackground#FF008080
menu.selectionForeground#00F5FF
menu.separatorBackground#FF0080
menubar.selectionBackground#FF008080
menubar.selectionForeground#00F5FF
minimap.background#0D0D0D
minimapSlider.activeBackground#FF0080A0
minimapSlider.background#FF008060
minimapSlider.hoverBackground#FF008080
panel.background#0D0D0D
panel.border#FF0080
panelTitle.activeBorder#FF0080
panelTitle.activeForeground#00F5FF
panelTitle.inactiveForeground#888888
progressBar.background#FF0080
scrollbar.shadow#0D0D0D
scrollbarSlider.activeBackground#FF0080A0
scrollbarSlider.background#FF008060
scrollbarSlider.hoverBackground#FF008080
sideBar.background#0D0D0D
sideBar.border#FF0080
sideBar.foreground#00F5FF
sideBarSectionHeader.background#1A1A1A
sideBarSectionHeader.foreground#00F5FF
sideBarTitle.foreground#FF0080
statusBar.background#0D0D0D
statusBar.border#FF0080
statusBar.debuggingBackground#FF0040
statusBar.debuggingForeground#0D0D0D
statusBar.foreground#00F5FF
statusBar.nofolderBackground#0D0D0D
tab.activeBackground#0D0D0D
tab.activeBorder#FF0080
tab.activeBorderTop#FF0080
tab.activeForeground#00F5FF
tab.border#444444
tab.inactiveBackground#0D0D0D
tab.inactiveForeground#888888
terminal.ansiBlack#0D0D0D
terminal.ansiBlue#0080FF
terminal.ansiBrightBlack#888888
terminal.ansiBrightBlue#4080FF
terminal.ansiBrightCyan#80F5FF
terminal.ansiBrightGreen#40FF80
terminal.ansiBrightMagenta#FF40FF
terminal.ansiBrightRed#FF4080
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF80
terminal.ansiCyan#00F5FF
terminal.ansiGreen#00FF80
terminal.ansiMagenta#FF0080
terminal.ansiRed#FF0040
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFFF00
terminal.background#0D0D0D
terminal.foreground#00F5FF
titleBar.activeBackground#0D0D0D
titleBar.activeForeground#00F5FF
titleBar.border#FF0080
titleBar.inactiveBackground#0D0D0D
titleBar.inactiveForeground#888888
tree.indentGuidesStroke#FF0080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A6A6A6	italic
string, string.quoted, string.template	#32FF7E	—
constant.numeric, constant.language	#FFD700	—
keyword, keyword.control, keyword.other	#FF1493	bold
entity.name.function, support.function, meta.function-call	#1E90FF	bold
entity.name.class, entity.name.type, support.class	#ADFF2F	bold
variable, variable.other	#87CEFA	—
variable.parameter, parameter	#FF6347	italic
variable.other.property, support.type.property-name	#98FB98	—
constant, constant.other	#FFA500	bold
keyword.operator, punctuation	#FF4500	—
entity.name.type, support.type, storage.type	#9370DB	bold
keyword.control.import, keyword.control.export, keyword.control.from	#FF69B4	bold
entity.name.tag, punctuation.definition.tag	#FF4500	bold
entity.other.attribute-name	#4682B4	—
entity.name.tag.css, entity.other.attribute-name.class.css	#FF6347	bold
support.type.property-name.css	#32CD32	—
support.constant.property-value.css	#87CEEB	—
support.type.property-name.json	#FFA07A	—
support.class.component	#20B2AA	bold
string.regexp	#DC143C	—
string.template, punctuation.definition.template-expression	#40E0D0	—
entity.name.function.decorator, punctuation.decorator	#DAA520	italic
markup.heading	#5F9EA0	bold
markup.underline.link	#7FFFD4	—
markup.inline.raw, markup.fenced_code	#8A2BE2	—
invalid, invalid.illegal	#FF0000	bold underline
invalid.deprecated	#FF8C00	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}!`;
}