Learn with Sumit Theme

Name: Learn with Sumit Theme
Author: Learn with Sumit

Publisher: Learn with SumitThemes in package: 13

Official VS Code theme of Learn with Sumit developed by Sumit Saha!

GitHub

Color themes

VS Code preview

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

Learn with Sumit Theme — Learn with Sumit - Party

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.background#17141f
activityBar.foreground#ae66b6
activityBar.inactiveForeground#87598c79
activityBarBadge.background#cdcdcd
activityBarBadge.foreground#151920
badge.background#cdcdcd
badge.foreground#151920
breadcrumb.activeSelectionForeground#e6c62f
breadcrumb.background#17141f
breadcrumb.focusForeground#e6c62f
breadcrumb.foreground#cdcdcd
breadcrumbPicker.background#151920
button.background#ae66b618
button.foreground#cdcdcd
button.hoverBackground#ae66b618
checkbox.border#3b4048
debugToolBar.background#151920
diffEditor.insertedTextBackground#00809b33
dropdown.background#17141f
dropdown.border#181a1f
editor.background#17141f
editor.findMatchHighlightBackground#314365
editor.foreground#cdcdcd
editor.lineHighlightBackground#ae66b618
editor.selectionBackground#308db86c
editorCursor.foreground#f8f8f0
editorError.foreground#c24038
editorGroup.border#181a1f
editorGroupHeader.tabsBackground#17141f
editorGroupHeader.tabsBorder#220525
editorHoverWidget.background#21252b
editorHoverWidget.border#181a1f
editorIndentGuide.background1#3b4048
editorLineNumber.foreground#495162
editorLink.activeForeground#e6c62f
editorRuler.foreground#484848
editorSuggestWidget.background#151920
editorSuggestWidget.border#e6c62f
editorSuggestWidget.selectedBackground#2c313a
editorWhitespace.foreground#484a50
editorWidget.background#21252b
extensionButton.prominentBackground#ae66b618
gitDecoration.addedResourceForeground#39dcdc
gitDecoration.modifiedResourceForeground#29e7ae
gitDecoration.untrackedResourceForeground#cdcdcd8e
input.background#151920
input.border#ae66b6
input.foreground#e6c62f
inputOption.activeBorder#ae66b6
list.activeSelectionBackground#ae66b618
list.activeSelectionForeground#d7dae0
list.dropBackground#ae66b618
list.errorForeground#dc396a
list.focusBackground#ae66b618
list.highlightForeground#e6c62f
list.hoverBackground#17141f
list.inactiveSelectionBackground#ae66b618
list.inactiveSelectionForeground#cdcdcd
mergeEditor.change.word.background#151920
mergeEditor.conflict.handled.minimapOverViewRuler#e6c62f
mergeEditor.conflict.unhandled.minimapOverViewRuler#ae66b6
notifications.background#151920
peekView.border#e6c62f
peekViewEditor.background#151920
peekViewEditor.matchHighlightBackground#1c212b
peekViewResult.background#1c212b
peekViewTitle.background#1c212b
scrollbarSlider.activeBackground#e6c72faf
scrollbarSlider.background#4e566680
scrollbarSlider.hoverBackground#5a637580
sideBar.background#1a1824
sideBar.foreground#cdcdcd
sideBarSectionHeader.background#220525
sideBarSectionHeader.foreground#cdcdcd
sideBarTitle.foreground#e6c62f
statusBar.background#1c212b
statusBar.debuggingBackground#e6c62f
statusBar.foreground#cdcdcd
statusBar.noFolderBackground#1c212b
statusBarItem.hoverBackground#1a1824
tab.activeBackground#220525
tab.activeBorder#ae66b6
tab.border#17141f
tab.hoverBackground#220525
tab.inactiveBackground#17141f
titleBar.activeBackground#17141f
titleBar.activeForeground#cdcdcd
titleBar.inactiveBackground#17141f
titleBar.inactiveForeground#888787
tree.indentGuidesStroke#dab709

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#676F7D	italic
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts	#C678DD	—
string.template.js	#E5C07B	—
meta.template.expression.js	#ABB2BF	—
string.embedded.begin, string.embedded.end	#C678DD	—
string.embedded	#98C379	—
constant.language	#56B6C2	—
constant.character, constant.other	#56B6C2	—
variable.language	#E06C75	—
variable.readwrite, variable.readwrite.other.block	#61AFEF	—
keyword, keyword.operator.logical, keyword.operator.constructor	#E06C75	—
keyword.operator	#E06C75	—
storage	#E06C75	—
storage.type	#56B6C2	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class	#61AFEF	—
variable.other.object	#61AFEF	—
variable.other.property, variable.other.block	#ABB2BF	—
entity.other.inherited-class	#98C379	—
entity.name.function, support.function	#98C379	—
variable.parameter	#D19A66	italic
entity.name.function-call	#ABB2BF	—
function.support.builtin, function.support.core	#98C379	—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx	#E06C75	—
entity.name.tag.class, entity.name.tag.id	#56B6C2	—
entity.other.attribute-name	#98C379	—
support.constant	#56B6C2	—
support.type, support.variable	#56B6C2	—
support.dictionary.json	#56B6C2	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass	#ABB2BF	—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass	#98C379	—
variable.css, variable.scss, variable.less, variable.sass	#56B6C2	—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string	#E5C07B	—
unit.css, unit.scss, unit.less, unit.sass	#C678DD	—
function.css, function.scss, function.less, function.sass	#56B6C2	—
support.other.variable	—
invalid	#F8F8F0	—
invalid.deprecated	#F8F8F0	—
structure.dictionary.property-name.json	#56B6C2	—
string.detected-link	#61AFEF	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#C678DD	—
markup.inserted	#E5C07B	—
markup.changed	#E5C07B	—
constant.numeric.line-number.find-in-files - match	#56B6C2A0	—
entity.name.filename.find-in-files	#E5C07B	—
markup.italic, markup.italic.markdown	—	italic
punctuation.definition.italic.markdown	#696969	none
markup.underline.link.markdown	#61AFEF	—
markup.bold.markdown	—	bold
punctuation.definition.bold.markdown	#696969	none
markup.heading.markdown	#E06C75	bold
punctuation.definition.heading.markdown	#696969	none
markup.quote.markdown	#98C379	—
meta.separator.markdown	#C678DD	bold
markup.raw.inline.markdown, markup.raw.block.markdown	#56B6C2	—
punctuation.definition.list_item.markdown	#FFFFFF	bold
comment	#625576	—
string	#E07D13	—
keyword - keyword.operator	#E6C62F	—
keyword.control	#E6C62F	—
storage	#E6C62F	—
storage.type	#E6C62F	—
entity.name.type	#DC396A	—
entity.name.class	#DC396A	—
support.type	#DC396A	—
support.class	#DC396A	—
entity.name.function	#39DCDC	—
support.function	#39DCDC	—
variable	#CDCDCD	—
entity.name.variable	#CDCDCD	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#E6C62F	—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, meta.tag.js, meta.embedded.expression.js, meta.block.js, meta.arrow.js, meta.var.expr.js, source.js, punctuation.definition.tag.begin.ts, punctuation.definition.tag.end.ts, meta.tag.ts, meta.embedded.expression.ts, meta.tag.ts, meta.tag.tsx, meta.block.ts, meta.block.tsx, meta.arrow.ts, meta.arrow.tsx, meta.var.expr.ts, meta.var.expr.tsx, source.ts, source.tsx	#2FACE6	—
meta.jsx.children.ts, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children.ts, meta.jsx.children.tsx	#CDCDCD	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#B759C2	—
variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts	#2FACE6	—
meta.block.ts, meta.block.tsx, meta.block.js, meta.block.jsx	#C4C4C4	—
variable.other.readwrite.ts, meta.object.member.ts, variable.other.readwrite.tsx, meta.object.member.tsx, variable.other.readwrite.js, meta.object.member.js, variable.other.readwrite.jsx, meta.object.member.jsx	#30C5C5	—
support.class.component.tsx, entity.name.tag.tsx, meta.embedded.expression.tsx, meta.block.tsx, meta.var.expr.tsx, source.tsx, support.class.component.jsx, entity.name.tag.jsx, meta.embedded.expression.jsx, meta.block.jsx, meta.var.expr.jsx, source.jsx, support.class.component.js, support.class.component.ts, entity.name.tag.js, entity.name.tag.ts, meta.embedded.expression.js, meta.embedded.expression.ts, meta.block.js, meta.block.ts, meta.var.expr.js, meta.var.expr.ts, source.js, source.ts	#2FACE6	—
variable.object.property.tsx, meta.definition.property.tsx, meta.field.declaration.tsx, meta.interface.tsx, variable.other.constant.tsx, meta.definition.variable.tsx, meta.var-single-variable.expr.tsx, meta.var.expr.tsx, meta.block.tsx, meta.arrow.tsx, meta.var.expr.tsx, source.tsx, variable.object.property.jsx, variable.object.property.js, variable.object.property.ts, meta.definition.property.jsx, meta.definition.property.js, meta.definition.property.ts, meta.field.declaration.jsx, meta.field.declaration.js, meta.field.declaration.ts, meta.interface.jsx, meta.interface.js, meta.interface.ts, variable.other.constant.jsx, variable.other.constant.js, variable.other.constant.ts, meta.definition.variable.jsx, meta.definition.variable.js, meta.definition.variable.ts, meta.var-single-variable.expr.jsx, meta.var-single-variable.expr.js, meta.var-single-variable.expr.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, meta.block.jsx, meta.block.js, meta.block.ts, meta.arrow.jsx, meta.arrow.js, meta.arrow.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, source.jsx, source.js, source.ts	#2FACE6	—
variable.parameter.ts, meta.parameter.object-binding-pattern.ts, meta.parameters.ts, variable.parameter.tsx, meta.parameter.object-binding-pattern.tsx, meta.parameters.tsx, variable.parameter.js, meta.parameter.object-binding-pattern.js, meta.parameters.js, variable.parameter.jsx, meta.parameter.object-binding-pattern.jsx, meta.parameters.jsx	#AE66B6	—
entity.other.inherited-class.ts, meta.interface.ts, entity.other.inherited-class.tsx, meta.interface.tsx, entity.other.inherited-class.js, meta.interface.js, entity.other.inherited-class.jsx, meta.interface.jsx, entity.other.inherited-class.jsx, meta.interface.jsx	#39DCDC	—
constant	#CDCDCD	—
entity.other.attribute-name	#B759C2	—
entity.name.tag	#2FACE6	—
entity.name.variable.parameter, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#DC8D39	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss	#AE66B6	—
keyword.operator, keyword.operator.logical.ts, meta.embedded.expression.ts, keyword.operator.logical.tsx, meta.embedded.expression.tsx, keyword.operator.logical.js, meta.embedded.expression.js, keyword.operator.logical.jsx, meta.embedded.expression.jsx	#B9355D	—
support.type.property-name.css, meta.property-name.css, meta.property-list.css, source.stylable	#2FACE6	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
string	#E07D13	—
constant.numeric	#E07D13	—
comment	#7F6E99	—
punctuation.definition.comment	#7F6E99	—

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