One Hunter Theme

Name: One Hunter Theme
Author: Railly Hugo

Publisher: Railly HugoThemes in package: 10

A VSCode theme inspired by Vercel Theme and One Dark Pro

GitHub

Color themes

VS Code preview

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

One Hunter Theme — Flexoki Dark

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.activeBorder#CECDC3
activityBar.background#100F0F
activityBar.border#343331
activityBar.foreground#CECDC3
activityBar.inactiveForeground#878580
activityBarBadge.background#3AA99F
activityBarBadge.foreground#100F0F
badge.background#3AA99F
badge.foreground#100F0F
button.background#3AA99F
button.foreground#100F0F
diffEditor.insertedTextBackground#66800B99
diffEditor.removedTextBackground#AF302999
dropdown.background#1C1B1A
dropdown.border#343331
dropdown.foreground#CECDC3
dropdown.listBackground#100F0F
editor.background#100F0F
editor.findMatchBackground#AD8301
editor.findMatchHighlightBackground#AD8301cc
editor.findRangeHighlightBackground#1C1B1A
editor.foreground#CECDC3
editor.hoverHighlightBackground#343331
editor.inactiveSelectionBackground#282726
editor.lineHighlightBackground#1C1B1A
editor.lineHighlightBorder#282726
editor.rangeHighlightBackground#403E3C
editor.selectionBackground#CECDC333
editor.selectionHighlightBackground#CECDC333
editorBracketMatch.background#282726
editorBracketMatch.border#343331
editorError.foreground#D14D41
editorGroup.border#343331
editorGroupHeader.tabsBackground#100F0F
editorGutter.addedBackground#879A39
editorGutter.background#100F0F
editorGutter.deletedBackground#D14D41
editorGutter.modifiedBackground#3AA99F
editorHoverWidget.background#282726
editorIndentGuide.background1#343331
editorInfo.foreground#4385BE
editorInlayHint.background#343331
editorInlayHint.foreground#878580
editorInlayHint.typeBackground#343331
editorInlayHint.typeForeground#CECDC3
editorLineNumber.activeForeground#CECDC3
editorLineNumber.foreground#403E3C
editorSuggestWidget.background#100F0F
editorSuggestWidget.border#343331
editorSuggestWidget.foreground#CECDC3
editorSuggestWidget.highlightForeground#878580
editorSuggestWidget.selectedBackground#343331
editorWarning.foreground#DA702C
editorWhitespace.foreground#403E3C
editorWidget.background#1C1B1A
editorWidget.border#343331
input.background#1C1B1A
input.border#343331
input.foreground#CECDC3
input.placeholderForeground#878580
inputOption.activeBackground#282726
inputOption.activeBorder#343331
inputOption.activeForeground#CECDC3
inputValidation.errorBackground#D14D41
inputValidation.errorBorder#AF3029
inputValidation.infoBackground#3AA99F
inputValidation.infoBorder#24837B
inputValidation.warningBackground#DA702C
inputValidation.warningBorder#BC5215
list.activeSelectionBackground#403E3C
list.activeSelectionForeground#CECDC3
list.errorForeground#D14D41
list.hoverBackground#343331
list.hoverForeground#CECDC3
list.inactiveSelectionBackground#343331
list.inactiveSelectionForeground#CECDC3
list.warningForeground#DA702C
menu.background#100F0F
menu.border#343331
menu.foreground#CECDC3
menu.selectionBackground#343331
menu.selectionForeground#CECDC3
merge.border#343331
merge.commonContentBackground#403E3C
merge.commonHeaderBackground#343331
merge.currentContentBackground#66800B
merge.currentHeaderBackground#879A39
merge.incomingContentBackground#24837B
merge.incomingHeaderBackground#3AA99F
notifications.background#282726
panel.background#100F0F
panel.border#343331
panelTitle.activeBorder#403E3C
panelTitle.activeForeground#CECDC3
panelTitle.inactiveForeground#878580
peekView.border#343331
peekViewEditor.background#100F0F
peekViewEditor.matchHighlightBackground#403E3C
peekViewResult.background#1C1B1A
peekViewResult.fileForeground#CECDC3
peekViewResult.lineForeground#878580
peekViewResult.matchHighlightBackground#403E3C
peekViewResult.selectionBackground#282726
peekViewResult.selectionForeground#575653
peekViewTitle.background#343331
peekViewTitleDescription.foreground#878580
peekViewTitleLabel.foreground#CECDC3
sideBar.activeBackground#403E3C
sideBar.activeForeground#CECDC3
sideBar.background#100F0F
sideBar.border#343331
sideBar.fileIcon.foreground#4385BE
sideBar.folderIcon.foreground#879A39
sideBar.foreground#CECDC3
sideBar.hoverBackground#343331
sideBar.hoverForeground#878580
sideBarSectionHeader.background#1C1B1A
sideBarSectionHeader.border#343331
sideBarSectionHeader.foreground#CECDC3
sideBarTitle.foreground#CECDC3
statusBar.background#100F0F
statusBar.border#343331
statusBar.debuggingBackground#D14D41
statusBar.debuggingForeground#CECDC3
statusBar.foreground#CECDC3
statusBar.noFolderBackground#403E3C
statusBar.noFolderForeground#575653
tab.activeBackground#100F0F
tab.activeForeground#CECDC3
tab.activeModifiedBorder#D0A215
tab.border#343331
tab.hoverBackground#343331
tab.inactiveBackground#1C1B1A
tab.inactiveForeground#878580
tab.inactiveModifiedBorder#4385BE
tab.unfocusedActiveModifiedBorder#AD8301
tab.unfocusedHoverBackground#343331
tab.unfocusedInactiveModifiedBorder#205EA6
terminal.ansiBlue#4385BE
terminal.ansiCyan#3AA99F
terminal.ansiGreen#879A39
terminal.ansiMagenta#3AA99F
terminal.ansiRed#D14D41
terminal.ansiYellow#D0A215
terminal.background#100F0F
terminal.foreground#CECDC3
terminalCursor.background#100F0F
terminalCursor.foreground#CECDC3
titleBar.activeBackground#100F0F
titleBar.activeForeground#CECDC3
titleBar.border#343331
titleBar.inactiveBackground#1C1B1A
titleBar.inactiveForeground#878580

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, support.type.property-name.css	#CECDC3	—
entity.name.type.class	#DA702C	—
entity.name.type.interface, entity.name.type	#D0A215	—
entity.name.type.struct	#DA702C	—
entity.name.type.enum	#DA702C	—
meta.object-literal.key, support.type.property-name	#DA702C	—
entity.name.function.method, meta.function.method	#879A39	—
entity.name.function, support.function, meta.function-call.generic	#DA702C	bold
variable, meta.variable, variable.other.object.property	#CECDC3	—
variable.other.object, variable.other.readwrite.alias	#879A39	—
variable.other.global, variable.language.this	#CE5D97	—
variable.other.local	#282726	—
variable.parameter, meta.parameter	#CECDC3	—
variable.other.property, meta.property	#4385BE	—
string, string.other.link, markup.inline.raw.string.markdown, markup.inline.raw.code.mdx	#3AA99F	—
constant.character.escape, constant.other.placeholder	#CECDC3	—
keyword	#879A39	—
keyword.control.import, keyword.control.from, keyword.import	#D14D41	—
storage.modifier, keyword.modifier, storage.type	#4385BE	—
comment, punctuation.definition.comment	#878580	—
comment.documentation, comment.line.documentation	#575653	—
constant.numeric	#8B7EC8	—
constant.language.boolean, constant.language.json	#D0A215	—
keyword.operator	#D14D41	—
entity.name.function.preprocessor, meta.preprocessor	#4385BE	—
meta.preprocessor	#CE5D97	—
markup.underline.link, string.other.link.destination.mdx	#4385BE	—
entity.name.tag	#4385BE	—
support.class.component	#CE5D97	—
entity.other.attribute-name, meta.attribute	#D0A215	—
support.type	#D0A215	—
variable.other.constant, variable.readonly	#CECDC3	—
entity.name.label, punctuation.definition.label	#CE5D97	—
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown	#D0A215	—
entity.name.module, storage.modifier.module	#D14D41	—
variable.type.parameter, variable.parameter.type	#DA702C	—
keyword.control.exception, keyword.control.trycatch	#CE5D97	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#D0A215	—
variable.function	#CECDC3	—
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block	#878580	—
storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, constant.language.go, support.class.dart, keyword.other.documentation, storage.modifier.import.java, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown, entity.name.section.markdown, entity.name.section.mdx, string.other.number.mdx, variable.ordered.list.mdx, variable.unordered.list.mdx	#D0A215	—
	#879A39	—
markup.italic.markdown, support.type.python, variable.legacy.builtin.python, support.constant.property-value.css, storage.modifier.attribute.swift	#3AA99F	—
	#4385BE	—
keyword.channel.go, keyword.other.platform.os.swift	#8B7EC8	—
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx	#CE5D97	—
	#D14D41	—
	#DA702C	—

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