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

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#ffffff1a
activityBarBadge.background#007acc
badge.background#ffffff1a
editor.background#242424
editor.foreground#cccccc
editor.lineHighlightBackground#ffffff0b
editor.selectionBackground#204182cc
editorGutter.background#242424
editorSuggestWidget.background#303030
editorSuggestWidget.highlightForeground#cc6e2f
editorSuggestWidget.selectedBackground#204182cc
sideBar.background#242424
sideBar.border#ffffff1a
statusBar.background#ffffff1a
statusBar.foreground#cccccc
tab.activeBackground#ffffff1a
tab.activeBorder#0c7d9d
tab.inactiveBackground#ffffff0b
titleBar.activeBackground#ffffff1a
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#ffffff10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#707070	—
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread	#CCCCCC	—
string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag	#6A8759	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end	#CC8242	—
expression.string,meta.template.expression	#CCCCCC	—
constant.numeric	#7A9EC2	—
constant.language,variable.language	#CC8242	—
constant.character, constant.other	#9E7BB0	—
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression	#CC8242	—
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive	#7A9EC2	—
storage,storage.type,storage.modifier,storage.arrow	#CC8242	—
class.instance.constructor,new.expr entity.name.type	#FFC66D	—
support.function, entity.name.function	#FFC66D	—
annotation.meta.ts, annotation.meta.tsx	#CCCCCC	—
variable.parameter, operator.rest.parameters	#CCCCCC	—
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property	#9E7BB0	—
quote.module	#6A8759	—
markup.heading	#CC8242	—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag	#FFC66D	—
entity.other.attribute-name	#CCCCCC	—
meta.object-literal.key	#9E7BB0	—
storage.modifier.ts	#CC8242	—
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation	#7A9EC2	—
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration	#7A9EC2	—
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters	#FFC66D	—
comment.block.documentation	#6A8759	—
storage.type.class.jsdoc	#CC8242	—
constant.language.import-export-all	#CCCCCC	—
objectliteral.key.separator, punctuation.separator.key-value	#CCCCCC	—
regex	—	italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace	#CCCCCC	—
regex.character-class	#CCCCCC	—
entity.name.type.class	#CCCCCC	—
entity.other.inherited-class	#7A9EC2	—
entity.name.type.instance.jsdoc	#FFC66D	—
yaml.entity.name,yaml.string.entity.name	#CC8242	—
yaml.string.out	#CCCCCC	—
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end	#CCCCCC	—
string.regexp	#CC8242	—
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp	#FFC66D	—
constant.other.character-class.regexp, constant.character.escape.ts	#CCCCCC	—
expr.regex.or.operator	#CCCCCC	—
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag	#6A8759	—
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded	#CCCCCC	—
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square	#CCCCCC	—
property-list.property-value,property-list.constant	#A5C261	—
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss	#7A9EC2	—
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss	#FFC66D	—
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss	#7A9EC2	—
property-list.property-value.function	#FFC66D	—
support.constant.property-value.css,support.constant.property-value.scss	#A5C261	—
css.entity.name.tag,scss.entity.name.tag	#CC8242	—
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css	#FFC66D	—
keyword.scss,keyword.css	#CC8242	—
triple-slash.tag	#CCCCCC	italic
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
keyword.operator.logical.python	#CC8242	—
support.class.dart	#CC8242	—
variable.language.php, variable.other.php	#9E7BB0	—
variable.other.readwrite.perl	#9E7BB0	—
variable.other.property.php	#CC8242	—
support.variable.property.php	#FFC66D	—

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