Webstorm NewUI Theme

Name: Webstorm NewUI Theme
Author: reallyx

Publisher: reallyxThemes in package: 1

WebStorm Theme and Icon theme for Visual Studio Code

GitHub

VS Code preview

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

Webstorm NewUI Theme — Webstorm NewUI Theme

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
activityBarBadge.background#007acc
breadcrumb.background#2b2d30
editor.background#1e1f22
editor.foreground#bcbec4
menu.background#2b2d30
sideBar.background#2b2d30
sideBarTitle.foreground#bbbbbb
terminal.background#1e1f22
terminal.foreground#BCBEC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.css variable.parameter.url	#5C92FF	—
source, punctuation.definition, punctuation.separator, punctuation.attribute-shorthand, punctuation.terminator, punctuation.accessor, punctuation.section, keyword.operator, entity.other.attribute-name, text.html.derivative, meta.class, storage.type.function.arrow, meta.brace, variable.other.object, variable.other.constant, entity.name.command, meta.argument, source.ignore, source.yaml string.unquoted.plain, text.html.markdown, source.diff, source.editorconfig, source.shell string.quoted, source.shell punctuation.definition.string, source.shell constant.language, comment.block.documentation entity.name.type, variable.other.readwrite, entity.name.type.module, source.css support.type.property-name, source.css variable.language.expanded-namespace, source.css keyword.other.unit.percentage, source.css meta.property-list, source.css support.type.vendored.property-name, source.yaml constant.language, source.yaml keyword.control.flow.block-scalar, source.yaml storage.modifier.chomping-indicator, text.pug variable.parameter.function, text.pug constant.name.attribute.tag, text.xml, text.xml variable.language.documentroot, meta.interface meta.type.parameters punctuation.definition, text.html.derivative meta.attribute.directive.vue entity.other.attribute-name.html	#BCBEC4	—
entity.name.tag, meta.template-tag entity.name.tag.template, punctuation.definition.tag, punctuation.definition.tag.begin, meta.selector.css constant.other.unicode-range, source.css meta.function.url, source.css support.function.misc, source.css entity.other.attribute-name, source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.id punctuation.definition.entity, source.css entity.other.attribute-name.pseudo-element, source.css entity.other.attribute-name, source.css support.constant.language-range, source.css entity.name.function, source.css meta.at-rule.use variable, source.css keyword.operator, source.css meta.at-rule.each, source.css entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity, text.xml meta.tag.sgml.doctype, punctuation.definition.tag.begin.html source.js-ignored-vscode, invalid.illegal.character-not-allowed-here.html, meta.tag.structure entity.name.tag, meta.element.structure entity.name.tag, source.css entity.name.tag, source.css meta.property-value variable	#D5B778	—
meta.tag.custom entity.name.tag, meta.tag.other.unrecognized entity.name.tag, entity.name.tag support.class.component, entity.name.tag, source.vue text.html.derivative meta.tag.structure.slot entity.name.tag.html	#2FBAA3	—
	#BABABA	—
