McDLT

Name: McDLT
Author: WaitingForGuacamole

Publisher: WaitingForGuacamoleThemes in package: 2

A VS Code dark theme that's both warm and cool, like the McDLT

GitHub

Color themes

VS Code preview

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

McDLT — McDLT (gray)

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.background#1d2028
activityBar.border#1d2028
activityBar.dropBackground#1d202840
activityBar.foreground#a8d5f0
activityBarBadge.background#1d2028
activityBarBadge.foreground#a8d5f0
badge.background#1d2028
badge.foreground#a8d5f0
breadcrumb.activeSelectionForeground#ffffc8
breadcrumb.background#090910
breadcrumb.foreground#a8d5f0
breadcrumbPicker.background#222830
button.background#1d2028
button.foreground#f4f2f0
button.hoverBackground#151c20
checkbox.border#909096
checkbox.foreground#a8d5f0
debugTokenExpression.boolean#daae76
debugTokenExpression.error#f03e3e
debugTokenExpression.name#a2cfea
debugTokenExpression.number#daae76
debugTokenExpression.string#daae76
debugTokenExpression.value#daae76
diffEditor.insertedTextBackground#37b24d25
diffEditor.removedTextBackground#f03e3e25
dropdown.background#090910
dropdown.border#909096
dropdown.foreground#ffffc8
dropdown.listBackground#222830
editor.background#040405
editor.findMatchBackground#7080a080
editor.findMatchHighlightBackground#7080a080
editor.findRangeHighlightBackground#7080a080
editor.foreground#ffffc8
editor.hoverHighlightBackground#1d2028
editor.inactiveSelectionBackground#2b425880
editor.lineHighlightBackground#2b4258
editor.selectionBackground#2b4258
editor.selectionForeground#a8d5f0
editor.selectionHighlightBackground#2b4258
editorBracketMatch.background#2b425825
editorBracketMatch.border#2b425850
editorCursor.foreground#a8d5f0
editorError.foreground#f03e3e
editorGroup.border#1d2028
editorGroup.dropBackground#1d2028
editorGroup.emptyBackground#1d2028
editorGroupHeader.noTabsBackground#1d2028
editorGroupHeader.tabsBackground#1d2028
editorGroupHeader.tabsBorder#1d2028
editorGutter.addedBackground#8ce99a
editorGutter.modifiedBackground#ffe066
editorHoverWidget.background#35383b
editorHoverWidget.border#909096
editorHoverWidget.foreground#a8d5f0
editorIndentGuide.background#a8d5f025
editorInfo.foreground#2b4258
editorLineNumber.activeForeground#a8d5f0
editorLineNumber.foreground#909079
editorLink.activeForeground#2b4258
editorOverviewRuler.addedForeground#8ce99a
editorOverviewRuler.border#909096
editorOverviewRuler.deletedForeground#ffa8a8
editorOverviewRuler.errorForeground#f03e3e
editorOverviewRuler.findMatchForeground#7080a080
editorOverviewRuler.infoForeground#2b4258
editorOverviewRuler.rangeHighlightForeground#7080a080
editorOverviewRuler.selectionHighlightForeground#7080a080
editorOverviewRuler.warningForeground#f59f00
editorSuggestWidget.background#222830
editorSuggestWidget.border#909096
editorSuggestWidget.foreground#a8d5f0
editorSuggestWidget.selectedBackground#35383b
editorWarning.foreground#37b24d
editorWidget.background#35383b
editorWidget.border#909096
editorWidget.foreground#ffffc8
errorForeground#f03e3e
extensionButton.prominentBackground#37b24d
extensionButton.prominentForeground#a8d5f0
extensionButton.prominentHoverBackground#2b8a3e
focusBorder#90909675
foreground#ffffc8
gitDecoration.deletedResourceForeground#b3ccff
gitDecoration.ignoredResourceForeground#f4f2f075
gitDecoration.modifiedResourceForeground#b3ffe6
gitDecoration.untrackedResourceForeground#b3ccff
input.background#1d2028
input.border#909096
input.foreground#a8d5f0
input.placeholderForeground#ffffc850
inputOption.activeBorder#909096
inputValidation.errorBackground#35383b
inputValidation.errorBorder#909096
inputValidation.infoBackground#35383b
inputValidation.infoBorder#909096
inputValidation.warningBackground#35383b
inputValidation.warningBorder#909096
list.activeSelectionBackground#35383b
list.activeSelectionForeground#a8d5f0
list.dropBackground#1d2028
list.focusForeground#a8d5f0
list.highlightBackground#35383b
list.highlightForeground#a8d5f0
list.hoverBackground#35383b
list.hoverForeground#a8d5f0
list.inactiveSelectionBackground#222830
menu.background#222830
menu.foreground#f4f2f0
menu.selectionBackground#35383b
menu.selectionForeground#a8d5f0
menubar.selectionBackground#35383b
menubar.selectionForeground#a8d5f0
notificationCenterHeader.background#222830
notificationCenterHeader.foreground#a8d5f0
notifications.background#222830
notifications.foreground#f4f2f0
panel.background#090910
panel.border#1d2028
panelTitle.activeBorder#909096
panelTitle.activeForeground#a8d5f0
panelTitle.inactiveForeground#909079
peekView.border#909096
peekViewEditor.background#1d2028
peekViewEditor.matchHighlightBackground#35383b
peekViewEditor.matchHighlightBorder#909096
peekViewEditorGutter.background#090910
peekViewResult.background#1d2028
peekViewResult.fileForeground#a8d5f0
peekViewResult.lineForeground#a8d5f0
peekViewResult.matchHighlightBackground#35383b
peekViewTitle.background#1d2028
peekViewTitleDescription.foreground#a8d5f0
peekViewTitleLabel.foreground#a8d5f0
pickerGroup.border#909096
pickerGroup.foreground#a2b0cd
progressBar.background#2b4258
quickInput.background#222830
quickInput.foreground#f4f2f0
quickInputList.focusBackground#2b425880
scrollbar.shadow#000000
scrollbarSlider.activeBackground#c0c0c0d0
scrollbarSlider.background#c0c0c0d0
scrollbarSlider.hoverBackground#c0c0c0d0
selection.background#2b425850
settings.textInputBorder#909096
settings.textInputForeground#ffffc8
sideBar.background#090910
sideBar.border#1d2028
sideBar.foreground#f4f2f0
sideBarSectionHeader.background#1d2028
sideBarSectionHeader.foreground#a8d5f0
sideBarTitle.foreground#a8d5f0
statusBar.background#1d2028
statusBar.debuggingBackground#35383b
statusBar.debuggingForeground#a8d5f0
statusBar.foreground#f4f2f0
statusBar.noFolderBackground#35383b
statusBar.noFolderForeground#a8d5f0
statusBarItem.hoverBackground#ffffc825
tab.activeBackground#090910
tab.activeForeground#a8d5f0
tab.border#48484d
tab.inactiveBackground#1d2028
tab.inactiveForeground#909079
tab.unfocusedActiveForeground#909079
tab.unfocusedInactiveForeground#909079
terminal.ansiBlue#1862ab
terminal.ansiBrightBlue#2b4258
terminal.ansiBrightCyan#1098ad
terminal.ansiBrightGreen#37b24d
terminal.ansiBrightMagenta#ae3ec9
terminal.ansiBrightRed#f03e3e
terminal.ansiBrightYellow#ffe066
terminal.ansiCyan#0b7285
terminal.ansiGreen#2b8a3e
terminal.ansiMagenta#862e9c
terminal.ansiRed#c92a2a
terminal.ansiYellow#ffe066
terminal.background#040405
terminal.foreground#f4f2f0
titleBar.activeBackground#1d2028
titleBar.activeForeground#f4f2f0
titleBar.inactiveBackground#1d2028
titleBar.inactiveForeground#f4f2f0
welcomePage.buttonBackground#1d2028
welcomePage.buttonHoverBackground#151c20
widget.shadow#090910

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bdae9d	—
meta.scriptblock.powershell	#bdae9d	—
comment	#a8d5f0b0	italic
constant	#daae76	—
entity	#72c3fc
function, support.function.powershell, entity.name.function.powershell	#43fafa
keyword	#a2cfea
storage	#a2cfea
string, string.quoted.double.powershell	#daae76
Number, constant.numeric.integer.powershell	#daae76
support	#ffffc8
variable, support.variable.automatic.powershell	#ffffc8	—
invalid.deprecated	#f03e3e	italic underline
invalid.illegal	#a0a0a0	—
entity.other.attribute-name	#a8d5f0	—
entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#37A8ED	—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#daae76	—

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