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 #181819 activityBar.border #333333 activityBar.foreground #b7b8bb activityBar.inactiveForeground #727272 activityBarBadge.background #151515 activityBarBadge.foreground #ccced2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #717a85 italic comment.block.documentation, punctiation.definition.comment, comment.line.double-slash.documentation #90a3aa italic constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language #96b7ff — entity, entity.name #96b7ff —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Owokai Themes — Owokai Alt Owokai Themes | Coding Theme
badge.background
#252729
badge.foreground #8c999b
button.background #333333
button.border #333333
debugToolBar.background #252729
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #2386364d
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #da36334d
dropdown.background #242429
dropdown.border #333333
dropdown.listBackground #252729
editor.background #181819
editor.findMatchBackground #a886da00
editor.findMatchBorder #e4d6eeDD
editor.findMatchHighlightBackground #9a70da4b
editor.findMatchHighlightBorder #c182eecc
editor.foreground #c7ced6
editor.lineHighlightBackground #252729
editor.lineHighlightBorder #16161600
editor.rangeHighlightBackground #2f203e20
editor.selectionBackground #5c55b875
editor.selectionHighlightBackground #200e3240
editor.symbolHighlightBackground #3a203ebd
editor.wordHighlightBackground #4a4a769d
editor.wordHighlightBorder #4a4a7690
editor.wordHighlightStrongBackground #6a6a9680
editorBracketHighlight.foreground1 #c7ced6
editorBracketHighlight.foreground2 #EBCB8B
editorBracketHighlight.foreground3 #B48EAD
editorBracketHighlight.foreground4 #D08770
editorBracketHighlight.foreground5 #A3BE8C
editorBracketMatch.background #79797990
editorBracketMatch.border #5b6dd400
editorCursor.background #0e0e0e
editorCursor.foreground #fafafae5
editorGroup.border #242424
editorGroup.dropBackground #1c1e1f
editorGroupHeader.tabsBackground #252729
editorGroupHeader.tabsBorder #333333
editorGutter.addedBackground #37ca59
editorGutter.deletedBackground #e1445c
editorGutter.modifiedBackground #0078d4
editorHoverWidget.background #222728ee
editorHoverWidget.border #333333
editorIndentGuide.activeBackground #786b8570
editorIndentGuide.background #41434730
editorInlayHint.background #22262800
editorInlayHint.foreground #444c50
editorLineNumber.activeForeground #c7d5e0
editorLineNumber.foreground #55585a
editorSuggestWidget.background #1c1e1fd0
editorSuggestWidget.border #333333
editorUnnecessaryCode.border #ffd900
editorUnnecessaryCode.opacity #000000aa
editorWhitespace.foreground #41454790
editorWidget.background #252729
editorWidget.resizeBorder #00000000
focusBorder #5c4088
gitDecoration.addedResourceForeground #37ca59
gitDecoration.deletedResourceForeground #e1445c
gitDecoration.ignoredResourceForeground #90959b
gitDecoration.modifiedResourceForeground #99d7e5
gitDecoration.stageDeletedResourceForeground #e1445c
gitDecoration.stageModifiedResourceForeground #99d7e5
gitDecoration.untrackedResourceForeground #7fe396
input.background #252729
inputValidation.errorBackground #90274A
inputValidation.errorBorder #f92672
inputValidation.infoBackground #546190
inputValidation.infoBorder #819aff
inputValidation.warningBackground #848528
inputValidation.warningBorder #e2e22e
list.activeSelectionBackground #ad7aff80
list.dropBackground #394043
list.highlightForeground #ad7aff
list.hoverBackground #394043
list.inactiveSelectionBackground #404246
menu.background #252729
menu.foreground #c7ced6
minimap.selectionHighlight #878b9180
notificationCenter.border #333333
panel.background #131414
panel.border #333333
panelSection.border #252729
panelSectionHeader.background #1c1e1f
panelTitle.activeBorder #333333
panelTitle.activeForeground #c5c5c0
panelTitle.inactiveForeground #6b7172
peekView.border #4c4b4d
peekViewEditor.background #242427
peekViewEditor.matchHighlightBackground #33363a
peekViewResult.background #282a2c
peekViewResult.matchHighlightBackground #33363a
peekViewResult.selectionBackground #33363a
peekViewTitle.background #282a2c
pickerGroup.border #333333
pickerGroup.foreground #5e6575
ports.iconRunningProcessForeground #ccccc7
progressBar.background #75715E
quickInputList.focusBackground #ad7aff60
scrollbar.shadow #000000aa
scrollbarSlider.background #31323890
selection.background #83789180
settings.checkboxBackground #242429
settings.focusedRowBackground #12121360
settings.numberInputBackground #242429
settings.rowHoverBackground #15151660
settings.textInputBackground #242429
sideBar.background #181819
sideBar.border #333333
sideBarSectionHeader.background #181819
sideBarSectionHeader.border #333333
sideBarSectionHeader.foreground #8c979b
sideBarTitle.foreground #8c969b
statusBar.background #252729
statusBar.border #333333
statusBar.debuggingBackground #2d8d68
statusBar.debuggingForeground #f5fdff
statusBar.foreground #8c8e9b
statusBar.noFolderBackground #1c1e1f
statusBarItem.remoteBackground #1a506d
statusBarItem.remoteForeground #c1e8ff
tab.activeBackground #181819
tab.activeBorder #181819
tab.activeBorderTop #adaeb1
tab.hoverBackground #343738
tab.inactiveBackground #252729
tab.inactiveForeground #ccccc7
tab.lastPinnedBorder #393d43
terminal.ansiBlack #333333
terminal.ansiBlue #6A7EC8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #819aff
terminal.ansiBrightCyan #66D9EF
terminal.ansiBrightGreen #A6E22E
terminal.ansiBrightMagenta #AE81FF
terminal.ansiBrightRed #f92672
terminal.ansiBrightWhite #f8f8f2
terminal.ansiBrightYellow #e2e22e
terminal.ansiCyan #56ADBC
terminal.ansiGreen #86B42B
terminal.ansiMagenta #8C6BC8
terminal.ansiRed #C4265E
terminal.ansiWhite #e3e3dd
terminal.ansiYellow #B3B42B
terminal.background #131414
terminal.foreground #d0d3d6
titleBar.activeBackground #252729
titleBar.inactiveBackground #1e2022
tree.inactiveIndentGuidesStroke #3b3b3b
tree.indentGuidesStroke #595e61
widget.border #333333
widget.shadow #00000098 variable.parameter.function #e1e4e8 —
storage, storage.type, meta.attribute #f97583 —
storage.modifier.package, storage.modifier.import, storage.type.java #e1e4e8 —
string, punctuation.definition.string, string punctuation.section.embedded source #9ecbff —
meta.property-name #96b7ff —
invalid.broken #fdaeb7 italic
invalid.deprecated #fdaeb7 italic
invalid.illegal #fdaeb7 italic
invalid.unimplemented #fdaeb7 italic
carriage-return #24292e italic
message.error #ff5c6f strikethrough
source.regexp, string.regexp #dbedff —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #dbedff —
string.regexp constant.character.escape #85e89d bold
meta.module-reference #96b7ff —
punctuation.definition.list.begin.markdown #ffab70 —
markup.heading, markup.heading entity.name #96b7ff bold
markup.italic #e1e4e8 italic
markup.strikethrough — strikethrough
markup.inline.raw #96b7ff —
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #fdaeb7 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #85e89d —
markup.changed, punctuation.definition.changed #ffab70 —
markup.ignored, markup.untracked #2f363d —
meta.diff.range #b392f0 bold
meta.separator #96b7ff bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #d1d5da —
brackethighlighter.unmatched #fdaeb7 —
constant.other.reference.link, string.other.link #dbedff underline
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 }!` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 }!` ;
}