Skip to main content
Owokai Themes | Coding Theme
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 #252421 activityBar.border #383831 activityBar.foreground #dcddcb activityBarBadge.background #76480d activityBarBadge.foreground #dcddcb badge.background #252421 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #7b785a italic comment.block.documentation, comment.line.double-slash.documentation #ad9556 italic string, string.template, punctuation.definition.string #64b358 — constant.numeric #80a9f5 — punctuation.separator.pointer-access, entity.name.function.operator, meta.template.expression, storage.modifier.import, constant.character, variable.language, support.constant, keyword.operator, constant.other, source, text
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#969b8c
button.background #3e3b2c
button.border #2f302c
debugToolBar.background #252421
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #2386364d
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #da36334d
dropdown.background #252421
dropdown.listBackground #252421
editor.background #1c1c1b
editor.findMatchBackground #00000000
editor.findMatchBorder #efefef90
editor.findMatchHighlightBackground #d7da8620
editor.findMatchHighlightBorder #d9da86aa
editor.foldBackground #272727
editor.foreground #ebe9d7
editor.hoverHighlightBackground #ffc40010
editor.lineHighlightBackground #252522
editor.rangeHighlightBackground #3c3e2020
editor.selectionBackground #337fa380
editor.selectionHighlightBackground #00000000
editor.selectionHighlightBorder #a0956550
editor.wordHighlightBackground #76724a10
editor.wordHighlightBorder #766e4a90
editor.wordHighlightStrongBackground #968c6a20
editor.wordHighlightTextBackground #fbff0010
editorBracketHighlight.foreground1 #ebe9d7
editorBracketHighlight.foreground2 #EBCB8B
editorBracketHighlight.foreground3 #B48EAD
editorBracketHighlight.foreground4 #D08770
editorBracketHighlight.foreground5 #A3BE8C
editorBracketMatch.background #5b73d490
editorBracketMatch.border #00000000
editorCursor.background #0e0e0e
editorCursor.foreground #ebc726dd
editorGroup.border #383831
editorGroup.dropBackground #43413980
editorGroupHeader.tabsBackground #252421
editorGroupHeader.tabsBorder #343530
editorHoverWidget.background #272822ee
editorHoverWidget.border #343530ee
editorIndentGuide.activeBackground #57504360
editorIndentGuide.background #47454130
editorInlayHint.background #bebaa0
editorInlayHint.foreground #1c1c1a
editorLineNumber.activeForeground #b4aa60
editorLineNumber.foreground #444444
editorSuggestWidget.background #151616cc
editorSuggestWidget.border #75715e30
editorUnnecessaryCode.border #ffd900
editorUnnecessaryCode.opacity #000000aa
editorWhitespace.foreground #46474160
editorWidget.background #252421
editorWidget.resizeBorder #00000000
focusBorder #337fa380
input.background #252421
inputValidation.errorBackground #90274A
inputValidation.errorBorder #f92672
inputValidation.infoBackground #546190
inputValidation.infoBorder #819aff
inputValidation.warningBackground #848528
inputValidation.warningBorder #e2e22e
list.activeSelectionBackground #337fa380
list.dropBackground #414339
list.highlightForeground #f8f8f2
list.hoverBackground #33332c
list.inactiveSelectionBackground #34352c
menu.background #252421
menu.foreground #ebe9d7
minimap.selectionHighlight #878b9180
panel.background #161616
panel.border #383831
panelSection.border #252421
panelSectionHeader.background #252421
panelTitle.activeBorder #00000000
panelTitle.activeForeground #c5c5c0
panelTitle.inactiveForeground #75715E
peekView.border #524b40
peekViewEditor.background #22211e
peekViewEditor.matchHighlightBackground #373a33
peekViewResult.background #2b2825
peekViewResult.matchHighlightBackground #373a33
peekViewResult.selectionBackground #414339
peekViewTitle.background #252421
pickerGroup.foreground #75715E
ports.iconRunningProcessForeground #ccccc7
progressBar.background #75715E
quickInputList.focusBackground #337fa380
scrollbar.shadow #000000aa
scrollbarSlider.background #33352d90
selection.background #8d918780
settings.checkboxBackground #232420
settings.focusedRowBackground #1B1B1B
settings.rowHoverBackground #00000000
sideBar.background #1c1c1b
sideBar.border #383831
sideBar.foreground #dcddcb
sideBarSectionHeader.background #1c1c1b
sideBarSectionHeader.border #333333
sideBarSectionHeader.foreground #969b8c
sideBarTitle.foreground #969b8c
statusBar.background #252421
statusBar.border #383831
statusBar.debuggingBackground #adad1c
statusBar.debuggingForeground #1c1f1f
statusBar.foreground #969b8c
statusBar.noFolderBackground #252421
statusBarItem.remoteBackground #0b5052
tab.activeBackground #1c1c1a
tab.activeBorder #1c1c1a
tab.activeBorderTop #737062
tab.border #00000000
tab.hoverBackground #343530
tab.inactiveBackground #252421
tab.inactiveForeground #ccccc7
tab.lastPinnedBorder #414339
terminal.ansiBlack #1B1B1B
terminal.ansiBlue #458588
terminal.ansiBrightBlack #928374
terminal.ansiBrightBlue #83A598
terminal.ansiBrightCyan #8EC07C
terminal.ansiBrightGreen #B8BB26
terminal.ansiBrightMagenta #D3869B
terminal.ansiBrightRed #FB4934
terminal.ansiBrightWhite #EBDBB2
terminal.ansiBrightYellow #FABD2F
terminal.ansiCyan #689D6A
terminal.ansiGreen #98971A
terminal.ansiMagenta #B16286
terminal.ansiRed #CC241D
terminal.ansiWhite #A89984
terminal.ansiYellow #D79921
terminal.background #161616
terminal.foreground #EBDBB2
titleBar.activeBackground #252421
titleBar.inactiveBackground #1b1c19
widget.border #333333
widget.shadow #00000098 keyword, keyword.operator.expression, keyword.operator.logical, keyword.operator.cast, punctuation.accessor.optional #dbad49 bold
constant.language #8f9396 —
meta.attribute, keyword.storage, storage.modifier, storage.type.class, storage.type.modifier.access #8f9396 —
keyword.type, storage.type, entity.other, entity.name.tag, entity.name.type, support.function, constant.other.placeholder, entity.name.scope-resolution, punctuation.definition.interpolation, punctuation.definition.template-expression #8f9396
support, storage.identifier, entity.name.tag.class #8f9396 —
meta.property-name, variable.readwrite, entity.other.attribute-name, entity.other.inherited-class, variable.readwrite.other.block #ebe9d7 —
entity.name.function.preprocessor, entity.name.other.preprocessor.macro.predefined #ebe9d7 bold
support.function, entity.name.function, entity.name.function-call, meta.function-call.generic, entity.name.function.definition #e694b9 —
string.detected-link — underline
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56b6c2A0 —
entity.name.filename.find-in-files #e5c07b —
punctuation.accessor, punctuation.separator, punctuation.terminator #ebe9d7 —
markup.heading.markdown — bold
markup.block.raw, markup.inline.raw #8f9396 —
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 } !` ;
}