Skip to main content
Home Theme VS Code Illuminary Illuminary is a vibrant dark-yellowish theme for vscode based on the Pantone colors of the year 2021.
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 #1D1F2A activityBar.activeBorder #F2F0EB activityBar.activeFocusBorder #939597 activityBar.background #1D1F2A activityBar.border #F2F0EB1a activityBar.foreground #F2F0EB tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle string #F93822 constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html #F93822 bold constant.language.boolean #F93822 constant.numeric #F93822 variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.inactiveForeground
#939597
activityBarBadge.background #F2F0EB
activityBarBadge.foreground #1D1F2A
badge.background #F2F0EB
badge.foreground #1D1F2A
button.background #F2F0EB
button.border #F2F0EB1a
button.foreground #1D1F2A
button.hoverBackground #F2F0EB
button.secondaryBackground #F2F0EB
button.secondaryForeground #1D1F2A
button.secondaryHoverBackground #F2F0EB
checkbox.background #1D1F2A
checkbox.border #F2F0EB1a
checkbox.foreground #F2F0EB
debugToolBar.background #1D1F2A
descriptionForeground #F2F0EB
diffEditor.border #F2F0EB1a
diffEditor.diagonalFill #F2F0EB1a
diffEditor.insertedTextBackground #2CC84D1a
diffEditor.removedTextBackground #F938221a
dropdown.background #1D1F2A
dropdown.border #F2F0EB1a
dropdown.foreground #F2F0EB
dropdown.listBackground #1D1F2A
editor.background #1D1F2A
editor.findMatchBackground #F2F0EB1a
editor.findMatchHighlightBackground #F2F0EB1a
editor.foreground #F2F0EB
editor.inactiveSelectionBackground #F2F0EB1a
editor.lineHighlightBorder #F2F0EB1a
editor.rangeHighlightBackground #F2F0EB1a
editor.selectionBackground #F2F0EB1a
editor.selectionHighlightBackground #F2F0EB1a
editor.wordHighlightBackground #F2F0EB1a
editorBracketMatch.background #F2F0EB1a
editorBracketMatch.border #1D1F2A
editorError.foreground #F93822
editorGroup.dropBackground #F2F0EB1a
editorGroup.focusedEmptyBorder #F2F0EB
editorGroupHeader.tabsBackground #1D1F2A
editorGutter.addedBackground #2CC84D
editorGutter.background #1D1F2A
editorGutter.commentRangeForeground #939597
editorGutter.deletedBackground #F93822
editorGutter.foldingControlForeground #F2F0EB
editorGutter.modifiedBackground #4ABBD5
editorHint.foreground #2CC84D
editorHoverWidget.background #1D1F2A
editorInfo.foreground #4ABBD5
editorLightBulb.foreground #F5DF4D
editorLineNumber.activeForeground #939597
editorLineNumber.foreground #F2F0EB1a
editorLink.activeForeground #4ABBD5
editorMarkerNavigation.background #1D1F2A
editorOverviewRuler.addedForeground #2CC84D
editorOverviewRuler.deletedForeground #F93822
editorOverviewRuler.errorForeground #F93822
editorOverviewRuler.findMatchForeground #F2F0EB1a
editorOverviewRuler.infoForeground #4ABBD5
editorOverviewRuler.modifiedForeground #F5DF4D
editorOverviewRuler.warningForeground #F5DF4D
editorWarning.foreground #F5DF4D
editorWidget.background #1D1F2A
errorForeground #F93822
focusBorder #F2F0EB1a
foreground #F2F0EB
gitDecoration.addedResourceForeground #2CC84D
gitDecoration.conflictingResourceForeground #4ABBD5
gitDecoration.deletedResourceForeground #F93822
gitDecoration.ignoredResourceForeground #939597
gitDecoration.modifiedResourceForeground #F5DF4D
gitDecoration.renamedResourceForeground #F5DF4D
gitDecoration.stageDeletedResourceForeground #F93822
gitDecoration.stageModifiedResourceForeground #F5DF4D
gitDecoration.submoduleResourceForeground #F2F0EB
gitDecoration.untrackedResourceForeground #2CC84D
icon.foreground #F2F0EB
input.background #1D1F2A
input.border #F2F0EB1a
input.foreground #F2F0EB
input.placeholderForeground #939597
inputOption.activeBackground #F2F0EB1a
inputOption.activeBorder #F2F0EB1a
inputOption.activeForeground #F2F0EB
inputValidation.errorBackground #F93822
inputValidation.errorBorder #F93822
inputValidation.errorForeground #1D1F2A
inputValidation.infoBackground #4ABBD5
inputValidation.infoBorder #4ABBD5
inputValidation.infoForeground #1D1F2A
inputValidation.warningBackground #F5DF4D
inputValidation.warningBorder #F5DF4D
inputValidation.warningForeground #1D1F2A
list.activeSelectionBackground #F2F0EB1a
list.activeSelectionForeground #F2F0EB
list.activeSelectionIconForeground #F2F0EB
list.dropBackground #F2F0EB1a
list.errorForeground #F93822
list.filterMatchBackground #F2F0EB1a
list.filterMatchBorder #F2F0EB1a
list.focusBackground #F2F0EB1a
list.focusForeground #F2F0EB
list.focusHighlightForeground #4ABBD5
list.focusOutline #F2F0EB1a
list.highlightForeground #939597
list.hoverBackground #F2F0EB1a
list.hoverForeground #F2F0EB
list.inactiveFocusBackground #F2F0EB1a
list.inactiveFocusOutline #F2F0EB1a
list.inactiveSelectionBackground #F2F0EB1a
list.inactiveSelectionForeground #F2F0EB
list.inactiveSelectionIconForeground #F2F0EB
list.invalidItemForeground #F93822
list.warningForeground #F5DF4D
minimap.background #1D1F2A
minimap.errorHighlight #F93822
minimap.findMatchHighlight #F2F0EB1a
minimap.selectionHighlight #F2F0EB1a
minimap.warningHighlight #F5DF4D
minimapGutter.addedBackground #2CC84D
minimapGutter.deletedBackground #F93822
minimapGutter.modifiedBackground #F5DF4D
minimapSlider.activeBackground #F2F0EB1a
minimapSlider.background #F2F0EB1a
minimapSlider.hoverBackground #F2F0EB1a
panel.background #1D1F2A
panel.border #F2F0EB1a
panelTitle.activeBorder #1D1F2A
panelTitle.inactiveForeground #939597
peekView.border #F2F0EB1a
peekViewEditor.background #1D1F2A
peekViewEditor.matchHighlightBackground #F2F0EB1a
peekViewResult.background #1D1F2A
peekViewResult.matchHighlightBackground #F2F0EB1a
peekViewTitle.background #1D1F2A
pickerGroup.border #1D1F2A
problemsErrorIcon.foreground #F93822
problemsInfoIcon.foreground #4ABBD5
problemsWarningIcon.foreground #F5DF4D
sash.hoverBorder #F2F0EB
scrollbar.shadow #10131e
scrollbarSlider.activeBackground #F2F0EB1a
scrollbarSlider.background #F2F0EB1a
scrollbarSlider.hoverBackground #F2F0EB1a
searchEditor.findMatchBackground #F2F0EB1a
selection.background #939597
sideBar.background #1D1F2A
sideBar.border #F2F0EB1a
sideBar.dropBackground #F2F0EB1a
sideBar.foreground #F2F0EB
sideBarSectionHeader.background #1D1F2A
sideBarSectionHeader.border #F2F0EB1a
sideBarSectionHeader.foreground #F2F0EB
sideBarTitle.foreground #F2F0EB
statusBar.background #1D1F2A
statusBar.border #F2F0EB1a
statusBar.debuggingBackground #1D1F2A
statusBar.debuggingBorder #F2F0EB1a
statusBar.debuggingForeground #F2F0EB
statusBar.foreground #F2F0EB
statusBar.noFolderBackground #1D1F2A
statusBar.noFolderBorder #F2F0EB1a
statusBar.noFolderForeground #F2F0EB
statusBarItem.activeBackground #F2F0EB1a
statusBarItem.hoverBackground #F2F0EB1a
statusBarItem.remoteBackground #1D1F2A
statusBarItem.remoteForeground #F2F0EB
tab.activeBorder #F2F0EB1a
tab.activeModifiedBorder #F2F0EB1a
tab.border #F2F0EB1a
tab.inactiveBackground #1D1F2A
tab.inactiveModifiedBorder #F2F0EB1a
tab.unfocusedActiveModifiedBorder #F2F0EB1a
tab.unfocusedInactiveModifiedBorder #F2F0EB1a
textBlockQuote.background #1D1F2A
textBlockQuote.border #939597
textCodeBlock.background #1D1F2A
textLink.activeForeground #4ABBD5
textLink.foreground #4ABBD5
textPreformat.foreground #4ABBD5
textSeparator.foreground #4ABBD5
titleBar.activeBackground #1D1F2A
titleBar.activeForeground #F2F0EB
titleBar.inactiveBackground #1D1F2A
titleBar.inactiveForeground #939597
toolbar.activeBackground #F2F0EB1a
toolbar.hoverBackground #F2F0EB1a
tree.indentGuidesStroke #F2F0EB1a
tree.tableColumnsBorder #F2F0EB1a
widget.shadow #10131e keyword, modifier, variable.language.this, support.type.object, constant.language #4ABBD5 bold
entity.name.function, support.function #F5DF4D
storage.type, storage.modifier #4ABBD5 bold
support.module, support.node #4ABBD5 italic
support.type, entity.name.type, entity.other.inherited-class #F5DF4D bold
meta.class, entity.name.type.class #F5DF4D bold
variable.object.property, meta.field.declaration entity.name.function #4ABBD5
meta.definition.method entity.name.function #F5DF4D
meta.function entity.name.function #F5DF4D
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #F93822 bold
meta.embedded, source.groovy.embedded, meta.template.expression #F2F0EB
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #4ABBD5 bold
constant.language.json #F2F0EB
source.json constant.numeric #F2F0EB
source.json string #F2F0EB
source.json constant.character.escape #F2F0EB bold
entity.other.attribute-name.class #4ABBD5 bold
entity.other.attribute-name.id #4ABBD5 bold
source.css entity.name.tag #4ABBD5 bold
meta.tag, punctuation.definition.tag #F93822
entity.other.attribute-name #4ABBD5
text.html.markdown meta.link.inline, meta.link.reference #4ABBD5 underline
text.html.markdown string #4ABBD5
markup.italic #F5DF4D italic
markup.bold markup.italic, markup.italic markup.bold #F5DF4D italic bold
markup.fenced_code.block.markdown #4ABBD5
markup.inline.raw.string.markdown #4ABBD5
markup.quote.markdown #939597
keyword.other.definition.ini #4ABBD5
entity.name.section.group-title.ini #F5DF4D
entity.name.class.luxe #F5DF4D
variable.other.luxe #F2F0EB
support.function.luxe #4ABBD5
entity.other.attribute-name.luxe #F5DF4D 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 } !` ;
}
Illuminary | Coding Theme