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 #263238 activityBar.border #26323860 activityBar.foreground #EEFFFF activityBarBadge.background #80CBC4 activityBarBadge.foreground #000000 badge.background #00000030 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #ddeeee — 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 — Material Community Ansi16
badge.foreground
#546E7A
breadcrumb.activeSelectionForeground #80CBC4
breadcrumb.background #263238
breadcrumb.focusForeground #EEFFFF
breadcrumb.foreground #607a86
breadcrumbPicker.background #263238
button.background #80CBC420
debugToolBar.background #263238
diffEditor.insertedTextBackground #C3E88D15
diffEditor.removedTextBackground #FF537020
dropdown.background #263238
dropdown.border #FFFFFF10
editor.background #263238
editor.findMatchBackground #000000
editor.findMatchBorder #80CBC4
editor.findMatchHighlightBackground #00000050
editor.findMatchHighlightBorder #ffffff30
editor.foreground #EEFFFF
editor.lineHighlightBackground #00000050
editor.selectionBackground #80CBC420
editor.selectionHighlightBackground #FFCC0020
editorBracketMatch.background #263238
editorBracketMatch.border #FFCC0050
editorCursor.foreground #FFCC00
editorError.foreground #FF537070
editorGroup.border #00000030
editorGroupHeader.tabsBackground #263238
editorGutter.addedBackground #C3E88D60
editorGutter.deletedBackground #FF537060
editorGutter.modifiedBackground #82AAFF60
editorHoverWidget.background #263238
editorHoverWidget.border #FFFFFF10
editorIndentGuide.activeBackground #37474F
editorIndentGuide.background #37474F70
editorInfo.foreground #82AAFF70
editorLineNumber.activeForeground #607a86
editorLineNumber.foreground #37474F
editorLink.activeForeground #EEFFFF
editorMarkerNavigation.background #EEFFFF05
editorOverviewRuler.border #263238
editorOverviewRuler.errorForeground #FF537040
editorOverviewRuler.findMatchForeground #80CBC4
editorOverviewRuler.infoForeground #82AAFF40
editorOverviewRuler.warningForeground #FFCB6B40
editorRuler.foreground #37474F
editorSuggestWidget.background #263238
editorSuggestWidget.border #FFFFFF10
editorSuggestWidget.foreground #EEFFFF
editorSuggestWidget.highlightForeground #80CBC4
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #FFCB6B70
editorWhitespace.foreground #EEFFFF40
editorWidget.background #263238
editorWidget.border
editorWidget.resizeBorder #80CBC4
extensionButton.prominentBackground #C3E88D90
extensionButton.prominentHoverBackground #C3E88D
focusBorder #FFFFFF00
gitDecoration.conflictingResourceForeground #FFCB6B90
gitDecoration.deletedResourceForeground #FF537090
gitDecoration.ignoredResourceForeground #607a8690
gitDecoration.modifiedResourceForeground #82AAFF90
gitDecoration.untrackedResourceForeground #C3E88D90
input.background #303C41
input.border #FFFFFF10
input.foreground #EEFFFF
input.placeholderForeground #EEFFFF60
inputOption.activeBackground #EEFFFF30
inputOption.activeBorder #EEFFFF30
inputValidation.errorBorder #FF537050
inputValidation.infoBorder #82AAFF50
inputValidation.warningBorder #FFCB6B50
list.activeSelectionBackground #263238
list.activeSelectionForeground #80CBC4
list.focusBackground #EEFFFF20
list.focusForeground #EEFFFF
list.highlightForeground #80CBC4
list.hoverBackground #263238
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #80CBC4
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #263238
menu.foreground #EEFFFF
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #80CBC4
menu.separatorBackground #EEFFFF
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #80CBC4
notificationLink.foreground #80CBC4
notifications.background #263238
notifications.foreground #EEFFFF
panel.background #263238
panel.border #26323860
panel.dropBackground #EEFFFF
panelTitle.activeBorder #80CBC4
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #EEFFFF
peekView.border #00000030
peekViewEditor.background #EEFFFF05
peekViewEditor.matchHighlightBackground #80CBC420
peekViewEditorGutter.background #EEFFFF05
peekViewResult.background #EEFFFF05
peekViewResult.matchHighlightBackground #80CBC420
peekViewResult.selectionBackground #607a8670
peekViewTitle.background #EEFFFF05
peekViewTitleDescription.foreground #EEFFFF60
pickerGroup.foreground #80CBC4
progressBar.background #80CBC4
scrollbar.shadow #26323800
scrollbarSlider.activeBackground #80CBC4
scrollbarSlider.background #EEFFFF20
scrollbarSlider.hoverBackground #EEFFFF10
selection.background #80CBC4
settings.checkboxBackground #263238
settings.checkboxForeground #EEFFFF
settings.dropdownBackground #263238
settings.dropdownForeground #EEFFFF
settings.headerForeground #80CBC4
settings.modifiedItemIndicator #80CBC4
settings.numberInputBackground #263238
settings.numberInputForeground #EEFFFF
settings.textInputBackground #263238
settings.textInputForeground #EEFFFF
sideBar.background #263238
sideBar.border #26323860
sideBar.foreground #607a86
sideBarSectionHeader.background #263238
sideBarSectionHeader.border #26323860
sideBarTitle.foreground #EEFFFF
statusBar.background #263238
statusBar.border #26323860
statusBar.debuggingBackground #C792EA
statusBar.debuggingForeground #ffffff
statusBar.foreground #546E7A
statusBar.noFolderBackground #263238
statusBarItem.hoverBackground #546E7A20
statusBarItem.remoteBackground #80CBC4
statusBarItem.remoteForeground #000000
tab.activeBorder #80CBC4
tab.activeForeground #FFFFFF
tab.activeModifiedBorder #607a86
tab.border #263238
tab.inactiveBackground #263238
tab.inactiveForeground #607a86
tab.unfocusedActiveBorder #546E7A
tab.unfocusedActiveForeground #EEFFFF
terminal.ansiBlack #676e95
terminal.ansiBlue #82aaff
terminal.ansiBrightBlack #676e95
terminal.ansiBrightBlue #b2e4e6
terminal.ansiBrightCyan #b2e4e6
terminal.ansiBrightGreen #87de97
terminal.ansiBrightMagenta #c792ea
terminal.ansiBrightRed #ff5370
terminal.ansiBrightWhite #f2f3ec
terminal.ansiBrightYellow #f78c6c
terminal.ansiCyan #89ddff
terminal.ansiGreen #c3e88d
terminal.ansiMagenta #c792ea
terminal.ansiRed #f07178
terminal.ansiWhite #dceaea
terminal.ansiYellow #ffcb6b
terminal.background #263238
terminal.foreground #DDEEEE
terminalCursor.background #000000
terminalCursor.foreground #FFCB6B
textLink.activeForeground #EEFFFF
textLink.foreground #80CBC4
titleBar.activeBackground #263238
titleBar.activeForeground #EEFFFF
titleBar.border #26323860
titleBar.inactiveBackground #263238
titleBar.inactiveForeground #607a86
tree.indentGuidesStroke #37474F
widget.shadow #00000030 #b2e4e6
punctuation.separator.pointer-access #b2e4e6 —
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 #89ddff —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #f78c6c —
source.css variable #f2f3ec —
source.css support.type.property-name #dceaea —
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 #82aaff —
keyword, storage #c792ea bold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable #89ddff —
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder #dceaea —
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 #b2e4e6 —
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 #b2e4e6 —
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field #f2f3ec —
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 #89ddff —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #89ddff 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 #82aaff —
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 #89ddff —
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 #dceaea —
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 #f2f3ec —
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 #82aaff —
string.other.link.description.title.markdown #c792ea —
markup.quote #89ddff italic
text.html.markdown, punctuation.definition.list_item.markdown #dceaea —
variable.language.fenced.markdown #f2f3ec —
source.purescript entity.name.type #ffcb6b —
source.purescript entity.name.class #f78c6c —
storage.type.string.python #b2e4e6 —
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 } ! ` ;
}