Dark Material Theme - by knoob

Name: Dark Material Theme - by knoob
Author: FeelsKnoobMan

Publisher: FeelsKnoobManThemes in package: 1

Dark Material Theme with Blue and Red Accents.

VS Code preview

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

Dark Material Theme - by knoob — Dark Material Theme by Knoob

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#484b8200
activityBar.background#090b10
activityBar.border#ff000000
activityBar.foreground#f05a5a
activityBar.inactiveForeground#3facff
activityBarBadge.background#f05a5a
activityBarBadge.foreground#000000
badge.background#f05a5a
badge.foreground#000000
breadcrumb.activeSelectionForeground#c3d3e3
breadcrumb.background#090b10
breadcrumb.focusForeground#c3d3e3
breadcrumb.foreground#556688
button.background#2b3555
button.foreground#c3d3e3
button.hoverBackground#556688bb
button.secondaryBackground#12192c
button.secondaryForeground#c3d3e3
button.secondaryHoverBackground#55668844
checkbox.background#0e1321
checkbox.border#00000000
checkbox.foreground#c3d3e3
debugExceptionWidget.background#0e1321
debugExceptionWidget.border#47474700
debugToolBar.background#0e1321
debugToolBar.border#47474700
diffEditor.border#00000000
diffEditor.insertedTextBackground#79943a33
diffEditor.insertedTextBorder#79943a05
diffEditor.removedTextBackground#ff4e4e33
diffEditor.removedTextBorder#ff4e4e05
dropdown.background#0e1321
dropdown.border#00000000
dropdown.foreground#c3d3e3
editor.background#090b10
editor.findMatchBackground#226a9944
editor.findMatchBorder#74879f00
editor.findMatchHighlightBackground#f05a5a55
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#12192c88
editor.findRangeHighlightBorder#f2f2f200
editor.foldBackground#0e132133
editor.foreground#b3c3d3
editor.hoverHighlightBackground#a0cfff40
editor.inactiveSelectionBackground#10172c
editor.lineHighlightBackground#03040644
editor.lineHighlightBorder#28282800
editor.rangeHighlightBackground#f05a5a22
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#121d38
editor.selectionHighlightBackground#f05a5a22
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#6f3a3a66
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#226a9988
editor.wordHighlightStrongBorder#ff000000
editorBracketMatch.background#f05a5a22
editorBracketMatch.border#f05a5a22
editorCodeLens.foreground#556688bb
editorCursor.background#000000
editorCursor.foreground#dd392d
editorError.background#ff462022
editorError.border#ffffff00
editorError.foreground#ff462033
editorGroup.border#00000070
editorGroup.emptyBackground#090b10
editorGroupHeader.border#1d1d2138
editorGroupHeader.tabsBackground#090b10
editorGroupHeader.tabsBorder#ff787800
editorGutter.addedBackground#55ba0f
editorGutter.background#090b10
editorGutter.commentRangeForeground#455779
editorGutter.deletedBackground#c41f26
editorGutter.foldingControlForeground#556688
editorGutter.modifiedBackground#26a8cd
editorHoverWidget.background#0e1321
editorHoverWidget.border#0e1321
editorHoverWidget.foreground#c3d3e3
editorIndentGuide.activeBackground#55668844
editorIndentGuide.background#55668811
editorInfo.background#5186b622
editorInfo.border#4490BF00
editorInfo.foreground#5186b633
editorLineNumber.activeForeground#c3d3e3
editorLineNumber.foreground#556688
editorLink.activeForeground#54b2ff
editorMarkerNavigation.background#0e1321
editorMarkerNavigationError.background#8a4d4d
editorMarkerNavigationInfo.background#527fa7
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#090b10
editorOverviewRuler.border#c0afaf00
editorRuler.foreground#292c3e
editorSuggestWidget.background#0e1321
editorSuggestWidget.border#0e1321
editorSuggestWidget.foreground#c3d3e3
editorSuggestWidget.highlightForeground#f05a5a
editorSuggestWidget.selectedBackground#12192c
editorWarning.background#ffe46c22
editorWarning.border#ffffff00
editorWarning.foreground#ffe46c33
editorWhitespace.foreground#2b496f22
editorWidget.background#090b10
editorWidget.foreground#c3d3e3
editorWidget.resizeBorder#f05a5a
focusBorder#00699d00
foreground#c3d3e3
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#c3d3e3
input.background#0e1321
input.border#00000000
input.foreground#c3d3e3
input.placeholderForeground#556688
inputOption.activeBackground#f05a5a88
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
list.activeSelectionBackground#02050a64
list.activeSelectionForeground#2ea5ff
list.dropBackground#2c2e4700
list.focusBackground#226a9944
list.focusForeground#849cc9
list.highlightForeground#f05a5a
list.hoverBackground#02040600
list.hoverForeground#f05a5a
list.inactiveSelectionBackground#02050a64
list.inactiveSelectionForeground#2ea5ff
listFilterWidget.background#090b10
listFilterWidget.noMatchesOutline#f0564700
listFilterWidget.outline#c2c2c200
menu.background#090b10
menu.border#8a7b7b00
menu.foreground#9cbecf
menu.selectionBackground#05070d81
menu.selectionBorder#00000000
menu.selectionForeground#f05a5a
menu.separatorBackground#9cbecf
menubar.selectionBackground#090b10
menubar.selectionBorder#e60f0f00
menubar.selectionForeground#f05a5a
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#090b10
minimap.errorHighlight#ff462033
minimap.findMatchHighlight#226a9944
minimap.selectionHighlight#12192c
minimap.warningHighlight#ffe46c33
minimapGutter.addedBackground#55ba0f
minimapGutter.deletedBackground#c41f26
minimapGutter.modifiedBackground#26a8cd
notificationCenter.border#0e1321
notificationCenterHeader.background#0e1321
notificationCenterHeader.foreground#c3d3e3
notifications.background#0e1321
notifications.border#0e1321
notifications.foreground#c3d3e3
notificationsErrorIcon.foreground#f47171
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#e4bb01
notificationToast.border#4747473e
panel.background#090b10
panel.border#131a1fcc
panelSection.border#0e132100
panelTitle.activeBorder#2ea5ff
panelTitle.activeForeground#2ea5ff
panelTitle.inactiveForeground#556688
peekView.border#7bb4d9
peekViewEditor.background#0e1321
peekViewEditor.matchHighlightBackground#ee860056
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#0e1321
peekViewResult.background#0e1321
peekViewResult.fileForeground#b0f0ff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#0e1321
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#cbfdff
pickerGroup.border#51517100
pickerGroup.foreground#c3d3e3
progressBar.background#f05a5a
scrollbar.shadow#28282800
scrollbarSlider.activeBackground#f05a5a11
scrollbarSlider.background#0e132188
scrollbarSlider.hoverBackground#0e132188
selection.background#226a99
settings.focusedRowBackground#ffffff07
settings.headerForeground#c3d3e3
sideBar.background#090b10
sideBar.border#131a1fcc
sideBar.dropBackground#2c2e4700
sideBar.foreground#556688
sideBarSectionHeader.background#ffffff00
sideBarSectionHeader.border#84545400
sideBarSectionHeader.foreground#f05a5a
sideBarTitle.foreground#849cc9
statusBar.background#090b10
statusBar.border#00000000
statusBar.debuggingBackground#090b10
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#d470f0
statusBar.foreground#668aa8
statusBar.noFolderBackground#090b10
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#68217a
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#226a9988
statusBarItem.remoteBackground#090b10
statusBarItem.remoteForeground#f05a5a
tab.activeBackground#090b10
tab.activeBorder#2ea5ff
tab.activeBorderTop#5affb200
tab.activeForeground#2ea5ff
tab.border#25252600
tab.hoverBackground#ff000000
tab.hoverBorder#f05a5a
tab.hoverForeground#f05a5a
tab.inactiveBackground#090b10
tab.inactiveForeground#556688
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#0e132100
terminal.foreground#beb6b6
terminal.selectionBackground#121d38dd
terminalCursor.background#000000
terminalCursor.foreground#dd392d
textLink.foreground#2ea5ff
titleBar.activeBackground#0a0c15
titleBar.activeForeground#9cbecf
titleBar.border#00000000
titleBar.inactiveBackground#090b10
titleBar.inactiveForeground#9cbecf44
tree.indentGuidesStroke#668aa887
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#50678b	italic
variable, string constant.other.placeholder	#8F93A2	—
constant.other.php	#FFCB6B	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
storage.type, storage.modifier	#C792EA	—
keyword	#ff726e	bold
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, punctuation.definition.decorator.python	#0ec7e7	—
punctuation	#4db3db	bold
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#82AAFF	—
source.cpp meta.block variable.other	#f07178	—
variable.other.constant	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.character, constant.escape, keyword.other	#ec6868	—
constant.language.python	#ec6868	—
constant.numeric, keyword.other.unit, constant.language, support.constant	#e7a77d	—
variable.parameter.function.language.special, variable.parameter	#8ba5ab	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#3cd4f7	—
constant.character.escape	#C3E88D	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
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	#F78C6C	—
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	#FF5370	—
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	#C17E70	—
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	#82AAFF	—
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	#f07178	—
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	#C792EA	—
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	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#8F93A2	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#80869E50	—
text.html.markdown meta.dummy.line-break	#ffffff	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#80869E50	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#8F93A290	—
variable.language.fenced.markdown	#80869E50	—
meta.separator	#80869E50	bold
markup.table	#8F93A2	—
string.quoted.docstring.multi.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python	#50678b	—
meta.function-call.generic.python, meta.function-call.python	#8da4bd	—
variable.parameter.function.language.special.self.python	#ec6868	—
punctuation.definition.string.begin.python, punctuation.definition.string.end.python	#52b7d6	—
meta.function.python, meta.function.parameters.python, support.type.python, meta.indexed-name.python	#e4c772	—

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