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 Light (Beta)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f8f9fa
activityBar.border#e5e6e7
activityBar.foreground#E84A5F
activityBarBadge.background#2d5461
activityBarBadge.foreground#ffffff
badge.background#00000080
badge.foreground#8b3d3d
breadcrumb.activeSelectionForeground#424242
breadcrumb.focusForeground#424242
breadcrumb.foreground#424242cc
breadcrumbPicker.background#f0f4f7
button.background#2b748999
button.foreground#ffffff
button.hoverBackground#2b7489
button.secondaryBackground#424242cc
button.secondaryForeground#ffffff
button.secondaryHoverBackground#424242
debugToolBar.background#f8f9fa
diffEditor.insertedTextBackground#00B36815
diffEditor.removedTextBackground#FF4D4D20
dropdown.background#f8f9fa
dropdown.border#e5e6e7
editor.background#f8f9fa
editor.foreground#2d4f4f
editor.lineHighlightBackground#f0f1f2
editor.selectionBackground#FF8C4233
editor.selectionHighlightBackground#b3d6e340
editor.wordHighlightTextBackground#087e8b15
editorBracketHighlight.foreground1#E84A5F
editorBracketHighlight.foreground2#FF8C42
editorBracketHighlight.foreground3#4ECDC4
editorBracketHighlight.foreground4#FF6B6B
editorBracketHighlight.foreground5#00B3B3
editorBracketHighlight.foreground6#FF8C42
editorBracketMatch.background#181818
editorBracketMatch.border#ebbf0050
editorCursor.foreground#424242
editorError.foreground#ff537070
editorGroup.border#e5e6e7
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#f0f4f7
editorGroupHeader.tabsBackground#f8f9fa
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00B36860
editorGutter.deletedBackground#FF4D4D60
editorGutter.modifiedBackground#0095FF60
editorHoverWidget.background#f5f5f5
editorHoverWidget.border#dadada
editorHoverWidget.foreground#424242
editorIndentGuide.activeBackground1#c0c0c0
editorIndentGuide.background1#dadada
editorLineNumber.activeForeground#838383
editorLineNumber.foreground#9d9d9daa
editorLink.activeForeground#58a9c1
editorMarkerNavigation.background#92929205
editorOverviewRuler.border#e5e6e7
editorRuler.foreground#b4b4b420
editorSuggestWidget.background#f8f9fa
editorSuggestWidget.border#e5e6e7
editorSuggestWidget.foreground#424242
editorSuggestWidget.highlightForeground#58a9c1
editorSuggestWidget.selectedBackground#00000080
editorWarning.foreground#c3e88d70
editorWhitespace.foreground#92929220
editorWidget.background#f8f9fa
editorWidget.border#e5e6e7
editorWidget.resizeBorder#58a9c1
extensionButton.prominentBackground#c3e88dc0
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#c3e88d
extensionButton.secondaryForeground#ffffff
focusBorder#929292
gitDecoration.addedResourceForeground#4ECDC4
gitDecoration.conflictingResourceForeground#FF69B4c0
gitDecoration.deletedResourceForeground#FF6B6B
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#FF8C42
gitDecoration.untrackedResourceForeground#00CC99c0
icon.foreground#2d4f4f
input.background#f6f6f6
input.border#e5e6e7
input.foreground#2d6177
input.placeholderForeground#666666
inputOption.activeBackground#92929200
inputOption.activeBorder#58a9c1
inputOption.activeForeground#929292
inputValidation.errorBorder#ff537090
inputValidation.infoBorder#82aaff90
inputValidation.warningBorder#ffcb6b90
list.activeSelectionBackground#e0e0e0
list.activeSelectionForeground#0095a4
list.focusBackground#e7e7e7
list.focusForeground#9b4d83
list.focusHighlightForeground#00000000
list.focusOutline#00000000
list.highlightForeground#58a9c1
list.hoverBackground#f0f4f7
list.hoverForeground#9b4d83
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#e7e7e7
list.inactiveSelectionForeground#2b5761
listFilterWidget.background#00000080
listFilterWidget.noMatchesOutline#00000080
listFilterWidget.outline#00000080
menu.background#f8f9fa
menu.foreground#2d6177
menu.selectionBackground#00000080
menu.selectionBorder#00000080
menu.selectionForeground#2d6177
menu.separatorBackground#929292
menubar.selectionBackground#00000080
menubar.selectionBorder#00000080
menubar.selectionForeground#2d6177
merge.commonHeaderBackground#66666640
merge.currentHeaderBackground#00B36840
merge.incomingHeaderBackground#0095FF40
notebook.cellBorderColor#c5c5c5
notebook.focusedCellBorder#c5c5c5
notebook.focusedEditorBorder#c5c5c5
notificationLink.foreground#58a9c1
notifications.background#f8f9fa
notifications.foreground#2d6177
panel.background#f8f9fa
panel.border#e5e6e7
panelTitle.activeBorder#58a9c1
panelTitle.activeForeground#00828e
panelTitle.inactiveForeground#2d6177
peekView.border#c5c5c5
peekViewEditor.background#92929205
peekViewEditor.matchHighlightBackground#92929240
peekViewEditorGutter.background#92929205
peekViewResult.background#92929205
peekViewResult.matchHighlightBackground#92929240
peekViewResult.selectionBackground#92929240
peekViewTitle.background#92929205
peekViewTitleDescription.foreground#92929240
pickerGroup.foreground#58a9c1
progressBar.background#58a9c1
scrollbar.shadow#18181800
scrollbarSlider.activeBackground#92929240
scrollbarSlider.background#92929220
scrollbarSlider.hoverBackground#92929230
searchEditor.findMatchBorder#c5c5c5
selection.background#92929240
settings.checkboxBackground#f8f9fa
settings.checkboxForeground#424242
settings.dropdownBackground#f8f9fa
settings.dropdownForeground#424242
settings.headerForeground#58a9c1
settings.modifiedItemIndicator#58a9c1
settings.numberInputBackground#f8f9fa
settings.numberInputForeground#424242
settings.textInputBackground#f8f9fa
settings.textInputForeground#424242
sideBar.background#f8f9fa
sideBar.border#e5e6e7
sideBar.foreground#2b5761
sideBarSectionHeader.background#f8f9fa
sideBarSectionHeader.border#e5e6e7
sideBarTitle.foreground#2d6177
statusBar.background#f8f9fa
statusBar.border#e5e6e7
statusBar.debuggingBackground#7753a8c0
statusBar.debuggingForeground#a1a1a1
statusBar.focusBorder#5a5a5a20
statusBar.foreground#E84A5F
statusBar.noFolderBackground#f8f9fa
statusBarItem.remoteBackground#6d6d6d40
statusBarItem.remoteForeground#424242
statusBarItem.remoteHoverBackground#58a9c140
statusBarItem.remoteHoverForeground#a1a1a1
tab.activeBorder#58a9c1
tab.activeForeground#424242
tab.activeModifiedBorder#c5c5c5
tab.border#00000000
tab.hoverBorder#e5e6e7
tab.inactiveBackground#f8f9fa
tab.inactiveForeground#424242aa
tab.lastPinnedBorder#e5e6e7
tab.unfocusedActiveBorder#545454
tab.unfocusedActiveForeground#424242
tab.unfocusedInactiveForeground#424242aa
terminal.ansiBlack#424242
terminal.ansiBlue#2b5461
terminal.ansiBrightBlack#424242
terminal.ansiBrightBlue#2b5461
terminal.ansiBrightCyan#2b6b6f
terminal.ansiBrightGreen#2d5454
terminal.ansiBrightMagenta#2d5461
terminal.ansiBrightRed#8e3e3e
terminal.ansiBrightWhite#242424
terminal.ansiBrightYellow#4d5c2d
terminal.ansiCyan#2b6b6f
terminal.ansiGreen#2d5454
terminal.ansiMagenta#2d5461
terminal.ansiRed#8e3e3e
terminal.ansiWhite#141414
terminal.ansiYellow#4d5c2d
textLink.activeForeground#58a9c1
textLink.foreground#58a9c1
titleBar.activeBackground#f8f9fa
titleBar.activeForeground#424242
titleBar.border#e5e6e7
titleBar.inactiveBackground#f8f9fa
titleBar.inactiveForeground#666666
tree.inactiveIndentGuidesStroke#c5c5c580
tree.indentGuidesStroke#c5c5c5
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#b8b8b8	—
constant, variable.other.constant	#E84A5F	—
constant.character.escape	#2b6460b6	—
entity.name.function, support.function	#E84A5F	—
entity.name.tag	#00A3A3	—
entity.name.type, support.type	#E84A5F	—
entity.other.attribute-name	#007A4D	—
entity.other.attribute-name.class	#E84A5F	—
entity.other.attribute-name.id	#FF6B6B	—
keyword	#FF6B6B	—
keyword.control	#C1666B	—
keyword.operator	#2b4d61d9	—
markup.bold	#E84A5F	bold
markup.italic	#FF8C42	italic
markup.inline.raw, markup.fenced_code.block.markdown	#FF4500	—
markup.heading	#FF1493	bold
markup.quote	#FF6B6B	—
markup.list	#E84A5F	—
markup.link	#008B8B	—
punctuation.definition.string, punctuation.definition.tag	#2b2e2cd9	—
storage	#E84A5F	—
string	#FF6B6B	—
support	#2b2b2bd9	—
variable	#009688	—
variable.parameter	#007A7A	—
support.constant	#007A7A	—
constant.numeric	#FF8C42	—
keyword.other.unit	#E84A5F	—
punctuation.definition.entity	#2b2e2cd9	—
entity.other.attribute-name	#007A4D	—

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