Matteric Theme

Name: Matteric Theme
Author: Alexey Rodin

Publisher: Alexey RodinThemes in package: 1

Matte dark theme for VS Code

GitHub

VS Code preview

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

Matteric Theme — Matteric Dark Default

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#D2D4D600
activityBar.background#1B1F23
activityBar.dropBorder#1B1F23
activityBar.foreground#D2D4D6
activityBar.inactiveForeground#4D535C
activityBarBadge.background#D2D4D6
activityBarBadge.foreground#1B1F23
badge.background#30373D
badge.foreground#D2D4D6
breadcrumb.activeSelectionForeground#ACAEB0
breadcrumb.background#1B1F23
breadcrumb.focusForeground#ACAEB0
breadcrumb.foreground#4D535C
breadcrumbPicker.background#1B1F23
button.background#30373D
button.foreground#D2D4D6
button.hoverBackground#282E33
debugConsole.errorForeground#E35339
debugConsole.infoForeground#89B3D5
debugConsole.sourceForeground#ACAEB0
debugConsole.warningForeground#D9C671
debugIcon.breakpointDisabledForeground#ACAEB0
debugIcon.breakpointForeground#E35339
debugIcon.breakpointUnverifiedForeground#ACAEB0
debugIcon.continueForeground#6F91AD
debugIcon.pauseForeground#6F91AD
debugIcon.restartForeground#84A360
debugIcon.startForeground#84A360
debugIcon.stepIntoForeground#6F91AD
debugIcon.stepOutForeground#6F91AD
debugIcon.stepOverForeground#6F91AD
debugIcon.stopForeground#E35339
debugTokenExpression.boolean#E38539
debugTokenExpression.error#E35339
debugTokenExpression.name#ACAEB0
debugTokenExpression.number#E38539
debugTokenExpression.string#84A360
debugTokenExpression.value#4D535C
debugToolBar.background#1B1F23
debugView.stateLabelBackground#22272B
debugView.stateLabelForeground#D2D4D6
diffEditor.diagonalFill#22272B
diffEditor.insertedTextBackground#46573380
diffEditor.removedTextBackground#472C2780
dropdown.background#22272B
dropdown.border#22272B
dropdown.foreground#ACAEB0
dropdown.listBackground#22272B
editor.background#1B1F23
editor.findMatchBackground#576A80
editor.findMatchHighlightBackground#30373Dee
editor.findRangeHighlightBackground#22272Baa
editor.foreground#ACAEB0
editor.hoverHighlightBackground#282E33ee
editor.lineHighlightBackground#22272B
editor.selectionBackground#30373D
editor.selectionHighlightBackground#22272B
editor.stackFrameHighlightBackground#16191C
editor.wordHighlightBackground#282E33
editor.wordHighlightStrongBackground#30373D
editorBracketMatch.border#282E33
editorCodeLens.foreground#4D535C
editorCursor.foreground#D2D4D6
editorError.foreground#E35339
editorGroup.border#22272B
editorGroup.dropBackground#22272B80
editorGroupHeader.noTabsBackground#1B1F23
editorGroupHeader.tabsBackground#1B1F23
editorGutter.background#1B1F23
editorHoverWidget.background#1B1F23
editorHoverWidget.border#22272B
editorHoverWidget.foreground#ACAEB0
editorInfo.foreground#89B3D5
editorLineNumber.activeForeground#ACAEB0
editorLineNumber.foreground#4D535C
editorLink.activeForeground#89B3D5
editorOverviewRuler.border#22272B
editorOverviewRuler.findMatchForeground#576A80aa
editorPane.background#1B1F23
editorRuler.foreground#22272B
editorSuggestWidget.background#22272B
editorSuggestWidget.border#22272B
editorSuggestWidget.focusHighlightForeground#7296B3
editorSuggestWidget.foreground#ACAEB0
editorSuggestWidget.highlightForeground#576A80
editorSuggestWidget.selectedBackground#1B1F23
editorSuggestWidget.selectedForeground#D2D4D6
editorWarning.foreground#D9C671
editorWhitespace.foreground#22272B
editorWidget.background#1B1F23
editorWidget.border#22272B
editorWidget.foreground#ACAEB0
editorWidget.resizeBorder#22272B
extensionButton.prominentBackground#30373D
extensionButton.prominentForeground#D2D4D6
extensionButton.prominentHoverBackground#282E33
extensionIcon.preReleaseForeground#84A360
extensionIcon.starForeground#D9C671
extensionIcon.verifiedForeground#7296B3
focusBorder#1B1F23
input.background#22272B
input.border#22272B
input.foreground#D2D4D6
input.placeholderForeground#ACAEB0
inputOption.activeBackground#22272B00
inputOption.activeForeground#EAECEF
inputOption.hoverBackground#30373D
inputValidation.errorBackground#472C27
inputValidation.errorBorder#E35339
inputValidation.errorForeground#D2D4D6
list.activeSelectionBackground#30373D
list.activeSelectionForeground#D2D4D6
list.dropBackground#22272B
list.errorForeground#E35339
list.filterMatchBackground#30373D
list.focusHighlightForeground#D2D4D6
list.hoverBackground#282E33
list.hoverForeground#D2D4D6
list.inactiveSelectionBackground#282E33
list.inactiveSelectionForeground#D2D4D6
list.warningForeground#D9C671
listFilterWidget.background#282E33
listFilterWidget.noMatchesOutline#E35339
menu.background#1B1F23
menu.foreground#ACAEB0
menu.selectionBackground#22272B
menu.selectionForeground#D2D4D6
menu.separatorBackground#22272B
menubar.selectionBackground#22272B
menubar.selectionForeground#D2D4D6
minimap.errorHighlight#E3533980
minimap.findMatchHighlight#576A8080
minimap.foregroundOpacity#ACAEB0cc
minimap.selectionHighlight#ACAEB0aa
minimap.selectionOccurrenceHighlight#4D535C80
minimap.warningHighlight#D9C67180
minimapSlider.activeBackground#22272B80
minimapSlider.background#1B1F2380
minimapSlider.hoverBackground#22272B80
notificationCenterHeader.background#1B1F23
notificationCenterHeader.foreground#ACAEB0
notifications.background#1B1F23
notifications.foreground#ACAEB0
notificationsErrorIcon.foreground#E35339
notificationsInfoIcon.foreground#89B3D5
notificationsWarningIcon.foreground#D9C671
panel.background#1B1F23
panel.border#22272B
panelSection.border#22272B
panelSection.dropBackground#22272B80
panelSectionHeader.background#22272B
panelSectionHeader.foreground#ACAEB0
panelTitle.activeBorder#D2D4D6
panelTitle.activeForeground#D2D4D6
panelTitle.inactiveForeground#ACAEB0
peekView.border#22272B
peekViewEditor.background#16191C
peekViewEditor.matchHighlightBackground#22272B
peekViewEditorGutter.background#16191C
peekViewResult.background#1B1F23
peekViewResult.lineForeground#ACAEB0
peekViewResult.matchHighlightBackground#30373D
peekViewResult.selectionBackground#22272B
peekViewResult.selectionForeground#D2D4D6
peekViewTitle.background#1B1F23
peekViewTitleDescription.foreground#585F69
peekViewTitleLabel.foreground#D2D4D6
problemsErrorIcon.foreground#E35339
problemsInfoIcon.foreground#89B3D5
problemsWarningIcon.foreground#D9C671
progressBar.background#89B3D5
scrollbar.shadow#1B1F23
scrollbarSlider.activeBackground#30373Dee
scrollbarSlider.background#30373Dbb
scrollbarSlider.hoverBackground#30373Dee
selection.background#1B1F23
settings.checkboxBackground#282E33
settings.checkboxBorder#282E33
settings.checkboxForeground#ACAEB0
settings.dropdownBackground#282E33
settings.dropdownBorder#282E33
settings.dropdownForeground#ACAEB0
settings.dropdownListBorder#22272B
settings.focusedRowBackground#1B1F23
settings.focusedRowBorder#282E33
settings.headerBorder#22272B
settings.headerForeground#ACAEB0
settings.modifiedItemIndicator#282E33
settings.numberInputBackground#282E33
settings.numberInputBorder#282E33
settings.numberInputForeground#ACAEB0
settings.rowHoverBackground#22272B
settings.textInputBackground#282E33
settings.textInputBorder#282E33
settings.textInputForeground#ACAEB0
sideBar.background#1B1F23
sideBar.border#22272B
sideBar.dropBackground#22272B80
sideBar.foreground#ACAEB0
sideBarSectionHeader.background#22272B
sideBarSectionHeader.foreground#D2D4D6
sideBarTitle.foreground#ACAEB0
statusBar.background#1B1F23
statusBar.debuggingBackground#1B1F23
statusBar.debuggingForeground#585F69
statusBar.foreground#585F69
statusBar.noFolderBackground#1B1F23
statusBar.noFolderForeground#585F69
statusBarItem.activeBackground#1B1F23
statusBarItem.errorBackground#472C27
statusBarItem.errorForeground#ACAEB0
statusBarItem.hoverBackground#22272B
statusBarItem.remoteBackground#1B1F23
statusBarItem.remoteForeground#585F69
tab.activeBackground#1B1F23
tab.activeBorderTop#D2D4D6
tab.activeForeground#D2D4D6
tab.border#22272B
tab.hoverBackground#22272B
tab.inactiveBackground#1B1F23
tab.inactiveForeground#585F69
tab.lastPinnedBorder#22272B
tab.unfocusedActiveBackground#1B1F23
tab.unfocusedActiveBorderTop#D2D4D6
tab.unfocusedActiveForeground#D2D4D6
tab.unfocusedHoverBackground#22272B
tab.unfocusedInactiveBackground#1B1F23
tab.unfocusedInactiveForeground#585F69
terminal.ansiBlack#16191C
terminal.ansiBlue#315173
terminal.ansiBrightBlack#4D535C
terminal.ansiBrightBlue#5389C2
terminal.ansiBrightCyan#89B3D5
terminal.ansiBrightGreen#9FC474
terminal.ansiBrightMagenta#A087D4
terminal.ansiBrightRed#E35339
terminal.ansiBrightWhite#D2D4D6
terminal.ansiBrightYellow#D9C671
terminal.ansiCyan#6F91AD
terminal.ansiGreen#84A360
terminal.ansiMagenta#4B4063
terminal.ansiRed#E35339
terminal.ansiWhite#ACAEB0
terminal.ansiYellow#D9C671
terminal.background#1B1F23
terminal.foreground#ACAEB0
terminal.selectionBackground#30373D
terminalCursor.foreground#D2D4D6
textLink.activeForeground#7296B3
textLink.foreground#89B3D5
titleBar.activeBackground#1B1F23
titleBar.activeForeground#585F69
titleBar.inactiveBackground#1B1F23
titleBar.inactiveForeground#585F69
welcomePage.progress.background#282E33
welcomePage.progress.foreground#89B3D5
welcomePage.tileBackground#1B1F23
welcomePage.tileHoverBackground#22272B
welcomePage.tileShadow.#16191C
widget.shadow#16191C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.character.escape, punctuation, meta.brace, storage.type, storage.modifier, keyword.control, keyword.operator	#4D535C	—
support.type	#ACAEB0	—
keyword.control.at-rule	#ACAEB0	—
comment, punctuation.definition.comment	#D9C671	—
string, string.regexp, constant.other.symbol	#84A360	—
constant	#E38539	—
invalid, invalid.illegal	#E35339	—
entity.name.tag.html	#6F91AD	—
token.info-token	#7296B3	—
token.warn-token	#D9C671	—
token.error-token	#E35339	—
token.debug-token	#A087D4	—

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