Solo Leveling Theme

Name: Solo Leveling Theme
Author: Amanpandey

Publisher: AmanpandeyThemes in package: 1

A dark, glassy VS Code theme inspired by Solo Leveling anime with neon blue, purple, and crimson highlights

Open in VS Code GitHub

VS Code preview

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

Solo Leveling Theme — Solo Leveling

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#0A0C1299
activityBar.border#00AEEF33
activityBar.foreground#00AEEF
activityBarBadge.background#FF3131
activityBarBadge.foreground#FFFFFF
badge.background#A020F0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#00AEEF
breadcrumb.focusForeground#00AEEF
breadcrumb.foreground#B8B8B8
breadcrumbPicker.background#0A0C1290
button.background#00AEEF
button.foreground#FFFFFF
button.hoverBackground#00AEEF80
commandCenter.activeBackground#00AEEF20
commandCenter.activeForeground#00AEEF
commandCenter.background#0A0C1290
commandCenter.border#00AEEF33
commandCenter.foreground#B8B8B8
commandCenter.inactiveForeground#FFFFFF40
debugToolBar.background#0A0C1290
debugToolBar.border#00AEEF33
diffEditor.insertedTextBackground#A020F015
diffEditor.removedTextBackground#FF313115
dropdown.background#0A0C12
dropdown.border#00AEEF33
dropdown.foreground#E0E0E0
editor.background#0A0C12
editor.findMatchBackground#FF313130
editor.findMatchHighlightBackground#FF313120
editor.foreground#E0E0E0
editor.lineHighlightBackground#00AEEF10
editor.lineHighlightBorder#00AEEF20
editor.selectionBackground#A020F030
editor.selectionHighlightBackground#A020F020
editor.wordHighlightBackground#00AEEF20
editor.wordHighlightStrongBackground#A020F020
editorCursor.background#0A0C12
editorCursor.foreground#00AEEF
editorError.foreground#FF3131
editorGroup.border#00AEEF33
editorGroup.dropBackground#00AEEF20
editorGroupHeader.tabsBackground#0A0C1290
editorGroupHeader.tabsBorder#00AEEF33
editorGutter.addedBackground#A020F0
editorGutter.background#0A0C1299
editorGutter.deletedBackground#FF3131
editorGutter.modifiedBackground#00AEEF
editorHint.foreground#A020F0
editorHoverWidget.background#0A0C1290
editorHoverWidget.border#00AEEF33
editorHoverWidget.statusBarBackground#0A0C1299
editorIndentGuide.activeBackground#00AEEF40
editorIndentGuide.background#FFFFFF10
editorInfo.foreground#00AEEF
editorLineNumber.activeForeground#00AEEF
editorLineNumber.foreground#FFFFFF40
editorLink.activeForeground#00AEEF
editorRuler.foreground#FFFFFF10
editorSuggestWidget.background#0A0C1290
editorSuggestWidget.border#00AEEF33
editorSuggestWidget.foreground#E0E0E0
editorSuggestWidget.highlightForeground#00AEEF
editorSuggestWidget.selectedBackground#00AEEF30
editorWarning.foreground#FFA424
editorWhitespace.foreground#FFFFFF15
editorWidget.background#0A0C1290
editorWidget.border#00AEEF33
editorWidget.foreground#E0E0E0
editorWidget.resizeBorder#00AEEF
extensionButton.prominentBackground#00AEEF
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#00AEEF80
gitDecoration.conflictingResourceForeground#FFA424
gitDecoration.deletedResourceForeground#FF3131
gitDecoration.ignoredResourceForeground#FFFFFF40
gitDecoration.modifiedResourceForeground#00AEEF
gitDecoration.untrackedResourceForeground#A020F0
input.background#0A0C1290
input.border#00AEEF33
input.foreground#E0E0E0
input.placeholderForeground#FFFFFF50
inputOption.activeBorder#00AEEF
inputValidation.errorBackground#FF3131
inputValidation.errorBorder#FF313180
inputValidation.errorForeground#FFFFFF
list.activeSelectionBackground#00AEEF30
list.activeSelectionForeground#00AEEF
list.focusBackground#00AEEF20
list.focusForeground#00AEEF
list.highlightForeground#00AEEF
list.hoverBackground#FFFFFF10
list.hoverForeground#E0E0E0
list.inactiveSelectionBackground#00AEEF20
list.inactiveSelectionForeground#B8B8B8
notificationLink.foreground#00AEEF
notifications.background#0A0C1290
notifications.border#00AEEF33
notifications.foreground#E0E0E0
panel.background#0A0C1290
panel.border#00AEEF33
panelTitle.activeBorder#00AEEF
panelTitle.activeForeground#00AEEF
panelTitle.inactiveForeground#B8B8B8
peekView.border#00AEEF
peekViewEditor.background#0A0C1290
peekViewEditor.matchHighlightBackground#FF313130
peekViewResult.background#0A0C1290
peekViewResult.fileForeground#E0E0E0
peekViewResult.lineForeground#B8B8B8
peekViewResult.matchHighlightBackground#FF313130
peekViewResult.selectionBackground#00AEEF30
peekViewResult.selectionForeground#00AEEF
peekViewTitle.background#0A0C1290
peekViewTitleDescription.foreground#B8B8B8
peekViewTitleLabel.foreground#00AEEF
pickerGroup.border#00AEEF33
pickerGroup.foreground#00AEEF
problemsErrorIcon.foreground#FF3131
problemsInfoIcon.foreground#00AEEF
problemsWarningIcon.foreground#FFA424
progressBar.background#00AEEF
quickInput.background#0A0C1290
quickInput.foreground#E0E0E0
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#00AEEF40
scrollbarSlider.background#FFFFFF15
scrollbarSlider.hoverBackground#FFFFFF25
sideBar.background#0A0C1290
sideBar.border#00AEEF33
sideBar.foreground#B8B8B8
sideBarSectionHeader.background#0A0C1299
sideBarSectionHeader.foreground#00AEEF
sideBarTitle.foreground#00AEEF
statusBar.background#0A0C1290
statusBar.border#00AEEF33
statusBar.debuggingBackground#A020F0
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#B8B8B8
statusBar.noFolderBackground#0A0C1290
statusBarItem.activeBackground#00AEEF33
statusBarItem.hoverBackground#FFFFFF15
tab.activeBackground#00AEEF20
tab.activeBorder#00AEEF
tab.activeBorderTop#00AEEF
tab.activeForeground#00AEEF
tab.border#0A0C1290
tab.hoverBackground#00AEEF10
tab.hoverBorder#00AEEF
tab.inactiveBackground#0A0C1290
tab.inactiveForeground#B8B8B8
terminal.ansiBlack#000000
terminal.ansiBlue#00AEEF
terminal.ansiBrightBlue#50C8FF
terminal.ansiBrightCyan#50E3FF
terminal.ansiBrightGreen#50D0FF
terminal.ansiBrightMagenta#C050FF
terminal.ansiBrightRed#FF6060
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFC864
terminal.ansiCyan#00D5FF
terminal.ansiGreen#00AEEF
terminal.ansiMagenta#A020F0
terminal.ansiRed#FF3131
terminal.ansiWhite#E0E0E0
terminal.ansiYellow#FFA424
terminal.background#0A0C12
terminal.foreground#E0E0E0
titleBar.activeBackground#0A0C1299
titleBar.activeForeground#00AEEF
titleBar.border#00AEEF33
titleBar.inactiveBackground#0A0C1290
titleBar.inactiveForeground#00AEEF80
tree.indentGuidesStroke#FFFFFF20
welcomePage.buttonBackground#0A0C1290
welcomePage.buttonHoverBackground#00AEEF20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4D5673	italic
keyword, keyword.control, keyword.operator, keyword.other.special-method, keyword.other.unit, storage, storage.type, storage.modifier	#00AEEF	—
entity.name.function, meta.function-call, entity.name.class, entity.name.method	#00D5FF	—
variable, variable.parameter, meta.parameter, entity.name.variable	#50E3FF	—
string, constant.character, constant.language, constant.other	#A020F0	—
constant.numeric	#C050FF	—
entity.name.type, support.type	#50C8FF	—
keyword.operator	#00AEEF	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.parameters	#B8B8B8	—
markup.heading	#00AEEF	bold
markup.bold	#E0E0E0	bold
markup.italic	#E0E0E0	italic
markup.underline.link	#00AEEF	—
invalid, invalid.illegal	#FF3131	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#00AEEF	—
entity.other.attribute-name	#A020F0	—
support.function	#00D5FF	—
support.class, support.component	#50C8FF	—
meta.structure.dictionary.json string.quoted.double.json	#00AEEF	—
meta.structure.dictionary.value.json string.quoted.double.json	#A020F0	—
support.type.property-name.css	#00AEEF	—
support.constant.property-value.css	#A020F0	—
entity.name.tag.html	#00AEEF	—
entity.other.attribute-name.html	#A020F0	—

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