Skip to main content
Home Theme VS Code Frosted Fox Frosted Fox is a bright but chill theme, for those who want to code while staying awake
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 #FFF0EC activityBar.border #FFF0EC60 activityBar.foreground #FF8300 activityBarBadge.background #FF9E2A activityBarBadge.foreground #FFF0EC badge.background #FFF0EC30 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #B7A0FF — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #000000 — constant.other.php #B7A0FF —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Frosted Fox — Frosted Fox
badge.foreground
#FF614C
breadcrumb.activeSelectionForeground #FF614C
breadcrumb.background #FFF0EC
breadcrumb.focusForeground #FF8300
breadcrumb.foreground #C58307
breadcrumbPicker.background #FFF0EC
button.background #FF614C50
contrastBorder #FF614C40
debugToolBar.background #FFF0EC
diffEditor.insertedTextBackground #00000015
diffEditor.removedTextBackground #D800FF20
dropdown.background #FFF0EC
dropdown.border #56565610
editor.background #FFF0EC
editor.findMatchBackground #FFF0EC
editor.findMatchBorder #FF614C
editor.findMatchHighlightBackground #FF614C93
editor.findMatchHighlightBorder #56565630
editor.foreground #FF8300
editor.lineHighlightBackground #FFF0EC50
editor.selectionBackground #FF9E2A30
editor.selectionHighlightBackground #FF614C6b
editor.selectionHighlightBorder #FF9E2Af0
editorBracketMatch.background #FFF0EC
editorBracketMatch.border #B7A0FF7f
editorCursor.foreground #B7A0FF
editorError.foreground #D800FF70
editorGroup.border #FFF0EC30
editorGroupHeader.tabsBackground #FFF0EC
editorGutter.addedBackground #00000060
editorGutter.deletedBackground #D800FF60
editorGutter.modifiedBackground #FF9E2A60
editorHoverWidget.background #FFF0EC
editorHoverWidget.border #56565610
editorIndentGuide.activeBackground #F7C8FF
editorIndentGuide.background #F7C8FF70
editorInfo.foreground #FF9E2A70
editorLineNumber.activeForeground #FF9E2A
editorLineNumber.foreground #FF614Cc0
editorLink.activeForeground #FF8300
editorMarkerNavigation.background #FF830005
editorOverviewRuler.border #FFF0EC
editorOverviewRuler.errorForeground #D800FF40
editorOverviewRuler.findMatchForeground #FF614C
editorOverviewRuler.infoForeground #FF9E2A40
editorOverviewRuler.warningForeground #B7A0FF70
editorRuler.foreground #F7C8FF
editorSuggestWidget.background #FFF0EC
editorSuggestWidget.border #56565610
editorSuggestWidget.foreground #FF8300
editorSuggestWidget.highlightForeground #B7A0FF
editorSuggestWidget.selectedBackground #FF614C20
editorWarning.foreground #000000
editorWhitespace.foreground #FF830040
editorWidget.background #FFF0EC
editorWidget.border #B7A0FF
editorWidget.resizeBorder #FF614C
extensionButton.prominentBackground #00000090
extensionButton.prominentHoverBackground #D800FF
focusBorder #56565600
gitDecoration.conflictingResourceForeground #B7A0FF
gitDecoration.deletedResourceForeground #D800FF
gitDecoration.ignoredResourceForeground #FF614C
gitDecoration.modifiedResourceForeground #C58307
gitDecoration.untrackedResourceForeground #FF9E2A
input.background #FBE7FF
input.border #56565610
input.foreground #FF8300
input.placeholderForeground #FF830060
inputOption.activeBackground #FF830030
inputOption.activeBorder #FF830030
inputValidation.errorBorder #D800FF50
inputValidation.infoBorder #FF9E2A50
inputValidation.warningBorder #B7A0FF50
list.activeSelectionBackground #FFF0EC
list.activeSelectionForeground #FF614C
list.focusBackground #FBE7FF
list.focusForeground #FF9E2A
list.highlightForeground #FF614C
list.hoverBackground #F7C8FF
list.hoverForeground #565656
list.inactiveSelectionBackground #FFF0EC30
list.inactiveSelectionForeground #FF614C
list.warningForeground #B7A0FF
listFilterWidget.background #FFF0EC30
listFilterWidget.noMatchesOutline #FFF0EC30
listFilterWidget.outline #FFF0EC30
menu.background #FFF0ECf8
menu.border #FF614C50
menu.foreground #FF8300
menu.selectionBackground #FBE7FF
menu.selectionBorder #FFF0EC30
menu.selectionForeground #FF8300
menu.separatorBackground #FF8300
menubar.selectionBackground #FBE7FF
menubar.selectionBorder #FF614C50
menubar.selectionForeground #FF8300
minimap.background #FFF0EC
minimapGutter.addedBackground #D800FF
minimapGutter.deletedBackground #B7A0FF
minimapGutter.modifiedBackground #000000
minimapSlider.activeBackground #000000b0
minimapSlider.background #00000080
minimapSlider.hoverBackground #000000a0
notificationLink.foreground #FF614C
notifications.background #FFF0EC
notifications.foreground #FF8300
panel.background #FFF0EC
panel.border #FFF0EC60
panelTitle.activeBorder #FF614C
panelTitle.activeForeground #565656
panelTitle.inactiveForeground #FF8300
peekView.border #FFF0EC30
peekViewEditor.background #FF830005
peekViewEditor.matchHighlightBackground #FF614C50
peekViewEditorGutter.background #FF830005
peekViewResult.background #FF830005
peekViewResult.matchHighlightBackground #FF614C50
peekViewResult.selectionBackground #FF614C70
peekViewTitle.background #FF830005
peekViewTitleDescription.foreground #FF830060
pickerGroup.foreground #FF614C
progressBar.background #FF614C
scrollbar.shadow #FFF0EC00
scrollbarSlider.activeBackground #FF614Ccc
scrollbarSlider.background #FF614Cbb
scrollbarSlider.hoverBackground #FF614Cee
selection.background #FF614C
settings.checkboxBackground #FFF0EC
settings.checkboxForeground #FF8300
settings.dropdownBackground #FFF0EC
settings.dropdownForeground #FF8300
settings.headerForeground #FF614C
settings.modifiedItemIndicator #FF614C
settings.numberInputBackground #FFF0EC
settings.numberInputForeground #FF8300
settings.textInputBackground #FFF0EC
settings.textInputForeground #FF8300
sideBar.background #FFF0EC
sideBar.border #FF614C50
sideBar.foreground #FF9E2A
sideBarSectionHeader.background #FFF0EC
sideBarSectionHeader.border #FFF0EC60
sideBarSectionHeader.foreground #FF9E2A
sideBarTitle.foreground #FF8300
statusBar.background #CEFFBA
statusBar.border #FFF0EC60
statusBar.debuggingBackground #B7A0FF
statusBar.debuggingForeground #565656
statusBar.foreground #0072FF
statusBar.noFolderBackground #FFF0EC
statusBarItem.hoverBackground #FF614C20
statusBarItem.remoteBackground #FF614C
statusBarItem.remoteForeground #FFF0EC
tab.activeBackground #FF614C50
tab.activeBorder #FF614C
tab.activeForeground #565656
tab.activeModifiedBorder #FF614C
tab.border #FFF0EC
tab.inactiveBackground #FF614C20
tab.inactiveForeground #FF8300af
tab.unfocusedActiveBackground #FF614C40
tab.unfocusedActiveBorder #FF614C
tab.unfocusedActiveForeground #FF8300
tab.unfocusedInactiveBackground #FF614C10
tab.unfocusedInactiveForeground #FF83007f
terminal.ansiBlack #FFF0EC
terminal.ansiBlue #FF9E2A
terminal.ansiBrightBlack #FF614C
terminal.ansiBrightBlue #FF9E2A
terminal.ansiBrightCyan #00FAFF
terminal.ansiBrightGreen #000000
terminal.ansiBrightMagenta #B7A0FF
terminal.ansiBrightRed #D800FF
terminal.ansiBrightWhite #565656
terminal.ansiBrightYellow #B7A0FF
terminal.ansiCyan #00FAFF
terminal.ansiGreen #000000
terminal.ansiMagenta #B7A0FF
terminal.ansiRed #D800FF
terminal.ansiWhite #565656
terminal.ansiYellow #B7A0FF
terminalCursor.background #FFF0EC
terminalCursor.foreground #B7A0FF
textLink.activeForeground #FF8300
textLink.foreground #FF614C
titleBar.activeBackground #FFF0EC
titleBar.activeForeground #FF8300
titleBar.border #FFF0EC60
titleBar.inactiveBackground #FFF0EC
titleBar.inactiveForeground #FF614C
tree.indentGuidesStroke #F7C8FF
widget.shadow #FFF0EC30 invalid, invalid.illegal #D800FF —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #C58307 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #FF8300 —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #FF8300 —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #B7A0FF —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #C58307
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #FF9E2A —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #00FAFF —
support.other.variable, string.other.link, markup.table #FF8300 —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #B7A0FF —
variable.parameter.function.language.special, variable.parameter #D800FF —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #000000
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #B7A0FF —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #C58307 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #D800FF —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #FF9E2A italic
entity.other.attribute-name, support.function #B7A0FF —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #FF8300 —
source.scss keyword.control #B7A0FF —
constant.character.escape #00FAFF —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #FF8300 italic
support.type.property-name.json #FF8300 —
text.html.markdown, punctuation.definition.list_item.markdown #FF8300 —
text.html.markdown markup.inline.raw.markdown #B7A0FF —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #FF614C50 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #C58307 bold
markup.underline #FF9E2A underline
markup.quote punctuation.definition.blockquote.markdown #FF614C50 —
string.other.link.description.title.markdown #B7A0FF —
constant.other.reference.link.markdown #B7A0FF —
punctuation.definition.raw.markdown, punctuation.definition.markdown #00FAFF —
variable.language.fenced.markdown #FF614C —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #00FAFF —
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 } ! ` ;
}
Frosted Fox | Coding Theme