Skip to main content
Home Theme VS Code Ayu Light High Contrast The Ayu Light theme with increased contrast for VS Code
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.activeBorder #ee9c22b3 activityBar.background #f8f9fa activityBar.border #f8f9fa activityBar.foreground #8a9199cc activityBar.inactiveForeground #8a919999 activityBarBadge.background #ee9c22 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #5c6166 — comment #62656999 italic string, constant.other.symbol #6d9b00 — string.regexp, constant.character, constant.other #1f9c78 — constant.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Ayu Light High Contrast — Ayu Light High Contrast
activityBarBadge.foreground
#f8f9fa
badge.background #ee9c2233
badge.foreground #e39214
button.background #ee9c22
button.foreground #f8f9fa
button.hoverBackground #e8971c
button.secondaryBackground #8a919933
button.secondaryForeground #5c6166
button.secondaryHoverBackground #8a919980
debugConsoleInputIcon.foreground #ee9c22
debugExceptionWidget.background #f3f4f5
debugExceptionWidget.border #6b7d8f1f
debugIcon.breakpointDisabledForeground #ed936680
debugIcon.breakpointForeground #ed9366
debugToolBar.background #f3f4f5
descriptionForeground #8a9199
diffEditor.diagonalFill #6b7d8f1f
diffEditor.insertedTextBackground #6cbf431f
diffEditor.removedTextBackground #ff73831f
dropdown.background #fcfcfc
dropdown.border #8a919945
dropdown.foreground #8a9199
editor.background #f8f9fa
editor.findMatchBackground #9f40ff2b
editor.findMatchBorder #9f40ff2b
editor.findMatchHighlightBackground #9f40ffcc
editor.findMatchHighlightBorder #8f30efcc
editor.findRangeHighlightBackground #9f40ff40
editor.foreground #5c6166
editor.inactiveSelectionBackground #035bd612
editor.lineHighlightBackground #8a91991a
editor.rangeHighlightBackground #9f40ff33
editor.selectionBackground #035bd626
editor.selectionHighlightBackground #6cbf4326
editor.selectionHighlightBorder #6cbf4300
editor.snippetTabstopHighlightBackground #6cbf4333
editor.wordHighlightBackground #478acc14
editor.wordHighlightBorder #478acc80
editor.wordHighlightStrongBackground #6cbf4314
editor.wordHighlightStrongBorder #6cbf4380
editorBracketMatch.background #8a91994d
editorBracketMatch.border #8a91994d
editorCodeLens.foreground #62656999
editorCursor.foreground #ee9c22
editorError.foreground #e65050
editorGroup.background #f3f4f5
editorGroup.border #6b7d8f1f
editorGroupHeader.noTabsBackground #f8f9fa
editorGroupHeader.tabsBackground #f8f9fa
editorGroupHeader.tabsBorder #f8f9fa
editorGutter.addedBackground #6cbf43cc
editorGutter.deletedBackground #ff7383cc
editorGutter.modifiedBackground #478acccc
editorHoverWidget.background #f3f4f5
editorHoverWidget.border #6b7d8f1f
editorIndentGuide.activeBackground #8a919959
editorIndentGuide.background #8a91992e
editorLineNumber.activeForeground #8a9199cc
editorLineNumber.foreground #8a919966
editorLink.activeForeground #ee9c22
editorMarkerNavigation.background #f3f4f5
editorOverviewRuler.addedForeground #6cbf43
editorOverviewRuler.border #6b7d8f1f
editorOverviewRuler.bracketMatchForeground #8a9199b3
editorOverviewRuler.deletedForeground #ff7383
editorOverviewRuler.errorForeground #e65050
editorOverviewRuler.findMatchForeground #9f40ff2b
editorOverviewRuler.modifiedForeground #478acc
editorOverviewRuler.warningForeground #ee9c22
editorOverviewRuler.wordHighlightForeground #478acc66
editorOverviewRuler.wordHighlightStrongForeground #6cbf4366
editorRuler.foreground #8a91992e
editorSuggestWidget.background #f3f4f5
editorSuggestWidget.border #6b7d8f1f
editorSuggestWidget.highlightForeground #ee9c22
editorSuggestWidget.selectedBackground #56728f1f
editorWarning.foreground #ee9c22
editorWhitespace.foreground #8a919966
editorWidget.background #f3f4f5
editorWidget.border #6b7d8f1f
errorForeground #e65050
extensionButton.prominentBackground #ee9c22
extensionButton.prominentForeground #fcfcfc
extensionButton.prominentHoverBackground #e8971c
focusBorder #ee9c22b3
foreground #8a9199
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground #ff7383b3
gitDecoration.ignoredResourceForeground #8a919980
gitDecoration.modifiedResourceForeground #478accb3
gitDecoration.submoduleResourceForeground #9971c2b3
gitDecoration.untrackedResourceForeground #6cbf43b3
icon.foreground #8a9199
input.background #fcfcfc
input.border #8a919945
input.foreground #5c6166
input.placeholderForeground #8a919980
inputOption.activeBackground #ee9c2233
inputOption.activeBorder #e392144d
inputOption.activeForeground #e39214
inputValidation.errorBackground #fcfcfc
inputValidation.errorBorder #e65050
inputValidation.infoBackground #f8f9fa
inputValidation.infoBorder #379cbb
inputValidation.warningBackground #f8f9fa
inputValidation.warningBorder #cc8d27
keybindingLabel.background #8a91991a
keybindingLabel.border #5c61661a
keybindingLabel.bottomBorder #5c61661a
keybindingLabel.foreground #5c6166
list.activeSelectionBackground #56728f1f
list.activeSelectionForeground #5c6166
list.deemphasizedForeground #e65050
list.errorForeground #e65050
list.filterMatchBackground #8f30efcc
list.filterMatchBorder #9f40ffcc
list.focusBackground #56728f1f
list.focusForeground #5c6166
list.focusOutline #56728f1f
list.highlightForeground #ee9c22
list.hoverBackground #56728f1f
list.inactiveSelectionBackground #6b7d8f1f
list.inactiveSelectionForeground #8a9199
list.invalidItemForeground #8a91994d
listFilterWidget.background #f3f4f5
listFilterWidget.noMatchesOutline #e65050
listFilterWidget.outline #ee9c22
minimap.background #f8f9fa
minimap.errorHighlight #e65050
minimap.findMatchHighlight #9f40ff2b
minimap.selectionHighlight #035bd626
minimapGutter.addedBackground #6cbf43
minimapGutter.deletedBackground #ff7383
minimapGutter.modifiedBackground #478acc
panel.background #f8f9fa
panel.border #6b7d8f1f
panelTitle.activeBorder #ee9c22
panelTitle.activeForeground #5c6166
panelTitle.inactiveForeground #8a9199
peekView.border #56728f1f
peekViewEditor.background #f3f4f5
peekViewEditor.matchHighlightBackground #9f40ffcc
peekViewEditor.matchHighlightBorder #8f30efcc
peekViewResult.background #f3f4f5
peekViewResult.fileForeground #5c6166
peekViewResult.lineForeground #8a9199
peekViewResult.matchHighlightBackground #9f40ffcc
peekViewResult.selectionBackground #56728f1f
peekViewTitle.background #56728f1f
peekViewTitleDescription.foreground #8a9199
peekViewTitleLabel.foreground #5c6166
pickerGroup.border #6b7d8f1f
pickerGroup.foreground #8a919980
progressBar.background #ee9c22
scrollbar.shadow #6b7d8f00
scrollbarSlider.activeBackground #8a9199b3
scrollbarSlider.background #8a919966
scrollbarSlider.hoverBackground #8a919999
selection.background #035bd626
settings.headerForeground #5c6166
settings.modifiedItemIndicator #478acc
sideBar.background #f8f9fa
sideBar.border #f8f9fa
sideBarSectionHeader.background #f8f9fa
sideBarSectionHeader.border #f8f9fa
sideBarSectionHeader.foreground #8a9199
sideBarTitle.foreground #8a9199
statusBar.background #f8f9fa
statusBar.border #f8f9fa
statusBar.debuggingBackground #ed9366
statusBar.debuggingForeground #fcfcfc
statusBar.foreground #8a9199
statusBar.noFolderBackground #f3f4f5
statusBarItem.activeBackground #8a919933
statusBarItem.hoverBackground #8a919933
statusBarItem.prominentBackground #6b7d8f1f
statusBarItem.prominentHoverBackground #00000030
statusBarItem.remoteBackground #ee9c22
statusBarItem.remoteForeground #fcfcfc
tab.activeBackground #f8f9fa
tab.activeBorder #ee9c22
tab.activeForeground #5c6166
tab.border #f8f9fa
tab.inactiveBackground #f8f9fa
tab.inactiveForeground #8a9199
tab.unfocusedActiveBorder #8a9199
tab.unfocusedActiveForeground #8a9199
tab.unfocusedInactiveForeground #8a9199
terminal.ansiBlack #000000
terminal.ansiBlue #0082c7
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #0087cc
terminal.ansiBrightCyan #1f9c78
terminal.ansiBrightGreen #86b300
terminal.ansiBrightMagenta #9971c2
terminal.ansiBrightRed #bf464a
terminal.ansiBrightWhite #d1d1d1
terminal.ansiBrightYellow #cc8d27
terminal.ansiCyan #169874
terminal.ansiGreen #6cbf43
terminal.ansiMagenta #946cbd
terminal.ansiRed #b94146
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #c68821
terminal.background #f8f9fa
terminal.foreground #5c6166
textBlockQuote.background #f3f4f5
textLink.activeForeground #ee9c22
textLink.foreground #ee9c22
textPreformat.foreground #5c6166
titleBar.activeBackground #f8f9fa
titleBar.activeForeground #5c6166
titleBar.border #f8f9fa
titleBar.inactiveBackground #f8f9fa
titleBar.inactiveForeground #8a9199
tree.indentGuidesStroke #8a919959
walkThrough.embeddedEditorBackground #f3f4f5
welcomePage.buttonBackground #ee9c2266
welcomePage.progress.background #8a91991a
welcomePage.tileBackground #f8f9fa
welcomePage.tileShadow #00000026
widget.shadow #00000026 #9971c2
constant.language #9971c2 —
variable, variable.parameter.function-call #5c6166 —
variable.language #379cbb italic
punctuation.separator, punctuation.terminator #5c6166b3 —
punctuation.section #5c6166 —
punctuation.accessor #ed9366 —
punctuation.definition.template-expression #de7526 —
punctuation.section.embedded #de7526 —
source.java storage.type, source.haskell storage.type, source.c storage.type #0087cc —
entity.other.inherited-class #379cbb —
storage.type.function #de7526 —
source.java storage.type.primitive #379cbb —
entity.name.function #cc8d27 —
variable.parameter, meta.parameter #9971c2 —
variable.function, variable.annotation, meta.function-call.generic, support.function.go #cc8d27 —
support.function, support.macro #bf464a —
entity.name.import, entity.name.package #86b300 —
entity.name.tag, meta.tag.sgml #379cbb —
support.class.component #0087cc —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #379cbbcc —
entity.other.attribute-name #cc8d27 —
support.constant #ed9366 italic
support.type, support.class, source.go storage.type #379cbb —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation #cca267 —
meta.diff, meta.diff.header #c594c5 —
source.ruby variable.other.readwrite #cc8d27 —
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag #0087cc —
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type #62656999 —
support.type.property-name #379cbb normal
constant.numeric.line-number.find-in-files - match #62656999 —
constant.numeric.line-number.match #de7526 —
entity.name.filename.find-in-files #86b300 —
markup.heading, markup.heading entity.name #86b300 bold
markup.underline.link, string.other.link #379cbb —
markup.italic #bf464a italic
markup.italic markup.bold, markup.bold markup.italic — bold italic
meta.separator #62656999 bold
markup.quote #1f9c78 italic
markup.list punctuation.definition.list.begin #cc8d27 —
text.html.markdown markup.inline.raw #ed9366 —
text.html.markdown meta.dummy.line-break #62656999 —
punctuation.definition.markdown #62656999 —
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
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
fetchUser
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 } !` ;
}
Ayu Light High Contrast | Coding Theme