Skip to main content
ayako | 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.activeBackground #6699A113 activityBar.activeBorder #6699A1 activityBar.activeFocusBorder #6699A1 activityBar.background #1a1e21 activityBar.dropBorder #6699A1 activityBar.inactiveForeground #b3b3b3 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid #DC9FB4 — meta.embedded, source.groovy.embedded, meta.template.expression #E6E6E6 — variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable #E6E6E6 — comment, punctuation.definition.comment #6a7887 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.background #B5CAA0
activityBarBadge.foreground #000000
badge.background #373C38
badge.foreground #FFFFFB
button.background #81C7D4
button.foreground #000000
button.hoverBackground #6aa3ae
checkbox.background #2e343b
diffEditor.insertedTextBackground #B1B47930
diffEditor.removedTextBackground #F4A7B935
dropdown.background #2e343b
dropdown.border #363d45
editor.background #24292E
editor.findMatchBorder #6699A1
editor.findMatchHighlightBackground #E6E6E630
editor.foldBackground #B5CAA030
editor.foreground #E6E6E6
editor.lineHighlightBackground #2e343b
editor.selectionBackground #6699A130
editorBracketHighlight.foreground1 #BDC0BA
editorBracketHighlight.foreground2 #B1B479
editorBracketHighlight.foreground3 #D7C4BB
editorBracketHighlight.foreground4 #6A8372
editorBracketHighlight.foreground5 #91989F
editorBracketHighlight.foreground6 #66BAB7
editorBracketHighlight.unexpectedBracket.foreground #72636E
editorBracketMatch.background #202429
editorBracketMatch.border #46686e
editorCursor.background #000000
editorCursor.foreground #6699A1
editorError.foreground #F4A7B9
editorGroup.border #1a1e21
editorGroup.dropBackground #6699A130
editorGroupHeader.noTabsBackground #2e343b
editorGroupHeader.tabsBackground #2e343b
editorGutter.addedBackground #707C74
editorGutter.deletedBackground #F4A7B9
editorGutter.modifiedBackground #D7C4BB
editorHoverWidget.border #384048
editorIndentGuide.activeBackground #6699A1
editorIndentGuide.background #384048
editorInfo.foreground #6699A1
editorLineNumber.activeForeground #9ea8b3
editorLineNumber.foreground #515c67
editorLink.activeForeground #6699A1
editorMarkerNavigation.background #24292E
editorMarkerNavigationError.background #F4A7B9
editorMarkerNavigationInfo.background #F596AA
editorMarkerNavigationWarning.background #FFBA84
editorOverviewRuler.addedForeground #D7C4BB
editorOverviewRuler.border #384048
editorOverviewRuler.bracketMatchForeground #6699A1
editorOverviewRuler.deletedForeground #D7C4BB
editorOverviewRuler.errorForeground #F4A7B9
editorOverviewRuler.infoForeground #F596AA
editorOverviewRuler.modifiedForeground #D7C4BB
editorOverviewRuler.selectionHighlightForeground #6699A1
editorOverviewRuler.warningForeground #FFBA84
editorPane.background #1c2024
editorRuler.foreground #384048
editorSuggestWidget.background #2e343b
editorSuggestWidget.border #384048
editorSuggestWidget.highlightForeground #91B493
editorWarning.foreground #FFBA84
editorWhitespace.foreground #4c5661
editorWidget.background #24292E
editorWidget.resizeBorder #384048
errorForeground #F4A7B9
extensionButton.prominentBackground #81C7D4
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #6297a1
focusBorder #6699A1
foreground #E6E6E6
gitDecoration.addedResourceForeground #B1B479
gitDecoration.deletedResourceForeground #F4A7B9
gitDecoration.modifiedResourceForeground #D7C4BB
gitDecoration.stageDeletedResourceForeground #F4A7B9
gitDecoration.stageModifiedResourceForeground #D7C4BB
input.background #2e343b
input.border #363d45
inputValidation.errorBackground #F4A7B990
inputValidation.errorBorder #F4A7B9
inputValidation.errorForeground #000000
inputValidation.infoBackground #6699A1
inputValidation.infoBorder #6699A1
inputValidation.infoForeground #000000
inputValidation.warningBackground #FFBA8490
inputValidation.warningBorder #FFBA84
inputValidation.warningForeground #000000
list.activeSelectionBackground #6699A120
list.errorForeground #F4A7B9
list.focusBackground #6699A130
list.highlightForeground #91B493
list.hoverBackground #2f363c
list.inactiveSelectionBackground #6699A125
list.warningForeground #FFBA84
menu.background #24292E
menu.foreground #E6E6E6
menu.selectionBackground #6699A1DD
menu.selectionForeground #000000
menu.separatorBackground #4c5661
minimap.errorHighlight #F4A7B9
minimap.selectionHighlight #6699A180
minimap.warningHighlight #FFBA84
minimapGutter.addedBackground #B1B479
minimapGutter.deletedBackground #F4A7B9
minimapGutter.modifiedBackground #D7C4BB
notifications.background #24292E
notificationsErrorIcon.foreground #F4A7B9
notificationsInfoIcon.foreground #6699A1
notificationsWarningIcon.foreground #FFBA84
panel.dropBorder #6699A1
panelTitle.activeBorder #6699A1
peekViewResult.background #2e343b
peekViewTitle.background #1a1e21
pickerGroup.border #101214
pickerGroup.foreground #6699A1
problemsErrorIcon.foreground #F4A7B9
problemsInfoIcon.foreground #F596AA
problemsWarningIcon.foreground #FFBA84
progressBar.background #6699A1
scrollbar.shadow #0e0f11
scrollbarSlider.activeBackground #4c566140
scrollbarSlider.background #606d7b50
scrollbarSlider.hoverBackground #74849440
selection.background #6699A180
settings.modifiedItemIndicator #D7C4BB
sideBar.background #1f2328
sideBarSectionHeader.background #292e35
statusBar.background #577C8A
statusBarItem.hoverBackground #2e353a
statusBarItem.prominentBackground #6699A1
statusBarItem.prominentForeground #000000
statusBarItem.prominentHoverBackground #568188
tab.activeBackground #24292E
tab.activeBorder #6699A1
tab.activeModifiedBorder #D7C4BB
tab.border #384048
tab.hoverBackground #384048
tab.inactiveBackground #2e343b
tab.lastPinnedBorder #6699A150
terminal.selectionBackground #6699A1
terminalCursor.background #000000
terminalCursor.foreground #6699A1
textLink.activeForeground #B5CAA0
textLink.foreground #91B493
textPreformat.foreground #D7C4BB
textSeparator.foreground #101214
titleBar.activeBackground #2e343b
titleBar.border #323840
titleBar.inactiveBackground #24292E
widget.shadow #0e0f11 string, punctuation.definition.string
constant.character.escape #91B493 —
keyword, constant.language.import-export-all #DC9FB4 —
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type #66BAB7 —
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new #91B493 —
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class #B5CAA0 —
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded #DC9FB4 —
constant.numeric, constant.language #D7C4BB —
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust #D7C4BB —
punctuation, meta.brace #a6a6a6 —
variable.language.this, variable.language.special.self #91B493 —
comment.block.documentation entity.name.type #DC9FB4 —
variable.language.super #B5CAA0 —
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype #a6a6a6 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #DC9FB4 —
constant.character.entity, punctuation.definition.entity #D7C4BB —
entity.name.section.markdown, markup.heading.setext #DC9FB4 —
punctuation.definition.list #DC9FB4 —
meta.separator.markdown #DC9FB4 —
markup.inline.raw #91B493 —
meta.link punctuation.definition.string, meta.image punctuation.definition.string #a6a6a6 —
link, markup.underline.link, constant.other.reference.link.markdown #B5CAA0 —
entity.name.tag.css, entity.name.tag.wildcard #6699A1 —
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity #DC9FB4 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color #91B493 —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #B5CAA0 —
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric #6699A1 —
meta.property-name, support.type.property-name #D7C4BB —
meta.property-value, meta.property-value constant.other, support.constant.property-value #B5CAA0 —
variable.parameter.url #D7C4BB —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #DC9FB4 —
entity.name.section #B5CAA0 —
support.type.property-name.json #DC9FB4 —
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*
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 } !` ;
}