Retro Lego Dark Theme

Name: Retro Lego Dark Theme
Author: Doyoon Lee

Publisher: Doyoon LeeThemes in package: 1

Open in VS Code GitHub

VS Code preview

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

Retro Lego Dark Theme — Retro Lego

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.activeBorder#D7BA7D
activityBar.background#1a1716
activityBar.border#3a3b35
activityBar.foreground#D7BA7D
activityBar.inactiveForeground#dbd6c3
activityBarBadge.background#d7db56
badge.background#2b2625
button.background#be6249
checkbox.background#2b2625
dropdown.background#2b2625
dropdown.listBackground#2b2625
editor.background#1a1716
editor.findMatchBackground#2f3f73
editor.findMatchHighlightBackground#2f3f73
editor.foldBackground#373227
editor.hoverHighlightBackground#25251e
editor.inactiveSelectionBackground#25251e
editor.selectionBackground#373227
editor.snippetTabstopHighlightBackground#201f21
editorCursor.foreground#f8ff3b
editorError.foreground#f75c31
editorGroupHeader.noTabsBackground#201f21
editorGroupHeader.tabsBackground#201f21
editorGutter.addedBackground#f8fc84
editorGutter.deletedBackground#f75c31
editorGutter.modifiedBackground#2f3f73
editorInfo.background#2b2625
editorLink.activeForeground#D7BA7D
editorOverviewRuler.addedForeground#6fbf86
editorOverviewRuler.deletedForeground#f75c31
editorOverviewRuler.errorForeground#f75c31
editorOverviewRuler.infoForeground#dbd6c3
editorOverviewRuler.modifiedForeground#6fbf86
editorOverviewRuler.warningForeground#f8ff3b
editorPane.background#2b2625
editorSuggestWidget.background#201f21
editorSuggestWidget.selectedBackground#2f3f73
editorWarning.foreground#D7BA7D
editorWidget.background#201f21
focusBorder#D7BA7D
input.background#2b2625
list.activeSelectionBackground#baba88
list.activeSelectionForeground#242b25
list.dropBackground#3a3b35
list.errorForeground#f75c31
list.filterMatchBackground#2f3f73
list.focusBackground#1a1716
list.focusForeground#d7db56
list.highlightForeground#44d489
list.hoverBackground#2f3f73
list.inactiveFocusBackground#3a3b35
list.inactiveSelectionBackground#3a3b35
list.inactiveSelectionForeground#dbd6c3
list.warningForeground#ebc76e
menu.background#2b2625
minimap.background#2b2625
panel.background#2b2625
panelSection.dropBackground#2b2625
panelTitle.inactiveForeground#dbd6c3
peekView.border#dbd6c3
peekViewEditor.matchHighlightBorder#D7BA7D
peekViewTitle.background#201f21
peekViewTitleLabel.foreground#D7BA7D
progressBar.background#2b2625
scrollbarSlider.activeBackground#D7BA7D
scrollbarSlider.background#D7BA7D
settings.checkboxBackground#575742
settings.dropdownBackground#282824
settings.focusedRowBackground#575742
settings.modifiedItemIndicator#f75c31
settings.numberInputBackground#575742
settings.textInputBackground#575742
sideBar.background#1a1716
sideBar.border#3a3b35
sideBar.dropBackground#1a1716
sideBar.foreground#dbd6c3
sideBarSectionHeader.background#1a1716
sideBarTitle.foreground#dbd6c3
statusBar.background#2f3f73
statusBarItem.activeBackground#2f3f73
tab.activeBackground#1a1716
tab.activeForeground#dce6be
tab.border#3a3b35
tab.inactiveBackground#282824
tab.inactiveForeground#abb394
tab.unfocusedActiveBackground#282824
tab.unfocusedInactiveBackground#282824
textLink.activeForeground#D7BA7D
textLink.foreground#D7BA7D
titleBar.activeBackground#1a1716
titleBar.inactiveBackground#1a1716
titleBar.inactiveForeground#dbd6c3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#575742	—
keyword, support.function, storage.type, meta.arrow, meta.objectliteral.js, meta.objectliteral.ts, punctuation.terminator.statement, punctuation.accessor.js, punctuation.accessor.ts, variable.other.object.property.ts	#e07a5f	—
entity.other.attribute-name, entity.other.attribute-name.class.css	#eb8165	—
keyword.control, storage.modifier	#e07a5f	italic
constant.numeric	#99baff	—
variable, string constant.other.placeholder	#dbd6c3	—
entity.name.type.js, entity.name.type.ts, support.type.builtin.js, support.type.builtin.ts, support.type.primitive.js, support.type.primitive.ts	#5390d9	italic
entity.name.type.interface.ts, entity.name.type.interface.js	#7fbddb	italic underline
entity.name.function, meta.method.declaration.js, meta.method.declaration.ts, keyword.operator.new.js, keyword.operator.new.ts	#44d489	—
entity.name.tag	#6fbf86	—
string.regexp.js, string.regexp.ts, constant.other.character-class.set.regexp, support.variable, meta.class.js, meta.class.ts, support.class, support.class.builtin.ts, entity.name.type.js, entity.name.type.ts	#eaff80	—
variable.other.readwrite.js, variable.other.readwrite.ts	#e5f595	—
entity.name.tag.css	#6FBF86	—
support.type.property-name, variable.object.property.ts, variable.object.property.js, string.quoted.double.html, source.js, source.ts, meta.directive.vue	#dbd6c3	—
variable.other.constant, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.property.js, variable.other.constant.property.ts	#dbd6c3	—
meta.object-literal.key, meta.definition.property.ts, meta.definition.property.js, variable.other.object.property.ts, variable.other.object.property.js	#dbd6c3	—
meta.block.js, meta.block.ts, punctuation.separator.comma.js, punctuation.separator.comma.ts, punctuation.separator.parameter.js, punctuation.separator.parameter.ts	#dbd6c3	—
meta.var.expr.js, meta.var.expr.ts	#D7BA7D	—
string	#D7BA7D	—
meta.property-list.scss, keyword.other.unit	#D7BA7D	—

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