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 #282c34 activityBar.foreground #d8dee9 activityBarBadge.background #d08770 activityBarBadge.foreground #282c34 badge.background #d08770 badge.foreground #282c34 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #A7ADBA — string #99c794 — punctuation.definition #5fb3b3 — constant.numeric #f9ae58 — constant.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Ultimate Dark Plus Neo — Ultimate Dark + Neo
button.background
#474f5f
button.foreground #d8dee9
button.hoverBackground #4c566a
debugExceptionWidget.background #4c566a
debugExceptionWidget.border #282c34
debugToolBar.background #414955
diffEditor.insertedTextBackground #a3be8c4d
diffEditor.insertedTextBorder #a3be8c4d
diffEditor.removedTextBackground #bf616a4d
diffEditor.removedTextBorder #bf616a4d
dropdown.background #414955
dropdown.border #414955
dropdown.foreground #d8dee9
editor.background #282c34
editor.findMatchBackground #88c0d066
editor.findMatchHighlightBackground #88c0d033
editor.findRangeHighlightBackground #88c0d033
editor.foreground #d8dee9
editor.hoverHighlightBackground #414955
editor.inactiveSelectionBackground #474f5fcc
editor.lineHighlightBackground #474f5f52
editor.lineHighlightBorder #474f5f52
editor.rangeHighlightBackground #474f5f52
editor.selectionBackground #474f5fcc
editor.selectionHighlightBackground #474f5fcc
editor.wordHighlightBackground #81a1c166
editor.wordHighlightStrongBackground #81a1c199
editorBracketMatch.background #2e344000
editorBracketMatch.border #d08770
editorCodeLens.foreground #4c566a
editorCursor.foreground #d8dee9
editorError.border #bf616a00
editorError.foreground #bf616a
editorGroup.border #41495500
editorGroup.dropBackground #41495599
editorGroupHeader.noTabsBackground #282c34
editorGroupHeader.tabsBackground #282c34
editorGroupHeader.tabsBorder #41495500
editorGutter.addedBackground #99c794
editorGutter.background #282c34
editorGutter.deletedBackground #bf616a
editorGutter.modifiedBackground #ebcb8b
editorHoverWidget.background #414955
editorHoverWidget.border #414955
editorIndentGuide.background #474f5fb3
editorLineNumber.foreground #d8dee966
editorLink.activeForeground #d08770
editorMarkerNavigation.background #5e81acc0
editorMarkerNavigationError.background #bf616ac0
editorMarkerNavigationWarning.background #ebcb8bc0
editorOverviewRuler.addedForeground #99c794
editorOverviewRuler.border #414955
editorOverviewRuler.currentContentForeground #414955
editorOverviewRuler.deletedForeground #bf616a
editorOverviewRuler.errorForeground #bf616a
editorOverviewRuler.findMatchForeground #88c0d066
editorOverviewRuler.incomingContentForeground #414955
editorOverviewRuler.infoForeground #6699cc
editorOverviewRuler.modifiedForeground #ebcb8b
editorOverviewRuler.rangeHighlightForeground #88c0d066
editorOverviewRuler.selectionHighlightForeground #88c0d066
editorOverviewRuler.warningForeground #ebcb8b
editorOverviewRuler.wordHighlightForeground #88c0d066
editorOverviewRuler.wordHighlightStrongForeground #88c0d066
editorRuler.foreground #474f5f
editorSuggestWidget.background #3b4046
editorSuggestWidget.border #414955
editorSuggestWidget.foreground #d8dee9
editorSuggestWidget.highlightForeground #d08770
editorSuggestWidget.selectedBackground #474f5f
editorSuggestWidget.selectedForeground #d8dee9
editorWarning.border #ebcb8b00
editorWarning.foreground #ebcb8b
editorWhitespace.foreground #4c566ab3
editorWidget.background #282c34
errorForeground #bf616a
extensionButton.prominentBackground #474f5f
extensionButton.prominentForeground #d8dee9
extensionButton.prominentHoverBackground #4c566a
focusBorder #414955
foreground #d8dee9
input.background #414955
input.border #414955
input.foreground #d8dee9
input.placeholderForeground #d8dee999
inputOption.activeBorder #d08770
inputValidation.errorBackground #bf616a
inputValidation.errorBorder #bf616a
inputValidation.infoBackground #6699cc
inputValidation.infoBorder #6699cc
inputValidation.warningBackground #d08770
inputValidation.warningBorder #d08770
list.activeSelectionBackground #d08770
list.activeSelectionForeground #282c34
list.dropBackground #88c0d099
list.focusBackground #88c0d099
list.focusForeground #d8dee9
list.highlightForeground #d08770
list.hoverBackground #414955
list.hoverForeground #eceff4
list.inactiveSelectionBackground #474f5f
list.inactiveSelectionForeground #d8dee9
merge.border #41495500
merge.currentContentBackground #81a1c14d
merge.currentHeaderBackground #81a1c166
merge.incomingContentBackground #8fbcbb4d
merge.incomingHeaderBackground #8fbcbb66
panel.background #282c34
panel.border #414955
panelTitle.activeBorder #88c0d000
panelTitle.activeForeground #d08770
panelTitle.inactiveForeground #d8dee9
peekView.border #4c566a
peekViewEditor.background #282c34
peekViewEditor.matchHighlightBackground #88c0d0cc
peekViewEditorGutter.background #282c34
peekViewResult.background #282c34
peekViewResult.fileForeground #d08770
peekViewResult.lineForeground #d8dee966
peekViewResult.matchHighlightBackground #88c0d0cc
peekViewResult.selectionBackground #474f5f
peekViewResult.selectionForeground #d8dee9
peekViewTitle.background #414955
peekViewTitleDescription.foreground #d8dee9
peekViewTitleLabel.foreground #d08770
pickerGroup.border #41495500
pickerGroup.foreground #d8dee9
progressBar.background #d08770
quickInputList.focusBackground #d0867098
quickInputList.focusForeground #d8dee9
scrollbar.shadow #00000066
scrollbarSlider.activeBackground #474f5faa
scrollbarSlider.background #474f5f99
scrollbarSlider.hoverBackground #474f5faa
selection.background #88c0d099
sideBar.background #282c34
sideBar.border #414955
sideBar.foreground #d8dee9
sideBarSectionHeader.background #414955
sideBarSectionHeader.foreground #d8dee9
sideBarTitle.foreground #d8dee9
statusBar.background #414955
statusBar.border #41495500
statusBar.debuggingBackground #da3633
statusBar.debuggingForeground #d8dee9
statusBar.foreground #d8dee9
statusBar.noFolderBackground #414955
statusBar.noFolderForeground #d8dee9
statusBarItem.activeBackground #4c566a
statusBarItem.hoverBackground #474f5f
statusBarItem.prominentBackground #414955
statusBarItem.prominentHoverBackground #474f5f
tab.activeBackground #414955
tab.activeBorder #88c0d000
tab.activeForeground #d8dee9
tab.border #41495500
tab.inactiveBackground #282c34
tab.inactiveForeground #d8dee966
tab.unfocusedActiveBorder #88c0d000
tab.unfocusedActiveForeground #d8dee999
tab.unfocusedInactiveForeground #d8dee966
terminal.ansiBlack #414955
terminal.ansiBlue #6699cc
terminal.ansiBrightBlack #4c566a
terminal.ansiBrightBlue #6699cc
terminal.ansiBrightCyan #8fbcbb
terminal.ansiBrightGreen #99c794
terminal.ansiBrightMagenta #b48ead
terminal.ansiBrightRed #bf616a
terminal.ansiBrightWhite #eceff4
terminal.ansiBrightYellow #ebcb8b
terminal.ansiCyan #d08770
terminal.ansiGreen #99c794
terminal.ansiMagenta #b48ead
terminal.ansiRed #bf616a
terminal.ansiWhite #e5e9f0
terminal.ansiYellow #ebcb8b
terminal.background #282c34
terminal.foreground #d8dee9
titleBar.activeBackground #282c34
titleBar.activeForeground #d8dee9
titleBar.border #2e344000
titleBar.inactiveBackground #282c34
titleBar.inactiveForeground #d8dee966
walkThrough.embeddedEditorBackground #282c34
welcomePage.buttonBackground #474f5f
welcomePage.buttonHoverBackground #4c566a
widget.shadow #00000066 #ec5f67
constant.character, constant.other #c594c5 —
keyword - keyword.operator, keyword.operator.word, keyword.control #c594c5 italic
string.template.js meta.template.expression.js meta.embedded.line.js #d8dee9 —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python — italic
punctuation.separator, punctuation.terminator #A7ADBA —
punctuation.section #ffffff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded — italic
punctuation.accessor #A7ADBA —
punctuation.definition.annotation #5fb3b3 —
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js #5fb3b3 —
variable.language #ff5874 italic
storage.type #c594c5 italic
storage.type.function.arrow —
entity.name.function #5fb3b3 —
meta.object-literal.key.js #6699cc —
entity.name - (entity.name.section | entity.name.tag | entity.name.label) #f9ae58 —
entity.other.inherited-class #5fb3b3 italic underline
variable.parameter #f9ae58
variable.language #ec5f67 italic
entity.other.attribute-name #c594c5 italic
entity.other.attribute-name.id.css —
entity.other.attribute-name.class.css —
variable.function, variable.annotation #6699cc
support.function, support.macro #6699cc —
support.constant #c594c5 italic
support.class #6699cc italic
invalid.deprecated #f8f8f8 —
entity.name.tag.yaml #5fb3b3 —
source.yaml string.unquoted #D8DEE9 —
markup.heading punctuation.definition.heading #f97b58 —
markup.heading.1 punctuation.definition.heading #ec5f67 —
string.other.link, markup.underline.link #6699cc —
markup.underline — underline
markup.italic markup.bold | markup.bold markup.italic — bold italic
punctuation.definition.thematic-break #f9ae58 —
markup.list.numbered.bullet #99c794 —
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item #f9ae58 —
(text punctuation.definition.italic | text punctuation.definition.bold) #c594c5 —
meta.decorator punctuation.decorator — italic
punctuation.definition.comment, comment #8f97a8 italic
meta.diff, meta.diff.header #c594c5 —
support.type.property-name #D8DEE9 —
constant.numeric.line-number.match #ec5f67 —
token.error-token #f44747 —
token.debug-token #b267e6 —
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 } ! ` ;
}
Ultimate Dark Plus Neo | Coding Theme