Angular Theme

Name: Angular Theme
Author: Michaell Alavedra

Publisher: Michaell AlavedraThemes in package: 1

VS Code Theme for Angular projects based on Vercel UI Style Guide

GitHub

VS Code preview

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

Angular Theme — Angular Dark Theme

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.activeBackground#FAFAFA10
activityBar.activeBorder#FAFAFA00
activityBar.activeFocusBorder#FAFAFA00
activityBar.background#09090B
activityBar.border#27272A
activityBar.foreground#FAFAFA
activityBarBadge.background#FAFAFA
activityBarBadge.foreground#09090B
badge.background#FAFAFA
badge.foreground#09090B
breadcrumb.activeSelectionForeground#FAFAFA
breadcrumb.background#09090B
breadcrumb.focusForeground#FAFAFA
breadcrumb.foreground#A1A1AA
breadcrumbPicker.background#09090B
button.background#FAFAFA
button.border#00000000
button.foreground#09090B
button.hoverBackground#FAFAFAF0
checkbox.background#09090B
checkbox.border#27272A
checkbox.foreground#FAFAFA
debugToolBar.background#09090B
debugToolBar.border#27272A
diffEditor.insertedTextBackground#00809B33
dropdown.background#09090B
dropdown.border#27272A
dropdown.foreground#FAFAFA
dropdown.listBackground#09090B
editor.background#09090B
editor.findMatchBackground#FAFAFA32
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#FAFAFA32
editor.foreground#FAFAFA
editor.lineHighlightBackground#27272A
editor.lineHighlightBorder#00000000
editor.selectionBackground#FAFAFA40
editor.selectionHighlightBackground#FAFAFA40
editor.wordHighlightBackground#FAFAFA24
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#FAFAFA24
editor.wordHighlightStrongBorder#00000000
editorCursor.background#FAFAFA
editorCursor.foreground#FAFAFA
editorError.background#EF444433
editorError.border#00000000
editorError.foreground#EF4444
editorGroup.border#27272A
editorGroup.dropBackground#FAFAFA32
editorGroupHeader.tabsBackground#09090B
editorGroupHeader.tabsBorder#27272A
editorGutter.addedBackground#22C55E
editorGutter.background#09090B
editorGutter.deletedBackground#EF4444
editorGutter.foldingControlForeground#FAFAFA
editorGutter.modifiedBackground#3B82F6
editorHint.foreground#A1A1AA
editorHoverWidget.background#09090B
editorHoverWidget.border#27272A
editorIndentGuide.activeBackground#52525B
editorIndentGuide.background#27272A
editorInfo.background#3B82F633
editorInfo.border#00000000
editorInfo.foreground#3B82F6
editorInlayHint.background#27272A
editorInlayHint.foreground#A1A1AA
editorLineNumber.activeForeground#FAFAFA
editorLineNumber.foreground#52525B
editorMarkerNavigation.background#09090B
editorRuler.foreground#27272A
editorSuggestWidget.background#09090B
editorSuggestWidget.border#27272A
editorSuggestWidget.foreground#FAFAFA
editorSuggestWidget.selectedBackground#27272A
editorSuggestWidget.selectedForeground#FAFAFA
editorUnnecessaryCode.border#EF4444
editorUnnecessaryCode.opacity#EF4444AA
editorWarning.background#EAB30833
editorWarning.border#00000000
editorWarning.foreground#EAB308
editorWhitespace.foreground#52525B
editorWidget.background#09090B
editorWidget.border#27272A
editorWidget.foreground#FAFAFA
errorForeground#EF4444
focusBorder#52525B
gitDecoration.addedResourceForeground#22C55E
gitDecoration.conflictingResourceForeground#EF4444
gitDecoration.deletedResourceForeground#EF4444
gitDecoration.ignoredResourceForeground#52525B
gitDecoration.modifiedResourceForeground#3B82F6
gitDecoration.renamedResourceForeground#22C55E
gitDecoration.untrackedResourceForeground#EAB308
icon.foreground#FAFAFA
input.background#09090B
input.border#52525B
input.foreground#FAFAFA
input.placeholderForeground#52525B
inputOption.activeBackground#27272A
inputOption.activeBorder#FAFAFA
inputOption.activeForeground#FAFAFA
inputValidation.errorBackground#EF444433
inputValidation.errorBorder#EF4444
inputValidation.errorForeground#EF4444
inputValidation.infoBackground#3B82F633
inputValidation.infoBorder#3B82F6
inputValidation.infoForeground#3B82F6
list.activeSelectionBackground#27272A
list.activeSelectionForeground#FAFAFA
list.dropBackground#27272A
list.errorForeground#EF4444
list.focusBackground#27272A
list.focusForeground#FAFAFA
list.highlightForeground#FAFAFA
list.hoverBackground#27272A
list.hoverForeground#FAFAFA
list.inactiveSelectionBackground#27272A
list.inactiveSelectionForeground#FAFAFA
list.warningForeground#EAB308
menu.background#09090B
menu.border#27272A
menu.foreground#FAFAFA
menu.selectionBackground#27272A
menu.selectionBorder#00000000
menu.selectionForeground#FAFAFA
menu.separatorBackground#27272A
menubar.selectionBackground#27272A
menubar.selectionBorder#00000000
menubar.selectionForeground#FAFAFA
minimap.background#09090B
minimap.errorHighlight#EF4444
minimap.findMatchHighlight#FAFAFA
minimap.selectionHighlight#FAFAFA
minimap.warningHighlight#EAB308
minimapGutter.addedBackground#22C55E
minimapGutter.deletedBackground#EF4444
minimapGutter.modifiedBackground#3B82F6
minimapSlider.activeBackground#FAFAFA20
minimapSlider.background#FAFAFA10
minimapSlider.hoverBackground#FAFAFA15
notificationCenter.border#27272A
notificationCenterHeader.background#09090B
notificationCenterHeader.foreground#FAFAFA
notificationLink.foreground#3B82F6
notifications.background#09090B
notifications.border#27272A
notifications.foreground#FAFAFA
notificationsErrorIcon.foreground#EF4444
notificationsInfoIcon.foreground#3B82F6
notificationsWarningIcon.foreground#EAB308
panel.background#09090B
panel.border#27272A
panel.dropBorder#FAFAFA
panelInput.border#27272A
panelSection.border#27272A
panelSection.dropBackground#27272A
panelSectionHeader.background#27272A
panelTitle.activeBorder#FAFAFA
panelTitle.activeForeground#FAFAFA
panelTitle.inactiveForeground#A1A1AA
peekView.border#3B82F6
peekViewEditor.background#09090B
peekViewEditor.matchHighlightBackground#FAFAFA32
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#09090B
peekViewResult.background#09090B
peekViewResult.fileForeground#FAFAFA
peekViewResult.lineForeground#FAFAFA
peekViewResult.matchHighlightBackground#FAFAFA32
peekViewResult.selectionBackground#27272A
peekViewResult.selectionForeground#FAFAFA
peekViewTitle.background#09090B
peekViewTitleDescription.foreground#A1A1AA
peekViewTitleLabel.foreground#FAFAFA
progressBar.background#FAFAFA
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#FAFAFA20
scrollbarSlider.background#FAFAFA10
scrollbarSlider.hoverBackground#FAFAFA15
sideBar.background#09090B
sideBar.border#27272A
sideBar.dropBackground#27272A
sideBar.foreground#FAFAFA
sideBarSectionHeader.background#09090B
sideBarSectionHeader.border#27272A
sideBarSectionHeader.foreground#FAFAFA
sideBarTitle.foreground#A1A1AA
statusBar.background#09090B
statusBar.border#27272A
statusBar.debuggingBackground#EAB308
statusBar.debuggingBorder#EAB308
statusBar.debuggingForeground#09090B
statusBar.foreground#FAFAFA
statusBar.noFolderBackground#09090B
statusBar.noFolderBorder#27272A
statusBar.noFolderForeground#FAFAFA
statusBarItem.activeBackground#27272A
statusBarItem.errorBackground#EF4444
statusBarItem.errorForeground#FAFAFA
statusBarItem.hoverBackground#27272A
statusBarItem.warningBackground#EAB308
statusBarItem.warningForeground#09090B
tab.activeBackground#09090B
tab.activeBorderTop#FAFAFA
tab.activeForeground#FAFAFA
tab.border#27272A
tab.hoverBackground#09090B
tab.hoverBorder#00000000
tab.hoverForeground#FAFAFA
tab.inactiveBackground#09090B
tab.inactiveForeground#A1A1AA
terminal.ansiBlack#27272A
terminal.ansiBlue#3B82F6
terminal.ansiBrightBlack#52525B
terminal.ansiBrightBlue#60A5FA
terminal.ansiBrightCyan#22D3EE
terminal.ansiBrightGreen#4ADE80
terminal.ansiBrightMagenta#C084FC
terminal.ansiBrightRed#F87171
terminal.ansiBrightWhite#FAFAFA
terminal.ansiBrightYellow#FACC15
terminal.ansiCyan#06B6D4
terminal.ansiGreen#22C55E
terminal.ansiMagenta#A855F7
terminal.ansiRed#EF4444
terminal.ansiWhite#E4E4E7
terminal.ansiYellow#EAB308
terminal.background#09090B
terminal.border#27272A
terminal.foreground#FAFAFA
terminal.selectionBackground#FAFAFA24
terminal.tab.activeBorder#27272A
terminalCursor.background#FAFAFA
terminalCursor.foreground#FAFAFA
titleBar.activeBackground#09090B
titleBar.activeForeground#FAFAFA
titleBar.inactiveBackground#09090B
titleBar.inactiveForeground#A1A1AA
toolbar.activeBackground#27272A
toolbar.hoverBackground#27272A
toolbar.hoverOutline#00000000
widget.shadow#00000040
window.activeBorder#27272A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.language.boolean, constant.language.null, constant.language.python, constant.language.undefined.js, constant.language.undefined.ts, entity.name.tag support.class.component, entity.name.tag.css, entity.name.tag.custom.css, entity.name.tag.custom.css, entity.name.tag.js, entity.name.tag.less, entity.name.tag.less, entity.name.tag.sass, entity.name.tag.scss, entity.name.tag.tsx, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.sass, entity.name.tag.wildcard.scss, entity.name.tag, html-template.ng.expression.operator.comparison, keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.definiteassignment.ts, keyword.operator.optional.ts, keyword.operator.ternary.js, keyword.operator.ternary.ts, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.property-list entity.name.tag.reference, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, meta.tag.html, meta.tag.js, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, punctuation.accessor.optional.ts, punctuation.definition.metadata.markdown, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.section.embedded, string.template meta.template.expression, variable.instance, variable.interpolation, variable.language, variable.other.instance, variable.other.readwrite.instance, variable.reaedwrite.instance	#EF5184	—
constant.language, entity.name.tag.doctype, italic, keyword.control.export.ts, keyword.control.flow.ts, keyword.control.from.ts, keyword.control.import.ts, keyword.operator.assignment, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.expression.delete.js, keyword.operator.expression.delete.ts, keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.let.js, keyword.operator.expression.let.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts, keyword.operator.logical, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.relational, keyword.other.unit.css, keyword.other.unit.less, keyword.other.unit.sass, keyword.other.unit.scss, keyword.other.unit, keyword, markup.italic.markdown, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.class meta.method.declaration meta.var.expr storage.type.ts, meta.delimiter.period, meta.directive.angular, meta.element.ng.html, meta.selector, meta.tag.sgml.doctype.html, meta.tag.sgml.doctype, meta.var.expr storage.type, punctuation.accessor, source.directive.angular, source.elixir .punctuation.binary.elixir, storage.type.property.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, storage.type, storage, support.type.object.module.js, variable.language.this.ts	#B97AE2	—
beginning.punctuation.definition.list.markdown, constant.character.entity.ng-html, constant.character, constant.other, entity.name.function, entity.name.tag.html.doctype, entity.name.tag.html.ng.ng-container, entity.name.tag.html.ng.ng-template, entity.name.tag.html.ng.router-outlet, entity.name.type.class.cs, entity.other.attribute-name.parent-selector.css, html-template.ng.attributes.prefix.sugar, html-template.ng.attributes.template.prefix, html-template.ng.doctype, html-template.ng.exclamation.doctype, markup.heading.markdown, meta.at-rule.import.css, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.function-call.arguments.python, meta.function-call, meta.link.inline.markdown punctuation.definition.string, meta.method.declaration storage.type.js, meta.property-list.css, meta.property-value.css, meta.selector.css, meta.tag.js meta.jsx.children.tsx, meta.tag.metadata.doctype.html, punctuation.definition.constant, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.markdown, punctuation.separator.key-value.html, source.css.sass meta.at-rule variable, source.css.scss meta.at-rule variable, source.elixir constant.other.keywords.elixir, source.elixir constant.other.symbol.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir support.type.elixir, source.python variable.language.special, storage.type.cs, string.regexp keyword.other, string.regexp, support.class.node.ts, support.class.node.tsx, support.constant, support.function.timing-function.css, support.function, variable.function, variable.other.constant, variable.other.less, variable.parameter.function.js, variable.parameter.function.python	#7EAEF5	—
constant.language.symbol.hashkey.ruby, entity.name.tag.yaml, entity.name.type.module.ts, entity.name.type.ts, entity.name.type.tsx, entity.other.attribute-name.handlebars, keyword.control.operator, keyword.operator.type, keyword.operator, keyword.other.new, keyword.other.special-method, markup.inline.raw.markdown, meta.function-call.generic.python, meta.function-call.python, meta.property-list entity.name.tag, meta.property-name, meta.structure.dictionary.value.json string.quoted.double, meta.tag, object, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, raw, string.quoted.double.json punctuation.definition.string.json, support.constant.meta.property-value, support.constant.property-value.css, support.constant.vendored.property-value, support.constant, support.type.property-name, support.variable.property, variable.assignment.coffee, variable.assignment.coffee, variable.other.jsdoc, variable.other.object.property, variable.other.phpdoc, variable.other.property.ts, variable.other.property, variable.parameter.function	#8DCFD8	—
html-template.ng.attributes.input-binding.second-level, keyword.operator.entity.html, punctuation.definition.list.begin.markdown, punctuation.definition.string.begin.css, punctuation.definition.string.begin.html, punctuation.definition.string.begin.ts, punctuation.definition.string.end.css, punctuation.definition.string.end.html, punctuation.definition.string.end.ts, source.elixir punctuation.definition.string, string.quoted.double.html, string.quoted.single.css, string.quoted.single.ts, string.quoted, string, support.type.property-name.json, variable.parameter.url.css	#5BD1B9	—
bold, constant.length.units.css, constant.length.units.less, constant.length.units.sass, constant.length.units.scss, constant.other.color, entity.name.class, entity.name.function.decorator.python, entity.name.tag.custom, entity.other.attribute-name.handlebars variable.parameter.handlebars, entity.other.attribute-name.id.html, entity.other.attribute-name.id, entity.other.attribute-name, html-template.ng.attributes.generic, markup.bold.markdown, meta.class entity.name.type.class, source.elixir entity.name.function, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir variable.other.readwrite.module.elixir, support.class, support.constant.json, support.constant.math, support.type.object.html-attribute, support.type, support.variable.dom, variable.other.global.php punctuation.definition.variable, variable.other.global.php, variable	#FED482	—
constant.character.escape, constant.character.numeric, constant.numeric, constant.other.color.rgb-value punctuation.definition.constant, entity.name.type.js, entity.name.type.module.js, entity.other.inherited-class, entity.other.ng-binding-name.event.html, entity.other.ng-binding-name.ngFor.html, entity.other.ng-binding-name.ngIf.html, entity.other.ng-binding-name.ngSwitch.html, entity.other.ng-binding-name.nzSrc.html, entity.other.ng-binding-name.property.html, html-template.ng.attribute.doctype, html-template.ng.attributes.event-handler, html-template.ng.attributes.input-binding.first-level, html-template.ng.attributes.suffix.sugar, html-template.ng.attributes.template.variable, keyword.control.trycatch.js, keyword.control.trycatch.ts, meta.attribute-selector.css entity.other.attribute-name.attribute, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.class entity.name.type.class.js, punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, support.class.php	#F8AD78	—
constant.language.import-export-all.ts, entity.name.function.pipe.ng, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, html-template.tag.custom, keyword.control.flow.ts, storage.modifier.async.ts	#F377B2	—
comment.line.double-slash, comment, invalid.broken, markup.inline.raw.string.markdown, markup.quote.markdown, meta.image.inline.markdown, meta.link.inline.markdown, meta.link.inline.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.raw.markdown, quote, string.other.link.description.markdown, string.other.link.title.markdown, support.type.vendored.property-name	#888888	italic
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, html-template.ng.interpolation.begin, html-template.ng.interpolation.end, keyword.operator.bitwise, keyword.operator.expression.in, keyword.operator.increment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.punctuation, keyword.operator.spread.js, keyword.operator.spread.ts, meta.array, meta.brace, meta.export.js variable.other, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.function punctuation.separator.comma, meta.function-call.php punctuation, meta.import.js variable.other, meta.import.tsx punctuation.definition.block, meta.js punctuation.definition.js, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children, meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key.ts, meta.property-list.sass variable.sass, meta.property-list.scss variable.scss, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, punctuation.accessor.ts, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag.html, punctuation.definition.tag, punctuation.python, punctuation.section.array, punctuation.separator.arguments, punctuation.separator.key-value.css, punctuation.terminator.expression, punctuation.terminator.rule.css, source.css.sass meta.at-rule variable, source.css.scss meta.at-rule variable, source.js source.css meta.property-list punctuation.separator.comma, source.js source.css meta.property-list, source.js source.css meta.property-list, source.js source.css punctuation.definition.attribute-selector, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.section, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.terminator.rule, source.ts source.css meta.property-list punctuation.separator.comma, source.ts source.css meta.property-list, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.section, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.terminator.rule, string.template punctuation.definition.string, string.unquoted, support.class.js, support.type.property-name.css, terminator.js, variable.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx, variable.other.js, variable.other.meta.export.js, variable.other.meta.import.js, variable.other.object.js, variable.other.object.jsx, variable.other.object.ts, variable.other.object.tsx, variable.other.php, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.cs, variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.ruby, variable.other.ts, variable.other.tsx, variable.parameter.function.coffee, variable.parameter.handlebars, variable.parameter.url.sass, variable.parameter.url.scss, variable.parameter, variable.qraphql, variable.sass, variable.scss, variable.ts, variable.tsx	#DCE3EA	—
invalid.deprecated, invalid.illegal, invalid.unimplemented, invalid, object.comma	#E0E0E0	—
support.type.property-name.json	#8DCFD8	—
string.quoted.double.json	#5BD1B9	—
entity.name.tag.yaml	#8DCFD8	—
variable.other.env, variable.other.readwrite.env	#8DCFD8	—
keyword.control.go, keyword.function.go, keyword.operator.go, storage.type.go	#B97AE2	—
entity.name.function.go, support.function.go	#7EAEF5	—
keyword.control.flow.python, keyword.operator.logical.python, storage.type.function.python	#B97AE2	—
entity.name.function.python, meta.function-call.python	#7EAEF5	—
keyword.control.rust, keyword.other.fn.rust, storage.type.rust	#B97AE2	—
entity.name.function.rust	#7EAEF5	—
keyword.control.java, storage.type.java, storage.modifier.java, keyword.control.kotlin, storage.type.kotlin	#B97AE2	—
entity.name.function.java, entity.name.function.kotlin	#7EAEF5	—

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