The Best Themes for programmers

Name: The Best Themes for programmers
Author: Estevam Souza

Publisher: Estevam SouzaThemes in package: 127

🎨🚀 A never seen collection of 165 hand crafted themes no where to be found on Internet 💻

Open in VS Code GitHub

Color themes

VS Code preview

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

The Best Themes for programmers — Best Themes - Darcula

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#ffffff0b
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,support.type.primitive	#89A6AF	—
meta.type.parameters	#7A9EC2	italic
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, support.type.property-name.json	#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	—
meta.arrow punctuation.definition.parameters	#CC8242	italic bold
variable.other.readwrite.instance.ruby	#9E7BB0	bold
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this	—
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive	—

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