Altered Matter

Name: Altered Matter
Author: techwithcarlos

Publisher: techwithcarlosThemes in package: 6

One Dark Theme with 5 variants, optimized for JavaScript, Rust, Go, TypeScript, React, Node.js and Python with the same and best possible color support!

Open in VS Code GitHub

Color themes

VS Code preview

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

Altered Matter — Altered Matter Green

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#2aba7c
activityBar.background#141820
activityBar.dropBorder#2aba7c
activityBar.foreground#2aba7c
activityBar.inactiveForeground#39445f
activityBarBadge.background#2aba7c
activityBarBadge.foreground#F8F8F8
badge.background#2aba7c
badge.foreground#F8F8F8
breadcrumb.activeSelectionForeground#838EA8
breadcrumb.background#212836
breadcrumb.focusForeground#838EA8
breadcrumb.foreground#838EA8
breadcrumbPicker.background#1C212E
button.background#2aba7c
button.foreground#F8F8F8
button.hoverBackground#4af9a4
button.secondaryBackground#1ba583
button.secondaryForeground#F8F8F8
button.secondaryHoverBackground#4af9a4
checkbox.background#1C212E
checkbox.border#2aba7c
checkbox.foreground#2aba7c
debugToolBar.background#17293E
debugToolBar.border#2aba7c
debugView.exceptionLabelBackground#17293E
debugView.exceptionLabelForeground#2aba7c
debugView.stateLabelBackground#17293E
debugView.stateLabelForeground#2aba7c
diffEditor.border#2aba7c
diffEditor.diagonalFill#394e6d
diffEditor.insertedTextBackground#539e2737
diffEditor.removedTextBackground#ff000038
dropdown.background#1C212E
dropdown.border#2aba7c
dropdown.foreground#2aba7c
dropdown.listBackground#1C212E
editor.background#212836
editor.findMatchBackground#141820
editor.findMatchBorder#2aba7c
editor.findMatchHighlightBackground#141820
editor.focusedStackFrameHighlightBackground#17293E
editor.foreground#97A7C8
editor.hoverHighlightBackground#47fbb075
editor.inactiveSelectionBackground#47fbb075
editor.lineHighlightBackground#262D3E
editor.selectionBackground#6198f875
editor.selectionHighlightBackground#2360c975
editor.snippetFinalTabstopHighlightBackground#1C212E
editor.snippetFinalTabstopHighlightBorder#2aba7c
editor.snippetTabstopHighlightBackground#1C212E
editor.snippetTabstopHighlightBorder#2aba7c
editor.stackFrameHighlightBackground#17293E
editor.wordHighlightBackground#47fbb075
editorBracketMatch.background#47fbb075
editorBracketMatch.border#47fbb075
editorCodeLens.foreground#2aba7c
editorCursor.background#2aba7c
editorCursor.foreground#2aba7c
editorGroup.dropBackground#47fbb075
editorGroup.emptyBackground#1C212E
editorGroup.focusedEmptyBorder#1C212E
editorGroupHeader.noTabsBackground#1C212E
editorGroupHeader.tabsBackground#1C212E
editorGutter.background#212836
editorGutter.deletedBackground#ff0000
editorGutter.foldingControlForeground#D7DBE0
editorGutter.modifiedBackground#c3ba39
editorHoverWidget.background#1C212E
editorHoverWidget.border#2aba7c
editorHoverWidget.foreground#2aba7c
editorIndentGuide.activeBackground#1C212E
editorIndentGuide.background#333B4C
editorLightBulbAutoFix.foreground#2aba7c
editorLineNumber.activeForeground#C5C5C5
editorLineNumber.foreground#6272A4
editorOverviewRuler.addedForeground#39c362
editorOverviewRuler.background#142335
editorOverviewRuler.border#243850
editorOverviewRuler.deletedForeground#C33959
editorOverviewRuler.errorForeground#C33959
editorOverviewRuler.warningForeground#ff8c00
editorSuggestWidget.background#1C212E
editorSuggestWidget.border#2aba7c
editorSuggestWidget.foreground#838EA8
editorSuggestWidget.highlightForeground#2aba7c
editorSuggestWidget.selectedBackground#47fbb075
editorWidget.background#1C212E
editorWidget.border#2aba7c
focusBorder#2aba7c
foreground#97A7C8
gitDecoration.deletedResourceForeground#C33959
gitDecoration.modifiedResourceForeground#c3ba39
gitDecoration.untrackedResourceForeground#39c362
input.background#1C212E
input.border#2aba7c
input.foreground#C5C5C5
input.placeholderForeground#838EA8
list.activeSelectionBackground#47fbb075
list.activeSelectionForeground#838EA8
list.dropBackground#47fbb075
list.focusBackground#141820
list.highlightForeground#2aba7c
list.hoverBackground#141820
list.hoverForeground#2aba7c
list.inactiveSelectionBackground#212836
list.inactiveSelectionForeground#838EA8
menu.background#142335
menu.border#2aba7c
menu.foreground#D7DBE0
menu.selectionBackground#47fbb075
menu.selectionBorder#2aba7c
menu.selectionForeground#D7DBE0
menu.separatorBackground#2aba7c
menubar.selectionBackground#1C212E
menubar.selectionBorder#2aba7c
menubar.selectionForeground#D7DBE0
minimap.background#1C212E
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#2aba7c
minimap.selectionHighlight#2aba7c
minimap.warningHighlight#ff8c00
minimapGutter.addedBackground#39c362
minimapGutter.deletedBackground#C33959
minimapGutter.modifiedBackground#c3ba39
minimapSlider.activeBackground#47fbb075
minimapSlider.background#47fbb075
minimapSlider.hoverBackground#47fbb075
notebook.cellBorderColor#2aba7c
notebook.focusedCellBackground#141820
notebook.focusedCellBorder#2aba7c
notebook.focusedEditorBorder#2aba7c
notebook.inactiveFocusedCellBorder#2aba7c
notebook.outputContainerBackgroundColor#1C212E
notebook.selectedCellBorder#2aba7c
notebookScrollbarSlider.activeBackground#141820
notebookScrollbarSlider.background#141820
notebookStatusErrorIcon.foreground#838EA8
notebookStatusRunningIcon.foreground#838EA8
notebookStatusSuccessIcon.foreground#838EA8
notificationCenter.border#2aba7c
notificationCenterHeader.background#1C212E
notificationCenterHeader.foreground#2aba7c
notifications.background#1C212E
notifications.border#2aba7c
notifications.foreground#2aba7c
notificationsErrorIcon.foreground#2aba7c
notificationsInfoIcon.foreground#2aba7c
notificationsWarningIcon.foreground#2aba7c
notificationToast.border#2aba7c
panel.background#1C212E
panel.border#141820
panel.dropBorder#2aba7c
panelSection.border#2aba7c
panelSection.dropBackground#47fbb075
panelSectionHeader.background#1C212E
panelSectionHeader.foreground#838EA8
panelTitle.activeBorder#2aba7c
panelTitle.activeForeground#F8F8F8
panelTitle.inactiveForeground#838EA8
peekView.border#2aba7c
peekViewEditor.background#141820
peekViewEditorGutter.background#141820
peekViewResult.background#141820
peekViewResult.fileForeground#AAAAAA
peekViewResult.lineForeground#AAAAAA
peekViewTitle.background#141820
peekViewTitleDescription.foreground#2aba7c
peekViewTitleLabel.foreground#2aba7c
pickerGroup.border#2aba7c
pickerGroup.foreground#838EA8
problemsInfoIcon.foreground#ff0000
progressBar.background#2aba7c
quickInput.background#1C212E
quickInput.foreground#838EA8
sash.hoverBorder#2aba7c
scrollbar.shadow#212836
scrollbarSlider.activeBackground#2978ff25
scrollbarSlider.background#838ea828
scrollbarSlider.hoverBackground#2978ff25
selection.background#47fbb075
settings.checkboxBackground#141820
settings.checkboxBorder#2aba7c
settings.checkboxForeground#2aba7c
settings.dropdownBackground#141820
settings.dropdownBorder#2aba7c
settings.dropdownForeground#2aba7c
settings.dropdownListBorder#2aba7c
settings.focusedRowBackground#141820
settings.headerForeground#2aba7c
settings.modifiedItemIndicator#2aba7c
settings.numberInputBackground#141820
settings.numberInputBorder#2aba7c
settings.numberInputForeground#2aba7c
settings.textInputBackground#141820
settings.textInputBorder#2aba7c
settings.textInputForeground#2aba7c
sideBar.background#1C212E
sideBar.dropBackground#47fbb075
sideBar.foreground#838EA8
sideBarSectionHeader.background#141820
sideBarSectionHeader.foreground#838EA8
sideBarTitle.foreground#2aba7c
statusBar.background#212836
statusBar.border#1C212E
statusBar.foreground#838EA8
statusBarItem.hoverBackground#838ea828
tab.activeBackground#212836
tab.activeBorder#2aba7c
tab.activeForeground#F8F8F8
tab.border#141820
tab.hoverBackground#212836
tab.hoverForeground#F8F8F8
tab.inactiveBackground#212836
tab.inactiveForeground#838EA8
tab.lastPinnedBorder#141820
tab.unfocusedActiveBackground#212836
tab.unfocusedActiveForeground#838EA8
tab.unfocusedHoverForeground#838EA8
tab.unfocusedInactiveBackground#212836
terminal.ansiBlack#000
terminal.ansiBlue#0066FF
terminal.ansiBrightBlack#808080
terminal.ansiBrightBlue#0066FF
terminal.ansiBrightCyan#35e2ee
terminal.ansiBrightGreen#00FF9D
terminal.ansiBrightMagenta#CC00FF
terminal.ansiBrightRed#ff0000
terminal.ansiBrightWhite#D7DBE0
terminal.ansiBrightYellow#f2ff00
terminal.ansiCyan#0ab6c2
terminal.ansiGreen#33FF00
terminal.ansiMagenta#CC00FF
terminal.ansiRed#ff0000
terminal.ansiWhite#D7DBE0
terminal.ansiYellow#f2ff00
terminal.border#3D5AFE
terminal.foreground#97A7C8
terminal.selectionBackground#47fbb075
terminalCursor.background#2aba7c
terminalCursor.foreground#2aba7c
titleBar.activeBackground#1C212E
titleBar.activeForeground#838EA8
titleBar.inactiveBackground#1C212E
titleBar.inactiveForeground#838EA8
tree.indentGuidesStroke#395B82
welcomePage.background#212836
window.activeBorder#39445f
window.inactiveBorder#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6272A4
support.class.error	#eb4949	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#F9794A	—
string.template	#b69775	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#70F49C	—
meta.jsx.children	#9c6dbb	—
entity.name.function	#71B1FE
variable.other.readwrite	#80af6c	—
meta.brace.round, punctuation.definition.block, meta.brace.square, punctuation.accessor, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.definition.string.begin, punctuation.definition.string.template.begin.js, punctuation.definition.string.end, punctuation.definition.string.template.end.js, punctuation.definition.parameters.end, punctuation.definition.parameters.begin, punctuation.separator.comma	#fff	—
punctuation.definition.parameters.end, punctuation.definition.parameters.begin	#A7DBF7	—
keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword	#CC9FF0	—
storage.type.function.arrow	#CC9FF0
string.quoted.single, string.quoted.double, meta.jsx	#0397C4	—
string.quoted.double.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.json	#56ac98	—
support.class.component	#D4AA7D	italic
constant.numeric	#d29785	—
keyword.control.import, keyword.control.export, keyword.control.from	#409d9f	—
keyword.control.default	#43dee1	italic
keyword.control.conditional	#43dee1	—
variable.other.readwrite.alias	#0397C4	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#058ab3	—
meta.object-literal.key	#5cc189	—
variable.other.object	#cc5c87	—
keyword.control.flow	#D59DF6	italic
storage.modifier.async	—	italic
variable.parameter	#c2bc71	—
variable.other.property	#6ac4b3	—
variable.other.object.property	#afa44f	—
variable, string constant.other.placeholder	#e0d7d7	—
constant.other.color	#D7DBE0	—
invalid, invalid.illegal	#FF5370	—
storage.type, storage.modifier	#D59DF6	italic
variable.other.constant	#9c77f2	—
variable.object.property	#54b1a3	—
support.variable.property	#318d58	—
support.class.builtin	#89c058	—
meta.arrow, constant.other.color, punctuation, meta.tag, 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	#0496c2	—
meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
keyword.control	#0696f0	italic
meta.function-call, variable.function, support.function, keyword.other.special-method	#82AAFF	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#26cfbe	—
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	#a7c47c	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffca67	—
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	#00BFF9	—
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#a562bf	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
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
support.type.property-name.json.comments	#4DB1D8	—
string.quoted.double.json.comments	#EAB780	—
source.json meta.structure.dictionary.json support.type.property-name.json	#4BACD2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
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	#4BACD2	—
text.html.markdown, punctuation.definition.list_item.markdown	#D7DBE0	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
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	#65737E	—
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.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#D7DBE0	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#D7DBE0	—
entity.other.attribute-name.class.css	#f07178	—
support.type.property-name.css	#506afc	—
variable.css	#9C77F2	—
keyword.other.unit.vw.css, keyword.other.unit.rem.css, keyword.other.unit.px.css, entity.name.tag.reference.css	#26cfbe	—
punctuation.terminator.rule.css, punctuation.terminator.rule.scss	#D7DBE0	—
constant.numeric.css	#26cfbe	—
support.constant.property-value.css, support.constant.media.css	#c53685	—
variable.scss, meta.property-value.css, meta.property-value.scss	#47a189	—
variable.argument.css	#D4AA7D	—
support.type.property-name.media.css	#68c4d0	—
entity.name.tag.css, entity.name.tag.reference.scss	#3497E8	—
support.type.property-name.css	#CE98EE	—
support.constant.color.w3c-standard-color-name.css	#f36a81	—
source.python	#51b2d0	—
meta.attribute.python	#C792EA	—
keyword.control.flow.python	#0A88D8	italic
storage.type.function.python	#D59DF6	—
entity.name.function.python, punctuation.definition.parameters.end.python, punctuation.definition.parameters.begin.python	#71B1FE	—
meta.indexed-name.python	#d1977f	—
constant.numeric.dec.python	#ee9797	—
meta.function-call.generic.python	#b66b98	—
meta.function-call.arguments.python	#54d9c1	—
variable.parameter.function-call.python	#3ccbeb	—
punctuation.definition.decorator.python, entity.name.function.decorator.python	#1b84f5	—
support.variable.magic.python	#9C77F2	—
text.html.derivative	#AAAAAA	—
entity.name.type.interface.ts	#6098f2	—
support.type.primitive.ts	#BE6286	—
entity.name.type.module.ts	#506AFC	—
entity.name.type.ts	#9C77F2	—
punctuation.accessor.ts	#CC9FF0	—
keyword.operator.type.annotation.ts, keyword.operator.optional.ts	#CC9FF0
support.type.builtin.ts	#26CFBE
variable.object.property.ts	#5CC189
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, punctuation.other.period.go	#CC9FF0	—
keyword.package.go	#3A8C8D	—
entity.name.package.go	#0397C4	—
source.go	#64CCBE	—
keyword, constant.other.placeholder.go	#D59DF6	italic
variable.other.assignment.go	#D4AA7D	—
entity.name.function.macro.rust	#B9535F	—
variable.other.rust	#bc9d7d	—
entity.name.type.struct.rust, entity.name.type.rust	#6EADF8	—
keyword.other.rust, keyword.other.fn.rust	#D59DF6	—
source.rust	#64CCBE	—
variable.other.env, source.env	#64CCBE	—
source.env, text.gitignore	#D4AA7D	—