Skip to main content
Home Theme VS Code Ansi16 Theme Collection A collection of light & dark themes that comply with the Ansi16 standard
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 #171520 activityBar.foreground #ffffffCC activityBarBadge.background #f97e72 activityBarBadge.foreground #2a2139 badge.background #2a2139 badge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #cccccc — invalid, invalid.illegal #ff5370 — invalid.deprecated #f78c6c — *url*, *link*, *uri* — underline storage.modifier.pointer, storage.modifier.reference
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Ansi16 Theme Collection — Synthwave Material Ansi16 Ansi16 Theme Collection | Coding Theme
breadcrumbPicker.background
#232530
button.background #614D85
debugToolBar.background #463465
diffEditor.insertedTextBackground #0beb9935
diffEditor.removedTextBackground #fe445035
dropdown.background #232530
dropdown.listBackground #2a2139
editor.background #262335
editor.findMatchBackground #D18616bb
editor.findMatchHighlightBackground #D1861655
editor.findRangeHighlightBackground #34294f1a
editor.hoverHighlightBackground #463564
editor.lineHighlightBorder #7059AB66
editor.rangeHighlightBackground #49549539
editor.selectionBackground #ffffff24
editor.selectionHighlightBackground #ffffff14
editor.wordHighlightBackground #34294f88
editor.wordHighlightStrongBackground #34294f88
editorBracketMatch.background #34294f66
editorBracketMatch.border #495495
editorCodeLens.foreground #ffffff7c
editorCursor.background #241b2f
editorCursor.foreground #f97e72
editorError.foreground #fe4450
editorGroup.border #495495
editorGroup.dropBackground #4954954a
editorGroupHeader.tabsBackground #241b2f
editorGutter.addedBackground #206d4bd6
editorGutter.deletedBackground #fa2e46a4
editorGutter.modifiedBackground #b893ce8f
editorIndentGuide.activeBackground #A148AB80
editorIndentGuide.background #444251
editorLineNumber.activeForeground #ffffffcc
editorLineNumber.foreground #ffffff73
editorOverviewRuler.addedForeground #09f7a099
editorOverviewRuler.border #34294fb3
editorOverviewRuler.deletedForeground #fe445099
editorOverviewRuler.errorForeground #fe4450dd
editorOverviewRuler.findMatchForeground #D1861699
editorOverviewRuler.modifiedForeground #b893ce99
editorOverviewRuler.warningForeground #72f1b8cc
editorRuler.foreground #A148AB80
editorSuggestWidget.highlightForeground #f97e72
editorSuggestWidget.selectedBackground #ffffff36
editorWarning.foreground #72f1b8cc
editorWidget.background #171520DC
editorWidget.border #ffffff22
editorWidget.resizeBorder #ffffff44
errorForeground #fe4450
extensionButton.prominentBackground #f97e72
extensionButton.prominentHoverBackground #ff7edb
focusBorder #1f212b
foreground #ffffff
gitDecoration.addedResourceForeground #72f1b8cc
gitDecoration.deletedResourceForeground #fe4450
gitDecoration.ignoredResourceForeground #ffffff59
gitDecoration.modifiedResourceForeground #b893ceee
gitDecoration.untrackedResourceForeground #72f1b8
input.background #2a2139
inputOption.activeBorder #ff7edb99
inputValidation.errorBackground #fe445080
inputValidation.errorBorder #fe445000
list.activeSelectionBackground #ffffff20
list.activeSelectionForeground #ffffff
list.dropBackground #34294f66
list.errorForeground #fe4450E6
list.focusBackground #ffffff20
list.focusForeground #ffffff
list.highlightForeground #f97e72
list.hoverBackground #37294d99
list.hoverForeground #ffffff
list.inactiveFocusBackground #2a213999
list.inactiveSelectionBackground #ffffff20
list.inactiveSelectionForeground #ffffff
list.warningForeground #72f1b8bb
menu.background #463465
minimapGutter.addedBackground #09f7a099
minimapGutter.deletedBackground #fe4450
minimapGutter.modifiedBackground #b893ce
panelTitle.activeBorder #f97e72
peekView.border #495495
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #D18616bb
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #D1861655
peekViewResult.selectionBackground #2a213980
peekViewTitle.background #232530
pickerGroup.foreground #f97e72ea
progressBar.background #f97e72
scrollbar.shadow #2a2139
scrollbarSlider.activeBackground #9d8bca20
scrollbarSlider.background #9d8bca30
scrollbarSlider.hoverBackground #9d8bca50
selection.background #ffffff20
sideBar.background #241b2f
sideBar.dropBackground #34294f4c
sideBar.foreground #ffffff99
sideBarSectionHeader.background #241b2f
sideBarSectionHeader.foreground #ffffffca
statusBar.background #241b2f
statusBar.debuggingBackground #f97e72
statusBar.debuggingForeground #08080f
statusBar.foreground #ffffff80
statusBar.noFolderBackground #241b2f
statusBarItem.prominentBackground #2a2139
statusBarItem.prominentHoverBackground #34294f
tab.activeBorder #880088
tab.border #241b2f00
tab.inactiveBackground #262335
terminal.ansiBlack #676e95
terminal.ansiBlue #94afeb
terminal.ansiBrightBlack #676e95
terminal.ansiBrightBlue #b9dedf
terminal.ansiBrightCyan #8ee2e5
terminal.ansiBrightGreen #87de97
terminal.ansiBrightMagenta #c792ea
terminal.ansiBrightRed #ff5370
terminal.ansiBrightWhite #dddddd
terminal.ansiBrightYellow #f78c6c
terminal.ansiCyan #b9dedf
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #c792ea
terminal.ansiRed #f07178
terminal.ansiWhite #b4b8d0
terminal.ansiYellow #ffcb6b
terminal.background #262335
terminal.foreground #cccccc
terminal.selectionBackground #ffffff20
terminalCursor.background #ffffff
terminalCursor.foreground #03edf9
textLink.activeForeground #ff7edb
textLink.foreground #f97e72
titleBar.activeBackground #241b2f
titleBar.inactiveBackground #241b2f
walkThrough.embeddedEditorBackground #232530
widget.shadow #2a2139 #b9dedf
punctuation.separator.pointer-access #b9dedf —
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 #b9dedf —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #f78c6c —
source.css variable #dddddd —
source.css support.type.property-name #b4b8d0 —
comment, punctuation.definition.comment, string.quoted.docstring #676e95 italic
keyword.type, entity.name.tag, meta.tag.sgml, entity.name.type.struct, support.type, support.class, support.type.sys-types, support.type.built-in #f07178 —
string, constant.other.symbol #c3e88d —
entity.name, entity.other.attribute-name #ffcb6b —
entity.name.function, variable.function #94afeb —
keyword, storage #c792ea bold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable #b9dedf —
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder #b4b8d0 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit #ff5370 —
string.other.link #87de97 —
entity.name.type.parameter, entity.name.type.type-parameter, variable.other.generic-type #f78c6c —
keyword.operator, support.function #b9dedf —
punctuation.definition.tag, punctuation.definition, punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.separator #8ee2e5 —
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field #dddddd —
markup.deleted.git_gutter #f07178 —
markup.inserted.git_gutter #c3e88d —
markup.changed.git_gutter #ffcb6b —
markup.untracked.git_gutter #ff5370 —
markup.ignored.git_gutter #676e95 —
constant.other.haskell #f07178 —
storage.type.haskell #ffcb6b
source.js storage, source.js keyword.declaration #ffcb6b —
constant.other.key meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #c3e88d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #b9dedf —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #b9dedf italic
source.json meta.structure.dictionary.json support.type.property-name.json #f07178 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffcb6b —
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 #f78c6c —
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 #c3e88d —
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 #94afeb —
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 #b9dedf —
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 #c792ea —
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 #b4b8d0 —
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 #dddddd —
markup.bold, markup.bold string #f07178 bold
markup.italic #c792ea italic
markup.underline #c3e88d underline
markup.strike #676e95 strike
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 #ff5370 bold
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.setext #f07178 bold
constant.other.reference.link.markdown, string.other.link.title.markdown #ffcb6b —
markup.raw, markup.fenced_code, markup.inline.raw #94afeb —
string.other.link.description.title.markdown #c792ea —
markup.quote #b9dedf italic
text.html.markdown, punctuation.definition.list_item.markdown #b4b8d0 —
variable.language.fenced.markdown #dddddd —
source.purescript entity.name.type #ffcb6b —
source.purescript entity.name.class #f78c6c —
storage.type.string.python #8ee2e5 —
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime #f78c6c —
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 } ! ` ;
}