Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #252622 activityBar.foreground #f8f8f0 activityBarBadge.background #007acc activityBarBadge.foreground #11120f badge.background #40C4FF badge.foreground #11120f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #ffffff66 — string #FFFF00 — punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts #FF5252 — string.template.js #FFFF00 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Neutron Theme — Neutron Theme
button.background
#B2FF59
button.foreground #11120f
button.hoverBackground #40C4FF
diffEditor.insertedTextBackground #00809B33
dropdown.background #1b1c18
dropdown.border #ffffff22
dropdown.foreground #ffffff99
editor.background #1b1c18
editor.findMatchBackground #40c3ff66
editor.findMatchHighlightBackground #ffffff22
editor.foreground #eeffff
editor.hoverHighlightBackground #ffffff22
editor.inactiveSelectionBackground #ffffff22
editor.lineHighlightBackground #ffffff22
editor.selectionBackground #40c3ff66
editor.selectionHighlightBackground #ffffff22
editor.wordHighlightBackground #ff000000
editorCodeLens.foreground #ffffff66
editorCursor.foreground #f8f8f0
editorError.foreground #FF5252
editorGroup.border #1b1c18
editorGroup.emptyBackground #1b1c18
editorGroupHeader.tabsBackground #252622
editorGutter.addedBackground #B2FF59
editorGutter.deletedBackground #FF5252
editorGutter.modifiedBackground #40C4FF
editorHoverWidget.background #252622
editorHoverWidget.border #252622
editorIndentGuide.background #ffffff22
editorLineNumber.foreground #ffffff33
editorLink.activeForeground #40C4FF
editorOverviewRuler.addedForeground #B2FF5900
editorOverviewRuler.border #ff000000
editorOverviewRuler.bracketMatchForeground #40C4FF00
editorOverviewRuler.deletedForeground #E040FB00
editorOverviewRuler.errorForeground #FF5252
editorOverviewRuler.infoForeground #FFFF0000
editorOverviewRuler.modifiedForeground #40C4FF00
editorOverviewRuler.warningForeground #FFAB40
editorRuler.foreground #ffffff66
editorSuggestWidget.background #252622
editorSuggestWidget.border #252622
editorSuggestWidget.foreground #f8f8f0
editorSuggestWidget.highlightForeground #40C4FF
editorSuggestWidget.selectedBackground #2c313a
editorWarning.foreground #FFAB40
editorWhitespace.foreground #ffffff66
editorWidget.background #252622
editorWidget.border #40C4FE00
errorForeground #FF5252
extensionButton.prominentBackground #B2FF59
extensionButton.prominentForeground #1b1c18
extensionButton.prominentHoverBackground #40C4FF
focusBorder #40C4FF
input.background #1b1c18
input.border #252622
input.foreground #f8f8f0
input.placeholderForeground #ffffff66
inputOption.activeBackground #00000000
inputOption.activeBorder #40C4FF
inputValidation.errorBackground #1b1c18
inputValidation.errorBorder #FF5252
inputValidation.infoBackground #1b1c18
inputValidation.infoBorder #FFFF00
inputValidation.warningBackground #1b1c18
inputValidation.warningBorder #FFAB40
list.activeSelectionBackground #40c3ff66
list.activeSelectionForeground #f8f8f0
list.errorForeground #FF5252
list.focusBackground #ffffff22
list.focusForeground #f8f8f0
list.highlightForeground #40C4FF
list.hoverBackground #ffffff22
list.inactiveSelectionBackground #ffffff22
list.inactiveSelectionForeground #f8f8f0
list.warningForeground #FFAB40
panel.background #11120f
panel.border #11120f
panelTitle.activeBorder #40C4FF
pickerGroup.border #40c3ff00
pickerGroup.foreground #40C4FF
progressBar.background #B2FF59
scrollbar.shadow #ff000000
scrollbarSlider.activeBackground #ffffff99
scrollbarSlider.background #ffffff33
scrollbarSlider.hoverBackground #ffffff66
sideBar.background #11120f
sideBar.foreground #ffffff99
sideBarSectionHeader.background #252622
sideBarSectionHeader.foreground #f8f8f0
sideBarTitle.foreground #f8f8f0
statusBar.background #252622
statusBar.debuggingBackground #252622
statusBar.foreground #ffffff99
statusBar.noFolderBackground #252622
statusBarItem.hoverBackground #ffffff33
tab.activeBackground #222421
tab.activeBorder #40C4FF
tab.activeForeground #f8f8f0
tab.border #ffffff00
tab.hoverBackground #ffffff22
tab.inactiveBackground #11120f
tab.inactiveForeground #ffffffAA
terminal.background #11120f
titleBar.activeBackground #252622
titleBar.activeForeground #ffffff99
titleBar.inactiveBackground #252622
titleBar.inactiveForeground #ffffff99
widget.shadow #00000000 meta.template.expression.js
string.embedded.begin, string.embedded.end #FFAB40 —
constant.language #FFAB40 —
constant.character, constant.other #FFAB40 —
variable.language #FFAB40 —
variable.readwrite, variable.readwrite.other.block #FF5252 —
entity.name.variable, entity.name.variable.local, meta.object-literal.key, variable.object.constant, variable.object.property, variable.other.alias, variable.other.constant, variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, support.variable #f8f8f0 —
keyword.other.base, keyword.other.this, variable.other.object.property, variable.language.base, variable.language.this #40C4FF —
support.variable.UnityEngine #40C4FF —
support.variable.UnityEditor #40C4FF —
keyword, keyword.operator.logical, keyword.operator.constructor #FF5252 —
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #40C4FF —
variable.other.property, variable.other.block #40C4FF —
entity.other.inherited-class #B2FF59 —
entity.name.function, support.function #B2FF59 —
variable.parameter #FFAB40 —
entity.name.function-call #f8f8f0 —
function.support.builtin, function.support.core #B2FF59 —
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx #FF5252 —
entity.name.tag.class, entity.name.tag.id #E040FB —
entity.other.attribute-name #B2FF59 —
support.type, support.variable #E040FB —
support.dictionary.json #FF5252 —
source.json meta.structure.dictionary.json string.quoted.double.json punctuation.definition.string #FF5252 —
source.json string.quoted.double.json #f8f8f0 —
source.json meta.structure.dictionary.json support.type.property-name.json #FF5252 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFAB40 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #B2FF59 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #40C4FF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E040FB —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFAB40 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #B2FF59 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #40C4FF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #E040FB —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #40C4FF —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #B2FF59 —
variable.css, variable.scss, variable.less, variable.sass #E040FB —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #FFFF00 —
unit.css, unit.scss, unit.less, unit.sass #FFAB40 —
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass #FFAB40 —
function.css, function.scss, function.less, function.sass #B2FF59 —
support.other.variable #40C4FF
invalid.deprecated #f8f8f0 —
string.detected-link #40C4FF —
meta.diff, meta.diff.header #40C4FF —
constant.numeric.line-number.find-in-files - match #40C4FFA0 —
entity.name.filename.find-in-files #FFFF00 —
punctuation.definition.normal.markdown #696969 —
markup.underline.link.markdown #40C4FF —
markup.bold.markdown — bold
punctuation.definition.bold.markdown #919191 —
markup.heading.markdown #FF5252 bold
punctuation.definition.heading.markdown #919191 —
markup.quote.markdown #B2FF59 —
meta.separator.markdown #FF5252 bold
markup.raw.inline.markdown, markup.raw.block.markdown #40C4FF —
punctuation.definition.list_item.markdown #f8f8f0 bold
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*
Neutron Theme | Coding Theme
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 } !` ;
}