Skip to main content
Home Theme VS Code Substrata A cold, dark color theme for VS Code, based on vim-substrata
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 #191c25 activityBar.border #191c25 activityBar.foreground #b5b4c9 activityBarBadge.background #2e313d activityBarBadge.foreground #b5b4c9 button.background #3c3f4e tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5b5f71 italic variable, string constant.other.placeholder #b5b4c9 — entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #a0b9d8 italic meta.function-call.arguments — variable.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.foreground
#b5b4c9
checkbox.background #272935
checkbox.foreground #b5b4c9
diffEditor.insertedTextBackground #1c231688
diffEditor.removedTextBackground #2d1d1688
dropdown.background #272935
dropdown.border #191c25
dropdown.foreground #b5b4c9
editor.background #191c25
editor.findMatchBackground #ea5c0055
editor.findMatchHighlightBackground #2e313d55
editor.foreground #b5b4c9
editor.lineHighlightBackground #20222d
editor.selectionBackground #5b5f7144
editor.selectionHighlightBackground #2e313d
editor.wordHighlightBackground #27293555
editorError.foreground #cf8164
editorGroupHeader.tabsBackground #191c25
editorGroupHeader.tabsBorder #20222d
editorGutter.addedBackground #76a065
editorGutter.deletedBackground #cf8164
editorGutter.modifiedBackground #8296b0
editorInfo.foreground #8296b0
editorLineNumber.activeForeground #6c6f82
editorLineNumber.foreground #3c3f4e
editorOverviewRuler.border #191c25
editorUnnecessaryCode.opacity #000000c0
editorWarning.foreground #ab924c
errorForeground #cf8164
errorLens.errorBackground #2d1d1655
errorLens.errorForeground #cf8164
errorLens.hintBackground #1c231655
errorLens.hintForeground #76a065
errorLens.infoBackground #1c231655
errorLens.infoForeground #76a065
errorLens.warningBackground #26201155
errorLens.warningForeground #ab924c
focusBorder #2e313d
foreground #b5b4c9
gitDecoration.addedResourceForeground #76a065
gitDecoration.conflictingResourceForeground #a18daf
gitDecoration.deletedResourceForeground #cf8164
gitDecoration.ignoredResourceForeground #5b5f71
gitDecoration.modifiedResourceForeground #8296b0
gitDecoration.untrackedResourceForeground #ab924c
icon.foreground #b5b4c9
input.background #272935
input.foreground #b5b4c9
list.errorForeground #cf8164
list.focusOutline #0000
merge.commonContentBackground #2e313d22
merge.commonHeaderBackground #2e313d55
merge.currentContentBackground #76a06522
merge.currentHeaderBackground #76a06555
merge.incomingContentBackground #8296b022
merge.incomingHeaderBackground #8296b055
panelTitle.activeForeground #b5b4c9
problemsErrorIcon.foreground #cf8164
problemsInfoIcon.foreground #8296b0
problemsWarningIcon.foreground #ab924c
selection.background #6c6f82
sideBar.background #191c25
sideBar.border #20222d
sideBar.foreground #b5b4c9
sideBarSectionHeader.background #272935
sideBarSectionHeader.foreground #b5b4c9
sideBarTitle.foreground #b5b4c9
statusBar.background #272935
statusBar.debuggingBackground #1c2316
statusBar.foreground #b5b4c9
statusBar.noFolderBackground #2d1d16
symbolIcon.classForeground #ab924c
symbolIcon.constantForeground #76a065
symbolIcon.constructorForeground #c6aed7
symbolIcon.enumeratorForeground #ab924c
symbolIcon.enumeratorMemberForeground #a0b9d8
symbolIcon.fieldForeground #8296b0
symbolIcon.functionForeground #a18daf
symbolIcon.interfaceForeground #659ea2
symbolIcon.keyForeground #76a065
symbolIcon.methodForeground #a18daf
symbolIcon.moduleForeground #6c6f82
symbolIcon.objectForeground #6c6f82
symbolIcon.operatorForeground #6c6f82
symbolIcon.propertyForeground #a0b9d8
symbolIcon.stringForeground #76a065
symbolIcon.structForeground #6c6f82
symbolIcon.variableForeground #a0b9d8
tab.activeBackground #272935
tab.activeForeground #b5b4c9
tab.activeModifiedBorder #8296b0
tab.border #20222d
tab.inactiveBackground #191c25
terminal.ansiBlack #2e313d
terminal.ansiBlue #8296b0
terminal.ansiBrightBlack #5b5f71
terminal.ansiBrightBlue #a0b9d8
terminal.ansiBrightCyan #7dc2c7
terminal.ansiBrightGreen #92c47e
terminal.ansiBrightMagenta #c6aed7
terminal.ansiBrightRed #fe9f7c
terminal.ansiBrightWhite #f0ecfe
terminal.ansiBrightYellow #d2b45f
terminal.ansiCyan #659ea2
terminal.ansiGreen #76a065
terminal.ansiMagenta #a18daf
terminal.ansiRed #cf8164
terminal.ansiWhite #b5b4c9
terminal.ansiYellow #ab924c
terminal.background #191c25
terminal.foreground #b5b4c9
titleBar.activeBackground #191c25
titleBar.inactiveBackground #191c25 #a18daf
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, constant.other.color, constant.other.rune #a18daf —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, string.regexp #659ea2 —
constant.character.escape #7dc2c7 —
keyword, keyword.control, storage.modifier, storage.type #8296b0 —
storage.class, storage.type.core, entity.name.type, meta.type_params #a18daf —
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.operator #6c6f82 —
entity.name.import #659ea2 —
entity.other.attribute-name, meta.object-literal.key, support.type.property-name, support.type.vendored.property-name, entity.name.tag.yaml #8296b0 —
*url*, *link*, *uri* — underline
invalid, invalid.illegal #cf8164 —
support.orther.namespace.use.php, meta.use.php, support.other.namespace.php #c6aed7 —
entity.name.tag, meta.tag.sgml #a18daf —
source.css entity.other.attribute-name #c6aed7 —
source.css entity.other.attribute-name.pseudo-class #659ea2 —
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 — bold italic
markup.inline.raw, markup.fenced_code.block, markup.raw.block #6c6f82 —
string.other.link.title.markdown, meta.link.inline punctuation.definition.string, markup.underline.link #8296b0 —
string.other.link.title.markdown #8296b0 underline
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 } !` ;
}
Substrata | Coding Theme