Material Stone Themes

Name: Material Stone Themes
Author: te6

Publisher: te6Themes in package: 2

Warm-stone dark/light themes. High contrast by default.

Open in VS Code GitHub

Color themes

VS Code preview

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

Material Stone Themes — Material Stone Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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...
~/my-project $

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#c2bdba
activityBar.background#181513
activityBar.border#49403b60
activityBar.foreground#e7e5e4
activityBarBadge.background#c2bdba
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#4a4a4a
breadcrumb.activeSelectionForeground#c2bdba
breadcrumb.background#181513
breadcrumb.focusForeground#e7e5e4
breadcrumb.foreground#918076
breadcrumbPicker.background#1d1917
button.background#6c5e5650
button.foreground#ffffff
debugConsole.errorForeground#e67979
debugConsole.infoForeground#51aebd
debugConsole.warningForeground#c49548
debugToolBar.background#25201d
diffEditor.insertedTextBackground#8daa6120
diffEditor.removedTextBackground#e6797920
dropdown.background#25201d
dropdown.border#ffffff10
editor.background#181513
editor.findMatchBackground#000000
editor.findMatchBorder#c2bdba
editor.findMatchHighlightBackground#00000050
editor.findMatchHighlightBorder#ffffff50
editor.findRangeHighlightBackground#c4954830
editor.foreground#e7e5e4
editor.lineHighlightBackground#e7e5e413
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0d
editor.selectionBackground#e7e5e414
editor.selectionHighlightBackground#e5b56920
editor.wordHighlightBackground#e7e5e415
editor.wordHighlightStrongBackground#e7e5e430
editorBracketHighlight.foreground1#3292a2
editorBracketHighlight.foreground2#a87b2a
editorBracketHighlight.foreground3#b56692
editorBracketHighlight.foreground4#738f47
editorBracketHighlight.foreground5#6082c9
editorBracketHighlight.foreground6#bd6a4b
editorBracketHighlight.unexpectedBracket.foreground#fbc1bf
editorBracketMatch.background#25201d
editorBracketMatch.border#e5b56950
editorCursor.foreground#e5b569
editorError.foreground#e6797970
editorGroup.border#00000030
editorGroup.dropBackground#e6797980
editorGroup.focusedEmptyBorder#e67979
editorGroupHeader.border#49403b60
editorGroupHeader.tabsBackground#181513
editorGutter.addedBackground#8daa6160
editorGutter.deletedBackground#e6797960
editorGutter.modifiedBackground#7a9de660
editorHoverWidget.background#25201d
editorHoverWidget.border#ffffff10
editorInfo.foreground#7a9de670
editorInlayHint.foreground#a99b93c0
editorLineNumber.activeForeground#918076
editorLineNumber.foreground#49403b
editorLink.activeForeground#e7e5e4
editorMarkerNavigation.background#e7e5e405
editorOverviewRuler.border#25201d
editorOverviewRuler.errorForeground#e6797940
editorOverviewRuler.findMatchForeground#c2bdba87
editorOverviewRuler.infoForeground#7a9de640
editorOverviewRuler.warningForeground#c4954840
editorRuler.foreground#49403b
editorSuggestWidget.background#25201d
editorSuggestWidget.border#ffffff10
editorSuggestWidget.foreground#e7e5e4
editorSuggestWidget.highlightForeground#c2bdba
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#c4954870
editorWhitespace.foreground#e7e5e440
editorWidget.background#1d1917
editorWidget.border#49403b60
editorWidget.resizeBorder#c2bdba
extensionBadge.remoteForeground#e7e5e4
extensionButton.prominentBackground#8daa6190
extensionButton.prominentForeground#e7e5e4
extensionButton.prominentHoverBackground#8daa61
focusBorder#c2bdba
foreground#e7e5e4
gitDecoration.conflictingResourceForeground#c4954890
gitDecoration.deletedResourceForeground#e6797990
gitDecoration.ignoredResourceForeground#91807690
gitDecoration.modifiedResourceForeground#7a9de690
gitDecoration.untrackedResourceForeground#8daa6190
input.background#302a26
input.border#ffffff10
input.foreground#e7e5e4
input.placeholderForeground#e7e5e460
inputOption.activeBackground#e7e5e430
inputOption.activeBorder#e7e5e430
inputValidation.errorBorder#e67979
inputValidation.infoBorder#7a9de6
inputValidation.warningBorder#c49548
list.activeSelectionBackground#ffffff10
list.activeSelectionForeground#c2bdba
list.dropBackground#e6797980
list.focusBackground#e7e5e420
list.focusForeground#e7e5e4
list.highlightForeground#c2bdba
list.hoverBackground#ffffff0a
list.hoverForeground#ffffff
list.inactiveSelectionBackground#ffffff10
list.inactiveSelectionForeground#c2bdba
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#25201d
menu.foreground#e7e5e4
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#c2bdba
menu.separatorBackground#e7e5e4
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#c2bdba
notebook.focusedCellBorder#c2bdba
notebook.inactiveFocusedCellBorder#c2bdba50
notificationLink.foreground#c2bdba
notifications.background#25201d
notifications.foreground#e7e5e4
panel.background#181513
panel.border#49403b60
panelTitle.activeBorder#c2bdba
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#e7e5e4
peekView.border#00000030
peekViewEditor.background#00000000
peekViewEditor.matchHighlightBackground#6c5e5650
peekViewEditorGutter.background#302a26
peekViewResult.background#302a26
peekViewResult.matchHighlightBackground#6c5e5650
peekViewResult.selectionBackground#91807670
peekViewTitle.background#302a26
peekViewTitleDescription.foreground#e7e5e460
pickerGroup.border#ffffff1a
pickerGroup.foreground#c2bdba
progressBar.background#c2bdba
quickInput.background#25201d
quickInput.foreground#918076
sash.hoverBorder#c2bdba50
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#c2bdba
scrollbarSlider.background#e7e5e420
scrollbarSlider.hoverBackground#e7e5e410
selection.background#00000080
settings.checkboxBackground#302a26
settings.checkboxForeground#e7e5e4
settings.dropdownBackground#302a26
settings.dropdownForeground#e7e5e4
settings.headerForeground#c2bdba
settings.modifiedItemIndicator#c2bdba
settings.numberInputBackground#302a26
settings.numberInputForeground#e7e5e4
settings.textInputBackground#302a26
settings.textInputForeground#e7e5e4
sideBar.background#181513
sideBar.border#49403b60
sideBar.foreground#918076
sideBarSectionHeader.background#181513
sideBarSectionHeader.border#49403b60
sideBarTitle.foreground#e7e5e4
statusBar.background#181513
statusBar.border#49403b60
statusBar.debuggingBackground#b589d3
statusBar.debuggingForeground#ffffff
statusBar.foreground#6c5e56
statusBar.noFolderBackground#25201d
statusBarItem.activeBackground#e6797980
statusBarItem.hoverBackground#4a4a4a20
statusBarItem.remoteBackground#c2bdba
statusBarItem.remoteForeground#000000
tab.activeBackground#ffffff10
tab.activeBorder#c2bdba
tab.activeForeground#ffffff
tab.activeModifiedBorder#7a9de6
tab.border#181513
tab.hoverBackground#ffffff0a
tab.inactiveBackground#181513
tab.inactiveForeground#918076
tab.inactiveModifiedBorder#7a9de6
tab.unfocusedActiveBorder#4a4a4a
tab.unfocusedActiveForeground#e7e5e4
tab.unfocusedActiveModifiedBorder#7a9de6
tab.unfocusedInactiveModifiedBorder#7a9de6
terminal.ansiBlack#000000
terminal.ansiBlue#7a9de6
terminal.ansiBrightBlack#4a4a4a
terminal.ansiBrightBlue#a1bef9
terminal.ansiBrightCyan#73cede
terminal.ansiBrightGreen#accb80
terminal.ansiBrightMagenta#d6a9f5
terminal.ansiBrightRed#f9a4a2
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e5b569
terminal.ansiCyan#51aebd
terminal.ansiGreen#8daa61
terminal.ansiMagenta#b589d3
terminal.ansiRed#e67979
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#c49548
terminal.background#181513
terminal.foreground#e7e5e4
terminal.selectionBackground#e7e5e426
terminalCursor.background#000000
terminalCursor.foreground#e5b569
textLink.activeForeground#e7e5e4
textLink.foreground#c2bdba
titleBar.activeBackground#181513
titleBar.activeForeground#e7e5e4
titleBar.border#49403b60
titleBar.inactiveBackground#181513
titleBar.inactiveForeground#918076
tree.indentGuidesStroke#49403b
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.underline	—	underline
variable.parameter	—	italic
support.type.property-name.css	#87e2f2	—
constant.other.symbol, meta.tag, punctuation, template.expression.begin, template.expression.end, text.html.markdown beginning.punctuation.definition.list	#a2938a	—
markup.bold	#dd7172	bold
markup.bold markup.italic, markup.italic markup.bold	#dd7172	italic bold
constant.language, entity.name.section.group-title.ini, keyword, markup.heading, modifier, support.type.object, variable.language.this	#73cede	—
markup.italic, support.module, support.node, variable.parameter.function.language.special.self.python	#dd7172	italic
constant.keyword, keyword.control, markup.quote	#73cede	italic
SXNested, constant.character.escape, markup.fenced_code.block, meta.definition.variable entity.name.function, meta.embedded, meta.function-call.arguments, meta.jsx.children, meta.template.expression, punctuation.definition.entity.html, source.cpp meta.block variable.other, source.cs entity.name.type.namespace, source.groovy.embedded, source.php meta.use support.class, source.php support.other.namespace, support.constant, support.variable, text.html constant.character.entity.named, variable	#e7e5e4	—
constant.other.key, entity.name, entity.other, entity.other.attribute-name.class, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, meta.use, source.cs meta.class.identifier storage.type, source.cs meta.method.return-type, source.cs storage.type, source.css entity.name.tag, support.class, support.type	#fac97c	—
constant.character.format.placeholder.other.python, constant.numeric, entity.other.attribute-name.id, keyword.other, 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	#f9a789	—
constant.other.placeholder, entity.name.tag, keyword.other.definition.ini, markup.deleted, meta.block, meta.definition.method entity.name.function, meta.field.declaration entity.name.function, meta.link.reference, meta.object-literal.key, meta.object-literal.key string, 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, source.cs meta.method.identifier entity.name.function, source.python meta.member.access.python, support.type.property-name.json, text.html.markdown meta.link.inline, variable.object.property	#dd7172	—
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	#da8565	—
entity.name.function, meta.function entity.name.function, meta.function-call.arguments, 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, source.cs entity.name.function, source.cs meta.method-call meta.method, source.python meta.function-call.python, support.function	#a1bef9	—
constant.language.boolean, 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, punctuation.definition.quote	#f4a0ce	—
entity.other.attribute-name, 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, meta.structure.dictionary.json support.type.property-name.json, storage.control, storage.modifier, storage.type	#a090e0	—
markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown, markup.inserted, 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, string	#bfdf93	—
source.cs meta.preprocessor	#6c5e56	—
comment, comment punctuation.definition.comment, punctuation.definition.comment, string.quoted.docstring	#918076	italic
token.info-token	#7a9de6	—
token.warn-token	#c49548	—
token.error-token	#e67979	—
token.debug-token	#b589d3	—