Material Code

Name: Material Code
Author: Rakib

Publisher: RakibThemes in package: 2

Dynamic theme for Visual Studio Code.

Open in VS Code GitHub

Color themes

VS Code preview

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

Material Code — Material Code

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.activeBackground#182126
activityBar.activeBorder#ffffff00
activityBar.background#12191d
activityBar.foreground#ced5db
activityBarBadge.background#85cff9
activityBarBadge.foreground#003549
badge.background#85cff9
badge.foreground#003549
banner.iconForeground#ced5db
breadcrumb.activeSelectionForeground#ced5db
breadcrumb.focusForeground#ced5db
breadcrumb.foreground#a4cce5
breadcrumbPicker.background#192329
button.background#85cff9
button.foreground#003549
button.secondaryBackground#234b60
button.secondaryForeground#a4cce5
checkbox.background#ffffff00
checkbox.border#85cff9
checkbox.foreground#85cff9
debugIcon.breakpointCurrentStackframeForeground#85cff9
debugIcon.breakpointForeground#85cff9
debugIcon.breakpointUnverifiedForeground#85cff9
debugIcon.continueForeground#85cff9
debugIcon.restartForeground#87d7ab
debugIcon.stepIntoForeground#85cff9
debugIcon.stepOutForeground#85cff9
debugIcon.stepOverForeground#85cff9
debugTokenExpression.boolean#d3c968
debugTokenExpression.error#ffb2bc
debugTokenExpression.name#00b8f5
debugTokenExpression.number#d3c968
debugTokenExpression.string#87d7ab
debugTokenExpression.value#234b60
debugToolBar.background#182126
diffEditor.diagonalFill#2a313650
diffEditor.insertedLineBackground#87d7ab20
diffEditor.insertedTextBackground#ffffff00
diffEditor.removedLineBackground#ffb2bc20
diffEditor.removedTextBackground#ffffff00
dropdown.background#192329
dropdown.border#ffffff00
dropdown.foreground#ced5db
editor.background#12191d
editor.findMatchBackground#85cff930
editor.findMatchHighlightBackground#85cff930
editor.findRangeHighlightBackground#85cff920
editor.foreground#ced5db
editor.hoverHighlightBackground#1c272e
editor.inactiveSelectionBackground#1c272e50
editor.lineHighlightBackground#85cff910
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#85cff920
editor.selectionBackground#1c272e
editor.selectionForeground#ced5db
editor.selectionHighlightBackground#85cff920
editor.stackFrameHighlightBackground#85cff920
editor.symbolHighlightBackground#85cff920
editor.wordHighlightBackground#85cff930
editor.wordHighlightStrongBackground#85cff940
editorBracketHighlight.foreground1#f642d1
editorBracketHighlight.foreground2#bbae00
editorBracketHighlight.foreground3#f35c7b
editorBracketHighlight.foreground4#00a56e
editorBracketMatch.background#85cff940
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#f642d120
editorBracketPairGuide.activeBackground2#bbae0020
editorBracketPairGuide.activeBackground3#f35c7b20
editorBracketPairGuide.activeBackground4#00a56e20
editorBracketPairGuide.background1#f642d110
editorBracketPairGuide.background2#bbae0010
editorBracketPairGuide.background3#f35c7b10
editorBracketPairGuide.background4#00a56e10
editorCursor.foreground#ced5db
editorError.foreground#ffb2bc
editorGroup.border#2a3136
editorGroup.dropBackground#85cff950
editorGroupHeader.tabsBackground#12191d
editorGutter.addedBackground#87d7ab80
editorGutter.deletedBackground#ffb2bc80
editorGutter.foldingControlForeground#234b60
editorGutter.modifiedBackground#85cff9
editorHoverWidget.background#192329
editorHoverWidget.border#ffffff00
editorIndentGuide.activeBackground#182126
editorIndentGuide.background#ffffff00
editorInfo.foreground#ced5db
editorLineNumber.activeForeground#ced5db
editorLineNumber.foreground#8a9297
editorLink.activeForeground#ced5db
editorOverviewRuler.border#ffffff00
editorOverviewRuler.errorForeground#ffb2bc
editorOverviewRuler.findMatchForeground#85cff9
editorOverviewRuler.infoForeground#87d7ab
editorOverviewRuler.warningForeground#d3c968
editorRuler.foreground#182126
editorStickyScroll.background#12191d80
editorStickyScrollHover.background#182126
editorSuggestWidget.selectedBackground#1c272e
editorWarning.foreground#d3c968
editorWhitespace.foreground#a4cce5
editorWidget.background#192329
editorWidget.border#ffffff00
errorForeground#ffb2bc
focusBorder#ffffff00
foreground#ced5db
icon.foreground#ced5db
input.background#182126
input.border#ffffff00
input.foreground#ced5db
input.placeholderForeground#8a9297
inputOption.activeBackground#85cff9
inputOption.activeBorder#ffffff00
inputOption.activeForeground#003549
inputValidation.errorBackground#ffb2bc40
inputValidation.errorBorder#ffffff00
inputValidation.errorForeground#591927
inputValidation.infoBackground#85cff940
inputValidation.infoBorder#ffffff00
inputValidation.infoForeground#ced5db
inputValidation.warningBackground#d3c96840
inputValidation.warningBorder#ffffff00
inputValidation.warningForeground#ced5db
keybindingLabel.background#1c272e
keybindingLabel.border#ffffff00
keybindingLabel.bottomBorder#ffffff00
keybindingLabel.foreground#ced5db
list.activeSelectionBackground#1c272e
list.activeSelectionForeground#ced5db
list.dropBackground#85cff950
list.focusBackground#1c272e
list.focusForeground#ced5db
list.highlightForeground#85cff9
list.hoverBackground#1c272e
list.hoverForeground#ced5db
list.inactiveSelectionBackground#182126
list.inactiveSelectionForeground#ced5db
listFilterWidget.background#1c272e
listFilterWidget.noMatchesOutline#ffb2bc
listFilterWidget.outline#85cff9
menu.background#192329
menu.border#ffffff00
menu.foreground#ced5db
menu.selectionBackground#1c272e
menu.selectionForeground#ced5db
menu.separatorBackground#ffffff00
menubar.selectionBackground#182126
notificationCenterHeader.background#1c272e
notificationCenterHeader.foreground#ced5db
notifications.background#1c272e
notifications.border#ffffff00
notifications.foreground#ced5db
notificationsErrorIcon.foreground#ffb2bc
notificationsInfoIcon.foreground#85cff9
notificationsWarningIcon.foreground#d3c968
outputView.background#182126
panel.background#182126
panel.border#ffffff00
panel.dropBorder#85cff9
panelTitle.activeBorder#ced5db
panelTitle.activeForeground#ced5db
panelTitle.inactiveForeground#8a9297
peekView.border#ffffff00
peekViewEditor.background#192329
peekViewEditor.matchHighlightBackground#85cff930
peekViewResult.background#192329
peekViewResult.lineForeground#ced5db
peekViewResult.matchHighlightBackground#85cff930
peekViewResult.selectionBackground#1c272e
peekViewResult.selectionForeground#ced5db
peekViewTitle.background#192329
peekViewTitleDescription.foreground#ced5db
peekViewTitleLabel.foreground#85cff9
pickerGroup.border#ffffff00
pickerGroup.foreground#85cff9
problemsErrorIcon.foreground#ffb2bc
problemsInfoIcon.foreground#85cff9
problemsWarningIcon.foreground#d3c968
progressBar.background#85cff9
quickInput.background#192329
quickInput.foreground#ced5db
quickInputList.focusBackground#234b60
quickInputList.focusForeground#a4cce5
quickInputList.focusIconForeground#85cff9
quickInputTitle.background#192329
sash.hoverBorder#85cff9
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#1c272e
scrollbarSlider.background#1c272e
scrollbarSlider.hoverBackground#1c272e
selection.background#85cff920
settings.focusedRowBackground#ffffff00
settings.focusedRowBorder#ffffff00
settings.headerForeground#85cff9
settings.modifiedItemIndicator#85cff9
sideBar.background#12191d
sideBar.border#ffffff00
sideBar.foreground#ced5db
sideBarSectionHeader.background#ffffff00
statusBar.background#12191d
statusBar.border#ffffff00
statusBar.debuggingBackground#12191d
statusBar.focusBorder#ffffff00
statusBar.foreground#ced5db
statusBar.noFolderBackground#12191d
statusBarItem.activeBackground#182126
statusBarItem.hoverBackground#182126
statusBarItem.remoteBackground#12191d
statusBarItem.remoteForeground#ced5db
tab.activeBackground#182126
tab.activeForeground#ced5db
tab.border#ffffff00
tab.hoverBackground#1c272e
tab.inactiveBackground#12191d
tab.inactiveForeground#8a9297
terminal.ansiBrightBlue#0079d6
terminal.ansiBrightCyan#009bd0
terminal.ansiBrightGreen#87d7ab
terminal.ansiBrightMagenta#f642d1
terminal.ansiBrightRed#f35c7b
terminal.ansiBrightYellow#d3c968
terminal.foreground#ced5db
textLink.activeForeground#85cff9
textLink.foreground#85cff9
titleBar.activeBackground#12191d
titleBar.activeForeground#ced5db
titleBar.inactiveBackground#12191d
titleBar.inactiveForeground#ced5db
tree.indentGuidesStroke#182126
widget.border#2a3136
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
, punctuation, keyword, keyword.other.unit, constant.other, comment, punctuation.definition.comment	#8a9297	—
string, punctuation.definition.string	#00a56e	—
storage.type, storage.modifier, keyword.operator, keyword.control, punctuation.definition.template-expression	#f642d1	—
variable, meta.objectliteral, entity.name.tag, punctuation.definition.tag, invalid.illegal.character-not-allowed-here.html	#0079d6	—
entity.other.attribute-name, punctuation.separator.key-value.html, punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue	#00b8f5	—
variable.other, punctuation.definition	#009bd0	—
support.variable, support.function, entity.name.function, keyword.other, support.type, punctuation.separator.key-value.css	#f35c7b	—
constant, support.constant, keyword.other.unit, punctuation.terminator.rule.css, entity.name.type	#bbae00	—

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