Skip to main content
Home Theme VS Code Ansi16 Theme Collection A collection of light & dark themes that comply with the Ansi16 standard
Ansi16 Theme Collection | 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.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
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 } ! ` ;
}