Skip to main content
Home Theme VS Code IceAge Theme A monochromatic theme with black and white contrast, featuring simple and clean icons designed to suit the 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.activeBorder #ffffff activityBar.background #111111 activityBar.foreground #FFFFFF activityBarBadge.background #030303 activityBarBadge.foreground #ffffff button.background #e8e8e8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #484848 italic variable, string constant.other.placeholder #FFFFFF — constant.other.color #ffffff — invalid, invalid.illegal #c08f97 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
IceAge Theme — Iceage color theme
button.foreground
#000000
editor.background #111111
editor.foreground #eeffff
editorBracketHighlight.foreground1 #FFFFFF
editorBracketHighlight.foreground2 #A8A8A8
editorBracketHighlight.foreground3 #F0F0F0
editorBracketHighlight.foreground4 #909090
editorBracketHighlight.foreground5 #D8D8D8
editorBracketHighlight.foreground6 #909090
editorError.foreground #a87c7c
editorGroupHeader.tabsBackground #000000
editorGutter.addedBackground #b0b0b0
editorGutter.deletedBackground #767676
editorGutter.modifiedBackground #b0b0b0
editorHoverWidget.background #000000
editorHoverWidget.foreground #ffffff
editorLightBulb.foreground #c8c8c8
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #484848
editorWarning.foreground #8498a9
editorWidget.background #202020a1
editorWidget.foreground #929292
focusBorder #585858
gitDecoration.deletedResourceForeground #C0C0C0
gitDecoration.ignoredResourceForeground #484848
gitDecoration.modifiedResourceForeground #C0C0C0
gitDecoration.untrackedResourceForeground #a1a1a1
input.background #060606
list.activeSelectionBackground #151515
list.activeSelectionForeground #ffffff
list.errorForeground #C0C0C0
list.focusAndSelectionOutline #444444
list.focusBackground #000000
list.focusForeground #f5f5f5
list.focusOutline #282828
list.hoverBackground #111111
list.hoverForeground #e9e9e9
list.inactiveSelectionBackground #1a1a1a
list.inactiveSelectionForeground #ffffff
list.warningForeground #C0C0C0
sideBar.background #000000
sideBar.foreground #888888
sideBarTitle.foreground #e4e4e4
statusBar.background #7c7c7c
statusBar.foreground #000000
tab.border #000000
tab.hoverForeground #ffffff
tab.inactiveBackground #000000
tab.inactiveForeground #5a5a5a
tab.selectedBorderTop #ffffff
terminal.ansiBlack #606060
terminal.ansiBlue #C0C0C0
terminal.ansiBrightBlack #C0C0C0
terminal.ansiBrightBlue #D8D8D8
terminal.ansiBrightCyan #A8A8A8
terminal.ansiBrightGreen #909090
terminal.ansiBrightMagenta #606060
terminal.ansiBrightRed #D8D8D8
terminal.ansiBrightWhite #F0F0F0
terminal.ansiBrightYellow #A8A8A8
terminal.ansiCyan #606060
terminal.ansiGreen #909090
terminal.ansiMagenta #D8D8D8
terminal.ansiRed #A8A8A8
terminal.ansiWhite #F0F0F0
terminal.ansiYellow #C0C0C0
terminal.background #151515
terminal.border #001321
terminal.foreground #e6e6e6
terminal.selectionBackground #8695b733
terminalCursor.background #8a8a8a
terminalCursor.foreground #ffffff
titleBar.activeBackground #151515
titleBar.activeForeground #5d5d5d
tree.indentGuidesStroke #2e2e2e keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #909090 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #D8D8D8 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #C0C0C0 —
meta.block variable.other #F0F0F0 —
support.other.variable, string.other.link #A8A8A8 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #D8D8D8 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #787878 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #D8D8D8 —
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 #909090 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #A8A8A8 —
variable.language #A8A8A8 italic
entity.name.method.js #A8A8A8 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #A8A8A8 —
entity.other.attribute-name #A8A8A8 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #909090 italic
entity.other.attribute-name.class #F0F0F0 —
source.sass keyword.control #D8D8D8 —
constant.character.escape #C0C0C0 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #e2e2e2 italic
source.js constant.other.object.key.js string.unquoted.label.js #A8A8A8 italic
source.json meta.structure.dictionary.json support.type.property-name.json #D8D8D8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C0C0C0 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #A8A8A8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C0C0C0 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #A8A8A8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D8D8D8 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C0C0C0 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #909090 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D8D8D8 —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #A8A8A8 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #C0C0C0 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #FFFFFF —
markup.italic #D8D8D8 italic
markup.bold, markup.bold string #D8D8D8 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #D8D8D8 bold
markup.underline #787878 underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #F0F0F0 —
string.other.link.description.title.markdown #D8D8D8 —
constant.other.reference.link.markdown #C0C0C0 —
markup.raw.block.fenced.markdown #303030 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
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 } ! ` ;
}
IceAge Theme | Coding Theme