Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#1A1A1A
activityBar.foreground#F1F1F1
activityBarBadge.background#5C78FF
activityBarBadge.foreground#F1F1F1
badge.background#5C78FF
badge.foreground#F1F1F1
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
comment
#28B9FF
—
constant
#5EA2FF
—
entity.name
#5C78FF
—
keyword
#BA5AFF
—
storage
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Neon Dark High Contrast Theme — Neon Theme
button.background
#5C78FF
button.foreground#F1F1F1
diffEditor.insertedTextBackground#7129FF33
diffEditor.removedTextBackground#A52AFF33
dropdown.background#1A1A1A
dropdown.border#666666
editor.background#1A1A1A
editor.findMatchBackground#5C78FF
editor.findMatchHighlightBackground#5C78FF
editor.foreground#F1F1F1
editor.lineHighlightBackground#121212
editor.selectionBackground#FFFFFF33
editor.selectionHighlightBackground#FFFFFF33
editorCursor.foreground#FFFFFF
editorGroupHeader.tabsBackground#1A1A1A
editorHoverWidget.background#1A1A1A
editorHoverWidget.border#666666
editorIndentGuide.background1#666666
editorLineNumber.foreground#666666
editorLink.activeForeground#5C78FF
editorSuggestWidget.background#1A1A1A
editorSuggestWidget.border#666666
editorSuggestWidget.selectedBackground#5C78FF
editorWarning.foreground#BA5AFF
editorWhitespace.foreground#666666
editorWidget.background#1A1A1A
editorWidget.border#666666
focusBorder#5C78FF
foreground#F1F1F1
input.background#1A1A1A
input.border#666666
input.placeholderForeground#666666
list.activeSelectionBackground#5C78FF
list.activeSelectionForeground#F1F1F1
list.focusBackground#5C78FF
list.hoverBackground#121212
list.inactiveSelectionBackground#5C78FF
list.inactiveSelectionForeground#F1F1F1
list.warningForeground#BA5AFF
menu.background#1A1A1A
menu.foreground#F1F1F1
menu.selectionBackground#5C78FF
menu.selectionForeground#F1F1F1
menubar.selectionBackground#5C78FF
menubar.selectionForeground#F1F1F1
notificationCenterHeader.background#1A1A1A
panel.background#1A1A1A
panel.border#666666
panelTitle.activeBorder#5C78FF
peekViewEditor.background#1A1A1A
peekViewEditor.matchHighlightBackground#5C78FF
peekViewResult.background#1A1A1A
peekViewResult.matchHighlightBackground#5C78FF
pickerGroup.border#666666
scrollbar.shadow#000000
scrollbarSlider.activeBackground#5C78FF
scrollbarSlider.background#666666
scrollbarSlider.hoverBackground#5C78FF
sideBar.background#1A1A1A
sideBar.foreground#F1F1F1
sideBarSectionHeader.background#1A1A1A
statusBar.background#1A1A1A
statusBar.foreground#F1F1F1
statusBar.noFolderBackground#1A1A1A
statusBarItem.hoverBackground#5C78FF
tab.activeBackground#1A1A1A
tab.activeBorder#5C78FF
tab.activeForeground#F1F1F1
tab.border#666666
tab.inactiveBackground#1A1A1A
tab.inactiveForeground#666666
terminal.ansiBlack#121212
terminal.ansiBlue#2B4FFF
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#5C78FF
terminal.ansiBrightCyan#5AC8FF
terminal.ansiBrightGreen#905AFF
terminal.ansiBrightMagenta#5EA2FF
terminal.ansiBrightRed#BA5AFF
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#685AFF
terminal.ansiCyan#28B9FF
terminal.ansiGreen#7129FF
terminal.ansiMagenta#2883FF
terminal.ansiRed#A52AFF
terminal.ansiWhite#F1F1F1
terminal.ansiYellow#3D2AFF
#BA5AFF
—
string
#2883FF
—
support.function
#905AFF
—
variable
#F1F1F1
—
entity.other.inherited-class
#5C78FF
—
entity.other.attribute-name
#5C78FF
—
entity.other.attribute-name.id
#5C78FF
—
entity.other.attribute-name.class
#5C78FF
—
entity.other.attribute-name.pseudo-class
#5C78FF
—
entity.other.attribute-name.pseudo-element
#5C78FF
—
entity.other.attribute-name.parent-selector
#5C78FF
—
meta.selector
#5C78FF
—
meta.preprocessor
#BA5AFF
—
meta.preprocessor.string
#2883FF
—
meta.preprocessor.numeric
#2883FF
—
meta.diff
#BA5AFF
—
meta.diff.header
#BA5AFF
—
markup.heading
#5C78FF
—
markup.bold
—
bold
markup.italic
—
italic
markup.quote
#28B9FF
—
markup.list
#28B9FF
—
markup.raw
#28B9FF
—
markup.deleted
#BA5AFF
—
markup.inserted
#905AFF
—
markup.changed
#2883FF
—
punctuation.definition.comment
#28B9FF
—
punctuation.definition.string
#2883FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.list
#28B9FF
—
punctuation.definition.bold
#BA5AFF
—
punctuation.definition.italic
#BA5AFF
—
punctuation.definition.raw
#BA5AFF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.entity
#5C78FF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.inserted
#905AFF
—
punctuation.definition.deleted
#BA5AFF
—
punctuation.definition.changed
#2883FF
—
punctuation.definition.italic
#BA5AFF
—
punctuation.definition.bold
#BA5AFF
—
punctuation.definition.string
#2883FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.raw
#BA5AFF
—
punctuation.definition.entity
#5C78FF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.inserted
#905AFF
—
punctuation.definition.deleted
#BA5AFF
—
punctuation.definition.changed
#2883FF
—
punctuation.definition.italic
#BA5AFF
—
punctuation.definition.bold
#BA5AFF
—
punctuation.definition.string
#2883FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.raw
#BA5AFF
—
punctuation.definition.entity
#5C78FF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.inserted
#905AFF
—
punctuation.definition.deleted
#BA5AFF
—
punctuation.definition.changed
#2883FF
—
punctuation.definition.italic
#BA5AFF
—
punctuation.definition.string.begin
#2883FF
—
punctuation.definition.string.end
#2883FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.raw
#BA5AFF
—
punctuation.definition.entity
#5C78FF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.inserted
#905AFF
—
punctuation.definition.deleted
#BA5AFF
—
punctuation.definition.changed
#2883FF
—
punctuation.definition.italic
#BA5AFF
—
punctuation.definition.bold
#BA5AFF
—
punctuation.definition.string
#2883FF
—
punctuation.definition.variable
#F1F1F1
—
punctuation.definition.raw
#BA5AFF
—
punctuation.definition.entity
#5C78FF
—
punctuation.definition.heading
#5C78FF
—
punctuation.definition.inserted
#905AFF
—
punctuation.definition.deleted
#BA5AFF
—
punctuation.definition.changed
#2883FF
—
source
#F1F1F1
—
source.css
#F1F1F1
—
source.css.embedded
#F1F1F1
—
source.gfm
#F1F1F1
—
source.go
#F1F1F1
—
source.ini
#F1F1F1
—
source.java
#F1F1F1
—
source.js
#F1F1F1
—
source.json
#F1F1F1
—
source.json.comments
#28B9FF
—
source.less
#F1F1F1
—
source.php
#F1F1F1
—
source.python
#F1F1F1
—
source.ruby
#F1F1F1
—
source.sass
#F1F1F1
—
source.scss
#F1F1F1
—
source.shell
#F1F1F1
—
source.sql
#F1F1F1
—
source.toml
#F1F1F1
—
source.ts
#F1F1F1
—
source.tsx
#F1F1F1
—
source.yaml
#F1F1F1
—
source.yaml.comments
#28B9FF
—
source.coffee
#F1F1F1
—
source.coffee.embedded
#F1F1F1
—
source.css.less
#F1F1F1
—
source.css.scss
#F1F1F1
—
source.diff
#BA5AFF
—
source.diff.header
#BA5AFF
—
source.gfm
#F1F1F1
—
source.go
#F1F1F1
—
source.ini
#F1F1F1
—
source.java
#F1F1F1
—
source.js
#F1F1F1
—
source.json
#F1F1F1
—
source.json.comments
#28B9FF
—
source.less
#F1F1F1
—
source.php
#F1F1F1
—
source.python
#F1F1F1
—
source.ruby
#F1F1F1
—
source.sass
#F1F1F1
—
source.scss
#F1F1F1
—
source.shell
#F1F1F1
—
source.sql
#F1F1F1
—
source.toml
#F1F1F1
—
source.ts
#F1F1F1
—
source.tsx
#F1F1F1
—
source.yaml
#F1F1F1
—
source.yaml.comments
#28B9FF
—
source.coffee
#F1F1F1
—
source.coffee.embedded
#F1F1F1
—
source.css.less
#F1F1F1
—
source.css.scss
#F1F1F1
—
source.diff
#BA5AFF
—
source.diff.header
#BA5AFF
—
source.gfm
#F1F1F1
—
source.go
#F1F1F1
—
source.ini
#F1F1F1
—
source.java
#F1F1F1
—
source.js
#F1F1F1
—
source.json
#F1F1F1
—
source.json.comments
#28B9FF
—
source.less
#F1F1F1
—
source.php
#F1F1F1
—
source.python
#F1F1F1
—
source.ruby
#F1F1F1
—
source.sass
#F1F1F1
—
source.scss
#F1F1F1
—
source.shell
#F1F1F1
—
source.sql
#F1F1F1
—
source.toml
#F1F1F1
—
source.ts
#F1F1F1
—
source.tsx
#F1F1F1
—
source.yaml
#F1F1F1
—
source.yaml.comments
#28B9FF
—
source.coffee
#F1F1F1
—
source.coffee.embedded
#F1F1F1
—
source.css.less
#F1F1F1
—
source.css.scss
#F1F1F1
—
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}!`;}
3
fetchUser.ts
index.ts
README.md
srccomponentsfetchUser.tsfetchUser
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*
01
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
package.json
tsconfig.json
README.md
31
32
33
$
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}!`;}