Webstorm Ui Theme For vscode

Name: Webstorm Ui Theme For vscode
Author: hylong

Publisher: hylongThemes in package: 2

This is a theme similar to the WebStorm New UI Theme.

Open in VS Code GitHub

Color themes

VS Code preview

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

Webstorm Ui Theme For vscode — Webstorm Darcula

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.activeBackground#445973
activityBar.activeBorder#445973
activityBar.background#3C3F41
activityBar.border#575757
activityBar.foreground#D7D7D7
activityBar.inactiveForeground#868686
activityBarBadge.background#4B6EAF
activityBarBadge.foreground#FFFFFF
badge.background#616161
badge.foreground#F8F8F8
button.background#4B6EAF
button.border#FFFFFF12
button.foreground#FFFFFF
button.hoverBackground#026EC1
button.secondaryBackground#313131
button.secondaryForeground#CCCCCC
button.secondaryHoverBackground#3C3C3C
chat.editedFileForeground#E2C08D
chat.slashCommandBackground#26477866
chat.slashCommandForeground#85B6FF
checkbox.background#313131
checkbox.border#3C3C3C
debugToolBar.background#181818
descriptionForeground#9D9D9D
dropdown.background#313131
dropdown.border#3C3C3C
dropdown.foreground#CCCCCC
dropdown.listBackground#3C3F41
editor.background#2B2B2B
editor.findMatchBackground#9E6A03
editor.foreground#CCCCCC
editor.lineHighlightBackground#3C3C3C
editorGroup.border#FFFFFF17
editorGroupHeader.tabsBackground#3C3F41
editorGroupHeader.tabsBorder#2B2B2B
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#4B6EAF
editorLineNumber.activeForeground#CCCCCC
editorLineNumber.foreground#6E7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#F85149
focusBorder#4B6EAF
foreground#CCCCCC
icon.foreground#CCCCCC
input.background#313131
input.border#3C3C3C
input.foreground#CCCCCC
input.placeholderForeground#989898
inputOption.activeBackground#2489DB82
inputOption.activeBorder#2488DB
keybindingLabel.foreground#CCCCCC
list.activeSelectionBackground#2E436E
list.activeSelectionForeground#e0d7d9
list.focusForeground#f0f0f0
list.highlightForeground#f0eaea
list.hoverBackground#565758
list.inactiveSelectionBackground#5b5b5c
list.inactiveSelectionForeground#e0d7db
menu.background#3C3F41
menu.selectionBackground#4B6EAF
notificationCenterHeader.background#3C3F41
notificationCenterHeader.foreground#CCCCCC
notifications.background#3C3F41
notifications.border#2B2B2B
notifications.foreground#CCCCCC
panel.background#2B2B2B
panel.border#575757
panelInput.border#2B2B2B
panelTitle.activeBorder#4B6EAF
panelTitle.activeForeground#CCCCCC
panelTitle.inactiveForeground#9D9D9D
peekViewEditor.background#3C3F41
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#3C3F41
peekViewResult.matchHighlightBackground#BB800966
pickerGroup.border#3C3C3C
progressBar.background#4B6EAF
quickInput.background#222222
quickInput.foreground#CCCCCC
scrollbar.shadow#2B2B2B
scrollbarSlider.activeBackground#69696999
scrollbarSlider.background#49494999
scrollbarSlider.hoverBackground#69696999
settings.dropdownBackground#313131
settings.dropdownBorder#3C3C3C
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#BB800966
sideBar.background#3C3F41
sideBar.border#575757
sideBar.foreground#CCCCCC
sideBarSectionHeader.background#3C3F41
sideBarSectionHeader.border#575757
sideBarSectionHeader.foreground#CCCCCC
sideBarTitle.foreground#CCCCCC
statusBar.background#3C3F41
statusBar.border#575757
statusBar.debuggingBackground#4B6EAF
statusBar.debuggingForeground#FFFFFF
statusBar.focusBorder#4B6EAF
statusBar.foreground#CCCCCC
statusBar.noFolderBackground#3C3F41
statusBarItem.focusBorder#4B6EAF
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#4B6EAF
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#3C3F41
tab.activeBorder#4B6EAF
tab.activeForeground#FFFFFF
tab.border#181a1f
tab.hoverBackground#393B40
tab.inactiveBackground#3C3F41
tab.inactiveForeground#9D9D9D
tab.unfocusedActiveBorder#3C3F41
tab.unfocusedActiveBorderTop#2B2B2B
tab.unfocusedHoverBackground#3C3F41
terminal.foreground#CCCCCC
terminal.tab.activeBorder#4B6EAF
textBlockQuote.background#2B2B2B
textBlockQuote.border#616161
textCodeBlock.background#2B2B2B
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3C3C3C
textPreformat.foreground#D0D0D0
textSeparator.foreground#21262D
titleBar.activeBackground#3C3F41
titleBar.activeForeground#CCCCCC
titleBar.border#575757
titleBar.inactiveBackground#3C3F41
titleBar.inactiveForeground#9D9D9D
welcomePage.progress.foreground#4B6EAF
welcomePage.tileBackground#2B2B2B
widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7A7E85
comment.block.documentation	#629755
comment.block.documentation storage.type	#629755
source.css.scss comment	#BC9455
keyword, keyword.operator.new, keyword.operator.expression, storage, storage.type, support.type, constant.language, variable.language.this, variable.key.dotenv, entity.name.command, entity.name.tag.yaml, constant.character.escape, punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown	#CC7832
punctuation.definition.heading.markdown	#CC7832	italic
entity.name.type.module, entity.name.constant, variable.other.property, variable.other.object.property, variable.other.constant.property, variable.language, variable.parameter, meta.parameters variable.parameter, punctuation.definition.template-expression, meta.object-literal.key, meta.definition.property, meta.definition.property entity.name.function, support.type.property-name.json, support.variable.property, support.type.object.module, fenced_code	#9876AA
variable.other.enummember	#BCBEC4	—
markup.heading	#9876AA	italic
keyword.control.at-rule.mixin.scss	#d0cfff	—
string, punctuation.definition.metadata.markdown, markup.inline.raw, markup.quote, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp, meta.at-rule.each keyword.control.operator, meta.attribute-selector, meta.tag.attributes keyword.operator.assignment	#6A8759	—
source.css support.constant, string.quoted.double.html, punctuation.separator.key-value.html, keyword.other.unit	#A5C261
constant.numeric, keyword.operator.quantifier.regexp, string.regexp punctuation.definition.string, string.regexp keyword.other, constant.language.boolean, constant.language.null, constant.language, support.type.builtin	#6897BB	—
support.class.component, entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, source.vue meta.tag.other.unrecognized.html.derivative entity.name.tag, source.vue meta.tag.custom.start.html entity.name.tag, source.vue meta.tag.custom.end.html entity.name.tag	#26BDA4	—
entity.name.type.parameter, meta.type.parameters entity.name.type, meta.type.infer entity.name.type	#BCBEC4	—
meta.tag.attributes, meta.at-rule.for keyword.control.operator, variable.interpolation, entity.name.type, entity.name.function.tagged-template, constant.language.import-export-all, string variable, source.yaml string.unquoted, source.yaml constant.language.boolean, punctuation.accessor, keyword.operator, keyword.other.unit.percentage, keyword.other.back-reference.regexp, punctuation.definition.entity, punctuation.separator.key-value, punctuation.separator.list.comma.css, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.definition.template-expression, punctuation.definition.attribute-selector, punctuation.terminator, storage.type.function.arrow	#BCBEC4	—
punctuation.terminator.rule.css	#CC7832
meta.property-list variable.css, entity.other.attribute-name, support.type.property-name, support.type.vendored.property-name	#bababa	—
variable.other, variable.other.object, variable.other.readwrite, variable.other.constant	#a9b7c5	—
variable.other.jsdoc, entity.name.type.instance.jsdoc	#9876AA	—
string.other.link, constant.other.reference.link, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown	#6D9CBE	underline
markup.underline.link	#6D9CBE	italic
constant.other.color.rgb-value, string.other.link.description.title.markdown	#6D9CBE
variable.parameter.url.css, meta.property-value variable.parameter.url, meta.at-rule.namespace variable.parameter.url	#CC7832	—
variable.scss	#6d9cbe	—
variable.parameter.misc.css, variable.parameter.keyframe-list.css, entity.name.tag, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.scss, entity.other.attribute-name.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity, entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.css punctuation.definition.entity, entity.other.keyframe-offset, punctuation.definition.tag, storage.type.annotation, meta.at-rule.media keyword.operator, meta.at-rule.media keyword.control.operator, meta.attribute-selector string.unquoted.attribute-value, meta.property-value variable.argument.css, constant.other.scss, support.constant.parity.css, source.css entity.name.function, source.css support.type.map.key, source.css support.constant.language-range, source.css support.function	#d5b778	—
meta.object.member entity.name.function, entity.name.function, entity.name.function.member	#FFC66D
punctuation.decorator	#BCBEC4	—
meta.decorator entity.name.function, constant.other.character-class.regexp	#BBB529	—
invalid	#f75464	—
markup.italic	—	italic
markup.bold	—	bold
markup.strikethrough	—	strikethrough

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