Nyx Theme Suite

Name: Nyx Theme Suite
Author: Pratik Ranjan

Publisher: Pratik RanjanThemes in package: 6

A premium, minimalist dark theme suite ported from IntelliJ True Dark, with OLED black and clean light variants.

Open in VS Code GitHub

Color themes

VS Code preview

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

Nyx Theme Suite — Nyx Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#121212
activityBar.border#1E1E1E
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff66
activityBarBadge.background#3B82F6
activityBarBadge.foreground#ffffff
button.background#3B82F6
button.foreground#ffffff
button.hoverBackground#60A5FA
editor.background#121212
editor.foreground#dfdfe0
editor.inactiveSelectionBackground#ffffff11
editor.lineHighlightBackground#1C1C1C
editor.lineHighlightBorder#ffffff00
editor.selectionBackground#2a3a5c
editorCursor.foreground#dfdfe0
editorGroupHeader.tabsBackground#121212
editorGroupHeader.tabsBorder#1E1E1E
editorLineNumber.activeForeground#3B82F6
editorLineNumber.foreground#5a6577
focusBorder#3B82F6
foreground#dfdfe0
input.background#121212
input.border#1E1E1E
input.foreground#dfdfe0
list.activeSelectionBackground#2D2D2D
list.activeSelectionForeground#ffffff
list.hoverBackground#1F1F1F
list.inactiveSelectionBackground#1F1F1F
list.inactiveSelectionForeground#dfdfe0
menu.background#121212
menu.foreground#dfdfe0
menu.separatorBackground#1E1E1E
panel.background#121212
panel.border#1E1E1E
panelTitle.activeForeground#3B82F6
panelTitle.inactiveForeground#ffffff66
scrollbarSlider.activeBackground#3B82F680
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
sideBar.background#121212
sideBar.border#1E1E1E
sideBar.foreground#dfdfe0
sideBarSectionHeader.background#121212
sideBarSectionHeader.border#1E1E1E
sideBarSectionHeader.foreground#dfdfe0
sideBarTitle.foreground#dfdfe0
statusBar.background#121212
statusBar.border#1E1E1E
statusBar.foreground#dfdfe0
tab.activeBackground#121212
tab.activeBorder#3B82F6
tab.activeForeground#ffffff
tab.border#1E1E1E
tab.inactiveBackground#121212
tab.inactiveForeground#ffffff66
titleBar.activeBackground#121212
titleBar.activeForeground#dfdfe0
titleBar.border#1E1E1E
titleBar.inactiveBackground#121212
widget.border#1E1E1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, unused.comment	#7f8c98	italic
keyword, storage.type, storage.modifier, keyword.control	#ff7ab2	bold
string, punctuation.definition.string	#ff8170	—
constant.numeric, keyword.other.unit	#d9c97c	bold
constant.language, constant.character, support.constant, variable.other.constant	#b281eb	bold
constant.character.escape, constant.escape	#acf2e4	bold
entity.name.function, support.function	#5ac8db	bold
meta.function-call, variable.function	#78c2b3	—
entity.name.type.class, entity.name.class, support.class	#6bdfff	bold
entity.name.type.interface, support.type	#dabaff	italic
entity.name.namespace, entity.name.package	#78c2b3	—
variable.other.property, support.type.property-name, variable.other.object.property	#5ac8db	—
meta.annotation, entity.name.type.annotation, entity.other.attribute-name, meta.decorator	#dabaff	bold
entity.name.tag, punctuation.definition.tag	#ff7ab2	bold