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 Dopamin Owl

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#7B61C1
activityBar.background#011627
activityBar.dropBorder#7B61C1
activityBar.foreground#7B61C1
activityBar.inactiveForeground#39445f
activityBarBadge.background#7B61C1
activityBarBadge.foreground#F8F8F8
badge.background#7B61C1
badge.foreground#F8F8F8
breadcrumb.activeSelectionForeground#838EA8
breadcrumb.background#011627
breadcrumb.focusForeground#838EA8
breadcrumb.foreground#838EA8
breadcrumbPicker.background#011627
button.background#8a59fe75
button.foreground#F8F8F8
button.hoverBackground#7B61C1
button.secondaryBackground#7B61C1
button.secondaryForeground#F8F8F8
button.secondaryHoverBackground#9476EB
checkbox.background#011627
checkbox.border#7B61C1
checkbox.foreground#7B61C1
debugToolBar.background#011627
debugToolBar.border#7B61C1
debugView.exceptionLabelBackground#011627
debugView.exceptionLabelForeground#7B61C1
debugView.stateLabelBackground#011627
debugView.stateLabelForeground#7B61C1
diffEditor.border#7B61C1
diffEditor.diagonalFill#394e6d
diffEditor.insertedTextBackground#539e2737
diffEditor.removedTextBackground#ff000038
dropdown.background#011627
dropdown.border#7B61C1
dropdown.foreground#7B61C1
dropdown.listBackground#011627
editor.background#011627
editor.findMatchBackground#011220
editor.findMatchBorder#7B61C1
editor.findMatchHighlightBackground#8a59fe75
editor.focusedStackFrameHighlightBackground#011627
editor.foreground#97A7C8
editor.hoverHighlightBackground#5B4589
editor.inactiveSelectionBackground#5B4589
editor.lineHighlightBackground#011220
editor.selectionBackground#8a59fe4a
editor.selectionHighlightBackground#8a59fe75
editor.snippetFinalTabstopHighlightBackground#011627
editor.snippetFinalTabstopHighlightBorder#7B61C1
editor.snippetTabstopHighlightBackground#011627
editor.snippetTabstopHighlightBorder#7B61C1
editor.stackFrameHighlightBackground#011627
editor.wordHighlightBackground#5B4589
editorBracketMatch.background#8a59fe4a
editorBracketMatch.border#5B4589
editorCodeLens.foreground#7B61C1
editorCursor.background#7B61C1
editorCursor.foreground#f8f8f8b8
editorGroup.dropBackground#5b458981
editorGroup.emptyBackground#011627
editorGroup.focusedEmptyBorder#011627
editorGroupHeader.noTabsBackground#011627
editorGroupHeader.tabsBackground#011627
editorGutter.background#011627
editorGutter.deletedBackground#ff0000
editorGutter.foldingControlForeground#D7DBE0
editorGutter.modifiedBackground#c3ba39
editorHoverWidget.background#011627
editorHoverWidget.border#7B61C1
editorHoverWidget.foreground#838EA8
editorIndentGuide.activeBackground#011627
editorIndentGuide.background#333B4C
editorLightBulbAutoFix.foreground#7B61C1
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#011627
editorSuggestWidget.border#7B61C1
editorSuggestWidget.foreground#838EA8
editorSuggestWidget.highlightForeground#7B61C1
editorSuggestWidget.selectedBackground#5B4589
editorWidget.background#011627
editorWidget.border#7B61C1
focusBorder#453469
foreground#97A7C8
gitDecoration.deletedResourceForeground#C33959
gitDecoration.modifiedResourceForeground#c3ba39
gitDecoration.untrackedResourceForeground#39c362
input.background#011627
input.border#7B61C1
input.foreground#C5C5C5
input.placeholderForeground#838EA8
list.activeSelectionBackground#5B4589
list.activeSelectionForeground#838EA8
list.dropBackground#5B4589
list.focusBackground#141820
list.highlightForeground#7B61C1
list.hoverBackground#8a59fe75
list.hoverForeground#7B61C1
list.inactiveSelectionBackground#011627
list.inactiveSelectionForeground#838EA8
menu.background#142335
menu.border#7B61C1
menu.foreground#D7DBE0
menu.selectionBackground#5B4589
menu.selectionBorder#7B61C1
menu.selectionForeground#D7DBE0
menu.separatorBackground#7B61C1
menubar.selectionBackground#011627
menubar.selectionBorder#7B61C1
menubar.selectionForeground#D7DBE0
minimap.background#011627
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#7B61C1
minimap.selectionHighlight#7B61C1
minimap.warningHighlight#ff8c00
minimapGutter.addedBackground#39c362
minimapGutter.deletedBackground#C33959
minimapGutter.modifiedBackground#c3ba39
minimapSlider.activeBackground#8a59fe75
minimapSlider.background#8a59fe75
minimapSlider.hoverBackground#8a59fe75
notebook.cellBorderColor#7B61C1
notebook.focusedCellBackground#141820
notebook.focusedCellBorder#7B61C1
notebook.focusedEditorBorder#7B61C1
notebook.inactiveFocusedCellBorder#7B61C1
notebook.outputContainerBackgroundColor#011627
notebook.selectedCellBorder#7B61C1
notebookScrollbarSlider.activeBackground#141820
notebookScrollbarSlider.background#141820
notebookStatusErrorIcon.foreground#838EA8
notebookStatusRunningIcon.foreground#838EA8
notebookStatusSuccessIcon.foreground#838EA8
notificationCenter.border#7B61C1
notificationCenterHeader.background#011627
notificationCenterHeader.foreground#7B61C1
notifications.background#011627
notifications.border#7B61C1
notifications.foreground#7B61C1
notificationsErrorIcon.foreground#7B61C1
notificationsInfoIcon.foreground#7B61C1
notificationsWarningIcon.foreground#7B61C1
notificationToast.border#7B61C1
panel.background#011627
panel.border#7B61C1
panel.dropBorder#7B61C1
panelSection.border#7B61C1
panelSection.dropBackground#5B4589
panelSectionHeader.background#011627
panelSectionHeader.foreground#838EA8
panelTitle.activeBorder#7B61C1
panelTitle.activeForeground#F8F8F8
panelTitle.inactiveForeground#838EA8
peekView.border#7B61C1
peekViewEditor.background#011627
peekViewEditorGutter.background#011627
peekViewResult.background#011627
peekViewResult.fileForeground#AAAAAA
peekViewResult.lineForeground#AAAAAA
peekViewTitle.background#011627
peekViewTitleDescription.foreground#7B61C1
peekViewTitleLabel.foreground#7B61C1
pickerGroup.border#7B61C1
pickerGroup.foreground#838EA8
problemsInfoIcon.foreground#ff0000
progressBar.background#7B61C1
quickInput.background#011627
quickInput.foreground#838EA8
sash.hoverBorder#7B61C1
scrollbar.shadow#011627
scrollbarSlider.activeBackground#8a59fe75
scrollbarSlider.background#5b458981
scrollbarSlider.hoverBackground#7B61C1
selection.background#5B4589
settings.checkboxBackground#011627
settings.checkboxBorder#7B61C1
settings.checkboxForeground#7B61C1
settings.dropdownBackground#011627
settings.dropdownBorder#7B61C1
settings.dropdownForeground#7B61C1
settings.dropdownListBorder#7B61C1
settings.focusedRowBackground#011627
settings.headerForeground#7B61C1
settings.modifiedItemIndicator#7B61C1
settings.numberInputBackground#011627
settings.numberInputBorder#7B61C1
settings.numberInputForeground#7B61C1
settings.textInputBackground#011627
settings.textInputBorder#7B61C1
settings.textInputForeground#7B61C1
sideBar.background#011627
sideBar.dropBackground#5B4589
sideBar.foreground#838EA8
sideBarSectionHeader.background#011627
sideBarSectionHeader.foreground#838EA8
sideBarTitle.foreground#7B61C1
statusBar.background#011627
statusBar.border#011627
statusBar.foreground#838EA8
statusBarItem.hoverBackground#5B4589
tab.activeBackground#011627
tab.activeBorder#7B61C1
tab.activeForeground#F8F8F8
tab.border#011627
tab.hoverBackground#011627
tab.hoverForeground#F8F8F8
tab.inactiveBackground#011627
tab.inactiveForeground#838EA8
tab.lastPinnedBorder#011627
tab.unfocusedActiveBackground#011627
tab.unfocusedActiveForeground#838EA8
tab.unfocusedHoverForeground#838EA8
tab.unfocusedInactiveBackground#011627
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#7B61C1
terminal.foreground#97A7C8
terminal.selectionBackground#8a59fe4a
terminalCursor.background#7B61C1
terminalCursor.foreground#f8f8f8b8
titleBar.activeBackground#011627
titleBar.activeForeground#838EA8
titleBar.inactiveBackground#011627
titleBar.inactiveForeground#838EA8
tree.indentGuidesStroke#395B82
welcomePage.background#011627
window.activeBorder#000
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	#60BAA8	—
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	—
constant.numeric	#d29785	—
keyword.control.import, keyword.control.export, keyword.control.from	#409d9f	—
keyword.control.default	#43dee1	—
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, variable.other.normal.shell	#3780fe	—
keyword.control.flow	#D59DF6	—
storage.modifier.async	—	—
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	—
variable.other.constant	#9c77f2	—
variable.object.property	#54b1a3	—
support.variable.property	#318d58	—
support.class.builtin	#89c058	—
meta.tag, punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#0496c2	—
meta.arrow, constant.other.color, punctuation, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#0496c2	—
meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
keyword.control	#0696f0	—
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	—
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	—
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	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	—
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 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 meta.structure.dictionary.value.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	—
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	—
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	—
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	—

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