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 #2c323d activityBar.border #373c47 activityBar.foreground #a6a9ad activityBarBadge.background #ffc929 activityBarBadge.foreground #2c323d badge.background #ffc929 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle constant, variable.parameter, meta.object.member variable.other.constant, entity.other.ng-binding-name.property entity, entity.other.attribute-name, entity.other.attribute-name entity #ffc929 — keyword.other.unit, support.constant #ffdf7f — entity.name.function, entity.name.tag, meta.tag punctuation.definition.tag #1f88d9 — support, meta.decorator varaible, meta.decorator entity.name.function, entity.other.attribute-name.class, meta.tag entity.name.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Puking Unicorn — Puking Unicorn
badge.foreground
#2c323d
button.background #ffc929
debugExceptionWidget.background #373c47
debugExceptionWidget.border #f36781
debugIcon.breakpointForeground #f36781
debugToolBar.background #373c47
diffEditor.border #636770
diffEditor.diagonalFill #636770
diffEditor.insertedTextBackground #00cb7c22
diffEditor.removedTextBackground #f3678122
dropdown.background #373c47
editor.background #2c323d
editor.lineHighlightBackground #373c47
editor.selectionBackground #ffffff44
editorBracketMatch.background #00000000
editorBracketMatch.border #636770
editorCursor.foreground #636770
editorGroup.border #373c47
editorGroup.dropBackground #2c323d
editorGroup.emptyBackground #2c323d
editorGroupHeader.tabsBackground #373c47
editorGutter.addedBackground #00cb7c
editorGutter.background #2c323d
editorGutter.commentRangeForeground #636770
editorGutter.deletedBackground #f36781
editorGutter.foldingControlForeground #9065ff
editorGutter.modifiedBackground #ffc929
editorHoverWidget.background #373c47
editorLineNumber.activeForeground #636770
editorLineNumber.foreground #63677088
editorOverviewRuler.addedForeground #00cb7c44
editorOverviewRuler.background #2c323d
editorOverviewRuler.deletedForeground #f3678144
editorOverviewRuler.errorForeground #f00
editorOverviewRuler.modifiedForeground #ffc92944
editorOverviewRuler.wordHighlightForeground #636770
editorWhitespace.foreground #63677044
editorWidget.background #2c323d
extensionButton.prominentBackground #ffc929
extensionButton.prominentHoverBackground #ffdf7f
focusBorder #373c47
gitDecoration.addedResourceForeground #66e0b0
gitDecoration.conflictingResourceForeground #f36781
gitDecoration.deletedResourceForeground #f8a4b3
gitDecoration.ignoredResourceForeground #636770
gitDecoration.modifiedResourceForeground #ffdf7f
gitDecoration.submoduleResourceForeground #9065ff
gitDecoration.untrackedResourceForeground #79b8e8
input.background #2c323d
input.foreground #636770
input.placeholderForeground #636770
inputOption.activeBorder #ffc929
list.activeSelectionBackground #373c47
list.activeSelectionForeground #a6a9ad
list.focusBackground #ffc92966
list.highlightForeground #ffc929
list.hoverBackground #ffffff11
list.inactiveSelectionBackground #2c323d
minimap.background #2c323d
minimap.errorHighlight #f36781
minimap.findMatchHighlight #636770
minimap.selectionHighlight #636770
minimap.warningHighlight #ffc929
minimapGutter.addedBackground #00cb7c
minimapGutter.deletedBackground #f36781
minimapGutter.modifiedBackground #ffc929
minimapSlider.activeBackground #63677066
minimapSlider.background #63677033
minimapSlider.hoverBackground #63677066
panel.border #ffc929
peekView.border #373c47
peekViewEditor.background #2c323d
peekViewEditor.matchHighlightBackground #63677044
peekViewResult.background #2c323d
peekViewTitle.background #2c323d
pickerGroup.border #ffffff88
pickerGroup.foreground #ffffff88
progressBar.background #ffc929
scrollbar.shadow #0002
scrollbarSlider.activeBackground #63677066
scrollbarSlider.background #63677033
scrollbarSlider.hoverBackground #63677066
selection.background #373c47
sideBar.background #2c323d
sideBar.border #373c47
sideBarSectionHeader.background #373c47
sideBarSectionHeader.border #2c323d
sideBarTitle.foreground #636770
statusBar.background #373c47
statusBar.debuggingBackground #2c323d
statusBar.foreground #a6a9ad
statusBar.noFolderBackground #373c47
statusBarItem.prominentBackground #373c47
statusBarItem.prominentHoverBackground #373c47
tab.activeBackground #2c323d
tab.activeForeground #a6a9ad
tab.activeModifiedBorder #ffc929
tab.border #63677044
tab.inactiveBackground #373c47
tab.inactiveForeground #636770
terminal.ansiBlack #636770
terminal.ansiBlue #1f88d9
terminal.ansiBrightBlack #a6a9ad
terminal.ansiBrightBlue #79b8e8
terminal.ansiBrightCyan #66ecc2
terminal.ansiBrightGreen #66e0b0
terminal.ansiBrightMagenta #bca3ff
terminal.ansiBrightRed #f8a4b3
terminal.ansiBrightWhite #fff
terminal.ansiBrightYellow #ffdf7f
terminal.ansiCyan #00e09a
terminal.ansiGreen #00cb7c
terminal.ansiMagenta #9065ff
terminal.ansiRed #f36781
terminal.ansiWhite #d3d4d6
terminal.ansiYellow #ffc929
terminal.foreground #636770
titleBar.activeBackground #373c47 #79b8e8
keyword, source.css variable, entity.other.ng-binding-name.template, entity.other.ng-binding-name.template entity, entity.name.function.pipe #f36781 —
constant.language, storage.type.property, variable.language, text.html variable, text.html variable.other.object #f8a4b3 —
entity, meta.import variable, entity.other.attribute-name.pseudo-class, meta.tag.custom entity.name.tag, meta.tag.custom punctuation.definition.tag #9065ff —
storage, support.type, constant.language.null #bca3ff —
string, support.type.property-name #00cb7c —
meta.type.annotation variable.object.property, meta.object-literal.key, meta.structure.dictionary support.type.property-name #66e0b0 —
variable.other.object #a6a9ad —
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*
Puking Unicorn | 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 }!` ;
}