Best Themes Redefined 🚀

Name: Best Themes Redefined 🚀
Author: Lakshit Somani

Publisher: Lakshit SomaniThemes in package: 92

🎨🚀 A never seen collection of 92 hand crafted themes no where to be found on Internet 💻

Color themes

VS Code preview

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

Best Themes Redefined 🚀 — Best Themes - Horizon

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#1c1e26
activityBar.foreground#d5d8dab3
activityBarBadge.background#e95378
activityBarBadge.foreground#06060c
badge.background#2e303e
badge.foreground#d5d8da
breadcrumbPicker.background#232530
button.background#2e303e
debugToolBar.background#1c1e26
diffEditor.insertedTextBackground#09f7a01a
diffEditor.removedTextBackground#f43e5c1a
dropdown.background#232530
dropdown.listBackground#2e303e
editor.background#1c1e26
editor.findMatchBackground#6c6f9380
editor.findMatchHighlightBackground#6c6f934d
editor.findRangeHighlightBackground#6c6f931a
editor.hoverHighlightBackground#6c6f934d
editor.lineHighlightBackground#2e303e4d
editor.rangeHighlightBackground#2e303e80
editor.selectionBackground#2e303eb3
editor.selectionHighlightBackground#6c6f934d
editor.wordHighlightBackground#6c6f9380
editor.wordHighlightStrongBackground#6c6f9380
editorBracketMatch.background#6c6f9380
editorBracketMatch.border#6c6f9300
editorCodeLens.foreground#6c6f9380
editorCursor.background#1c1e26
editorCursor.foreground#e95378
editorError.foreground#f43e5c
editorGroup.border#1a1c23
editorGroup.dropBackground#6c6f934d
editorGroupHeader.tabsBackground#1c1e26
editorGutter.addedBackground#09f7a0b3
editorGutter.deletedBackground#f43e5cb3
editorGutter.modifiedBackground#21bfc2b3
editorIndentGuide.activeBackground#2e303e
editorIndentGuide.background#2e303e80
editorLineNumber.activeForeground#d5d8da80
editorLineNumber.foreground#d5d8da1a
editorOverviewRuler.addedForeground#09f7a080
editorOverviewRuler.border#2e303eb3
editorOverviewRuler.bracketMatchForeground#d5d8da80
editorOverviewRuler.deletedForeground#f43e5c80
editorOverviewRuler.errorForeground#f43e5ce6
editorOverviewRuler.findMatchForeground#6c6f93
editorOverviewRuler.modifiedForeground#21bfc280
editorOverviewRuler.warningForeground#27d79780
editorRuler.foreground#6c6f934d
editorSuggestWidget.highlightForeground#e95378
editorWarning.foreground#27d797b3
editorWidget.background#232530
editorWidget.border#232530
errorForeground#f43e5c
extensionButton.prominentBackground#e95378
extensionButton.prominentHoverBackground#e9436d
focusBorder#1a1c23
foreground#d5d8da
gitDecoration.addedResourceForeground#27d797b3
gitDecoration.deletedResourceForeground#f43e5c
gitDecoration.ignoredResourceForeground#d5d8da4d
gitDecoration.modifiedResourceForeground#fab38e
gitDecoration.untrackedResourceForeground#27d797
input.background#2e303e
inputOption.activeBorder#e9436d80
inputValidation.errorBackground#f43e5c80
inputValidation.errorBorder#f43e5c00
list.activeSelectionBackground#2e303e80
list.activeSelectionForeground#d5d8da
list.dropBackground#6c6f9380
list.errorForeground#f43e5ce6
list.focusBackground#2e303e80
list.focusForeground#d5d8da
list.highlightForeground#e95378
list.hoverBackground#2e303e80
list.hoverForeground#d5d8da
list.inactiveFocusBackground#2e303e80
list.inactiveSelectionBackground#2e303e4d
list.inactiveSelectionForeground#d5d8da
list.warningForeground#27d797b3
panelTitle.activeBorder#e95378
peekView.border#1a1c23
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#6c6f9380
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#6c6f9380
peekViewResult.selectionBackground#2e303e80
peekViewTitle.background#232530
pickerGroup.foreground#e95378e6
progressBar.background#e95378
scrollbar.shadow#16161c
scrollbarSlider.activeBackground#6c6f9380
scrollbarSlider.background#6c6f931a
scrollbarSlider.hoverBackground#6c6f934d
selection.background#6c6f9380
sideBar.background#1c1e26
sideBar.dropBackground#6c6f934d
sideBar.foreground#d5d8da80
sideBarSectionHeader.background#1c1e26
sideBarSectionHeader.foreground#d5d8dab3
statusBar.background#1c1e26
statusBar.debuggingBackground#fab38e
statusBar.debuggingForeground#06060c
statusBar.foreground#d5d8da80
statusBar.noFolderBackground#1c1e26
statusBarItem.hoverBackground#2e303e
statusBarItem.prominentBackground#2e303e
statusBarItem.prominentHoverBackground#6c6f93
tab.activeBorder#e95378
tab.border#1c1e2600
tab.inactiveBackground#1c1e26
terminal.ansiBlue#26bbd9
terminal.ansiBrightBlue#3fc4de
terminal.ansiBrightCyan#6be4e6
terminal.ansiBrightGreen#3fdaa4
terminal.ansiBrightMagenta#f075b5
terminal.ansiBrightRed#ec6a88
terminal.ansiBrightYellow#fbc3a7
terminal.ansiCyan#59e1e3
terminal.ansiGreen#29d398
terminal.ansiMagenta#ee64ac
terminal.ansiRed#e95678
terminal.ansiYellow#fab795
terminal.foreground#d5d8da
terminal.selectionBackground#6c6f934d
terminalCursor.background#d5d8da
terminalCursor.foreground#6c6f9380
textLink.activeForeground#e9436d
textLink.foreground#e95378
titleBar.activeBackground#1c1e26
titleBar.inactiveBackground#1c1e26
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BBBBBB4D	italic
constant	#F09483E6	—
constant.character.escape	#25B0BCE6	—
entity.name	#FAC29AE6	—
entity.name.function	#25B0BCE6	—
entity.name.tag	#E95678E6	normal
entity.name.type, storage.type.cs	#FAC29AE6	—
entity.other.attribute-name	#F09483E6	normal
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#25B0BCE6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
entity.name.variable, variable	#E95678E6	—
keyword	#B877DBE6	normal
keyword.operator	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#B877DBE6	—
keyword.other.unit	#F09483E6	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#E95678E6	—
markup.bold	#B877DBE6	bold
markup.italic	#25B0BCE6	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#FAB795E6	—
storage	#B877DBE6	normal
string.quoted, string.template	#FAB795E6	—
string.regexp	#F09483E6	—
string.other.link	#F09483E6	—
support	#FAC29AE6	—
support.function	#25B0BCE6	—
support.variable	#E95678E6	—
support.type.property-name, meta.object-literal.key	#E95678E6	—
support.type.property-name.css	#BBBBBB	—
variable.language	#FAC29AE6	italic
variable.parameter	—	italic
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag	#E95678B3	normal
punctuation.separator	#BBBBBB	—
punctuation.definition.template-expression, punctuation.quasi.element	#B877DBE6	—
punctuation.section.embedded	#B877DBE6	—
punctuation.definition.list	#F09483E6	—
comment, variable.language, variable.parameter, variable.other.object, keyword, keyword.control, entity.name.function, storage.type, storage.type.modifier, storage.type.accessor, storage.type.built-in, entity.name.type	—
keyword.control, keyword, storage.type.built-in	—
comment	—	—
keyword.operator, punctuation.separator, punctuation.separator, punctuation.support.type.property-name.begin.json	—
comment, variable.language, variable.parameter, storage.type, keyword	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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