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 - Simple as light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#171c2a
activityBar.border#0e0e1281
activityBar.foreground#00B3BD
activityBar.inactiveForeground#868d9cAA
activityBarBadge.background#989eb3
activityBarBadge.foreground#101c2c
badge.background#3398DB
badge.foreground#f3f6f6
breadcrumbPicker.background#ffffff
button.background#3398DB
button.foreground#f3f6f6
charts.blue#3398DB
charts.foreground#455059
charts.green#37ae6f
charts.lines#455059
charts.orange#D26D32
charts.purple#CC71BC
charts.red#C13838
charts.yellow#c9a022
contrastActiveBorder#00000000
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#d1dadc
debugToolBar.background#ffffff
descriptionForeground#455059
diffEditor.border#d1dadc
diffEditor.diagonalFill#ffffff
diffEditor.insertedTextBackground#37ae6f30
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#C1383830
diffEditor.removedTextBorder#00000000
dropdown.background#ffffff
dropdown.border#8b99a7aa
dropdown.foreground#455059
editor.background#ffffff
editor.findMatchBackground#3398DB20
editor.findMatchBorder#3398DB60
editor.findMatchHighlightBackground#3398DB20
editor.findMatchHighlightBorder#3398DB40
editor.foreground#455059
editor.hoverHighlightBackground#3398DB40
editor.inactiveSelectionBackground#3398DB20
editor.lineHighlightBackground#3398DB0c
editor.lineHighlightBorder#3398DB1a
editor.rangeHighlightBackground#3398DB20
editor.selectionBackground#3398DB30
editor.selectionForeground#3398DB
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#3398DB60
editor.wordHighlightBackground#3398DB20
editor.wordHighlightStrongBackground#3398DB40
editorBracketHighlight.foreground1#87cefa
editorBracketHighlight.foreground2#DA70D6
editorBracketHighlight.foreground3#87cefa
editorBracketHighlight.foreground4#DA70D6
editorBracketHighlight.foreground5#87cefa
editorBracketHighlight.foreground6#DA70D6
editorBracketMatch.background#3398DB20
editorBracketMatch.border#3398DB40
editorCodeLens.foreground#455059
editorCursor.foreground#c9a022
editorGroup.border#d1dadc
editorGroup.dropBackground#3398DB15
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#ffffff
editorGroupHeader.tabsBackground#f3f6f6
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#37ae6fcc
editorGutter.background#ffffff
editorGutter.commentRangeForeground#ffffff
editorGutter.deletedBackground#C13838cc
editorGutter.modifiedBackground#3398DBcc
editorHoverWidget.background#ffffff
editorHoverWidget.border#f3f6f6
editorIndentGuide.activeBackground#8b99a7bb
editorIndentGuide.background#8b99a730
editorLineNumber.activeForeground#8b99a7
editorLineNumber.foreground#8b99a790
editorLink.activeForeground#455059
editorMarkerNavigation.background#f3f6f6
editorMarkerNavigationError.background#C1383890
editorMarkerNavigationInfo.background#3398DB90
editorMarkerNavigationWarning.background#D26D3290
editorOverviewRuler.border#d1dadc
editorOverviewRuler.commonContentForeground#c9a022
editorOverviewRuler.currentContentForeground#C13838
editorOverviewRuler.incomingContentForeground#37ae6f
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#d1dadc
editorSuggestWidget.foreground#455059
editorSuggestWidget.highlightForeground#c9a022
editorSuggestWidget.selectedBackground#3398DB4d
editorWarning.border#00000000
editorWarning.foreground#c9a022
editorWhitespace.foreground#8b99a760
editorWidget.background#ffffff
editorWidget.resizeBorder#3398DB50
errorForeground#C13838
extensionButton.prominentBackground#3398DB9d
extensionButton.prominentForeground#f3f6f6
extensionButton.prominentHoverBackground#3398DB
focusBorder#3398DB40
foreground#455059
gitDecoration.conflictingResourceForeground#3398DB
gitDecoration.deletedResourceForeground#C13838
gitDecoration.ignoredResourceForeground#8b99a7
gitDecoration.modifiedResourceForeground#3398DB
gitDecoration.untrackedResourceForeground#37ae6f
icon.foreground#455059
input.background#00000000
input.border#3398DB30
input.foreground#455059
input.placeholderForeground#3398DB60
inputOption.activeBorder#3398DB
inputValidation.errorBackground#ffffff
inputValidation.errorBorder#c9a022
inputValidation.infoBackground#ffffff
inputValidation.infoBorder#3398DB
inputValidation.warningBackground#ffffff
inputValidation.warningBorder#c9a022
list.activeSelectionBackground#3398DB45
list.activeSelectionForeground#455059
list.dropBackground#3398DB15
list.errorForeground#C13838
list.focusBackground#3398DB40
list.focusForeground#455059
list.highlightForeground#c9a022
list.hoverBackground#d1dadc60
list.hoverForeground#455059
list.inactiveSelectionBackground#3398DB45
list.warningForeground#D26D32
menu.background#ffffff
menu.foreground#455059
menu.selectionBackground#3398DB20
menu.selectionForeground#455059
menu.separatorBackground#d1dadc
menubar.selectionBackground#ffffff
menubar.selectionForeground#455059
merge.border#d1dadc
merge.commonContentBackground#c9a02230
merge.commonHeaderBackground#c9a02280
merge.currentContentBackground#37ae6f30
merge.currentHeaderBackground#37ae6f80
merge.incomingContentBackground#3398DB30
merge.incomingHeaderBackground#3398DB80
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#455059
notificationLink.foreground#c9a022
notifications.background#ffffff
notifications.border#3398DB50
notifications.foreground#455059
panel.background#ffffff
panel.border#d1dadc
panelInput.border#8b99a7
panelSection.border#d1dadc
panelSectionHeader.background#8b99a720
panelSectionHeader.border#d1dadc
panelSectionHeader.foreground#455059
panelTitle.activeBorder#3398DB
panelTitle.activeForeground#3398DB
panelTitle.inactiveForeground#8b99a7
peekView.border#3398DB
peekViewEditor.background#ffffff40
peekViewEditor.matchHighlightBackground#ffffff40
peekViewEditorGutter.background#ffffff40
peekViewResult.background#ffffff40
peekViewResult.fileForeground#455059
peekViewResult.lineForeground#455059
peekViewResult.matchHighlightBackground#ffffff
peekViewResult.selectionBackground#ffffff
peekViewResult.selectionForeground#455059
peekViewTitle.background#d1dadc
peekViewTitleDescription.foreground#455059
peekViewTitleLabel.foreground#455059
pickerGroup.border#d1dadc
pickerGroup.foreground#455059
progressBar.background#c9a022
sash.hoverBorder#3398DB50
scrollbar.shadow#d1dadc
scrollbarSlider.activeBackground#3398DB60
scrollbarSlider.background#3398DB40
scrollbarSlider.hoverBackground#3398DB50
selection.background#3398DB60
settings.headerForeground#3398DB
settings.modifiedItemIndicator#3398DB
sideBar.background#f3f6f6
sideBar.border#d1dadc
sideBar.foreground#455059
sideBarSectionHeader.background#f3f6f6
sideBarSectionHeader.border#d1dadc
sideBarSectionHeader.foreground#455059
sideBarTitle.foreground#8b99a7
statusBar.background#f3f6f6
statusBar.border#d1dadc
statusBar.debuggingBackground#3398DB44
statusBar.debuggingForeground#455059
statusBar.foreground#455059
statusBar.noFolderBackground#d1dadc
statusBar.noFolderBorder#3398DB
statusBar.noFolderForeground#455059
statusBarItem.activeBackground#ffffff
statusBarItem.errorBackground#C13838
statusBarItem.hoverBackground#8b99a730
statusBarItem.prominentBackground#d1dadc
statusBarItem.prominentHoverBackground#ffffff
tab.activeBackground#ffffff
tab.activeBorderTop#3398DB
tab.activeForeground#3398DB
tab.border#00000000
tab.hoverBackground#ffffffcc
tab.hoverBorder#00000000
tab.inactiveBackground#f3f6f6
tab.inactiveForeground#8b99a7
tab.lastPinnedBorder#d1dadc
tab.unfocusedActiveForeground#455059
tab.unfocusedHoverBackground#3398DB10
tab.unfocusedHoverBorder#00000000
tab.unfocusedInactiveForeground#455059
terminal.ansiBlack#ffffff
terminal.ansiBlue#3398DB
terminal.ansiBrightBlack#3398DB
terminal.ansiBrightBlue#3398DB
terminal.ansiBrightCyan#24B5A8
terminal.ansiBrightGreen#37ae6f
terminal.ansiBrightMagenta#CC71BC
terminal.ansiBrightRed#C13838
terminal.ansiBrightWhite#3398DB
terminal.ansiBrightYellow#c9a022
terminal.ansiCyan#24B5A8
terminal.ansiGreen#37ae6f
terminal.ansiMagenta#CC71BC
terminal.ansiRed#C13838
terminal.ansiWhite#455059
terminal.ansiYellow#c9a022
terminal.background#ffffff
terminalCursor.background#c9a022
terminalCursor.foreground#c9a022
textBlockQuote.background#3398DB34
textBlockQuote.border#3398DBb9
textCodeBlock.background#3398DB34
textLink.activeForeground#3398DB
textLink.foreground#3398DB
textPreformat.foreground#c9a022
textSeparator.foreground#3398DB
titleBar.activeBackground#f3f6f6
titleBar.activeForeground#8b99a7
titleBar.border#d1dadc
titleBar.inactiveBackground#d1dadc
titleBar.inactiveForeground#8b99a7
tree.indentGuidesStroke#8b99a770
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#d1dadc

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	#D26D32	italic
entity.name.type	#7E9E2D	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#8b99a7aa	italic
constant	#C13838	—
source, support, constant.character.entity.named, meta.jsx.children, source.lua	#455059	—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts	#CC71BC	—
keyword.control.export, support.type.object.module	#c9a022	—
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	#3398DB	—
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include	#c9a022	—
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	#c9a022	—
meta.object-literal.key, variable.object.property	#455059	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml	#c9a022	—
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua	#c9a022	—
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	#8b99a7	—
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self	#D26D32	italic
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	#24B5A8	italic
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	#37ae6f	—
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type	#935cd1	—
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	#de456b	—
source.elm constant.type-constructor	#de456b	—
source.elm storage.type	#935cd1
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	#3398DB	—
support.variable.liquid, support.class.liquid	#de456b	—
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	#3398DB	—
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	#3398DBaa	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#c9a022	italic
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#935cd1	—
fenced_code.block.language	#935cd1	—
markup.list.unnumbered.markdown meta.paragraph.markdown	#3398DB	—
punctuation.definition.list.begin	#3398DB	—
entity.name.section, markup.heading.setext	#c9a022	—
punctuation.definition.heading	#c9a022	—
markup.underline.link, markup.underline.link.image	#3398DB	—
markup.bold, punctuation.definition.bold	#3398DB	bold
markup.italic, punctuation.definition.italic	#3398DB	italic
markup.quote	#3398DB	italic
punctuation.definition.quote.begin	#3398DB	italic
entity.other.attribute-name.pseudo-class	#CC71BC	—
entity.other.attribute-name.pseudo-element	#CC71BC	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#24B5A8	italic
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#24B5A8	italic
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	#455059	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#935cd1	—
entity.name.tag.reference, meta.property-list	#D26D32	—
keyword.other.unit	#D26D32	italic
support.constant.property-value, support.constant.font-name, meta.property-value.css	#D26D32	—
constant.numeric	#D26D32	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#3398DB	—

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