Min Darkest

Name: Min Darkest
Author: Pyxel

Publisher: PyxelThemes in package: 1

Darker take on the Min theme by Miguel Solorio.

GitHub

VS Code preview

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

Min Darkest — Min Darkest

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#e6e6e6
activityBar.background#161616
activityBar.border#27292b
activityBar.foreground#d7dae0
activityBarBadge.background#343434
badge.background#161616
button.background#27292b
button.foreground#e6e6e6
dropdown.background#111111
dropdown.border#111111
dropdown.foreground#e6e6e6
editor.background#161616
editor.findMatchBackground#42557b
editor.findMatchBorder#79b8ff
editor.findMatchHighlightBackground#6bb7ff2f
editor.foreground#cbced4
editor.hoverHighlightBackground#202020
editor.inactiveSelectionBackground#61afef33
editor.lineHighlightBackground#202020
editor.lineHighlightBorder#303030
editor.rangeHighlightBackground#27292b
editor.selectionBackground#303030
editor.selectionHighlightBackground#27292b
editor.wordHighlightBackground#d2e0ff2f
editor.wordHighlightBorder#d7dae0
editor.wordHighlightStrongBackground#abb2bf26
editor.wordHighlightStrongBorder#d7dae0
editorBracketMatch.background#2f2f2f
editorBracketMatch.border#303030
editorCodeLens.foreground#27292b
editorCursor.background#161616
editorCursor.foreground#e6e6e6
editorError.border#27292b
editorError.foreground#FF7A84
editorGroup.border#27292b
editorGroup.dropBackground#3793e01a
editorGroup.emptyBackground#161616
editorGroupHeader.tabsBackground#111111
editorGroupHeader.tabsBorder#27292b
editorGutter.background#161616
editorHoverWidget.background#111111
editorHoverWidget.border#27292b
editorIndentGuide.background#2f2f2f
editorLineNumber.activeForeground#e6e6e6
editorLineNumber.foreground#585858
editorLink.activeForeground#999999
editorMarkerNavigation.background#111111
editorMarkerNavigationError.background#161616
editorMarkerNavigationWarning.background#27292b
editorOverviewRuler.border#27292b
editorOverviewRuler.commonContentForeground#27292b
editorOverviewRuler.currentContentForeground#FF7A84
editorOverviewRuler.incomingContentForeground#73c936
editorRuler.foreground#343434
editorSuggestWidget.background#111111
editorSuggestWidget.border#27292b
editorSuggestWidget.foreground#999999
editorSuggestWidget.selectedBackground#27292b
editorWarning.border#27292b
editorWarning.foreground#FF7A84
editorWhitespace.foreground#343434
editorWidget.background#111111
editorWidget.border#27292b
errorForeground#FF7A84
focusBorder#666666
foreground#e6e6e6
input.background#27292bd3
input.foreground#e6e6e6
input.placeholderForeground#999999
inputOption.activeBorder#343434
inputValidation.errorBorder#FF7A84
inputValidation.infoBorder#b392f0
inputValidation.warningBorder#FF9800
list.activeSelectionBackground#27292b
list.activeSelectionForeground#e6e6e6
list.dropBackground#111111
list.errorForeground#FF7A84
list.focusBackground#27292b
list.highlightForeground#96a6c8
list.hoverBackground#27292b
list.inactiveSelectionBackground#27292b
list.inactiveSelectionForeground#e6e6e6
list.warningForeground#FF9800
menu.background#111111
menu.border#343434
menu.selectionBackground#27292b
menu.separatorBackground#303030
notificationCenter.border#343434
notifications.background#111111
notifications.border#343434
notifications.foreground#ffffff
notificationToast.border#343434
panelSectionHeader.background#111111
panelTitle.activeBorder#e6e6e6
peekView.border#343434
peekViewEditor.background#111111
peekViewEditor.matchHighlightBackground#3793e033
peekViewResult.background#111111
peekViewResult.fileForeground#e6e6e6
peekViewResult.lineForeground#e6e6e6
peekViewResult.matchHighlightBackground#3793e033
peekViewResult.selectionBackground#23252c
peekViewResult.selectionForeground#e6e6e6
peekViewTitle.background#23252c
peekViewTitleDescription.foreground#79b8ff
peekViewTitleLabel.foreground#e6e6e6
scrollbar.shadow#161616
scrollbarSlider.activeBackground#3c3f42cc
scrollbarSlider.background#27292bcc
scrollbarSlider.hoverBackground#333538cc
selection.background#61afef40
sideBar.background#111111
sideBar.border#27292b
sideBar.foreground#e6e6e6
sideBarSectionHeader.background#161616
sideBarSectionHeader.border#27292b
sideBarSectionHeader.foreground#e6e6e6
sideBarTitle.foreground#e6e6e6
statusBar.background#111111
statusBar.border#27292b
statusBar.foreground#e6e6e6
statusBar.noFolderBackground#111111
statusBar.noFolderForeground#e6e6e6
statusBarItem.prominentBackground#FF7A84
statusBarItem.prominentHoverBackground#FF9800
statusBarItem.remoteBackground#111111
statusBarItem.remoteForeground#ffffff
tab.activeBackground#161616
tab.activeForeground#e6e6e6
tab.border#27292b
tab.inactiveBackground#111111
tab.inactiveForeground#757575
tab.unfocusedActiveForeground#e6e6e6
tab.unfocusedInactiveForeground#757575
tab.unfocusedInactiveModifiedBorder#FF7A84
terminal.background#161616
terminal.border#2f2f2f
terminal.foreground#bdbdbd
terminal.selectionBackground#303030
textLink.foreground#79b8ff
titleBar.activeBackground#111111
titleBar.activeForeground#e6e6e6
titleBar.border#27292b
titleBar.inactiveBackground#161616
titleBar.inactiveForeground#999999
walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#b392f0	—
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block	#b392f0	—
emphasis	—	italic
strong, markup.heading.markdown, markup.bold.markdown	#FF7A84	bold
markup.italic.markdown	—	italic
meta.link.inline.markdown	#1976D2	underline
string, markup.fenced_code, markup.inline	#9db1c5	—
comment, string.quoted.docstring.multi	#6b737c	—
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown	#79b8ff	—
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json	#f8f8f8	—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression	#f97583	—
variable.parameter.function	#FF9800	—
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure	#b392f0	—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template	#ffab70	—
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments	#bbbbbb	—
markup.underline.link	#ffab70	—
beginning.punctuation.definition.list.markdown	#FF7A84	—
punctuation.definition.metadata.markdown	#ffab70	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#79b8ff	—

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