Skip to main content
Home Theme VS Code JetBrains New UI Dark A VS Code theme inspired by IntelliJ IDEA New UI Dark, mainly tuned for Java.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #383a49 activityBar.activeBackground #4f5156 activityBar.activeBorder #4f5156 activityBar.activeFocusBorder #4f5156 activityBar.background #2b2d30 activityBar.border #1e1f22 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #808080 — punctuation.definition.comment.java, comment.block.javadoc.java, comment.line.number-sign.yaml #5F826B italic comment.line.double-slash.java punctuation.definition.comment.java, comment.block.java punctuation.definition.comment.java, comment.line.double-slash.java, comment.block.java #7A7E85 string.other.link.title.markdown, string.other.link.description.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
JetBrains New UI Dark — IDEA New UI Dark
activityBar.foreground
#ffffff
activityBar.inactiveForeground #cdd0d5
activityBarBadge.background #007ACC
activityBarBadge.foreground #ffffff
badge.background #4f5156
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #dfe1e5
breadcrumb.background #1e1f22
breadcrumb.focusForeground #dfe1e5
breadcrumb.foreground #9ea0a8
breadcrumbPicker.background #2b2d30
button.background #3574f0
button.border #4f5156
button.foreground #ffffff
button.hoverBackground #538af6
button.secondaryBackground #2b2d30
button.secondaryForeground #dfe1e5
button.secondaryHoverBackground #42454a
checkbox.border #6B6B6B
commandCenter.activeBackground #42454a
commandCenter.activeBorder #4f5156
commandCenter.activeForeground #dfe1e5
debugIcon.breakpointForeground #db5c5c
diffEditor.insertedLineBackground #3a60834d
diffEditor.insertedTextBackground #5faffa4d
diffEditor.removedLineBackground #6868684d
diffEditor.removedTextBackground #9094944d
diffEditorGutter.insertedLineBackground #283541
diffEditorGutter.removedLineBackground #373737
diffEditorOverview.insertedForeground #43698d
diffEditorOverview.removedForeground #656e76
dropdown.background #393b40
dropdown.border #4f5156
dropdown.foreground #dfe1e5
dropdown.listBackground #2b2d30
editor.background #1E1E1E
editor.findMatchBackground #214283
editor.findMatchBorder #cdd0d5
editor.findMatchHighlightBackground #1da6c94d
editor.findMatchHighlightBorder #155e70
editor.findRangeHighlightBackground #1e46844d
editor.foldBackground #7b7f8a4d
editor.foreground #D4D4D4
editor.inactiveSelectionBackground #3A3D41
editor.lineHighlightBackground #26282d
editor.selectionBackground #214283
editor.selectionHighlightBackground #ADD6FF26
editor.wordHighlightBackground #717c764d
editor.wordHighlightStrongBackground #8146534d
editorBracketMatch.background #42454a
editorBracketMatch.border #42454a
editorGroup.border #393b40
editorGroup.emptyBackground #2b2d30
editorGroupHeader.border #393b40
editorGroupHeader.noTabsBackground #1e1f22
editorGroupHeader.tabsBackground #1e1f22
editorGroupHeader.tabsBorder #393b40
editorGutter.addedBackground #549159
editorGutter.background #1e1f22
editorGutter.deletedBackground #868a91
editorGutter.foldingControlForeground #6f737a
editorGutter.modifiedBackground #375fad
editorHoverWidget.highlightForeground #538af6
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInlayHint.foreground #868a90
editorInlayHint.parameterBackground #2d2e32
editorInlayHint.typeBackground #2d2e3200
editorLightBulb.foreground #f2c55c
editorLightBulbAutoFix.foreground #e35252
editorLineNumber.activeForeground #9ea0a8
editorLineNumber.foreground #4b5059
editorLink.activeForeground #538af6
editorOverviewRuler.addedForeground #437151
editorOverviewRuler.currentContentForeground #437151
editorOverviewRuler.deletedForeground #656e76
editorOverviewRuler.errorForeground #d64d5b
editorOverviewRuler.findMatchForeground #16b5dd80
editorOverviewRuler.incomingContentForeground #43698d
editorOverviewRuler.infoForeground #3574f0
editorOverviewRuler.modifiedForeground #43698d
editorOverviewRuler.selectionHighlightForeground #678d7bcc
editorOverviewRuler.warningForeground #c29e49
editorOverviewRuler.wordHighlightForeground #678d7bcc
editorOverviewRuler.wordHighlightStrongForeground #e977a6cc
editorRuler.foreground #393b40
editorSuggestWidget.focusHighlightForeground #538af6
editorSuggestWidget.highlightForeground #538af6
editorSuggestWidget.selectedBackground #2e436e
editorUnnecessaryCode.opacity #00000066
editorWidget.background #2b2d30
editorWidget.border #42454a
editorWidget.foreground #dfe1e5
focusBorder #3574f0
gitDecoration.addedResourceForeground #629755
gitDecoration.conflictingResourceForeground #d5756c
gitDecoration.deletedResourceForeground #6c6c6c
gitDecoration.ignoredResourceForeground #848504
gitDecoration.modifiedResourceForeground #6897bb
gitDecoration.renamedResourceForeground #007c7c
gitDecoration.stageDeletedResourceForeground #6c6c6c
gitDecoration.stageModifiedResourceForeground #6897bb
gitDecoration.untrackedResourceForeground #d1675a
input.background #1e1f22
input.border #393b40
input.foreground #dfe1e5
input.placeholderForeground #A6A6A6
inputOption.activeBackground #36538f
inputOption.activeBorder #36538f
inputOption.activeForeground #cdd0d5
list.activeSelectionBackground #2e436e
list.activeSelectionForeground #dfe1e5
list.activeSelectionIconForeground #FFF
list.dropBackground #383B3D
list.focusAndSelectionOutline #2e436e
list.focusHighlightForeground #ba9752
list.highlightForeground #ba9752
list.hoverBackground #393b40
list.hoverForeground #ffffff
list.inactiveSelectionBackground #42454a
menu.background #252526
menu.border #454545
menu.foreground #CCCCCC
menu.selectionBackground #0078d4
menu.separatorBackground #454545
menubar.selectionBackground #404144
menubar.selectionForeground #dfe1e5
merge.currentContentBackground #3377544d
merge.currentHeaderBackground #6ee0934d
merge.incomingContentBackground #3a60834d
merge.incomingHeaderBackground #5faffa4d
mergeEditor.change.background #2e2626
mergeEditor.change.word.background #45302b
minimap.errorHighlight #d64d5b
minimap.findMatchHighlight #16b5dd80
minimap.infoHighlight #3574f0
minimap.selectionHighlight #1e4684cc
minimap.selectionOccurrenceHighlight #678d7bcc
minimap.warningHighlight #c29e49
minimapGutter.addedBackground #437151
minimapGutter.deletedBackground #656e76
minimapGutter.modifiedBackground #43698d
minimapSlider.activeBackground #535455a6
minimapSlider.background #3f4043a6
minimapSlider.hoverBackground #535455a6
notificationCenterHeader.background #2b2d30
notificationCenterHeader.foreground #dfe1e5
notificationLink.foreground #6a9bfa
notifications.background #393b40
notifications.border #1e1f22
notifications.foreground #dfe1e5
notificationsErrorIcon.foreground #d64d5b
notificationsInfoIcon.foreground #3574f0
notificationsWarningIcon.foreground #c29e49
notificationToast.border #42454a
panel.background #2b2d30
panel.border #1e1f22
panelTitle.activeBorder #3574f0
panelTitle.activeForeground #dfe1e5
panelTitle.inactiveForeground #9ea0a8
peekView.border #42454a
peekViewEditor.background #1e1f22
peekViewEditor.matchHighlightBackground #2d543f
peekViewResult.background #2b2d30
peekViewResult.fileForeground #dfe1e5
peekViewResult.lineForeground #bcbec3
peekViewResult.matchHighlightBackground #124957
peekViewResult.selectionBackground #2e436e
peekViewResult.selectionForeground #dfe1e5
peekViewTitle.background #393b40
peekViewTitleDescription.foreground #6f737a
peekViewTitleLabel.foreground #dfe1e5
pickerGroup.border #393b40
pickerGroup.foreground #6a9bfa
ports.iconRunningProcessForeground #369432
problemsErrorIcon.foreground #d64d5b
problemsInfoIcon.foreground #3574f0
problemsWarningIcon.foreground #c29e49
quickInputList.focusBackground #2e436e
scrollbarSlider.activeBackground #535455a6
scrollbarSlider.background #3f4043a6
scrollbarSlider.hoverBackground #535455a6
searchEditor.findMatchBackground #2d543f
searchEditor.findMatchBorder #2d543f
settings.checkboxBackground #3574f0
settings.checkboxBorder #3574f0
settings.checkboxForeground #ffffff
settings.dropdownBackground #393b40
settings.dropdownBorder #4f5156
settings.dropdownForeground #dfe1e5
settings.modifiedItemIndicator #2e436e
settings.numberInputBackground #2b2d30
settings.numberInputBorder #4f5156
settings.numberInputForeground #dfe1e5
settings.textInputBackground #2b2d30
settings.textInputBorder #4f5156
settings.textInputForeground #dfe1e5
sideBar.background #2b2d30
sideBar.border #1e1f22
sideBar.foreground #dfe1e5
sideBarSectionHeader.background #0000
sideBarSectionHeader.border #ccc3
sideBarSectionHeader.foreground #dfe1e5
sideBarTitle.foreground #BBBBBB
statusBar.background #2b2d30
statusBar.border #1e1f22
statusBar.debuggingBackground #2b2d30
statusBar.debuggingBorder #1e1f22
statusBar.debuggingForeground #9ea0a8
statusBar.foreground #9ea0a8
statusBar.noFolderBackground #2b2d30
statusBar.noFolderBorder #1e1f22
statusBar.noFolderForeground #9ea0a8
statusBarItem.activeBackground #42454a
statusBarItem.errorBackground #d64d5b
statusBarItem.errorHoverForeground #ffffff
statusBarItem.remoteBackground #16825D
statusBarItem.remoteForeground #FFF
statusBarItem.warningBackground #c29e49
statusBarItem.warningHoverForeground #ffffff
tab.activeBackground #1e1f22
tab.activeBorder #3574f0
tab.activeForeground #dfe1e5
tab.activeModifiedBorder #3574f0
tab.border #1e1f22
tab.hoverBackground #1e1f22
tab.hoverForeground #dfe1e5
tab.inactiveBackground #1e1f22
tab.inactiveForeground #bbbdc0
tab.inactiveModifiedBorder #5b5d62
tab.lastPinnedBorder #ccc3
tab.selectedBackground #222222
tab.selectedForeground #ffffffa0
tab.unfocusedActiveBackground #1e1f22
tab.unfocusedActiveBorder #5b5d62
tab.unfocusedActiveForeground #bbbdc0
tab.unfocusedActiveModifiedBorder #3574f0
tab.unfocusedHoverBackground #1e1f22
tab.unfocusedHoverForeground #dfe1e5
tab.unfocusedInactiveBackground #1e1f22
tab.unfocusedInactiveForeground #bbbdc0
tab.unfocusedInactiveModifiedBorder #5b5d62
terminal.background #1e1f22
terminal.border #2b2d30
terminal.foreground #bcbec3
terminal.inactiveSelectionBackground #3A3D41
textLink.activeForeground #538af6
textLink.foreground #6a9bfa
titleBar.activeBackground #2b2d30
titleBar.inactiveBackground #2b2d30
welcomePage.background #1e1f22
welcomePage.tileBackground #2b2d30
welcomePage.tileHoverBackground #393b40
widget.border #303031 #287BDE
markup.underline.link.markdown, markup.underline.link.image.markdown #FFC66D italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, string.other.link.description.title.markdown, punctuation.separator.key-value.java-properties #808080 —
entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml, variable.language.documentroot.xml #BABABA —
entity.name.tag.localname.xml, entity.name.tag.xml, keyword.other.doctype.xml, punctuation.definition.tag.xml #E8BF6A —
constant.character.entity.xml #6D9CBE —
entity.name.type.class.java, entity.name.type.enum.java, entity.other.inherited-class.java, storage.type.java, variable.other.object.java, storage.type.generic.java, storage.type.object.array.java, variable.other.definition.java, entity.name.function.java, meta.embedded.block, source.editorconfig punctuation.definition.brace, source.editorconfig keyword.operator #A9B7C6
support.type.property-name.json, entity.name.tag.namespace.xml, entity.other.attribute-name.namespace.xml, source.editorconfig keyword.other.definition #9876AA —
constant.other.enum.java, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #9876AA italic
punctuation.definition.annotation.java, storage.type.annotation.java #BBB529 —
comment.block.javadoc.java variable.parameter.java #8A653B —
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, constant.language.json, entity.name.tag.yaml, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, constant.other.reference.link.markdown, storage.modifier.java, storage.modifier.extends.java, storage.modifier.super.java, storage.modifier.implements.java, storage.type.primitive.java, storage.type.primitive.array.java, constant.language.java, keyword.other.import.java, keyword.other.package.java, keyword.control.java, keyword.control.new.java, keyword.control.try.java, keyword.control.catch.java, keyword.control.finally.java, keyword.control.throw.java, keyword.operator.instanceof.java, variable.language.java, variable.language.this.java, variable.other.object.property.java, punctuation.separator.delimiter.java, punctuation.terminator.java, constant.character.escape, entity.name.section.group-title.editorconfig, support.constant.java-properties #CF8E6D —
string.quoted.double, string.quoted.single, markup.quote.markdown, source.editorconfig constant.language, source.editorconfig constant.numeric, string.unquoted.java-properties #6AAB73 —
punctuation.definition.comment.java, comment.block.javadoc.java, comment.line.number-sign.yaml #5F826B italic
comment.line.double-slash.java punctuation.definition.comment.java, comment.block.java punctuation.definition.comment.java, comment.line.double-slash.java, comment.block.java #7A7E85
string.other.link.title.markdown, string.other.link.description.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown #287BDE underline
markup.underline.link.markdown, markup.underline.link.image.markdown #FFC66D italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, string.other.link.description.title.markdown, punctuation.separator.key-value.java-properties #808080 —
entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml, variable.language.documentroot.xml #BABABA —
entity.name.tag.localname.xml, entity.name.tag.xml, keyword.other.doctype.xml, punctuation.definition.tag.xml #E8BF6A —
constant.character.entity.xml #6D9CBE —
entity.name.type.class.java, entity.name.type.enum.java, entity.other.inherited-class.java, storage.type.java, variable.other.object.java, storage.type.generic.java, storage.type.object.array.java, variable.other.definition.java, entity.name.function.java, meta.embedded.block, source.editorconfig punctuation.definition.brace, source.editorconfig keyword.operator #A9B7C6
support.type.property-name.json, entity.name.tag.namespace.xml, entity.other.attribute-name.namespace.xml, source.editorconfig keyword.other.definition #9876AA —
constant.other.enum.java, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #9876AA italic
punctuation.definition.annotation.java, storage.type.annotation.java #BBB529 —
comment.block.javadoc.java variable.parameter.java #8A653B —
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, constant.language.json, entity.name.tag.yaml, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, constant.other.reference.link.markdown, storage.modifier.java, storage.modifier.extends.java, storage.modifier.super.java, storage.modifier.implements.java, storage.type.primitive.java, storage.type.primitive.array.java, constant.language.java, keyword.other.import.java, keyword.other.package.java, keyword.control.java, keyword.control.new.java, keyword.control.try.java, keyword.control.catch.java, keyword.control.finally.java, keyword.control.throw.java, keyword.operator.instanceof.java, variable.language.java, variable.language.this.java, variable.other.object.property.java, punctuation.separator.delimiter.java, punctuation.terminator.java, constant.character.escape, entity.name.section.group-title.editorconfig, support.constant.java-properties #CF8E6D —
string.quoted.double, string.quoted.single, markup.quote.markdown, source.editorconfig constant.language, source.editorconfig constant.numeric, string.unquoted.java-properties #6AAB73 —
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python #D4D4D4 —
constant.language #569cd6 —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #b5cea8 —
entity.name.tag.css, entity.name.tag.less #d7ba7d —
entity.other.attribute-name #9cdcfe —
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #d7ba7d —
markup.underline — underline
markup.heading #569cd6 bold
markup.strikethrough — strikethrough
punctuation.definition.quote.begin.markdown #6A9955 —
punctuation.definition.list.begin.markdown #6796e6 —
markup.inline.raw #ce9178 —
punctuation.definition.tag #808080 —
meta.preprocessor, entity.name.function.preprocessor #569cd6 —
meta.preprocessor.string #ce9178 —
meta.preprocessor.numeric #b5cea8 —
meta.structure.dictionary.key.python #9cdcfe —
storage.modifier, keyword.operator.noexcept #569cd6 —
string, meta.embedded.assembly #ce9178 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #569cd6 —
meta.template.expression #d4d4d4 —
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded #9cdcfe —
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 #569cd6 —
keyword.other.unit #b5cea8 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #569cd6 —
support.function.git-rebase #9cdcfe —
constant.sha.git-rebase #b5cea8 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #d4d4d4 —
variable.language #569cd6 —
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 } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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...
~/my-project
main*
Button.tsx
31
$
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 } !` ;
}
JetBrains New UI Dark | Coding Theme