IntelliJ IDEA New UI

Name: IntelliJ IDEA New UI
Author: compassak

Publisher: compassakThemes in package: 3

VSCode theme pack aims to replicate the aesthetic of IntelliJ IDEA's new user interface.

GitHub

Color themes

VS Code preview

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

IntelliJ IDEA New UI — IntelliJ IDEA New UI Light with Light Header

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#F7F8FA
activityBar.background#F7F8FA
activityBar.border#EBECF0
activityBar.foreground#000
breadcrumb.background#F7F8FA
commandCenter.activeBackground#2e5ec1
commandCenter.activeBorder#27282E
commandCenter.background#3369d6
commandCenter.border#27282E
commandCenter.foreground#F7F8FA
commandCenter.inactiveBorder#383A42
debugToolBar.background#F7F8FA
editor.background#ffffff
editor.findMatchBackground#A6D2FF
editor.findMatchBorder#0004
editor.findMatchHighlightBackground#FCBD3866
editor.foreground#000000
editor.lineHighlightBackground#F5F8FE
editor.selectionBackground#A6D2FF
editor.selectionHighlightBackground#DDDBFC7F
editor.wordHighlightBackground#DDDBFC80
editor.wordHighlightStrongBackground#FCD8E87F
editorGroupHeader.noTabsBackground#F7F8FA
editorGroupHeader.tabsBackground#F7F8FA
editorGroupHeader.tabsBorder#EBECF0
editorGutter.background#fff
editorIndentGuide.activeBackground#AEB3C2
editorIndentGuide.background#EBECF0
editorInlayHint.background#fafafa
editorInlayHint.foreground#999
editorLineNumber.activeForeground#767A8A
editorLineNumber.dimmedForeground#767A8A
editorLineNumber.foreground#b9beca
editorOverviewRuler.background#F7F8FA
editorOverviewRuler.border#F7F8FA
editorWidget.background#F7F8FA
editorWidget.border#EBECF0
focusBorder#AEB3C2
gitDecoration.addedResourceForeground#3e7718
gitDecoration.modifiedResourceForeground#0050c1
list.activeSelectionBackground#CFDEFC
list.activeSelectionForeground#000
list.focusAndSelectionOutline#CFDEFC
list.focusBackground#dfdfdf
list.focusForeground#000
list.focusOutline#dfdfdf
list.hoverBackground#dfdfdf
list.hoverForeground#000
list.inactiveSelectionBackground#dfdfdf
list.inactiveSelectionForeground#000
minimap.background#F7F8FA
minimapSlider.background#3a3a3a33
panel.background#F7F8FA
panel.border#EBECF0
panelSection.border#EBECF0
panelSectionHeader.background#F7F8FA
panelSectionHeader.border#EBECF0
scrollbarSlider.background#3a3a3a33
sideBar.background#F7F8FA
sideBar.border#EBECF0
sideBar.foreground#000000
sideBarSectionHeader.background#F7F8FA
sideBarSectionHeader.border#EBECF0
statusBar.background#F7F8FA
statusBar.border#EBECF0
statusBar.debuggingBackground#5EB563
statusBar.debuggingForeground#000
statusBar.foreground#000
statusBar.noFolderBackground#F7F8FA
statusBarItem.remoteBackground#F7F8FA
statusBarItem.remoteForeground#000
tab.activeBackground#F9FEF9
tab.activeBorder#005bc3
tab.activeForeground#000
tab.border#EBECF0
tab.hoverForeground#000
tab.inactiveBackground#F7F8FA
tab.inactiveForeground#777
terminal.ansiBlack#6e6e6e
terminal.ansiBlue#0087ff
terminal.ansiBrightBlack#1c1c1c
terminal.ansiBrightBlue#808080
terminal.ansiBrightCyan#8a8a8a
terminal.ansiBrightGreen#585858
terminal.ansiBrightMagenta#5f5faf
terminal.ansiBrightRed#d75f00
terminal.ansiBrightWhite#ffffd7
terminal.ansiBrightYellow#626262
terminal.ansiCyan#00afaf
terminal.ansiGreen#5f8700
terminal.ansiMagenta#af005f
terminal.ansiRed#d70000
terminal.ansiWhite#e4e4e4
terminal.ansiYellow#af8700
terminal.background#FFF
terminal.foreground#000000
titleBar.activeBackground#f7f8fa
titleBar.inactiveBackground#f7f8fa
tree.indentGuidesStroke#AEB3C2
widget.border#EBECF0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#333333ff	—
comment, punctuation.definition.comment	#AAAAAA	italic
comment.block.preprocessor	#AAAAAA
comment.documentation, comment.block.documentation	#448C27	—
invalid.deprecated	—	—
invalid.illegal	#ff0000	—
keyword.operator	#777777	—
keyword, storage	#000088	bold
storage.type, support.type	#000000
constant.language, support.constant, variable.language	#AB6526	—
variable, support.variable	#880088	bold
entity.name.function, support.function	#000000	—
entity.name.type, entity.other.inherited-class, support.class	#000000	—
entity.name.exception	#660000	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#AB6526	—
string	#008800	bold
constant.character.escape	#777777	—
string.regexp	#4B83CD	—
constant.other.symbol	#AB6526	—
punctuation	#777777	—
string source, text source	#000000	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#AAAAAA	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#2E2A2E	—
entity.name.tag	#1C4C8F	bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#0058D7	—
string.quoted.double.html	—
source.css	—
constant.character.entity, punctuation.definition.entity	#AB6526	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#7A3E9D	—
meta.property-name, support.type.property-name	#AB6526	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#448C27	—
keyword.other.important	—	bold
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#4B83CD	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#4B83CD	—
markup.bold, markup.italic	#448C27	—
markup.inline.raw	#AB6526
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#862F95	—
variable.language	#0042B6	bold
variable.other.object.js	#008D90
variable.other.object.property.js	—
variable.other.readwrite.js	—
variable.other.property.js	—
string.quoted.double.js	—
string.quoted.single.js	—
entity.name.function.js	#862F95	—
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.block.js, meta.method.declaration.js, meta.objectliteral.js	#862F95	—
entity.name.function.js	#7D7840	—
variable.parameter.js	#000000
keyword.operator.expression.delete.js	#0042B6
constant.language	#0042B6
storage.type.function.js	#0042B6
storage.type.js	#0042B6	bold

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