Little League

Name: Little League
Author: Matthew Ström

Publisher: Matthew StrömThemes in package: 3

A quiet theme with harmonious colors

GitHub

Color themes

VS Code preview

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

Little League — Little League Dark

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#eeeeee
activityBar.background#242428
activityBar.border#3a3a3f
activityBar.foreground#dddddd
activityBar.inactiveForeground#8c8c8d
activityBarBadge.background#6b94f8
activityBarBadge.foreground#eeeeee
badge.background#6b94f8
badge.foreground#eeeeee
banner.background#315375
banner.foreground#eeeeee
breadcrumb.activeSelectionForeground#eeeeee
breadcrumb.background#242428
breadcrumb.focusForeground#eeeeee
breadcrumb.foreground#dddddd
button.background#315375
button.foreground#eeeeee
button.hoverBackground#366998
button.secondaryBackground#2f2f37
button.secondaryForeground#eeeeee
button.secondaryHoverBackground#3a3a3f
checkbox.background#3a3a3f
checkbox.border#3a3a3f
checkbox.foreground#eeeeee
commandCenter.activeBackground#2f2f37
commandCenter.activeBorder#3a3a3f
commandCenter.activeForeground#eeeeee
commandCenter.background#242428
commandCenter.border#3a3a3f
commandCenter.foreground#dddddd
commandCenter.inactiveBorder#242428
commandCenter.inactiveForeground#8c8c8d
debugToolBar.background#3a3a3f
descriptionForeground#eeeeee
diffEditor.border#3a3a3f
diffEditor.insertedLineBackground#3c463d
diffEditor.insertedTextBackground#3c463d
diffEditor.removedLineBackground#4d3336
diffEditor.removedTextBackground#4d3336
diffEditorOverview.insertedForeground#afdb8a
diffEditorOverview.removedForeground#f89696
disabledForeground#8c8c8d
dropdown.background#2f2f37
dropdown.border#3a3a3f
dropdown.foreground#eeeeee
dropdown.listBackground#3a3a3f
editor.background#242428
editor.findMatchBackground#75757877
editor.findMatchHighlightBackground#57575b44
editor.foreground#eeeeee
editor.hoverHighlightBackground#57575b44
editor.inactiveSelectionBackground#24242844
editor.lineHighlightBackground#27272c
editor.rangeHighlightBackground#2a2a2e
editor.selectionBackground#57575bcc
editor.selectionHighlightBackground#24242844
editor.wordHighlightBackground#75757844
editor.wordHighlightStrongBackground#8c8c8d44
editorBracketHighlight.foreground1#8cb1ff
editorBracketHighlight.foreground2#c5e991
editorBracketHighlight.foreground3#ffc456
editorBracketHighlight.foreground4#ee896d
editorBracketHighlight.foreground5#99dbc5
editorBracketHighlight.foreground6#71bcd3
editorBracketHighlight.unexpectedBracket.foreground#ef5957
editorBracketMatch.background#57575b44
editorBracketMatch.border#171719
editorCodeLens.foreground#2f2f37
editorCursor.foreground#dddddd
editorError.foreground#f89696
editorGroup.border#3a3a3f
editorGroup.dropBackground#24242844
editorGroup.emptyBackground#242428
editorGroupHeader.noTabsBackground#2f2f37
editorGroupHeader.tabsBackground#242428
editorGroupHeader.tabsBorder#242428
editorGutter.addedBackground#82a87a
editorGutter.background#242428
editorGutter.deletedBackground#c75e5e
editorGutter.foldingControlForeground#8c8c8d
editorGutter.modifiedBackground#5899ce
editorHint.foreground#8cb1ff
editorHoverWidget.background#3a3a3f
editorHoverWidget.border#3a3a3f
editorHoverWidget.statusBarBackground#57575b
editorIndentGuide.activeBackground1#242428
editorIndentGuide.background1#3a3a3f
editorInfo.foreground#72c9fa
editorInlayHint.background#2f2f37
editorInlayHint.foreground#8c8c8d
editorLineNumber.activeForeground#dddddd
editorLineNumber.foreground#8c8c8d
editorLink.activeForeground#587ece
editorOverviewRuler.addedForeground#82a87a
editorOverviewRuler.border#171719
editorOverviewRuler.bracketMatchForeground#57575b44
editorOverviewRuler.commonContentForeground#0000ffcc
editorOverviewRuler.currentContentForeground#ffffffcc
editorOverviewRuler.deletedForeground#c75e5e
editorOverviewRuler.errorForeground#c75e5e
editorOverviewRuler.findMatchForeground#00ff00cc
editorOverviewRuler.incomingContentForeground#00ff00cc
editorOverviewRuler.infoForeground#5899ce
editorOverviewRuler.modifiedForeground#5899ce
editorOverviewRuler.rangeHighlightForeground#0000ffcc
editorOverviewRuler.selectionHighlightForeground#57575b44
editorOverviewRuler.warningForeground#cd7860
editorRuler.foreground#3a3a3f
editorStickyScroll.background#242428
editorStickyScroll.border#3a3a3f
editorStickyScrollHover.background#2f2f37
editorSuggestWidget.background#3a3a3f
editorSuggestWidget.border#3a3a3f
editorSuggestWidget.foreground#dddddd
editorSuggestWidget.highlightForeground#eeeeee
editorSuggestWidget.selectedBackground#57575bcc
editorUnnecessaryCode.border#242428
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#ff9572
editorWhitespace.foreground#5c5c62
editorWidget.background#3a3a3f
editorWidget.border#3a3a3f
editorWidget.foreground#eeeeee
editorWidget.resizeBorder#242428
errorForeground#f89696
extensionButton.background#315375
extensionButton.foreground#eeeeee
extensionButton.hoverBackground#366998
focusBorder#242428
foreground#eeeeee
gitDecoration.addedResourceForeground#afdb8a
gitDecoration.conflictingResourceForeground#8cb1ff
gitDecoration.deletedResourceForeground#f89696
gitDecoration.ignoredResourceForeground#dddddd
gitDecoration.modifiedResourceForeground#72c9fa
gitDecoration.renamedResourceForeground#72c9fa
gitDecoration.stageDeletedResourceForeground#f89696
gitDecoration.stageModifiedResourceForeground#ff9572
gitDecoration.submoduleResourceForeground#72c9fa
gitDecoration.untrackedResourceForeground#99dbc5
icon.foreground#eeeeee
input.background#3a3a3f
input.border#3a3a3f
input.foreground#eeeeee
input.placeholderForeground#dddddd
inputOption.activeBackground#315375
inputOption.activeBorder#4c68a6
inputValidation.errorBackground#f0706f
inputValidation.errorBorder#c75e5e
inputValidation.errorForeground#eeeeee
inputValidation.infoBackground#6b94f8
inputValidation.infoBorder#5899ce
inputValidation.infoForeground#eeeeee
inputValidation.warningBackground#ee896d
inputValidation.warningBorder#cd7860
inputValidation.warningForeground#2f2f37
keybindingLabel.background#2f2f37
keybindingLabel.border#3a3a3f
keybindingLabel.bottomBorder#242428
keybindingLabel.foreground#eeeeee
list.activeSelectionBackground#57575bcc
list.activeSelectionForeground#eeeeee
list.dropBackground#24242844
list.errorForeground#f89696
list.focusBackground#57575b44
list.focusForeground#eeeeee
list.highlightForeground#eeeeee
list.hoverBackground#24242844
list.hoverForeground#eeeeee
list.inactiveSelectionBackground#24242844
list.inactiveSelectionForeground#dddddd
list.invalidItemForeground#f89696
list.warningForeground#ff9572
listFilterWidget.background#3a3a3f
listFilterWidget.noMatchesOutline#c75e5e
listFilterWidget.outline#3a3a3f
menu.background#3a3a3f
menu.border#3a3a3f
menu.foreground#eeeeee
menu.selectionBackground#57575bcc
menu.selectionForeground#eeeeee
menu.separatorBackground#3a3a3f
menubar.selectionBackground#57575b44
menubar.selectionForeground#eeeeee
minimap.findMatchHighlight#75757877
minimap.selectionHighlight#242428cc
minimapSlider.activeBackground#75757877
minimapSlider.background#75757844
minimapSlider.hoverBackground#75757877
notificationCenter.border#3a3a3f
notificationCenterHeader.background#2f2f37
notificationCenterHeader.foreground#eeeeee
notificationLink.foreground#6b94f8
notifications.background#3a3a3f
notifications.border#3a3a3f
notifications.foreground#dddddd
notificationsErrorIcon.foreground#f89696
notificationsInfoIcon.foreground#72c9fa
notificationsWarningIcon.foreground#ff9572
notificationToast.border#3a3a3f
panel.background#242428
panel.border#3a3a3f
panelSection.border#3a3a3f
panelSectionHeader.background#2f2f37
panelSectionHeader.foreground#eeeeee
panelTitle.activeBorder#a0a0a2
panelTitle.activeForeground#dddddd
panelTitle.inactiveForeground#8c8c8d
peekView.border#242428
peekViewEditor.background#2f2f37
peekViewEditor.matchHighlightBackground#57575b
peekViewResult.background#3a3a3f
peekViewResult.fileForeground#6b94f8
peekViewResult.lineForeground#eeeeee
peekViewResult.matchHighlightBackground#57575b44
peekViewResult.selectionBackground#75757877
peekViewTitle.background#57575b
peekViewTitleDescription.foreground#eeeeee
peekViewTitleLabel.foreground#eeeeee
pickerGroup.border#3a3a3f
pickerGroup.foreground#dddddd
progressBar.background#6b94f8
quickInput.background#2f2f37
quickInput.foreground#dddddd
scrollbar.background#242428
scrollbar.shadow#17171944
scrollbarSlider.activeBackground#75757877
scrollbarSlider.background#75757844
scrollbarSlider.hoverBackground#75757877
selection.background#57575bcc
settings.dropdownBackground#242428
settings.dropdownForeground#eeeeee
settings.headerForeground#6b94f8
settings.modifiedItemIndicator#5899ce
settings.textInputBackground#242428
settings.textInputForeground#eeeeee
sideBar.background#2f2f37
sideBar.border#3a3a3f
sideBar.dropBackground#57575bcc
sideBar.foreground#dddddd
sideBarSectionHeader.background#24242844
sideBarSectionHeader.border#3a3a3f
sideBarSectionHeader.foreground#dddddd
sideBarTitle.background#2f2f37
sideBarTitle.foreground#eeeeee
statusBar.background#2f2f37
statusBar.border#2f2f37
statusBar.debuggingBackground#bb63f5
statusBar.debuggingBorder#bb63f5
statusBar.debuggingForeground#eeeeee
statusBar.foreground#dddddd
statusBar.noFolderBackground#2f2f37
statusBar.noFolderBorder#2f2f37
statusBar.noFolderForeground#eeeeee
statusBarItem.activeBackground#242428cc
statusBarItem.hoverBackground#24242844
statusBarItem.prominentBackground#6b94f8
statusBarItem.prominentForeground#eeeeee
statusBarItem.remoteBackground#315375
statusBarItem.remoteForeground#eeeeee
tab.activeBackground#242428
tab.activeBorderTop#8cb1ff
tab.activeForeground#dddddd
tab.border#242428
tab.hoverBackground#24242844
tab.inactiveBackground#171719
tab.inactiveForeground#8c8c8d
tab.lastPinnedBorder#3a3a3f
tab.unfocusedActiveForeground#dddddd
tab.unfocusedHoverBorder#3a3a3f
tab.unfocusedInactiveForeground#8c8c8d
terminal.ansiBlack#242428
terminal.ansiBlue#8cb1ff
terminal.ansiBrightBlack#8c8c8d
terminal.ansiBrightBlue#6b94f8
terminal.ansiBrightCyan#72c9fa
terminal.ansiBrightGreen#9ecc8f
terminal.ansiBrightMagenta#bb63f5
terminal.ansiBrightRed#f0706f
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#faedc7
terminal.ansiCyan#68b8f7
terminal.ansiGreen#c5e991
terminal.ansiMagenta#ce86fd
terminal.ansiRed#ee896d
terminal.ansiWhite#eeeeee
terminal.ansiYellow#ffc456
terminal.background#242428
terminal.border#3a3a3f
terminal.foreground#eeeeee
terminal.selectionBackground#57575bcc
terminalCursor.background#5c5c62
terminalCursor.foreground#5c5c62
textBlockQuote.background#242428
textBlockQuote.border#a0a0a2
textCodeBlock.background#242428
textLink.activeForeground#6b94f8
textLink.foreground#587ece
textPreformat.foreground#72c9fa
titleBar.activeBackground#242428
titleBar.activeForeground#eeeeee
titleBar.border#242428
titleBar.inactiveBackground#171719
titleBar.inactiveForeground#8c8c8d
toolbar.activeBackground#57575bcc
toolbar.hoverBackground#57575b44
tree.inactiveIndentGuidesStroke#242428
tree.indentGuidesStroke#3a3a3f
tree.tableColumnsBorder#3a3a3f
walkThrough.embeddedEditorBackground#3a3a3f
welcomePage.background#2f2f37
welcomePage.tileBackground#2f2f37
welcomePage.tileHoverBackground#57575b44
widget.border#3a3a3f
widget.shadow#24242844

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8c8c8d	—
comment.block.documentation	#dddddd	—
comment.line	#8c8c8d	—
comment.single	#8c8c8d	—
constant.language.boolean.false	#dce2ad	—
constant.language.boolean.true	#ff9572	—
constant.language.dart	#ff9572	—
constant.language.import-export-all	#6b94f8	—
constant.language.null	#dddddd	—
constant.language.symbol	#ff9572	—
constant.numeric	#ff9572	—
entity.name.function	#8cb1ff	—
entity.name.tag	#dce2ad	—
entity.name.tag.reference	#ce86fd	—
entity.name.tag.yaml	#71bcd3	—
entity.name.type.module	#71bcd3	—
entity.other.attribute-name	#6b94f8	—
entity.other.attribute-name.class	#dddddd	—
entity.other.attribute-name.id	#8cb1ff	—
keyword	#71bcd3	—
keyword.control	#68b8f7	—
keyword.control.flow	#68b8f7	—
keyword.control.from	#68b8f7	—
keyword.control.import	#68b8f7	—
keyword.operator	#eeeeee	—
keyword.operator.logical	#eeeeee	—
keyword.other.unit	#ee896d	—
markup.fenced_code	#eeeeee	—
markup.heading	#eeeeee	—
markup.quote	#dddddd	—
markup.underline.link	#8cb1ff	—
meta.brace.round	#dddddd	—
meta.brace.square	#dddddd	—
meta.class	#8cb1ff	—
meta.jsx.children	#dddddd	—
meta.object	#99dbc5	—
meta.property-name.css	#dddddd	—
meta.property-value.css	#eeeeee	—
meta.selector	#71bcd3	—
meta.tag.attributes	#68b8f7	—
punctuation.accessor	#8c8c8d	—
punctuation.definition.array	#8c8c8d	—
punctuation.definition.block	#8c8c8d	—
punctuation.definition.dictionary	#8c8c8d	—
punctuation.definition.heading	#ffc456	—
punctuation.definition.link	#8c8c8d	—
punctuation.definition.list	#8c8c8d	—
punctuation.definition.parameters	#8c8c8d	—
punctuation.definition.string	#8c8c8d	—
punctuation.definition.tag	#8c8c8d	—
punctuation.definition.template-expression	#ce86fd	—
punctuation.definition.typeparameters	#8c8c8d	—
punctuation.section	#dddddd	—
punctuation.separator	#8c8c8d	—
punctuation.terminator	#8c8c8d	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ce86fd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#cad399	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#71bcd3	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#99dbc5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ee896d	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffc456	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c5e991	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8cb1ff	—
source.json meta.structure.dictionary.json support.type.property-name.json	#eeeeee	—
storage	#72c9fa	—
string	#dddddd	—
string.other.link.title.markdown	#dddddd	—
support.class	#ffc456	—
support.class.component	#ffc456	—
support.constant.color	#ee896d	—
support.constant.font-name	#ee896d	—
support.constant.property-value	#ee896d	—
support.function	#8cb1ff	—
support.type.property-name	#ffc456	—
support.type.property-name.css	#eeeeee	—
support.type.vendored	#faedc7	—
variable	#faedc7	—
variable.language.super	#71bcd3	—
variable.language.this	#99dbc5	—
variable.other	#dce2ad	—
variable.other.constant	#dce2ad	—
variable.other.readwrite.alias	#dce2ad	—

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