Skip to main content
Home Theme VS Code Nextlevel Brings python development to the next level by highlighting relevant code, therefore helps focusing on the relevant parts of the code
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 #182C34 activityBar.border #182C3460 activityBar.foreground #2A9D8F activityBarBadge.background #E9C46A activityBarBadge.foreground #182C34 badge.background #182C3430 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #F4A261 — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #E76F51 — constant.other.php #F4A261 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#E76F51
breadcrumb.activeSelectionForeground #E76F51
breadcrumb.background #182C34
breadcrumb.focusForeground #2A9D8F
breadcrumb.foreground #F4A261
breadcrumbPicker.background #182C34
button.background #E76F5150
contrastBorder #E76F5140
debugToolBar.background #182C34
diffEditor.insertedTextBackground #E76F5115
diffEditor.removedTextBackground #2A9D8F20
dropdown.background #182C34
dropdown.border #E9C46A10
editor.background #182C34
editor.findMatchBackground #182C34
editor.findMatchBorder #E76F51
editor.findMatchHighlightBackground #E76F5193
editor.findMatchHighlightBorder #E9C46A30
editor.foreground #2A9D8F
editor.lineHighlightBackground #182C3450
editor.selectionBackground #E9C46A30
editor.selectionHighlightBackground #E76F516b
editor.selectionHighlightBorder #E9C46Af0
editorBracketMatch.background #182C34
editorBracketMatch.border #F4A2617f
editorCursor.foreground #F4A261
editorError.foreground #2A9D8F70
editorGroup.border #182C3430
editorGroupHeader.tabsBackground #182C34
editorGutter.addedBackground #E76F5160
editorGutter.deletedBackground #2A9D8F60
editorGutter.modifiedBackground #E9C46A60
editorHoverWidget.background #182C34
editorHoverWidget.border #E9C46A10
editorIndentGuide.activeBackground #356274
editorIndentGuide.background #35627470
editorInfo.foreground #E9C46A70
editorLineNumber.activeForeground #E9C46A
editorLineNumber.foreground #E76F51c0
editorLink.activeForeground #2A9D8F
editorMarkerNavigation.background #2A9D8F05
editorOverviewRuler.border #182C34
editorOverviewRuler.errorForeground #2A9D8F40
editorOverviewRuler.findMatchForeground #E76F51
editorOverviewRuler.infoForeground #E9C46A40
editorOverviewRuler.warningForeground #F4A26170
editorRuler.foreground #356274
editorSuggestWidget.background #182C34
editorSuggestWidget.border #E9C46A10
editorSuggestWidget.foreground #2A9D8F
editorSuggestWidget.highlightForeground #F4A261
editorSuggestWidget.selectedBackground #E76F5120
editorWarning.foreground #E76F51
editorWhitespace.foreground #2A9D8F40
editorWidget.background #182C34
editorWidget.border #F4A261
editorWidget.resizeBorder #E76F51
extensionButton.prominentBackground #E76F5190
extensionButton.prominentHoverBackground #2A9D8F
focusBorder #E9C46A00
gitDecoration.conflictingResourceForeground #F4A261
gitDecoration.deletedResourceForeground #2A9D8F
gitDecoration.ignoredResourceForeground #E76F51
gitDecoration.modifiedResourceForeground #F4A261
gitDecoration.untrackedResourceForeground #E9C46A
input.background #264653
input.border #E9C46A10
input.foreground #2A9D8F
input.placeholderForeground #2A9D8F60
inputOption.activeBackground #2A9D8F30
inputOption.activeBorder #2A9D8F30
inputValidation.errorBorder #2A9D8F50
inputValidation.infoBorder #E9C46A50
inputValidation.warningBorder #F4A26150
list.activeSelectionBackground #182C34
list.activeSelectionForeground #E76F51
list.focusBackground #264653
list.focusForeground #E9C46A
list.highlightForeground #E76F51
list.hoverBackground #356274
list.hoverForeground #E9C46A
list.inactiveSelectionBackground #182C3430
list.inactiveSelectionForeground #E76F51
list.warningForeground #F4A261
listFilterWidget.background #182C3430
listFilterWidget.noMatchesOutline #182C3430
listFilterWidget.outline #182C3430
menu.background #182C34f8
menu.border #E76F5150
menu.foreground #2A9D8F
menu.selectionBackground #264653
menu.selectionBorder #182C3430
menu.selectionForeground #2A9D8F
menu.separatorBackground #2A9D8F
menubar.selectionBackground #264653
menubar.selectionBorder #E76F5150
menubar.selectionForeground #2A9D8F
minimap.background #182C34
minimapGutter.addedBackground #2A9D8F
minimapGutter.deletedBackground #F4A261
minimapGutter.modifiedBackground #E76F51
minimapSlider.activeBackground #E76F51b0
minimapSlider.background #E76F5180
minimapSlider.hoverBackground #E76F51a0
notificationLink.foreground #E76F51
notifications.background #182C34
notifications.foreground #2A9D8F
panel.background #182C34
panel.border #182C3460
panelTitle.activeBorder #E76F51
panelTitle.activeForeground #E9C46A
panelTitle.inactiveForeground #2A9D8F
peekView.border #182C3430
peekViewEditor.background #2A9D8F05
peekViewEditor.matchHighlightBackground #E76F5150
peekViewEditorGutter.background #2A9D8F05
peekViewResult.background #2A9D8F05
peekViewResult.matchHighlightBackground #E76F5150
peekViewResult.selectionBackground #E76F5170
peekViewTitle.background #2A9D8F05
peekViewTitleDescription.foreground #2A9D8F60
pickerGroup.foreground #E76F51
progressBar.background #E76F51
scrollbar.shadow #182C3400
scrollbarSlider.activeBackground #E76F51cc
scrollbarSlider.background #E76F51bb
scrollbarSlider.hoverBackground #E76F51ee
selection.background #E76F51
settings.checkboxBackground #182C34
settings.checkboxForeground #2A9D8F
settings.dropdownBackground #182C34
settings.dropdownForeground #2A9D8F
settings.headerForeground #E76F51
settings.modifiedItemIndicator #E76F51
settings.numberInputBackground #182C34
settings.numberInputForeground #2A9D8F
settings.textInputBackground #182C34
settings.textInputForeground #2A9D8F
sideBar.background #182C34
sideBar.border #E76F5150
sideBar.foreground #E9C46A
sideBarSectionHeader.background #182C34
sideBarSectionHeader.border #182C3460
sideBarSectionHeader.foreground #E9C46A
sideBarTitle.foreground #2A9D8F
statusBar.background #264653
statusBar.border #182C3460
statusBar.debuggingBackground #F4A261
statusBar.debuggingForeground #E9C46A
statusBar.foreground #2A9D8F
statusBar.noFolderBackground #182C34
statusBarItem.hoverBackground #E76F5120
statusBarItem.remoteBackground #E76F51
statusBarItem.remoteForeground #182C34
tab.activeBackground #E76F5150
tab.activeBorder #E76F51
tab.activeForeground #E9C46A
tab.activeModifiedBorder #E76F51
tab.border #182C34
tab.inactiveBackground #E76F5120
tab.inactiveForeground #2A9D8Faf
tab.unfocusedActiveBackground #E76F5140
tab.unfocusedActiveBorder #E76F51
tab.unfocusedActiveForeground #2A9D8F
tab.unfocusedInactiveBackground #E76F5110
tab.unfocusedInactiveForeground #2A9D8F7f
terminal.ansiBlack #182C34
terminal.ansiBlue #E9C46A
terminal.ansiBrightBlack #E76F51
terminal.ansiBrightBlue #E9C46A
terminal.ansiBrightCyan #E9C46A
terminal.ansiBrightGreen #E76F51
terminal.ansiBrightMagenta #F4A261
terminal.ansiBrightRed #2A9D8F
terminal.ansiBrightWhite #E9C46A
terminal.ansiBrightYellow #F4A261
terminal.ansiCyan #E9C46A
terminal.ansiGreen #E76F51
terminal.ansiMagenta #F4A261
terminal.ansiRed #2A9D8F
terminal.ansiWhite #E9C46A
terminal.ansiYellow #F4A261
terminalCursor.background #182C34
terminalCursor.foreground #F4A261
textLink.activeForeground #2A9D8F
textLink.foreground #E76F51
titleBar.activeBackground #182C34
titleBar.activeForeground #2A9D8F
titleBar.border #182C3460
titleBar.inactiveBackground #182C34
titleBar.inactiveForeground #E76F51
tree.indentGuidesStroke #356274
widget.shadow #182C3430 invalid, invalid.illegal #2A9D8F —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #F4A261 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #2A9D8F —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #2A9D8F —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #F4A261 —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #F4A261
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #E9C46A —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #E9C46A —
support.other.variable, string.other.link, markup.table #2A9D8F —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #F4A261 —
variable.parameter.function.language.special, variable.parameter #2A9D8F —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #E76F51
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #F4A261 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #F4A261 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #2A9D8F —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #E9C46A italic
entity.other.attribute-name, support.function #F4A261 —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #2A9D8F —
source.scss keyword.control #F4A261 —
constant.character.escape #E9C46A —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #2A9D8F italic
support.type.property-name.json #2A9D8F —
text.html.markdown, punctuation.definition.list_item.markdown #2A9D8F —
text.html.markdown markup.inline.raw.markdown #F4A261 —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #E76F5150 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #F4A261 bold
markup.underline #E9C46A underline
markup.quote punctuation.definition.blockquote.markdown #E76F5150 —
string.other.link.description.title.markdown #F4A261 —
constant.other.reference.link.markdown #F4A261 —
punctuation.definition.raw.markdown, punctuation.definition.markdown #E9C46A —
variable.language.fenced.markdown #E76F51 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #E9C46A —
comment.line, punctuation.definition.comment #656565 italic
meta.function-call, support.function.builtin.python #6a8ae9 —
meta.function-call.arguments, variable.parameter.function-call #2A9D8F —
entity.name.function #a36ae9 —
punctuation.definition.parameters.end.python #d8b8ff —
keyword.control, keyword.operator.logical.python #E76F51 italic
keyword.control.flow #E76F51 —
constant.other.caps.python #9d2a95 bold
string.quoted.single.python #a0ff7b —
punctuation.definition.string #6b6b6b —
constant.numeric.dec.python #7bf8ff —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
Nextlevel | Coding Theme