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

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#0d0d0d
activityBar.foreground#7D7D7D
activityBarBadge.background#383838
badge.background#383838
badge.foreground#C1C1C1
button.background#0d0d0d
button.border#0d0d0d
button.foreground#888888
button.hoverBackground#0d0d0d
button.secondaryBackground#0d0d0d
button.secondaryForeground#888888
button.separator#0d0d0d
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#0d0d0d
dropdown.border#0d0d0d
dropdown.foreground#888888
dropdown.listBackground#0d0d0d
editor.background#0d0d0d
editor.lineHighlightBorder#1d1d1d5f
editor.selectionBackground#8b8b8b60
editor.selectionHighlightBackground#47474771
editorGroupHeader.tabsBackground#0d0d0d
editorGroupHeader.tabsBorder#0d0d0d
editorIndentGuide.activeBackground1#1d1d1d5f
editorIndentGuide.background1#1d1d1d5f
editorLineNumber.foreground#727272
editorRuler.foreground#2A2A2A
editorStickyScrollHover.background#1d1d1d5f
editorSuggestWidget.background#0d0d0d
editorWidget.background#0d0d0d
editorWidget.border#0d0d0d
editorWidget.foreground#888888
editorWidget.resizeBorder#0d0d0d
extensionButton.background#0d0d0d
extensionButton.foreground#888888
extensionButton.hoverBackground#0d0d0d
extensionButton.prominentBackground#0d0d0d
extensionButton.prominentForeground#888888
extensionButton.separator#0d0d0d
extensionIcon.starForeground#888888
extensionIcon.verifiedForeground#888888
focusBorder#0d0d0d
foreground#888888
gitDecoration.ignoredResourceForeground#444444
input.background#0d0d0d
input.border#0d0d0d
input.foreground#F5F5F5
input.placeholderForeground#888888
inputOption.activeBackground#3a3a3a
inputOption.hoverBackground#0d0d0d
list.activeSelectionBackground#0d0d0d
list.activeSelectionForeground#F5F5F5
list.focusBackground#0d0d0d
list.highlightForeground#EAEAEA
list.hoverBackground#0d0d0d
list.hoverForeground#9E9E9E
list.inactiveSelectionBackground#0d0d0d
list.inactiveSelectionForeground#F5F5F5
menu.background#0d0d0d
menu.border#0d0d0d
menu.foreground#888888
menu.selectionBackground#0d0d0d
menu.selectionForeground#F5F5F5
menu.separatorBackground#0d0d0d
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#0d0d0d
sideBarSectionHeader.background#0d0d0d
sideBarSectionHeader.border#0d0d0d
statusBar.background#0d0d0d
statusBar.debuggingBackground#0d0d0d
statusBar.focusBorder#1d1d1d5f
statusBar.foreground#7E7E7E
statusBar.noFolderBackground#0d0d0d
statusBarItem.focusBorder#1d1d1d5f
statusBarItem.hoverBackground#0d0d0d
statusBarItem.prominentBackground#fafafa1a
statusBarItem.remoteBackground#0d0d0d
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#0d0d0d
tab.hoverBackground#0d0d0d
tab.hoverForeground#F5F5F5
tab.inactiveBackground#0d0d0d
tab.inactiveForeground#727272
terminal.ansiBlack#131317
terminal.ansiBlue#c58fff
terminal.ansiBrightBlack#5c5c5c
terminal.ansiBrightBlue#c58fff
terminal.ansiBrightCyan#ffbb88
terminal.ansiBrightGreen#8eb6f5
terminal.ansiBrightMagenta#fdfdfe
terminal.ansiBrightRed#f58ee0
terminal.ansiBrightWhite#868690
terminal.ansiBrightYellow#9898a6
terminal.ansiCyan#ffbb88
terminal.ansiGreen#8eb6f5
terminal.ansiMagenta#fdfdfe
terminal.ansiRed#f58ee0
terminal.ansiWhite#868690
terminal.ansiYellow#9898a6
textLink.activeForeground#fafafa
textLink.foreground#CCC
titleBar.activeBackground#0d0d0d
titleBar.border#00000000
titleBar.inactiveBackground#0d0d0d
toolbar.hoverBackground#0d0d0d
widget.border#0d0d0d
widget.shadow#0d0d0d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#43444D	italic
constant	#8eb6f5	—
constant.numeric, constant.language, constant.charcter.escape	#ffbb88	—
entity.name	#ffbb88	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#c58fff	—
entity.other.attribute-name, entity.other.inherited-class	#fdfdfe	—
invalid	#f58ee0	—
invalid.deprecated	#575861	—
keyword	#8eb6f5	—
meta.tag, meta.brace	#868690	—
meta.import, meta.export	#8eb6f5	—
meta.directive.vue	#fdfdfe	—
meta.property-name.css	#c58fff	—
meta.property-value.css	#9898a6	—
meta.tag.other.html	#575861	—
punctuation	#575861	—
punctuation.accessor	#8eb6f5	—
punctuation.definition.string	#9898a6	—
punctuation.definition.tag	#43444D	—
storage.type, storage.modifier	#8eb6f5	—
string	#9898a6	—
support	#c58fff	—
support.constant	#9898a6	—
support.function	#f58ee0	—
variable	#ffbb88	—
variable.other, variable.language, variable.function, variable.argument	#868690	—
variable.parameter	#fdfdfe	—

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