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 - Peace of the eye

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...

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#122033
activityBar.border#0e0e1281
activityBar.foreground#989eb3
activityBar.inactiveForeground#868d9cAA
activityBarBadge.background#989eb3
activityBarBadge.foreground#101c2c
badge.background#989eb3
badge.foreground#101c2c
breadcrumbPicker.background#122033
button.background#989eb3
button.foreground#101c2c
charts.blue#78dce8
charts.foreground#FFFFFFcc
charts.green#a9dc76
charts.lines#FFFFFFcc
charts.orange#fc9867
charts.purple#e991e3
charts.red#fc6a67
charts.yellow#ffd866
contrastActiveBorder#00000000
debugExceptionWidget.background#363a4a
debugExceptionWidget.border#0e0e1281
debugToolBar.background#363a4a
descriptionForeground#FFFFFFcc
diffEditor.border#0e0e1281
diffEditor.diagonalFill#363a4a
diffEditor.insertedTextBackground#52AB6230
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#E3553530
diffEditor.removedTextBorder#00000000
dropdown.background#122033
dropdown.border#868d9caa
dropdown.foreground#FFFFFFcc
editor.background#122033
editor.findMatchBackground#989eb320
editor.findMatchBorder#989eb360
editor.findMatchHighlightBackground#989eb320
editor.findMatchHighlightBorder#989eb340
editor.foreground#FFFFFFcc
editor.hoverHighlightBackground#989eb340
editor.inactiveSelectionBackground#989eb320
editor.lineHighlightBackground#989eb30c
editor.lineHighlightBorder#989eb31a
editor.rangeHighlightBackground#989eb320
editor.selectionBackground#989eb330
editor.selectionForeground#989eb3
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#989eb360
editor.wordHighlightBackground#989eb320
editor.wordHighlightStrongBackground#989eb340
editorBracketHighlight.foreground1#87cefa
editorBracketHighlight.foreground2#DA70D6
editorBracketHighlight.foreground3#87cefa
editorBracketHighlight.foreground4#DA70D6
editorBracketHighlight.foreground5#87cefa
editorBracketHighlight.foreground6#DA70D6
editorBracketMatch.background#989eb320
editorBracketMatch.border#989eb340
editorCodeLens.foreground#FFFFFFcc
editorCursor.foreground#ffd866
editorGroup.border#0e0e1281
editorGroup.dropBackground#989eb315
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#122033
editorGroupHeader.tabsBackground#101c2c
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#52AB62cc
editorGutter.background#122033
editorGutter.commentRangeForeground#363a4a
editorGutter.deletedBackground#E35535cc
editorGutter.modifiedBackground#00B3BDcc
editorHoverWidget.background#363a4a
editorHoverWidget.border#101c2c
editorIndentGuide.activeBackground#868d9cbb
editorIndentGuide.background#868d9c30
editorLineNumber.activeForeground#e1e4e8
editorLineNumber.foreground#444d56
editorLink.activeForeground#FFFFFFcc
editorMarkerNavigation.background#101c2c
editorMarkerNavigationError.background#E3553590
editorMarkerNavigationInfo.background#00B3BD90
editorMarkerNavigationWarning.background#fc6a6790
editorOverviewRuler.border#0e0e1281
editorOverviewRuler.commonContentForeground#ffd866
editorOverviewRuler.currentContentForeground#E35535
editorOverviewRuler.incomingContentForeground#52AB62
editorSuggestWidget.background#122033
editorSuggestWidget.border#0e0e1281
editorSuggestWidget.foreground#FFFFFF80
editorSuggestWidget.highlightForeground#ffd866
editorSuggestWidget.selectedBackground#989eb34d
editorWarning.border#00000000
editorWarning.foreground#ffd866
editorWhitespace.foreground#868d9c60
editorWidget.background#363a4a
editorWidget.resizeBorder#989eb350
errorForeground#E35535
extensionButton.prominentBackground#989eb39d
extensionButton.prominentForeground#101c2c
extensionButton.prominentHoverBackground#989eb3
focusBorder#989eb340
foreground#FFFFFFcc
gitDecoration.conflictingResourceForeground#989eb3
gitDecoration.deletedResourceForeground#E35535
gitDecoration.ignoredResourceForeground#868d9c
gitDecoration.modifiedResourceForeground#00B3BD
gitDecoration.untrackedResourceForeground#52AB62
icon.foreground#FFFFFFcc
input.background#00000000
input.border#989eb330
input.foreground#FFFFFF80
input.placeholderForeground#989eb3
inputOption.activeBorder#989eb3
inputValidation.errorBackground#363a4a
inputValidation.errorBorder#ffd866
inputValidation.infoBackground#363a4a
inputValidation.infoBorder#989eb3
inputValidation.warningBackground#363a4a
inputValidation.warningBorder#ffd866
list.activeSelectionBackground#989eb345
list.activeSelectionForeground#FFFFFFcc
list.dropBackground#989eb315
list.errorForeground#E35535
list.focusBackground#989eb340
list.focusForeground#FFFFFF80
list.highlightForeground#ffd866
list.hoverBackground#0e0e1260
list.hoverForeground#FFFFFFcc
list.inactiveSelectionBackground#989eb345
list.warningForeground#fc6a67
menu.background#363a4a
menu.foreground#FFFFFF80
menu.selectionBackground#989eb320
menu.selectionForeground#FFFFFF80
menu.separatorBackground#0e0e1281
menubar.selectionBackground#363a4a
menubar.selectionForeground#FFFFFF80
merge.border#0e0e1281
merge.commonContentBackground#ffd86630
merge.commonHeaderBackground#ffd86680
merge.currentContentBackground#52AB6230
merge.currentHeaderBackground#52AB6280
merge.incomingContentBackground#00B3BD30
merge.incomingHeaderBackground#00B3BD80
notificationCenterHeader.background#363a4a
notificationCenterHeader.foreground#FFFFFF80
notificationLink.foreground#ffd866
notifications.background#363a4a
notifications.border#989eb350
notifications.foreground#FFFFFF80
panel.background#101c2c
panel.border#0e0e1281
panelInput.border#868d9c
panelSection.border#0e0e1281
panelSectionHeader.background#868d9c20
panelSectionHeader.border#0e0e1281
panelSectionHeader.foreground#FFFFFFcc
panelTitle.activeBorder#52d794
panelTitle.activeForeground#989eb3
panelTitle.inactiveForeground#868d9c
peekView.border#989eb3
peekViewEditor.background#363a4a40
peekViewEditor.matchHighlightBackground#363a4a40
peekViewEditorGutter.background#363a4a40
peekViewResult.background#363a4a40
peekViewResult.fileForeground#FFFFFFcc
peekViewResult.lineForeground#FFFFFFcc
peekViewResult.matchHighlightBackground#363a4a
peekViewResult.selectionBackground#363a4a
peekViewResult.selectionForeground#FFFFFFcc
peekViewTitle.background#0e0e1281
peekViewTitleDescription.foreground#FFFFFFcc
peekViewTitleLabel.foreground#FFFFFFcc
pickerGroup.border#0e0e1281
pickerGroup.foreground#FFFFFFcc
progressBar.background#ffd866
sash.hoverBorder#989eb350
scrollbar.shadow#0e0e1281
scrollbarSlider.activeBackground#989eb360
scrollbarSlider.background#989eb340
scrollbarSlider.hoverBackground#989eb350
selection.background#989eb360
settings.headerForeground#989eb3
settings.modifiedItemIndicator#989eb3
sideBar.background#101c2c
sideBar.border#0e0e1281
sideBar.foreground#FFFFFFcc
sideBarSectionHeader.background#101c2c
sideBarSectionHeader.border#0e0e1281
sideBarSectionHeader.foreground#FFFFFFcc
sideBarTitle.foreground#868d9c
statusBar.background#101c2c
statusBar.border#0e0e1281
statusBar.debuggingBackground#989eb344
statusBar.debuggingForeground#FFFFFFcc
statusBar.foreground#00B3BDcc
statusBar.noFolderBackground#0e0e1281
statusBar.noFolderBorder#0e0e1281
statusBar.noFolderForeground#FFFFFFcc
statusBarItem.activeBackground#363a4a
statusBarItem.errorBackground#fc6a67
statusBarItem.hoverBackground#868d9c30
statusBarItem.prominentBackground#0e0e1281
statusBarItem.prominentHoverBackground#363a4a
tab.activeBackground#122033
tab.activeBorderTop#2ecfa8
tab.activeForeground#989eb3
tab.border#00000000
tab.hoverBackground#122033cc
tab.hoverBorder#00000000
tab.inactiveBackground#101c2c
tab.inactiveForeground#868d9c
tab.lastPinnedBorder#0e0e1281
tab.unfocusedActiveForeground#FFFFFFcc
tab.unfocusedHoverBackground#989eb310
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#FFFFFFcc
terminal.ansiBlack#122033
terminal.ansiBlue#00B3BD
terminal.ansiBrightBlack#00B3BD
terminal.ansiBrightBlue#00B3BD
terminal.ansiBrightCyan#78e8c6
terminal.ansiBrightGreen#52AB62
terminal.ansiBrightMagenta#e991e3
terminal.ansiBrightRed#E35535
terminal.ansiBrightWhite#00B3BD
terminal.ansiBrightYellow#ffd866
terminal.ansiCyan#78e8c6
terminal.ansiGreen#52AB62
terminal.ansiMagenta#e991e3
terminal.ansiRed#E35535
terminal.ansiWhite#FFFFFFcc
terminal.ansiYellow#ffd866
terminal.background#101c2c
terminalCursor.background#ffd866
terminalCursor.foreground#ffd866
textBlockQuote.background#00B3BD34
textBlockQuote.border#00B3BDb9
textCodeBlock.background#00B3BD34
textLink.activeForeground#00B3BD
textLink.foreground#00B3BD
textPreformat.foreground#ffd866
textSeparator.foreground#989eb3
titleBar.activeBackground#101c2c
titleBar.activeForeground#868d9c
titleBar.border#0e0e1281
titleBar.inactiveBackground#0e0e1281
titleBar.inactiveForeground#868d9c
tree.indentGuidesStroke#868d9c70
walkThrough.embeddedEditorBackground#122033
widget.shadow#0e0e1281

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor	#fc9867
entity.name.type	#7E9E2D	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#868d9caa	italic
constant	#fc6a67	—
source, support, constant.character.entity.named, meta.jsx.children, source.lua	#FFFFFFcc	—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts	#e991e3	—
keyword.control.export, support.type.object.module	#ffd866	—
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, meta.decorator meta.definition.method entity.name.function, meta.decorator meta.method.declaration entity.name.function, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type	#78dce8	—
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include	#ffd866	—
keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.operator.assignment.cs	#ffd866	—
meta.object-literal.key, variable.object.property	#FFFFFFcc	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml	#ffd866	—
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua	#ffd866	—
punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, entity.name.variable.tuple-element.cs	#868d9c	—
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self	#fc9867
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type	#78e8c6
string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url	#2ecfa8	—
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type	#ab9df2	—
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, support.variable.property, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs	#ff6188	—
source.elm constant.type-constructor	#ff6188	—
source.elm storage.type	#ab9df2
entity.name.tag.other.html, meta.tag.other.html punctuation.definition.tag.end.html, meta.tag.other.html punctuation.definition.tag.begin.html, entity.name.tag support.class.component, support.class.component.html	#78dce8	—
support.variable.liquid, support.class.liquid	#ff6188	—
text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php	#78dce8	—
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html	#78dce8aa	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#ffd866
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#ab9df2	—
fenced_code.block.language	#ab9df2	—
markup.list.unnumbered.markdown meta.paragraph.markdown	#78dce8	—
punctuation.definition.list.begin	#78dce8	—
entity.name.section, markup.heading.setext	#ffd866	—
punctuation.definition.heading	#ffd866	—
markup.underline.link, markup.underline.link.image	#78dce8	—
markup.bold, punctuation.definition.bold	#78dce8	bold
markup.italic, punctuation.definition.italic	#78dce8	italic
markup.quote	#78dce8
punctuation.definition.quote.begin	#78dce8
entity.other.attribute-name.pseudo-class	#e991e3	—
entity.other.attribute-name.pseudo-element	#e991e3	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#78e8c6
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#78e8c6
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css	#FFFFFFcc	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#ab9df2	—
entity.name.tag.reference, meta.property-list	#fc9867	—
keyword.other.unit	#fc9867
support.constant.property-value, support.constant.font-name, meta.property-value.css	#fc9867	—
constant.numeric	#fc9867	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#78dce8	—

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