Miniml

Name: Miniml
Author: pantherandcub

Publisher: pantherandcubThemes in package: 5

Minimalistic yet colorful themes for vscode

GitHub

Color themes

VS Code preview

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

Miniml — Miniml Midnight

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.border#b4b4b420
activityBar.foreground#b4b4b4e6
activityBarBadge.background#58a9c1
activityBarBadge.foreground#ffffffe2
badge.background#00000080
badge.foreground#ed5757f2
breadcrumb.activeSelectionForeground#68b9d1f2
breadcrumb.background#000000
breadcrumb.focusForeground#b4b4b4f2
breadcrumb.foreground#c1c1c179
breadcrumbPicker.background#000000
button.background#4c4c4c40
button.foreground#e1e1e1f2
button.hoverBackground#92929280
button.secondaryBackground#4c4c4c40
button.secondaryForeground#d6d6d6f2
button.secondaryHoverBackground#92929280
commandCenter.foreground#d1d1d1f2
debugToolBar.background#000000
descriptionForeground#b4b4b4e6
diffEditor.insertedTextBackground#c3e88d15
diffEditor.removedTextBackground#ff537020
dropdown.background#000000
dropdown.border#ff000020
editor.background#000000
editor.foreground#b4b4b4e6
editor.lineHighlightBackground#38383840
editor.selectionBackground#38383840
editor.selectionHighlightBackground#38383840
editor.wordHighlightTextBackground#38383840
editorBracketHighlight.foreground1#e1aa76c3
editorBracketHighlight.foreground2#75b1bdcc
editorBracketHighlight.foreground3#75b1bdcc
editorBracketHighlight.foreground4#e2757ef2
editorBracketHighlight.foreground5#15bdA7f2
editorBracketHighlight.foreground6#75b1bdcc
editorBracketMatch.background#18181850
editorBracketMatch.border#ebbf0050
editorCodeLens.foreground#929292f2
editorCursor.foreground#ebbf00f2
editorError.foreground#ff53706a
editorGroup.border#b4b4b420
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#b4b4b425
editorGutter.addedBackground#c3e88d60
editorGutter.deletedBackground#ff537060
editorGutter.modifiedBackground#82aaff60
editorHint.foreground#d1d1d1f2
editorHoverWidget.background#000000
editorHoverWidget.border#b4b4b420
editorIndentGuide.activeBackground1#4c4c4c60
editorIndentGuide.background1#92929215
editorInfo.foreground#68b9d1f2
editorLightBulb.foreground#ebbf00f2
editorLightBulbAutoFix.foreground#68b9d1f2
editorLineNumber.activeForeground#d1d1d1aa
editorLineNumber.foreground#b2b2b240
editorLink.activeForeground#58a9c1f2
editorMarkerNavigation.background#92929205
editorOverviewRuler.border#00000000
editorRuler.foreground#b4b4b41e
editorStickyScroll.border#b4b4b425
editorSuggestWidget.background#000000
editorSuggestWidget.border#b4b4b420
editorSuggestWidget.foreground#b4b4b4f2
editorSuggestWidget.highlightForeground#58a9c1f2
editorSuggestWidget.selectedBackground#18181880
editorWarning.foreground#c3e88d6a
editorWhitespace.foreground#9292921e
editorWidget.background#000000
editorWidget.border#ff000020
editorWidget.resizeBorder#58a9c1
extensionBadge.remoteForeground#d1d1d1f2
extensionButton.prominentBackground#c3e88dc0
extensionButton.prominentHoverBackground#c3e88d
focusBorder#92929200
foreground#b4b4b4e6
gitDecoration.addedResourceForeground#bbc291cc
gitDecoration.conflictingResourceForeground#58a9c1b6
gitDecoration.deletedResourceForeground#d15a5acc
gitDecoration.ignoredResourceForeground#a1a1a15b
gitDecoration.modifiedResourceForeground#7597d9cc
gitDecoration.untrackedResourceForeground#a8c279cc
icon.foreground#b4b4b4e6
input.background#000000
input.border#b4b4b425
input.foreground#b4b4b4e6
input.placeholderForeground#c1c1c15b
inputOption.activeBackground#92929200
inputOption.activeBorder#58a9c1
inputOption.activeForeground#b2b2b2f2
inputValidation.errorBorder#ff537050
inputValidation.infoBorder#82aaff50
inputValidation.warningBorder#ffcb6b50
keybindingLabel.foreground#d1d1d1f2
list.activeSelectionBackground#38383840
list.activeSelectionForeground#68b9d1f2
list.focusBackground#92929220
list.focusForeground#b4b4b4e6
list.highlightForeground#68b9d1f2
list.hoverBackground#38383840
list.hoverForeground#b4b4b4f2
list.inactiveSelectionBackground#38383840
list.inactiveSelectionForeground#68b9d1b6
listFilterWidget.background#ff010180
listFilterWidget.noMatchesOutline#18181880
listFilterWidget.outline#18181880
menu.background#000000
menu.foreground#b4b4b4e6
menu.selectionBackground#18181880
menu.selectionBorder#18181880
menu.selectionForeground#68b9d1f2
menu.separatorBackground#929292
menubar.selectionBackground#18181880
menubar.selectionBorder#18181880
menubar.selectionForeground#68b9d1f2
minimap.findMatchHighlight#68b9d1f2
minimap.foregroundOpacity#d1d1d1f2
notebook.cellBorderColor#ff000016
notebook.focusedCellBorder#b4b4b425
notebook.focusedEditorBorder#b4b4b425
notificationLink.foreground#58a9c1f2
notifications.background#000000
notifications.foreground#b4b4b4e6
notificationsErrorIcon.foreground#ff5370f2
notificationsInfoIcon.foreground#68b9d1f2
notificationsWarningIcon.foreground#ebbf00f2
panel.background#000000
panel.border#b4b4b420
panelTitle.activeBorder#58a9c1
panelTitle.activeForeground#b4b4b4e6
panelTitle.inactiveForeground#b4b4b4f2
peekView.border#18181880
peekViewEditor.background#92929205
peekViewEditor.matchHighlightBackground#4c4c4c40
peekViewEditorGutter.background#92929205
peekViewResult.background#92929205
peekViewResult.matchHighlightBackground#4c4c4c40
peekViewResult.selectionBackground#4c4c4c40
peekViewTitle.background#92929205
peekViewTitleDescription.foreground#4c4c4c3c
pickerGroup.foreground#58a9c1f2
problemsErrorIcon.foreground#ff5370f2
problemsInfoIcon.foreground#68b9d1f2
problemsWarningIcon.foreground#ebbf00f2
progressBar.background#58a9c1
quickInput.foreground#b4b4b4e6
scrollbar.shadow#18181800
scrollbarSlider.activeBackground#4c4c4c40
scrollbarSlider.background#92929220
scrollbarSlider.hoverBackground#92929230
selection.background#4c4c4c40
settings.checkboxBackground#000000
settings.checkboxForeground#a1a1a1f2
settings.dropdownBackground#000000
settings.dropdownForeground#a1a1a1f2
settings.headerForeground#68b9d1f2
settings.modifiedItemIndicator#58a9c1
settings.numberInputBackground#000000
settings.numberInputForeground#a1a1a1f2
settings.textInputBackground#000000
settings.textInputForeground#a1a1a1f2
sideBar.background#000000
sideBar.border#b4b4b420
sideBar.foreground#b4b4b4e6
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#b4b4b425
sideBarTitle.foreground#b4b4b4f2
statusBar.background#000000
statusBar.border#b4b4b420
statusBar.debuggingBackground#38383880
statusBar.debuggingForeground#a1a1a1f2
statusBar.focusBorder#a5a5a500
statusBar.foreground#b4b4b4e6
statusBar.noFolderBackground#000000
statusBarItem.remoteBackground#38383880
statusBarItem.remoteForeground#b4b4b4f2
statusBarItem.remoteHoverBackground#58a9c140
statusBarItem.remoteHoverForeground#a1a1a1f2
symbolIcon.arrayForeground#b4b4b4f2
symbolIcon.booleanForeground#b4b4b4f2
symbolIcon.classForeground#b4b4b4f2
symbolIcon.colorForeground#d1d1d1f2
symbolIcon.constantForeground#d1d1d1f2
symbolIcon.constructorForeground#d1d1d1f2
symbolIcon.enumeratorForeground#d1d1d1f2
symbolIcon.eventForeground#d1d1d1f2
symbolIcon.fieldForeground#d1d1d1f2
symbolIcon.fileForeground#d1d1d1f2
symbolIcon.functionForeground#d1d1d1f2
symbolIcon.interfaceForeground#d1d1d1f2
symbolIcon.keyForeground#d1d1d1f2
symbolIcon.keywordForeground#d1d1d1f2
symbolIcon.methodForeground#d1d1d1f2
symbolIcon.moduleForeground#d1d1d1f2
symbolIcon.namespaceForeground#d1d1d1f2
symbolIcon.nullForeground#d1d1d1f2
symbolIcon.numberForeground#d1d1d1f2
symbolIcon.objectForeground#d1d1d1f2
symbolIcon.operatorForeground#d1d1d1f2
symbolIcon.packageForeground#d1d1d1f2
symbolIcon.propertyForeground#d1d1d1f2
symbolIcon.referenceForeground#d1d1d1f2
symbolIcon.snippetForeground#d1d1d1f2
symbolIcon.stringForeground#d1d1d1f2
symbolIcon.structForeground#d1d1d1f2
symbolIcon.textForeground#d1d1d1f2
symbolIcon.typeParameterForeground#d1d1d1f2
symbolIcon.unitForeground#d1d1d1f2
symbolIcon.variableForeground#d1d1d1f2
tab.activeBorder#58a9c1
tab.activeForeground#b4b4b4e6
tab.activeModifiedBorder#b4b4b480
tab.border#a5a5a500
tab.inactiveBackground#000000
tab.inactiveForeground#c1c1c15b
tab.unfocusedActiveBorder#545454
tab.unfocusedActiveForeground#c1c1c1f2
terminal.ansiBlack#404040
terminal.ansiBlue#5a93b8
terminal.ansiBrightBlack#545454
terminal.ansiBrightBlue#5a93b8
terminal.ansiBrightCyan#57b3bd
terminal.ansiBrightGreen#9eb88c
terminal.ansiBrightMagenta#5dc4aa
terminal.ansiBrightRed#c15a5a
terminal.ansiBrightWhite#b4b4b4e6
terminal.ansiBrightYellow#c3e090
terminal.ansiCyan#57b3bd
terminal.ansiGreen#9eb88c
terminal.ansiMagenta#5dc4aa
terminal.ansiRed#c15a5a
terminal.ansiWhite#b4b4b4e6
terminal.ansiYellow#c3e090
testing.iconErrored#ff5370f2
testing.iconFailed#ff5370f2
testing.iconPassed#68b9d1f2
testing.iconQueued#ebbf00f2
testing.iconSkipped#929292f2
testing.iconUnset#d1d1d1f2
testing.message.info.decorationForeground#68b9d1f2
textLink.activeForeground#58a9c1f2
textLink.foreground#58a9c1f2
titleBar.activeBackground#000000
titleBar.activeForeground#b4b4b4e6
titleBar.border#b4b4b420
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#b1b1b15b
tree.inactiveIndentGuidesStroke#92929220
tree.indentGuidesStroke#4c4c4c40
widget.border#b4b4b425

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#758575aa	—
keyword, storage.type, storage.modifier, keyword.control, storage	#4d9375cc	—
string, string.template, string.quoted	#d49b88cc	—
constant, variable.other.constant, support.constant	#c99076cc	—
variable, variable.parameter, variable.other	#96adc9cc	—
entity.name.function, support.function, meta.function-call	#80a665cc	—
entity.name.type, support.type, support.class	#5DA994cc	—
entity.name.tag	#4d9375cc	—
punctuation	#666666cc	—
constant.numeric	#4C9A91cc	—
constant.character.escape	#a6ddd6ad	—
entity.name.function, support.function, variable, variable.parameter	#82a1c7cc	—
entity.name.tag	#8cf6fbb7	—
entity.name.type, support.type	#67c1c1cc	—
entity.other.attribute-name	#74cdbcce	—
entity.other.attribute-name.class	#dfffafaa	—
entity.other.attribute-name.id	#dfffafaa	—
keyword, keyword.control, storage	#67c1c1cc	—
keyword.operator	#c7d2e6aa	—
markup.bold	#c4e88daa	bold
markup.italic	#c4e88daa	italic
markup.inline.raw, markup.fenced_code.block.markdown	#71b5cdcc	—
markup.heading	#5fb3b3ce	bold
markup.quote	#c4e88daa	—
markup.list	#b5bd68ce	—
markup.link	#81a2bece	—
punctuation.definition.string, punctuation.definition.tag	#d5d8d6ce	—
string	#ead998ba	—
variable.parameter	#9bf9e7c3	—
constant.numeric	#66b3b3c3	—
keyword.other.unit	#c4e88daa	—
punctuation.definition.entity	#c5c8c6ce	—

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