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 #1b1e2b activityBar.border #00000060 activityBar.foreground #a6accd activityBarBadge.background #80cbc4 activityBarBadge.foreground #000000 badge.background #00000030 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #676F7D — string, string.template #E5C07B — constant.numeric #C678DD — string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded #C678DD — punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One Monokai x Palenight — One Monokai x Palenight
badge.foreground
#676e95
breadcrumb.activeSelectionForeground #80cbc4
breadcrumb.background #292d3e
breadcrumb.focusForeground #a6accd
breadcrumb.foreground #757ca1
breadcrumbPicker.background #1b1e2b
button.background #717cb450
debugConsole.errorForeground #ff4000
debugConsole.infoForeground #000000
debugConsole.warningForeground #ffad33
debugToolBar.background #292d3e
diffEditor.insertedTextBackground #c3e88d15
diffEditor.removedTextBackground #ff537020
dropdown.background #292d3e
dropdown.border #ffffff10
editor.background #292d3e
editor.findMatchBackground #000000
editor.findMatchBorder #80cbc4
editor.findMatchHighlightBackground #00000050
editor.findMatchHighlightBorder #ffffff50
editor.foreground #a6accd
editor.lineHighlightBackground #00000050
editor.selectionBackground #717cb450
editor.selectionHighlightBackground #ffcc0020
editorBracketMatch.background #292d3e
editorBracketMatch.border #ffcc0050
editorCursor.foreground #ffcc00
editorError.foreground #ff537070
editorGroup.border #00000030
editorGroupHeader.tabsBackground #292d3e
editorGutter.addedBackground #c3e88d60
editorGutter.deletedBackground #ff537060
editorGutter.modifiedBackground #82aaff60
editorHoverWidget.background #292d3e
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground #4e5579
editorIndentGuide.background #4e557970
editorInfo.foreground #82aaff70
editorLineNumber.activeForeground #757ca1
editorLineNumber.foreground #3a3f58
editorLink.activeForeground #a6accd
editorMarkerNavigation.background #a6accd05
editorOverviewRuler.border #292d3e
editorOverviewRuler.errorForeground #ff537040
editorOverviewRuler.findMatchForeground #80cbc4
editorOverviewRuler.infoForeground #82aaff40
editorOverviewRuler.warningForeground #ffcb6b40
editorRuler.foreground #4e5579
editorSuggestWidget.background #292d3e
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #a6accd
editorSuggestWidget.highlightForeground #80cbc4
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #ffcb6b70
editorWhitespace.foreground #a6accd40
editorWidget.background #1b1e2b
editorWidget.border #ff0000
editorWidget.resizeBorder #80cbc4
extensionButton.prominentBackground #c3e88d90
extensionButton.prominentHoverBackground #c3e88d
focusBorder #ffffff00
gitDecoration.conflictingResourceForeground #ffcb6b90
gitDecoration.deletedResourceForeground #ff537090
gitDecoration.ignoredResourceForeground #757ca190
gitDecoration.modifiedResourceForeground #82aaff90
gitDecoration.untrackedResourceForeground #c3e88d90
input.background #333747
input.border #ffffff10
input.foreground #eeffff
input.placeholderForeground #a6accd60
inputOption.activeBackground #a6accd30
inputOption.activeBorder #a6accd30
inputValidation.errorBorder #ff537050
inputValidation.infoBorder #82aaff50
inputValidation.warningBorder #ffcb6b50
list.activeSelectionBackground #1b1e2b
list.activeSelectionForeground #80cbc4
list.focusBackground #a6accd20
list.focusForeground #a6accd
list.highlightForeground #80cbc4
list.hoverBackground #1b1e2b
list.hoverForeground #ffffff
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #80cbc4
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #292d3e
menu.foreground #a6accd
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #80cbc4
menu.separatorBackground #a6accd
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #80cbc4
notificationLink.foreground #80cbc4
notifications.background #292d3e
notifications.foreground #a6accd
panel.background #1b1e2b
panel.border #00000060
panelTitle.activeBorder #80cbc4
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #a6accd
peekView.border #00000030
peekViewEditor.background #a6accd05
peekViewEditor.matchHighlightBackground #717cb450
peekViewEditorGutter.background #a6accd05
peekViewResult.background #a6accd05
peekViewResult.matchHighlightBackground #717cb450
peekViewResult.selectionBackground #757ca170
peekViewTitle.background #a6accd05
peekViewTitleDescription.foreground #a6accd60
pickerGroup.foreground #80cbc4
progressBar.background #80cbc4
scrollbar.shadow #292d3e00
scrollbarSlider.activeBackground #80cbc4
scrollbarSlider.background #a6accd20
scrollbarSlider.hoverBackground #a6accd10
selection.background #80cbc4
settings.checkboxBackground #1b1e2b
settings.checkboxForeground #a6accd
settings.dropdownBackground #1b1e2b
settings.dropdownForeground #a6accd
settings.headerForeground #80cbc4
settings.modifiedItemIndicator #80cbc4
settings.numberInputBackground #1b1e2b
settings.numberInputForeground #a6accd
settings.textInputBackground #1b1e2b
settings.textInputForeground #a6accd
sideBar.background #1b1e2b
sideBar.border #00000060
sideBar.foreground #757ca1
sideBarSectionHeader.background #1b1e2b
sideBarSectionHeader.border #00000060
sideBarTitle.foreground #a6accd
statusBar.background #1b1e2b
statusBar.border #00000060
statusBar.debuggingBackground #c792ea
statusBar.debuggingForeground #ffffff
statusBar.foreground #676e95
statusBar.noFolderBackground #292d3e
statusBarItem.hoverBackground #676e9520
statusBarItem.remoteBackground #80cbc4
statusBarItem.remoteForeground #000000
tab.activeBorder #80cbc4
tab.activeForeground #ffffff
tab.activeModifiedBorder #757ca1
tab.border #292d3e
tab.inactiveBackground #292d3e
tab.inactiveForeground #757ca1
tab.unfocusedActiveBorder #676e95
tab.unfocusedActiveForeground #a6accd
terminal.ansiBlack #000000
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #676e95
terminal.ansiBrightBlue #82aaff
terminal.ansiBrightCyan #89ddff
terminal.ansiBrightGreen #c3e88d
terminal.ansiBrightMagenta #c792ea
terminal.ansiBrightRed #ff5370
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffcb6b
terminal.ansiCyan #89ddff
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #c792ea
terminal.ansiRed #ff5370
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffcb6b
terminalCursor.background #000000
terminalCursor.foreground #ffcb6b
textLink.activeForeground #a6accd
textLink.foreground #80cbc4
titleBar.activeBackground #1b1e2b
titleBar.activeForeground #a6accd
titleBar.border #00000060
titleBar.inactiveBackground #1b1e2b
titleBar.inactiveForeground #757ca1
tree.indentGuidesStroke #4e5579
widget.shadow #00000030 constant.language #56B6C2 —
constant.character, constant.other #56B6C2 —
variable.language #E06C75 —
keyword, keyword.operator.logical, keyword.operator.constructor #E06C75 —
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #61AFEF —
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block #61AFEF —
variable.other, variable.other.property, variable.other.block #ABB2BF —
entity.other.inherited-class #98C379 —
storage.modifier.import, storage.modifier.package #61AFEF —
entity.name.function, support.function #98C379 —
variable.parameter, entity.name.variable.parameter, parameter.variable #D19A66 italic
entity.name.function-call #ABB2BF —
function.support.builtin, function.support.core #98C379 —
entity.name.tag, entity.name.tag.class.js #E06C75 —
entity.name.tag.class, entity.name.tag.id #56B6C2 —
entity.other.attribute-name #98C379 —
support.type, support.variable #56B6C2 —
support.dictionary.json #56B6C2 —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #ABB2BF —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass #56B6C2 —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #98C379 —
variable.css, variable.scss, variable.less, variable.sass #56B6C2 —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #E5C07B —
unit.css, unit.scss, unit.less, unit.sass #C678DD —
function.css, function.scss, function.less, function.sass #56B6C2 —
invalid.deprecated #F8F8F0 —
support.type.property-name.json #56B6C2 —
string.detected-link #61AFEF —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56B6C2A0 —
entity.name.filename.find-in-files #E5C07B —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown #676F7D —
punctuation.definition.italic.markdown — italic
markup.underline.link.markdown #61AFEF —
markup.bold.markdown — bold
markup.heading.markdown #E06C75 bold
markup.quote.markdown #98C379 —
meta.separator.markdown #C678DD bold
markup.raw.inline.markdown, markup.raw.block.markdown #56B6C2 —
punctuation.definition.list_item.markdown #FFFFFF bold
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...
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 } !` ;
}
One Monokai x Palenight | Coding Theme