Hacker Lime Theme

Name: Hacker Lime Theme
Author: Esteban Escobar

Publisher: Esteban EscobarThemes in package: 1

A vibrant hacker-style theme with lime green accents, perfect for React Native development. Features glassmorphism support and beautiful syntax highlighting.

GitHub

VS Code preview

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

Hacker Lime Theme — Hacker Lime

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.activeBackground#9fef0015
activityBar.activeBorder#9fef00
activityBar.background#0a0e14
activityBar.border#9fef0030
activityBar.foreground#9fef00
activityBar.inactiveForeground#4a5568
activityBarBadge.background#9fef00
activityBarBadge.foreground#0a0e14
button.background#9fef00
button.foreground#0a0e14
button.hoverBackground#b4ff33
diffEditor.insertedTextBackground#9fef0020
diffEditor.removedTextBackground#ff333320
dropdown.background#0a0e14
dropdown.border#9fef0050
dropdown.foreground#e6e6e6
editor.background#0f1419
editor.findMatchBackground#9fef0040
editor.findMatchHighlightBackground#9fef0020
editor.foreground#e6e6e6
editor.lineHighlightBackground#1a1f2e
editor.selectionBackground#2d3748
editorCursor.foreground#9fef00
editorError.foreground#ff3333
editorGroup.background#0a0e14
editorGroup.border#9fef0020
editorGroupHeader.tabsBackground#0a0e14
editorGroupHeader.tabsBorder#9fef0020
editorHoverWidget.background#0a0e14
editorHoverWidget.border#9fef0050
editorIndentGuide.activeBackground#9fef0030
editorIndentGuide.background#1a1f2e
editorLineNumber.activeForeground#9fef00
editorLineNumber.foreground#4a5568
editorRuler.foreground#1a1f2e
editorSuggestWidget.background#0a0e14
editorSuggestWidget.border#9fef0050
editorSuggestWidget.highlightForeground#9fef00
editorSuggestWidget.selectedBackground#1a1f2e
editorWhitespace.foreground#1a1f2e
editorWidget.background#0a0e14
editorWidget.border#9fef0050
input.background#0a0e14
input.border#9fef0050
input.foreground#e6e6e6
input.placeholderForeground#6e7681
list.activeSelectionBackground#9fef0020
list.activeSelectionForeground#9fef00
list.focusBackground#9fef0025
list.highlightForeground#9fef00
list.hoverBackground#1a1f2e
list.inactiveSelectionBackground#1a1f2e
list.inactiveSelectionForeground#c8d3f5
notification.background#0a0e14
notification.border#9fef0050
panel.background#0a0e14
panel.border#9fef0030
panelTitle.activeBorder#9fef00
panelTitle.activeForeground#9fef00
panelTitle.inactiveForeground#6e7681
scrollbarSlider.activeBackground#9fef0040
scrollbarSlider.background#9fef0020
scrollbarSlider.hoverBackground#9fef0030
sideBar.background#0a0e14
sideBar.border#9fef0030
sideBar.foreground#c8d3f5
sideBarSectionHeader.background#0f1419
sideBarSectionHeader.foreground#9fef00
sideBarTitle.foreground#00ff9f
statusBar.background#0a0e14
statusBar.border#9fef0030
statusBar.debuggingBackground#ff3333
statusBar.debuggingForeground#ffffff
statusBar.foreground#9fef00
statusBar.noFolderBackground#0a0e14
statusBarItem.hoverBackground#9fef0020
tab.activeBackground#0f1419
tab.activeBorder#9fef00
tab.activeForeground#00ff9f
tab.border#0a0e14
tab.inactiveBackground#0a0e14
tab.inactiveForeground#6e7681
terminal.ansiBrightCyan#7dd3c0
terminal.ansiBrightGreen#b4ff33
terminal.ansiCyan#7dd3c0
terminal.ansiGreen#9fef00
terminal.background#0f1419
terminal.foreground#9fef00
titleBar.activeBackground#0a0e14
titleBar.activeForeground#9fef00
titleBar.border#9fef0030
titleBar.inactiveBackground#0a0e14
titleBar.inactiveForeground#4a5568

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#6e7681	italic
string	#9fef00	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#F92672	—
string.template	#c3e88d	—
meta.template.expression	#b4dce7	—
constant.numeric	#c792ea	—
string.embedded.begin, string.embedded.end, string.embedded	#A6E22E	—
constant.language	#c792ea	—
constant.character, constant.other	#c792ea	—
variable.language	#c792ea	italic
variable.readwrite, variable.readwrite.other.block	#86e1fc	italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default	#82aaff	italic
keyword, keyword.operator.logical, keyword.operator.constructor, keyword.operator	#c792ea	—
storage, storage.type	#c792ea	—
storage.type.function.arrow	#89ddff	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#82aaff	bold italic
variable.other.object	#86e1fc	italic
variable.other.property, variable.other.block	#b4dce7	italic
meta.object-literal.key, variable.object.property, support.variable.property, variable.other.object.property	#b4dce7	italic
variable.other.readwrite.alias, meta.object-binding-pattern-variable.js, meta.object-binding-pattern-variable.ts, variable.other.constant.property	#9fef00	italic
meta.array-binding-pattern-variable.js, meta.array-binding-pattern-variable.ts, meta.array-binding-pattern-variable.tsx	#9fef00	italic
punctuation.definition.binding-pattern.object, punctuation.definition.block, meta.brace.curly	#89ddff	—
entity.other.inherited-class	#A6E22E	—
entity.name.function, support.function	#9fef00	bold italic
variable.parameter	#82aaff	italic
entity.name.function-call	#F8F8F2	—
function.support.builtin, function.support.core	#A6E22E	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx, entity.name.tag.tsx	#86e1fc	bold
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.js, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.begin.js, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.js, punctuation.definition.tag.end.jsx, punctuation.definition.tag.end.tsx	#89ddff	—
entity.name.tag.class, entity.name.tag.id	#86e1fc	bold
support.class.component, support.class.component.js, support.class.component.jsx, support.class.component.tsx	#86e1fc	bold
entity.other.attribute-name, entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, support.type.property-name	#c792ea	italic
support.constant	#66D9EF	—
support.type, support.variable	#66D9EF	—
support.dictionary.json	#66D9EF	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#F8F8F2	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#A6E22E	—
variable.css, variable.scss, variable.less, variable.sass	#66D9EF	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#A6E22E	—
unit.css, unit.scss, unit.less, unit.sass	#A6E22E	—
function.css, function.scss, function.less, function.sass	#66D9EF	—
invalid	#F92672	—
invalid.deprecated	#AE81FF	—
structure.dictionary.property-name.json	#CFCFC2	—
string.detected-link	#66D9EF	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
markup.italic	—	italic
punctuation.definition.italic.markdown	#696969	—
markup.underline.link.markdown	#66D9EF	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#696969	—
markup.heading.markdown	#F92672	bold
punctuation.definition.heading.markdown	#696969	—
markup.quote.markdown	#A6E22E	—
meta.separator.markdown	#A6E22E	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#66D9EF	—
punctuation.definition.list_item.markdown	#ffffff	bold

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