JetBrains Dark New UI

Name: JetBrains Dark New UI
Author: JimmyN

Publisher: JimmyNThemes in package: 1

A theme for Visual Studio Code that resembles the new JetBrains Dark UI theme

Open in VS Code GitHub

VS Code preview

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

JetBrains Dark New UI — JetBrains Dark New UI

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.activeBorder#0078d4
activityBar.background#2b2d30
activityBar.border#ffffff15
activityBar.foreground#d7d7d7
activityBar.inactiveForeground#ffffff80
activityBarBadge.background#0078d4
activityBarBadge.foreground#ffffff
badge.background#0078d4
badge.foreground#ffffff
button.background#0078d4
button.border#ffffff12
button.foreground#ffffff
button.hoverBackground#0078d4e6
button.secondaryBackground#ffffff0f
button.secondaryForeground#bcbec4
button.secondaryHoverBackground#ffffff15
checkbox.background#313131
checkbox.border#ffffff1f
debugToolBar.background#2b2d30
descriptionForeground#8b949e
diffEditor.insertedLineBackground#23863633
diffEditor.insertedTextBackground#2386364d
diffEditor.removedLineBackground#da363333
diffEditor.removedTextBackground#da36334d
dropdown.background#313131
dropdown.border#ffffff1f
dropdown.foreground#bcbec4
dropdown.listBackground#313131
editor.background#1e1f22
editor.findMatchBackground#9e6a03
editor.foreground#bcbec4
editor.inactiveSelectionBackground#3a3d41
editor.selectionHighlightBackground#add6ff26
editorGroup.border#ffffff17
editorGroupHeader.tabsBackground#2b2d30
editorGroupHeader.tabsBorder#ffffff15
editorGutter.addedBackground#2ea043
editorGutter.deletedBackground#f85149
editorGutter.modifiedBackground#0078d4
editorIndentGuide.activeBackground#707070
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background#404040
editorIndentGuide.background1#404040
editorInlayHint.background#8b949e33
editorInlayHint.foreground#8b949e
editorInlayHint.typeBackground#8b949e33
editorInlayHint.typeForeground#8b949e
editorLineNumber.activeForeground#bcbec4
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWidget.background#1e1f22
errorForeground#f85149
focusBorder#0078d4
foreground#bcbec4
icon.foreground#bcbec4
input.background#2a2a2a
input.border#ffffff1f
input.foreground#bcbec4
input.placeholderForeground#ffffff79
inputOption.activeBackground#2489db82
inputOption.activeBorder#2488db
keybindingLabel.foreground#bcbec4
list.activeSelectionBackground#2e436e
list.activeSelectionForeground#dfe1e5
list.activeSelectionIconForeground#ffffff
list.dropBackground#383b3d
list.focusOutline#2e436e
list.hoverBackground#2b2d30
list.inactiveSelectionForeground#dfe1e5
list.warningForeground#6aab73
menu.background#1e1f22
menu.border#454545
menu.foreground#bcbec4
menu.separatorBackground#454545
notificationCenterHeader.background#1e1f22
notificationCenterHeader.foreground#bcbec4
notifications.background#1e1f22
notifications.border#ffffff15
notifications.foreground#bcbec4
panel.background#1e1f22
panel.border#ffffff15
panelInput.border#ffffff15
panelSectionHeader.background#1e1f22
panelStickyScroll.background#2b2d30
panelTitle.activeBorder#0078d4
panelTitle.activeForeground#bcbec4
panelTitle.inactiveForeground#8b949e
peekViewEditor.background#1e1f22
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#1e1f22
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#ffffff15
pickerGroup.foreground#8b949e
ports.iconRunningProcessForeground#369432
progressBar.background#0078d4
quickInput.background#1e1f22
quickInput.foreground#bcbec4
scrollbar.shadow#484f5833
scrollbarSlider.activeBackground#6e768187
scrollbarSlider.background#6e768133
scrollbarSlider.hoverBackground#6e768145
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff1f
settings.headerForeground#ffffff
settings.modifiedItemIndicator#bb800966
sideBar.background#2b2d30
sideBar.border#ffffff15
sideBar.foreground#bcbec4
sideBarSectionHeader.background#1e1f22
sideBarSectionHeader.border#ffffff15
sideBarSectionHeader.foreground#bcbec4
sideBarTitle.foreground#bcbec4
statusBar.background#2b2d30
statusBar.border#ffffff15
statusBar.debuggingBackground#0078d4
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0078d4
statusBar.foreground#bcbec4
statusBar.noFolderBackground#1e1f22
statusBarItem.focusBorder#0078d4
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#0078d4
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1e1f22
tab.activeBorder#1e1f22
tab.activeBorderTop#0078d4
tab.activeForeground#ffffff
tab.border#ffffff15
tab.hoverBackground#1e1f22
tab.inactiveBackground#1e1f22
tab.inactiveForeground#ffffff80
tab.lastPinnedBorder#cccccc33
tab.unfocusedActiveBorder#1e1f22
tab.unfocusedActiveBorderTop#ffffff15
tab.unfocusedHoverBackground#6e76811a
terminal.background#1e1f22
terminal.foreground#bcbec4
terminal.inactiveSelectionBackground#3a3d41
terminal.tab.activeBorder#0078d4
textBlockQuote.background#010409
textBlockQuote.border#ffffff14
textCodeBlock.background#6e768166
textLink.activeForeground#40a6ff
textLink.foreground#40a6ff
textSeparator.foreground#21262d
titleBar.activeBackground#2b2d30
titleBar.activeForeground#bcbec4
titleBar.border#ffffff15
titleBar.inactiveBackground#1e1f22
titleBar.inactiveForeground#8b949e
toolbar.activeBackground#2b2d30
widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, meta.structure.dictionary.key.python, meta.template.expression, support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded, support.type.graphql, support.type.enum.graphql, support.type.builtin.graphql, keyword.operator, support.function.git-rebase, storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java, variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, entity.name.type.interface.ts, entity.name.type.class.ts, entity.name.type.ts	#BCBEC4	—
comment, string.quoted.docstring	#7A7E85	—
constant.language, entity.name.tag, markup.bold, markup.heading, meta.preprocessor, entity.name.function.preprocessor, meta.diff.header, storage, storage.type, storage.modifier, keyword.operator.noexcept, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.language, constant.character, constant.other.option, support.type, variable.key.dotenv	#CF8E6D	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, constant.sha.git-rebase, keyword.other.unit	#2AACB8	—
string, meta.embedded.assembly, string.tag, string.value, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, comment.line.graphql.js, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp, keyword.other.unit, punctuation.separator.key-value.html, meta.tag.attributes keyword.operator.assignment, property.value.dotenv	#6AAB73	—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss, keyword.operator.quantifier.regexp, constant.character.escape, variable.argument.css, punctuation.definition.tag, entity.name.tag, support.function.misc, meta.function.variable.css, meta.property-value.css support.function, meta.selector.css, entity.other.attribute-name.css	#D5B778	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, keyword.operator.or.regexp, keyword.control.anchor.regexp	#66A6FF	—
support.class, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, meta.tag.custom entity.name.tag.html	#2FBAA3	—
variable.other.constant, variable.other.enummember, support.type.property-name.json, variable.other.property, entity.other.attribute-name, meta.object-literal.key, variable.object.property.ts, constant.character.enum.graphql, variable.graphql	#C77DBB	—
comment.block.documentation, comment.block.javadoc	#5F826B	—
entity.name.function.directive.graphql	#B2AD60	—
emphasis	—	italic
strong	—	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
header	#000080	—
constant.regexp	#646695	—
invalid	#FA6675	—
markup.inserted	#2AACB8	—
markup.deleted	#6AAB73	—
markup.changed	#CF8E6D	—
string.regexp	#D16969	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#D16969	—
entity.name.label	#C8C8C8	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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