Themin

Name: Themin
Author: Homerotto

Publisher: HomerottoThemes in package: 7

A minimal dark theme for good fellas

Open in VS Code GitHub

Color themes

VS Code preview

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

Themin — Themin - Cyberpunk 2077 - Oled

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...

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#000000
activityBar.foreground#7D7D7D
activityBarBadge.background#383838
badge.background#383838
badge.foreground#C1C1C1
button.background#000000
button.border#000000
button.foreground#888888
button.hoverBackground#000000
button.secondaryBackground#000000
button.secondaryForeground#888888
button.separator#000000
debugIcon.breakpointCurrentStackframeForeground#79b8ff
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#FF7A84
debugIcon.breakpointStackframeForeground#79b8ff
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#FF7A84
debugIcon.disconnectForeground#FF7A84
debugIcon.pauseForeground#FF7A84
debugIcon.restartForeground#79b8ff
debugIcon.startForeground#79b8ff
debugIcon.stepBackForeground#FF7A84
debugIcon.stepIntoForeground#FF7A84
debugIcon.stepOutForeground#FF7A84
debugIcon.stepOverForeground#FF7A84
debugIcon.stopForeground#79b8ff
diffEditor.insertedTextBackground#3a632a4b
diffEditor.removedTextBackground#88063852
dropdown.background#000000
dropdown.border#000000
dropdown.foreground#888888
dropdown.listBackground#000000
editor.background#000000
editor.lineHighlightBorder#1d1d1d5f
editor.selectionBackground#8b8b8b60
editor.selectionHighlightBackground#47474771
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#000000
editorIndentGuide.activeBackground#1d1d1d5f
editorIndentGuide.background#1d1d1d5f
editorLineNumber.foreground#727272
editorRuler.foreground#2A2A2A
editorStickyScrollHover.background#1d1d1d5f
editorSuggestWidget.background#000000
editorWidget.background#000000
editorWidget.border#000000
editorWidget.foreground#888888
editorWidget.resizeBorder#000000
extensionButton.background#000000
extensionButton.foreground#888888
extensionButton.hoverBackground#000000
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#888888
extensionButton.separator#000000
extensionIcon.starForeground#888888
extensionIcon.verifiedForeground#888888
focusBorder#000000
foreground#888888
gitDecoration.ignoredResourceForeground#444444
input.background#000000
input.border#000000
input.foreground#F5F5F5
input.placeholderForeground#888888
inputOption.activeBackground#3a3a3a
inputOption.hoverBackground#000000
list.activeSelectionBackground#000000
list.activeSelectionForeground#F5F5F5
list.focusBackground#000000
list.highlightForeground#EAEAEA
list.hoverBackground#000000
list.hoverForeground#9E9E9E
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#F5F5F5
menu.background#000000
menu.border#000000
menu.foreground#888888
menu.selectionBackground#000000
menu.selectionForeground#F5F5F5
menu.separatorBackground#000000
panel.border#1d1d1d5f
panelTitle.activeBorder#1d1d1d5f
panelTitle.activeForeground#F5F5F5
panelTitle.inactiveForeground#484848
peekView.border#444
peekViewEditor.background#242424
pickerGroup.border#363636
pickerGroup.foreground#EAEAEA
progressBar.background#FAFAFA
scrollbar.shadow#1d1d1d5f
scrollbarSlider.activeBackground#1d1d1db4
scrollbarSlider.background#1d1d1d5f
scrollbarSlider.hoverBackground#1d1d1db4
sideBar.background#000000
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#000000
statusBar.background#000000
statusBar.debuggingBackground#000000
statusBar.focusBorder#1d1d1d5f
statusBar.foreground#7E7E7E
statusBar.noFolderBackground#000000
statusBarItem.focusBorder#1d1d1d5f
statusBarItem.hoverBackground#000000
statusBarItem.prominentBackground#fafafa1a
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#7E7E7E
symbolIcon.classForeground#FF9800
symbolIcon.constructorForeground#b392f0
symbolIcon.enumeratorForeground#FF9800
symbolIcon.enumeratorMemberForeground#79b8ff
symbolIcon.eventForeground#FF9800
symbolIcon.fieldForeground#79b8ff
symbolIcon.functionForeground#b392f0
symbolIcon.interfaceForeground#79b8ff
symbolIcon.methodForeground#b392f0
symbolIcon.variableForeground#79b8ff
tab.activeBorder#1d1d1d5f
tab.activeForeground#ffffff
tab.border#000000
tab.hoverBackground#000000
tab.hoverForeground#F5F5F5
tab.inactiveBackground#000000
tab.inactiveForeground#727272
textLink.activeForeground#fafafa
textLink.foreground#CCC
titleBar.activeBackground#000000
titleBar.border#00000000
titleBar.inactiveBackground#000000
toolbar.hoverBackground#000000
widget.border#000000
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#43444D	italic
constant	#9370db	—
constant.numeric, constant.language, constant.charcter.escape	#FDF500	—
entity.name	#FDF500	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#FF003C	—
entity.other.attribute-name, entity.other.inherited-class	#fdfdfe	—
invalid	#e455ae	—
invalid.deprecated	#575861	—
keyword	#9370db	—
meta.tag, meta.brace	#868690	—
meta.import, meta.export	#9370db	—
meta.directive.vue	#fdfdfe	—
meta.property-name.css	#FF003C	—
meta.property-value.css	#9898a6	—
meta.tag.other.html	#575861	—
punctuation	#575861	—
punctuation.accessor	#9370db	—
punctuation.definition.string	#9898a6	—
punctuation.definition.tag	#43444D	—
punctuation.definition.variable.php	#868690	—
storage.type, storage.modifier	#9370db	—
string	#9898a6	—
support	#FF003C	—
support.constant	#9898a6	—
support.function	#e455ae	—
variable	#FDF500	—
variable.other, variable.language, variable.function, variable.argument	#868690	—
variable.parameter	#fdfdfe	—
punctuation.section.embedded	#00F0FF	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#e455ae	—

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