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.activeBackground #0099ad33 activityBar.activeBorder #0099ad activityBar.background #fef8ec activityBar.border #ece2c600 activityBar.foreground #0099ad activityBarBadge.background #0099ad tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #005661 — invalid, invalid.illegal #e5164a — invalid.deprecated #b3694d — *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 — Noctis Lux Ansi16
activityBarBadge.foreground
#fef8ec
badge.background #0099ad
badge.foreground #fef8ec
breadcrumb.activeSelectionForeground #005661
breadcrumb.background #fef8ec
breadcrumb.focusForeground #0099ad
breadcrumb.foreground #888477
breadcrumbPicker.background #f2edde
button.background #099
button.foreground #f1f1f1
button.hoverBackground #0cc
debugExceptionWidget.background #f9f1e1
debugExceptionWidget.border #00899e
debugToolBar.background #f9f1e1
descriptionForeground #929ea0
diffEditor.insertedTextBackground #14b83230
diffEditor.removedTextBackground #BB1F0522
dropdown.background #fef8ec
dropdown.border #fef8ec
dropdown.foreground #005661
editor.background #fef8ec
editor.findMatchBackground #8ce99a55
editor.findMatchBorder #8ce99a00
editor.findMatchHighlightBackground #148f9f33
editor.findMatchHighlightBorder #148f9f00
editor.findRangeHighlightBackground #99e62a55
editor.findRangeHighlightBorder #58CC6D00
editor.foreground #005661
editor.hoverHighlightBackground #0099ad3f
editor.inactiveSelectionBackground #bce8f055
editor.lineHighlightBorder #ade2eb77
editor.rangeHighlightBackground #f1e9d5a1
editor.selectionBackground #ade2eb77
editor.selectionHighlightBackground #bce8f055
editor.selectionHighlightBorder #14a5ff00
editor.snippetFinalTabstopHighlightBackground #fdefd3
editor.snippetFinalTabstopHighlightBorder #fdf3dd
editor.snippetTabstopHighlightBackground #fdefd3
editor.snippetTabstopHighlightBorder #fdf3dd
editor.wordHighlightBackground #e9a14922
editor.wordHighlightBorder #e9a14900
editor.wordHighlightStrongBackground #b5890027
editor.wordHighlightStrongBorder #b5890000
editorBracketMatch.background #0099ad20
editorBracketMatch.border #0099ad
editorCodeLens.foreground #77aaca
editorCursor.foreground #0092a8
editorError.border #fef8ec
editorError.foreground #ff4000
editorGroup.border #f0e7d1
editorGroup.dropBackground #b8ae9333
editorGroup.emptyBackground #b8ae9333
editorGroupHeader.noTabsBackground #f0e9d6
editorGroupHeader.tabsBackground #f0e9d6
editorGroupHeader.tabsBorder #f0e9d600
editorGutter.addedBackground #8ce99a
editorGutter.background #fef8ec
editorGutter.deletedBackground #ff4000
editorGutter.modifiedBackground #e9a149
editorHint.border #58cc6d00
editorHint.foreground #58cc6d
editorHoverWidget.background #f2edde
editorHoverWidget.border #ece2c600
editorIndentGuide.activeBackground #88adc3
editorIndentGuide.background #d3cec5aa
editorInfo.border #fef8ec
editorInfo.foreground #00c6e0
editorInlayHint.background #f9f1e1
editorInlayHint.foreground #8ca6a6
editorInlayHint.parameterBackground #f9f1e1
editorInlayHint.parameterForeground #8ca6a6
editorInlayHint.typeBackground #f9f1e1
editorInlayHint.typeForeground #8ca6a6
editorLineNumber.activeForeground #0099ad
editorLineNumber.foreground #a0abac
editorLink.activeForeground #14a5ff
editorMarkerNavigation.background #3a3a5e29
editorMarkerNavigationError.background #ff4000
editorMarkerNavigationWarning.background #e69533
editorOverviewRuler.border #fef8ec
editorOverviewRuler.commonContentForeground #ffc18055
editorOverviewRuler.currentContentForeground #33e7ff55
editorOverviewRuler.incomingContentForeground #9d92f255
editorRuler.foreground #f1e6d0
editorSuggestWidget.background #f2edde
editorSuggestWidget.border #ece2c600
editorSuggestWidget.foreground #6a7a7c
editorSuggestWidget.highlightForeground #0099ad
editorSuggestWidget.selectedBackground #dbfaff
editorWarning.border #fef8ec
editorWarning.foreground #e69533
editorWhitespace.foreground #d3cec5bb
editorWidget.background #f2edde
editorWidget.border #ece2c600
errorForeground #ff4000
extensionButton.prominentBackground #099
extensionButton.prominentForeground #e5f5f5
extensionButton.prominentHoverBackground #0cc
focusBorder #f2edde
foreground #005661
gitDecoration.addedResourceForeground #009456
gitDecoration.conflictingResourceForeground #e9a149
gitDecoration.deletedResourceForeground #ff4000
gitDecoration.ignoredResourceForeground #a8a28faa
gitDecoration.modifiedResourceForeground #14b832
gitDecoration.untrackedResourceForeground #00c6e0
input.background #fef8ec
input.border #f2edde
input.foreground #6a7a7c
input.placeholderForeground #9fabad
inputOption.activeBorder #0099ad
inputValidation.errorBackground #ff400041
inputValidation.errorBorder #ff4000
inputValidation.infoBackground #00c6e0cc
inputValidation.infoBorder #00c6e0
inputValidation.warningBackground #ffa587cc
inputValidation.warningBorder #ffa487
list.activeSelectionBackground #b6e1e7
list.activeSelectionForeground #005661
list.dropBackground #cdcbb2
list.errorForeground #c9481d
list.focusBackground #bee3ea
list.focusForeground #005661
list.highlightForeground #0099ad
list.hoverBackground #d2f3f9
list.hoverForeground #005661
list.inactiveFocusBackground #c9eaed
list.inactiveSelectionBackground #d5eef1
list.inactiveSelectionForeground #949384
list.warningForeground #e07a52
listFilterWidget.background #d5eef1
listFilterWidget.noMatchesOutline #ff4000
listFilterWidget.outline #14b832
menu.background #f2edde
menu.foreground #888477
menu.selectionBackground #d2f3f9
menu.selectionBorder #d2f3f9
menu.selectionForeground #0099ad
menubar.selectionBackground #d2f3f9
menubar.selectionBorder #d2f3f9
menubar.selectionForeground #0099ad
merge.border #fef8ec00
merge.commonContentBackground #ffc18033
merge.commonHeaderBackground #ffc18055
merge.currentContentBackground #33e7ff33
merge.currentHeaderBackground #33e7ff55
merge.incomingContentBackground #9d92f233
merge.incomingHeaderBackground #9d92f255
minimap.background #fef8ec99
minimap.errorHighlight #ff4000ee
minimap.findMatchHighlight #0099adaa
minimap.warningHighlight #e69533ee
minimapGutter.addedBackground #009456
minimapGutter.deletedBackground #ff4000
minimapGutter.modifiedBackground #14b832
notificationCenter.border #f2edde
notificationCenterHeader.background #f2edde
notificationCenterHeader.foreground #005661
notificationLink.foreground #005661
notifications.background #f2edde
notifications.border #f2edde
notifications.foreground #005661
notificationToast.border #f2edde
panel.background #f6edda
panel.border #00c6e0
panelTitle.activeBorder #00c6e0
panelTitle.activeForeground #0099ad
panelTitle.inactiveForeground #888477
peekView.border #0099ad
peekViewEditor.background #fff7e5
peekViewEditor.matchHighlightBackground #148f9f33
peekViewEditor.matchHighlightBorder #148f9f79
peekViewEditorGutter.background #fff7e5
peekViewResult.background #f9f1e1
peekViewResult.fileForeground #e9a149
peekViewResult.lineForeground #87a7ab
peekViewResult.matchHighlightBackground #f2edde
peekViewResult.selectionBackground #f2edde
peekViewResult.selectionForeground #6a7a7c
peekViewTitle.background #f9f1e1
peekViewTitleDescription.foreground #87a7ab
peekViewTitleLabel.foreground #e9a149
pickerGroup.border #00c6e0
pickerGroup.foreground #0099ad
progressBar.background #00c6e0
scrollbar.shadow #00000055
scrollbarSlider.activeBackground #0099adad
scrollbarSlider.background #6a90955b
scrollbarSlider.hoverBackground #0099ad62
selection.background #169fb155
settings.checkboxBackground #f2edde
settings.checkboxBorder #f2edde
settings.checkboxForeground #0bb
settings.dropdownBackground #f2edde
settings.dropdownBorder #f2edde
settings.dropdownForeground #0bb
settings.dropdownListBorder #ade2eb88
settings.headerForeground #004d57
settings.modifiedItemIndicator #00bd23
settings.numberInputBackground #f0e7d1
settings.numberInputBorder #f0e7d1
settings.numberInputForeground #5842ff
settings.textInputBackground #f2edde
settings.textInputBorder #f2edde
settings.textInputForeground #0bb
sideBar.background #f9f1e1
sideBar.border #ece2c600
sideBar.dropBackground #f9f1e1
sideBar.foreground #888477
sideBarSectionHeader.background #f2e7ca
sideBarSectionHeader.foreground #888477
sideBarTitle.foreground #888477
statusBar.background #f0e9d6
statusBar.border #ece2c600
statusBar.debuggingBackground #f9f1e1
statusBar.debuggingBorder #e94981af
statusBar.debuggingForeground #e9498150
statusBar.foreground #0099ad
statusBar.noFolderBackground #f9f1e1
statusBar.noFolderBorder #f9f1e1
statusBar.noFolderForeground #87a7ab
statusBarItem.activeBackground #dfeff1
statusBarItem.hoverBackground #d1e8eb
statusBarItem.prominentBackground #c1d4d7
statusBarItem.prominentHoverBackground #bfdee3
tab.activeBackground #fef8ec
tab.activeBorder #fef8ec
tab.activeBorderTop #00c6e0
tab.activeForeground #0099ad
tab.activeModifiedBorder #00b368
tab.border #e6d7b2
tab.inactiveBackground #f0e9d6
tab.inactiveForeground #888477
tab.unfocusedActiveBackground #f7f2e3
tab.unfocusedActiveBorder #fef8ec00
tab.unfocusedActiveForeground #888477
tab.unfocusedHoverBackground #0099ad21
tab.unfocusedInactiveForeground #888477
terminal.ansiBlack #8ca6a6
terminal.ansiBlue #0095a8
terminal.ansiBrightBlack #8ca6a6
terminal.ansiBrightBlue #0094f0
terminal.ansiBrightCyan #00bdd6
terminal.ansiBrightGreen #00b368
terminal.ansiBrightMagenta #ff5792
terminal.ansiBrightRed #e5164a
terminal.ansiBrightWhite #004d57
terminal.ansiBrightYellow #b3694d
terminal.ansiCyan #00bdd6
terminal.ansiGreen #00b368
terminal.ansiMagenta #ff5792
terminal.ansiRed #e64100
terminal.ansiWhite #005661
terminal.ansiYellow #fa8900
terminal.background #fef8ec
terminal.foreground #005661
terminalCursor.background #f6edda
terminalCursor.foreground #005661
textBlockQuote.background #f9f1e1
textBlockQuote.border #00899e
textCodeBlock.background #f9f1e1
textLink.activeForeground #00c6e0
textLink.foreground #00c6e0
textPreformat.foreground #e9a149
textSeparator.foreground #f9f1e1
titleBar.activeBackground #f9f1e1
titleBar.activeForeground #005661
titleBar.inactiveBackground #f9f1e1
titleBar.inactiveForeground #888477
tree.indentGuidesStroke #d3cec5
walkThrough.embeddedEditorBackground #f9f1e1
widget.shadow #00000055 #0094f0
punctuation.separator.pointer-access #0094f0 —
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 #00bdd6 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #b3694d —
source.css variable #004d57 —
source.css support.type.property-name #005661 —
comment, punctuation.definition.comment, string.quoted.docstring #8ca6a6 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 #e64100 —
string, constant.other.symbol #00b368 —
entity.name, entity.other.attribute-name #fa8900 —
entity.name.function, variable.function #0095a8 —
keyword, storage #ff5792 bold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable #00bdd6 —
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder #005661 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit #e5164a —
string.other.link #00b368 —
entity.name.type.parameter, entity.name.type.type-parameter, variable.other.generic-type #b3694d —
keyword.operator, support.function #0094f0 —
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 #00bdd6 —
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field #004d57 —
markup.deleted.git_gutter #e64100 —
markup.inserted.git_gutter #00b368 —
markup.changed.git_gutter #fa8900 —
markup.untracked.git_gutter #e5164a —
markup.ignored.git_gutter #8ca6a6 —
constant.other.haskell #e64100 —
storage.type.haskell #fa8900
source.js storage, source.js keyword.declaration #fa8900 —
constant.other.key meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #00b368
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #00bdd6 —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #00bdd6 italic
source.json meta.structure.dictionary.json support.type.property-name.json #e64100 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #fa8900 —
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 #b3694d —
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 #00b368 —
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 #0095a8 —
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 #00bdd6 —
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 #ff5792 —
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 #005661 —
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 #004d57 —
markup.bold, markup.bold string #e64100 bold
markup.italic #ff5792 italic
markup.underline #00b368 underline
markup.strike #8ca6a6 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 #e5164a bold
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.setext #e64100 bold
constant.other.reference.link.markdown, string.other.link.title.markdown #fa8900 —
markup.raw, markup.fenced_code, markup.inline.raw #0095a8 —
string.other.link.description.title.markdown #ff5792 —
markup.quote #00bdd6 italic
text.html.markdown, punctuation.definition.list_item.markdown #005661 —
variable.language.fenced.markdown #004d57 —
source.purescript entity.name.type #fa8900 —
source.purescript entity.name.class #b3694d —
storage.type.string.python #00bdd6 —
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime #b3694d —
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
Light+
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 } ! ` ;
}