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 - Shades of Grey

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#f9826c
activityBar.background#24292e
activityBar.border#1b1f23
activityBar.foreground#e1e4e8
activityBar.inactiveForeground#6a737d
activityBarBadge.background#0366d6
activityBarBadge.foreground#fff
badge.background#044289
badge.foreground#c8e1ff
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#e1e4e8
breadcrumb.foreground#959da5
breadcrumbPicker.background#2b3036
button.background#176f2c
button.foreground#dcffe4
button.hoverBackground#22863a
button.secondaryBackground#444d56
button.secondaryForeground#fff
button.secondaryHoverBackground#586069
checkbox.background#444d56
checkbox.border#1b1f23
debugToolBar.background#2b3036
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#2f363d
dropdown.border#1b1f23
dropdown.foreground#e1e4e8
dropdown.listBackground#24292e
editor.background#24292e
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#58606915
editor.foreground#e1e4e8
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2b3036
editor.linkedEditingBackground#3392FF22
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketHighlight.foreground1#87cefa
editorBracketHighlight.foreground2#DA70D6
editorBracketHighlight.foreground3#87cefa
editorBracketHighlight.foreground4#DA70D6
editorBracketHighlight.foreground5#87cefa
editorBracketHighlight.foreground6#DA70D6
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#c8e1ff
editorGroup.border#1b1f23
editorGroupHeader.tabsBackground#1f2428
editorGroupHeader.tabsBorder#1b1f23
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#ea4a5a
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#444d56
editorIndentGuide.background#2f363d
editorLineNumber.activeForeground#e1e4e8
editorLineNumber.foreground#444d56
editorOverviewRuler.border#1b1f23
editorWhitespace.foreground#444d56
editorWidget.background#1f2428
errorForeground#f97583
focusBorder#005cc5
foreground#d1d5da
gitDecoration.addedResourceForeground#34d058
gitDecoration.conflictingResourceForeground#ffab70
gitDecoration.deletedResourceForeground#ea4a5a
gitDecoration.ignoredResourceForeground#6a737d
gitDecoration.modifiedResourceForeground#79b8ff
gitDecoration.submoduleResourceForeground#6a737d
gitDecoration.untrackedResourceForeground#34d058
input.background#2f363d
input.border#1b1f23
input.foreground#e1e4e8
input.placeholderForeground#959da5
list.activeSelectionBackground#39414a
list.activeSelectionForeground#e1e4e8
list.focusBackground#044289
list.hoverBackground#282e34
list.hoverForeground#e1e4e8
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#e1e4e8
notificationCenterHeader.background#24292e
notificationCenterHeader.foreground#959da5
notifications.background#2f363d
notifications.border#1b1f23
notifications.foreground#e1e4e8
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#1f2428
panel.border#1b1f23
panelInput.border#2f363d
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#e1e4e8
panelTitle.inactiveForeground#959da5
peekViewEditor.background#1f242888
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#1f2428
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#444d56
pickerGroup.foreground#e1e4e8
progressBar.background#0366d6
quickInput.background#24292e
quickInput.foreground#e1e4e8
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#e1e4e8
settings.modifiedItemIndicator#0366d6
sideBar.background#1f2428
sideBar.border#1b1f23
sideBar.foreground#d1d5da
sideBarSectionHeader.background#1f2428
sideBarSectionHeader.border#1b1f23
sideBarSectionHeader.foreground#e1e4e8
sideBarTitle.foreground#e1e4e8
statusBar.background#24292e
statusBar.border#1b1f23
statusBar.debuggingBackground#931c06
statusBar.debuggingForeground#fff
statusBar.foreground#d1d5da
statusBar.noFolderBackground#24292e
statusBarItem.prominentBackground#282e34
tab.activeBackground#24292e
tab.activeBorder#24292e
tab.activeBorderTop#f9826c
tab.activeForeground#e1e4e8
tab.border#1b1f23
tab.hoverBackground#24292e
tab.inactiveBackground#1f2428
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#24292e
tab.unfocusedActiveBorderTop#1b1f23
tab.unfocusedHoverBackground#24292e
terminal.foreground#d1d5da
textBlockQuote.background#24292e
textBlockQuote.border#444d56
textCodeBlock.background#2f363d
textLink.activeForeground#c8e1ff
textLink.foreground#79b8ff
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#24292e
titleBar.activeForeground#e1e4e8
titleBar.border#1b1f23
titleBar.inactiveBackground#1f2428
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#2f363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header	#5f6167	—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown	#D5CED9	—
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name	#00e8c6	—
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js	#f39c12	—
markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string	#FFE66D	—
markup.heading, variable.language.this.js, variable.language.special.self.python	#ff00aa	—
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag	#00e8c6	—
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type	#c74ded	—
string.regexp, markup.changed	#7cb7ff	—
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted	#00e8c6	—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#96E072	—
entity.other.inherited-class	—	underline

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