constant.language, keyword.other, storage.type, keyword.control, keyword.operator.expression, keyword.operator.new, storage.modifier, source.editorconfig entity.name.section.group-title, markup.heading.markdown punctuation.definition.heading.markdown, constant.other.reference.link.markdown, text.html.markdown punctuation.definition.constant, variable.language, source.css punctuation.definition.keyword, source.css keyword.other, source.yaml entity.name.tag, constant.character.escape, text.pug meta.tag.sgml.doctype, support.type.primitive, support.type.builtin	#CF8E6D	—
string.quoted, string.quoted punctuation.definition, punctuation.definition.string.template, string.template, meta.attribute.directive punctuation.definition.string, text.html.markdown punctuation.definition.string, text.html.markdown string.other.link.description.title.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown, markup.inline.raw.string.markdown punctuation.definition.raw.markdown, markup.raw.block.markdown, markup.quote.markdown, markup.quote.markdown punctuation.definition, markup.quote.markdown markup.heading.markdown, markup.quote.markdown markup.heading.markdown punctuation.definition.heading.markdown, markup.quote.markdown string.other.link.title.markdown, markup.quote.markdown markup.underline.link.markdown, source.editorconfig string, source.editorconfig constant.language, comment.block.documentation, comment.block.documentation punctuation.definition.comment, comment.block.documentation punctuation.definition.block, comment.block.documentation storage.type, meta.property-value.css, string.unquoted.html, punctuation.separator.key-value.html, source.css support.constant.property-value, source.css keyword.other.unit, source.yaml comment.line.number-sign, source.yaml comment.line punctuation.definition.comment, string.regexp constant.other.character-class.set, string.regexp constant.other.character-class.set constant.other.character-class.range, meta.interface meta.type.parameters punctuation.definition.string, meta.type.declaration meta.type.parameters punctuation.definition.string, text.pug text.block.pipe, text.pug	#6AAB73	—
comment.block, comment.line, comment.line punctuation.definition.comment, comment.block punctuation.definition.comment, text.pug comment.unbuffered.block, text.pug string.comment.buffered.block	#7A7E85	—
source.json support.type.property-name.json, variable.other.property, variable.other.constant.property, meta.object-literal.key, variable.other.readwrite.alias, support.variable.property, variable.object.property, variable.other.object.property, source.editorconfig keyword.other, markup.heading.markdown, punctuation.definition.list_item.markdown, meta.function-call support.class, meta.definition.property entity.name.function, meta.objectliteral meta.object.member variable.other.readwrite, text.pug entity.other.attribute-name.class, text.html.derivative variable.other.readwrite, meta.import variable.other.readwrite.alias	#C77DBB	—
meta.function-call support.class.promise, meta.function-call entity.name.function, meta.definition.method entity.name.function, punctuation.definition.link.markdown, markup.underline.link.markdown, string.other.link.title.markdown, string.other.link.description.markdown, text.html.markdown punctuation.definition.link.description, markup.underline, entity.name.function, constant.character.entity.numeric.hexadecimal.html, constant.character.entity.numeric.hexadecimal.html punctuation.definition.entity.html, constant.character.entity.named.Alpha.html, constant.character.entity.named.Alpha.html punctuation.definition.entity.html, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css, text.xml constant.character.entity, text.xml constant.character.entity punctuation.definition.constant, constant.character.entity.named, constant.character.entity.named punctuation.definition.entity.html	#56A8F5	—
punctuation.decorator, meta.decorator meta.function-call entity.name.function	#B3AE60	—
source.css keyword.control.at-rule.mixin, source.css keyword.control.at-rule.mixin punctuation.definition.keyword	#D0D0FF	—
source.css comment.block, source.css comment.block punctuation.definition.comment	#BC9455	italic
source.yaml entity.name.type.anchor, source.yaml variable.other.alias	#E8BF6A	—
string.regexp constant.other.character-class	#B2AE60	—
string.regexp constant.other.character-class.set constant.character.escape.backslash	#CF8E6D	—
string.regexp	#6AAB73	—
constant.numeric, string.regexp keyword.operator.quantifier.regexp, string.regexp punctuation.definition.string	#2AACB8	—
text.pug attribute_value punctuation.definition.string, text.pug args.mixin punctuation.definition.string, text.pug attribute_value string.quoted, text.pug args.mixin string.quoted, text.pug string.interpolated variable.other.readwrite, text.pug meta.control.flow variable.other.readwrite, text.pug meta.control.flow keyword.operator	#9762C6	—
text.pug variable.control.import.include	#8585FF	—
text.pug constant.language.name.coffeescript.filter	#FF0000	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#C77DBB	—
markdown.heading, markup.heading \| markup.heading entity.name	#C3E88D	—
punctuation.definition.bold, punctuation.definition.italic	#CF8E6D	—
markup.table.markdown	#BCBEC4	—
meta.separator.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown	#CF8E6D	—
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
source.go keyword	#CF8E6D	—
source.go entity.name.package, source.go entity.alias.import	#AFBF7E	—
source.go support.function	#56A8F5	—
source.go support.function.builtin	#CC7832	—

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