Li

Name: Li
Author: Ali Ahad

Publisher: Ali AhadThemes in package: 1

PyCharm and vscode community theme inspired dark theme with icons and JetBrains Mono font

Open in VS Code GitHub

VS Code preview

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

Li — Li

fetchUser.ts

index.ts

README.md

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#2b2d30
activityBar.border#1e1f22
activityBar.foreground#ced0d6
breadcrumb.background#1e1f22
dropdown.border#646464
dropdown.foreground#BBBBBB
dropdown.listBackground#646464
editor.background#1e1f22
editor.inactiveSelectionBackground#43454a
editor.lineHighlightBackground#26282e
editor.selectionBackground#214283
editorCodeLens.foreground#6a6e78
editorGroup.border#505050
editorGroupHeader.tabsBackground#1e1f22
editorGroupHeader.tabsBorder#323438
editorGutter.background#1e1f22
editorIndentGuide.activeBackground#54565c
editorIndentGuide.background#2c2f32
editorLineNumber.activeForeground#9b9fa8
editorLineNumber.foreground#444953
editorRuler.foreground#464646
editorSuggestWidget.background#3C3F41
editorWidget.background#313335
editorWidget.border#464646
gitDecoration.ignoredResourceForeground#505050
input.background#45494A
input.border#646464
input.foreground#BBBBBB
list.activeSelectionBackground#2e436e
list.activeSelectionForeground#d2e1e5
list.dropBackground#474B4D
list.hoverBackground#43454a
list.inactiveSelectionBackground#43454a
menu.background#2b2d30
menu.border#3c3d42
menu.foreground#bdbfc3
panel.background#2b2d30
panel.border#2b2d30
panel.dropBackground#2B2B2B
panelTitle.activeBorder#3574f0
panelTitle.activeForeground#dfe1e5
settings.headerForeground#BBBBBB
sideBar.background#2b2d30
sideBar.border#2b2d30
sideBar.foreground#ced0d6
sideBarSectionHeader.background#43454a
sideBarSectionHeader.border#43454a
statusBar.background#2b2d30
statusBar.border#1e1f22
statusBar.debuggingBackground#864d30
statusBar.debuggingBorder#1e1f22
statusBar.debuggingForeground#cccccc
statusBar.foreground#9da0a8
statusBar.noFolderBackground#313335
statusBar.noFolderBorder#1e1f22
tab.activeBackground#1e1f22
tab.activeBorder#3574f0
tab.border#555555
tab.hoverBackground#26282e
tab.hoverForeground#dcdfe4
tab.inactiveBackground#1e1f22
tab.inactiveForeground#babcc1
tab.unfocusedActiveForeground#BBBBBB
tab.unfocusedHoverBackground#606466
tab.unfocusedInactiveForeground#BBBBBB
terminal.background#1e1f22
terminal.foreground#bcbec4
titleBar.activeBackground#2b2d30
titleBar.border#3c3f41
titleBar.inactiveBackground#3c3f41

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text	#BABABA	—
source	#bcbec4	—
emphasis	—	italic
strong	—	bold
comment	#7a7e85	—
comment.block.documentation	#629755	italic
string.quoted	#5b9c71	—
constant.numeric	#279cb2
variable.parameter.url, string.url	#287BDE	—
constant.regexp	#646695	—
constant.keyword, constant.language	#c48d69	—
meta.var storage.type	#c48d69	—
storage.type.function	#c48d69	—
support.function.builtin	#747dc2	—
variable.language.special	#94558d	—
variable.language	#c48d69	—
support.constant.handlebars	#ad9665
support.type.primitive	#c48d69
source.python variable.parameter.function.language.special	#94558d
source.python meta.function-call.arguments variable.parameter.function-call	#aa4926	—
source.python constant.language, source.python constant.character.escape, source.python keyword.operator.logical, source.python constant.character.format.placeholder.other, source.python meta.function storage.type.function , source.python meta.class storage.type.class, source.python keyword.control.flow, source.python keyword.control.import, source.python storage.type.format, source.python storage.modifier	#c48d69
source.python support.function.magic, source.python support.variable.magic	#b200b2	—
source.python string.quoted	#6aab73
source.python string.quoted.docstring, source.python string.quoted.docstring punctuation.definition.string.begin, source.python string.quoted.docstring punctuation.definition.string.end	#5f826b	italic
source.python meta.function.decorator support.type, source.python meta.function.decorator entity.name.function.decorator	#adad57	—
source.python support.type, source.python meta.function-call.arguments support.type, source.python meta.function-call support.function.builtin, source.python meta.item-access meta.item-access.arguments support.type	#767ec3	—
source.python entity.name.function	#56a8f5
source.python string.quoted.binary.single, source.python string.quoted.binary.single punctuation.definition.string.begin, source.python string.quoted.binary.single punctuation.definition.string.end, source.python string.quoted.binary.single storage.type.string	#a5c261
source.python support.type.exception, source.python meta.class.inheritance support.type.exception, source.python meta.class.inheritance support.type.metaclass	#767ec3	—
text.xml punctuation.definition.tag, text.xml keyword.other	#ad9665	—
text.xml entity.name.tag.localname	#ad9665	—
text.xml entity.name.tag.namespace, text.xml entity.other.attribute-name.namespace	#9876AA	—
text.xml string	#6A8759	—
text.html meta.tag.metadata.script.end punctuation.definition.tag.begin source, text.html meta.tag.metadata.style.end punctuation.definition.tag.begin source	#ad9665	—
text.html punctuation.definition.tag.begin, text.html punctuation.definition.tag.end	#ad9665	—
text.html meta.tag entity.name.tag, text.html entity.name.tag.inline.any, text.html entity.name.tag.block.any	#ad9665	—
text.html meta.tag punctuation, text.html meta.tag string.unquoted, text.html meta.tag string.quoted, text.html meta.attribute.style.html meta.embedded.line.css source.css	#588f66	—
text.html constant	#6D9CBE	—
text.html constant.character.escape	#c48d69
text.html.jinja keyword.control	#AD9665	bold
text.html.jinja entity.other.jinja.delimiter.variable, text.html.jinja entity.other.jinja.delimiter.tag, text.html.jinja variable.entity.other.jinja.delimiter, text.html.jinja meta.attribute.unrecognized.{{.html, text.html.jinja meta.attribute.unrecognized.}}.html	#c48d69	—
text.html.django keyword.control	#c48d69	bold
text.html.django entity.other.django.delimiter.variable	#c48d69	—
text.html.django entity.other.django.delimiter.tag	#c48d69	—
text.html.django meta.tag	#ad9665	—
text.html.django meta.tag entity.other.attribute-name	#BABABA	—
entity.tag.tagbraces	#c48d69	—
text.html.django storage.type.templatetag keyword.operator.django, text.html.django storage.type.templatetag keyword.control.tag-name, text.html.django storage.type.customtemplatetag constant.other.tag.name	#c48d69	bold
source.css constant	#6897BB	—
support.type.property-name.css	#BABABA	—
meta.at-rule.import.css, meta.at-rule.font-face.css, entity.name.tag.css, punctuation.terminator.rule.css, punctuation.separator.css, punctuation.separator.list.comma.css	#B87800	—
constant.other.color.rgb-value.hex.css	#6897BB
constant.other.unicode-range.css, support.function.url.css, punctuation.section.function.css, meta.selector.css	#ad9665
meta.property-value.css	#588f66
punctuation.definition.variable.less, variable.other.less	#D0D0FF	—
source.css.less entity.other.attribute-name.class.mixin.css, source.css.less constant.other.unicode-range.css	#A5C261	—
source.css.less meta.property-list.css meta.property-value.css entity.name.tag.css, source.css.less meta.property-list.css meta.property-value.css constant.numeric.css	#588f66	—
keyword.other.DML.sql, keyword.other.alias.sql, keyword.other.order.sql, keyword.other.sql, storage.type.sql, source.sql keyword, keyword.other.DDL, source.sql support, support.function.logical.sql	#c48d69	—
support.function.aggregate.sql, support.function.analytic.sql	#3d85cc	italic
constant.other.table-name.sql	#aa6b8c	—
text.html.markdown markup.heading, text.html.markdown markup.heading.setext	#99688a	italic
text.html.markdown meta.paragraph meta.link.inet markup.underline.link	#4a88c3	—
text.html.markdown meta.link.reference constant.other.reference	#c48d69	—
text.html.markdown meta.link.reference punctuation.definition.constant	#c48d69	bold
text.html.markdown meta.link.inet punctuation	#287BDE	—
text.html.markdown meta.link.inline punctuation.definition.string	#287BDE	—
text.html.markdown meta.paragraph meta.link.reference punctuation.definition.string	#287BDE	—
text.html.markdown meta.link.reference markup.underline.link	#4a88c3	italic
text.html.markdown meta.link.inline markup.underline.link	#4a88c3	italic
text.html.markdown meta.link.reference string.other.link.description.title	#808080	italic
text.html.markdown meta.link.reference string.other.link.title, text.html.markdown meta.reference.link.inline, text.html.markdown meta.reference.link constant.other	#4a88c3	—
text.html.markdown punctuation.definition.bold, text.html.markdown punctuation.definition.italic, text.html.markdown punctuation.definition.strikethrough	#af7353	—
text.html.markdown markup.fenced_code.block, text.html.markdown markup.raw.block, text.html.markdown markup.inline.raw	#808080	—
punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.heading.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, fenced_code.block.language.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, text.html.markdown meta.separator.markdown, constant.character.escape.markdown	#af7353	—
text.html.markdown markup.quote, text.html.markdown markup.quote meta.paragraph, text.html.markdown markup.quote heading	#6A8759
text.html.markdown beginning.punctuation.definition.quote	#608b4e	—
text.html.markdown beginning.punctuation.definition.list	#6796e6	—
markup.heading.restructuredtext	#6897BB	—
support.directive.restructuredtext, punctuation.separator.key-value.restructuredtext, meta.link.footnote.def.restructuredtext constant.other.footnote.link.restructuredtext, entity.name.tag.restructuredtext, markup.other.command.restructuredtext	#c48d69	—
source.shell string.interpolated punctuation.definition, source.shell string.quoted punctuation.definition, source.shell support.function.builtin, source.shell keyword	#c48d69	—
source.json meta.structure.dictionary support.type.property-name	#9876AA	—
source.json string.quoted.double	#6A8759	—
source.json punctuation.separator.dictionary.key-value, source.json punctuation.separator.array, source.json constant.language	#c48d69	—
source.json comment.block, source.json comment.block.documentation	#808080	—
source.json string.quoted.double	#6A8759	—
source.json punctuation.separator.dictionary.pair, source.json punctuation.separator.element, source.json punctuation.separator.arguments, source.json punctuation.separator.parameters, source.json punctuation.separator.continuation	#c48d69
source.json constant.character.escape.js	#c48d69	—
source.js string.regexp	#9876AA
source.js keyword.operator.new.js, source.js keyword.operator.expression.js, source.js keyword.operator.cast.js, source.js keyword.operator.sizeof.js	#c48d69
source.js storage.type.class, source.js storage.type.interface	#c48d69
source.js meta.decorator entity.name.function, source.js punctuation.decorator	#BBB529	—
entity.name.function.js, source.js meta.function meta.definition.function.js entity.name.function, source.js meta.function.expression.js entity.name.function	#4784b8	—
source.js variable.other.property	#9876AA	—
source.js meta.object.member variable.other.property, source.js variable.other.object.property	#9876AA	—
source.js string.quoted.single, source.js string.quoted.double	#6A8759	—
source.powershell keyword.control, source.powershell storage.type, source.powershell support.variable.automatic	#c48d69	—
source.powershell support.variable.automatic variable.other.member	#9876AA	—
source.powershell entity.name.function, source.powershell support.function	#ad9665	—
source.batchfile keyword.control.repeat, source.batchfile keyword.control.statement, source.batchfile keyword.control.conditional, source.batchfile keyword.command, source.batchfile keyword.operator.at, source.batchfile keyword.operator.logical, source.batchfile keyword.operator.comparison, source.batchfile keyword.operator.assignment, source.batchfile keyword.operator.arithmetic, source.batchfile keyword.operator.redirection, source.batchfile keyword.other.special-method	#c48d69	—
source.batchfile keyword.other.special-method	#ad9665	—
source.batchfile keyword.command.rem	#808080	—
source.reg entity.name.function.section.delete entity.section, source.reg entity.name.function.section.delete punctuation.definition.section, source.reg keyword.operator.arithmetic.minus	#BBB529	—
source.reg entity.name.function.section.add entity.section, source.reg entity.name.function.section.add punctuation.definition.section	#c48d69	—
source.reg keyword.control.import, source.reg punctuation.definition.equals	#9876AA	—
source.ini entity.name.section	#c48d69	—
source.ini keyword	#9876AA	—
source.toml keyword.key, source.toml entity.other, support.type.property-name.toml	#c48d69	—
support.type.property-name.table.toml, support.type.property-name.array.toml	#56A8F5	—
source.toml string.quoted.single.basic.line	#6A8759	—
source.yaml string.unquoted entity.name.tag	#c48d69	—
source.yaml entity.name, source.yaml variable.other	#E8BF6A	—
source.yaml comment.line	#629755	—
source.ts punctuation.separator.comma, source.ts punctuation.terminator.statement	#c48d69	—
source.ts storage.type, source.ts storage.modifier, source.ts keyword.control, source.ts keyword.operator.expression, source.ts keyword.operator.new	#c48d69	—
source.ts punctuation.decorator, source.ts meta.decorator entity.name.function	#BBB529	—
source.ts meta.class variable.other.object.property, source.ts meta.class variable.other.property, source.ts meta.class variable.object.property, source.ts meta.class variable.other.property	#9876AA
source.ts meta.class variable.other.object.property, source.ts meta.class variable.other.property, source.ts meta.class variable.object.property, source.ts meta.class variable.other.property	#9876AA
source.ts meta.function-call entity.name.function, source.ts meta.definition.method entity.name.function, source.ts meta.definition.function entity.name.function, source.ts meta.function entity.name.function, source.ts meta.definition.variable entity.name.function	#ad9665
invalid	#FF0000	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
string.regexp, string.regexp constant.character, string.regexp storage.type.string, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#d16969
string.regexp entity.name.tag	#F23B7A
string.regexp support.other.parenthesis, string.regexp punctuation.character.set	#E8BF6A
string.regexp keyword.operator	#c48d69
string.regexp keyword.operator.quantifier	#6897BB
source.env string.quoted constant.character.escape	#6a8759	—
source.env string.quoted string.interpolated	#c48d69
source.dockerfile keyword.other.special-method	#c48d69
support.function.git-rebase	#9876AA	—
constant.sha.git-rebase	#b5cea8	—
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php	#c48d69	—

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