Skip to main content
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 #0D1017 activityBar.border #0D101760 activityBar.foreground #565B66 activityBarBadge.background #E6B450 activityBarBadge.foreground #0D1017 badge.background #0D101730 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #FF2400 — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #880000 — constant.other.php #FF2400 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Rusty Coder Theme — Rusty Coder Theme
badge.foreground
#B7410E
breadcrumb.activeSelectionForeground #B7410E
breadcrumb.background #0D1017
breadcrumb.focusForeground #565B66
breadcrumb.foreground #FF6600
breadcrumbPicker.background #0D1017
button.background #B7410E50
contrastBorder #B7410E40
debugToolBar.background #0D1017
diffEditor.insertedTextBackground #88000015
diffEditor.removedTextBackground #D2A6FF20
dropdown.background #0D1017
dropdown.border #BFBDB610
editor.background #0D1017
editor.findMatchBackground #0D1017
editor.findMatchBorder #B7410E
editor.findMatchHighlightBackground #B7410E93
editor.findMatchHighlightBorder #BFBDB630
editor.foreground #565B66
editor.lineHighlightBackground #0D101750
editor.selectionBackground #E6B45030
editor.selectionHighlightBackground #B7410E6b
editor.selectionHighlightBorder #E6B450f0
editorBracketMatch.background #0D1017
editorBracketMatch.border #FF24007f
editorCursor.foreground #FF2400
editorError.foreground #D2A6FF70
editorGroup.border #0D101730
editorGroupHeader.tabsBackground #0D1017
editorGutter.addedBackground #88000060
editorGutter.deletedBackground #D2A6FF60
editorGutter.modifiedBackground #E6B45060
editorHoverWidget.background #0D1017
editorHoverWidget.border #BFBDB610
editorIndentGuide.activeBackground #e6b450
editorIndentGuide.background #e6b45070
editorInfo.foreground #E6B45070
editorLineNumber.activeForeground #E6B450
editorLineNumber.foreground #B7410Ec0
editorLink.activeForeground #565B66
editorMarkerNavigation.background #565B6605
editorOverviewRuler.border #0D1017
editorOverviewRuler.errorForeground #D2A6FF40
editorOverviewRuler.findMatchForeground #B7410E
editorOverviewRuler.infoForeground #E6B45040
editorOverviewRuler.warningForeground #FF240070
editorRuler.foreground #0B0E14
editorSuggestWidget.background #0D1017
editorSuggestWidget.border #BFBDB610
editorSuggestWidget.foreground #565B66
editorSuggestWidget.highlightForeground #FF2400
editorSuggestWidget.selectedBackground #B7410E20
editorWarning.foreground #880000
editorWhitespace.foreground #565B6640
editorWidget.background #0D1017
editorWidget.border #FF2400
editorWidget.resizeBorder #B7410E
extensionButton.prominentBackground #88000090
extensionButton.prominentHoverBackground #D2A6FF
focusBorder #BFBDB600
gitDecoration.conflictingResourceForeground #FF2400
gitDecoration.deletedResourceForeground #D2A6FF
gitDecoration.ignoredResourceForeground #B7410E
gitDecoration.modifiedResourceForeground #FF6600
gitDecoration.untrackedResourceForeground #E6B450
input.background #0D1017
input.border #BFBDB610
input.foreground #565B66
input.placeholderForeground #565B6660
inputOption.activeBackground #565B6630
inputOption.activeBorder #565B6630
inputValidation.errorBorder #D2A6FF50
inputValidation.infoBorder #E6B45050
inputValidation.warningBorder #FF240050
list.activeSelectionBackground #0D1017
list.activeSelectionForeground #B7410E
list.focusBackground #0D1017
list.focusForeground #E6B450
list.highlightForeground #B7410E
list.hoverBackground #0B0E14
list.hoverForeground #BFBDB6
list.inactiveSelectionBackground #0D101730
list.inactiveSelectionForeground #B7410E
list.warningForeground #FF2400
listFilterWidget.background #0D101730
listFilterWidget.noMatchesOutline #0D101730
listFilterWidget.outline #0D101730
menu.background #0D1017f8
menu.border #B7410E50
menu.foreground #565B66
menu.selectionBackground #0D1017
menu.selectionBorder #0D101730
menu.selectionForeground #565B66
menu.separatorBackground #565B66
menubar.selectionBackground #0D1017
menubar.selectionBorder #B7410E50
menubar.selectionForeground #565B66
minimap.background #0D1017
minimapGutter.addedBackground #D2A6FF
minimapGutter.deletedBackground #FF2400
minimapGutter.modifiedBackground #880000
minimapSlider.activeBackground #880000b0
minimapSlider.background #88000080
minimapSlider.hoverBackground #880000a0
notificationLink.foreground #B7410E
notifications.background #0D1017
notifications.foreground #565B66
panel.background #0D1017
panel.border #0D101760
panelTitle.activeBorder #B7410E
panelTitle.activeForeground #BFBDB6
panelTitle.inactiveForeground #565B66
peekView.border #0D101730
peekViewEditor.background #565B6605
peekViewEditor.matchHighlightBackground #B7410E50
peekViewEditorGutter.background #565B6605
peekViewResult.background #565B6605
peekViewResult.matchHighlightBackground #B7410E50
peekViewResult.selectionBackground #B7410E70
peekViewTitle.background #565B6605
peekViewTitleDescription.foreground #565B6660
pickerGroup.foreground #B7410E
progressBar.background #B7410E
scrollbar.shadow #0D101700
scrollbarSlider.activeBackground #B7410Ecc
scrollbarSlider.background #B7410Ebb
scrollbarSlider.hoverBackground #B7410Eee
selection.background #B7410E
settings.checkboxBackground #0D1017
settings.checkboxForeground #565B66
settings.dropdownBackground #0D1017
settings.dropdownForeground #565B66
settings.headerForeground #B7410E
settings.modifiedItemIndicator #B7410E
settings.numberInputBackground #0D1017
settings.numberInputForeground #565B66
settings.textInputBackground #0D1017
settings.textInputForeground #565B66
sideBar.background #0D1017
sideBar.border #B7410E50
sideBar.foreground #E6B450
sideBarSectionHeader.background #0D1017
sideBarSectionHeader.border #0D101760
sideBarSectionHeader.foreground #E6B450
sideBarTitle.foreground #565B66
statusBar.background #0B0E14
statusBar.border #0D101760
statusBar.debuggingBackground #FF2400
statusBar.debuggingForeground #BFBDB6
statusBar.foreground #565B66
statusBar.noFolderBackground #0D1017
statusBarItem.hoverBackground #B7410E20
statusBarItem.remoteBackground #B7410E
statusBarItem.remoteForeground #0D1017
tab.activeBackground #B7410E50
tab.activeBorder #B7410E
tab.activeForeground #BFBDB6
tab.activeModifiedBorder #B7410E
tab.border #0D1017
tab.inactiveBackground #B7410E20
tab.inactiveForeground #565B66af
tab.unfocusedActiveBackground #B7410E40
tab.unfocusedActiveBorder #B7410E
tab.unfocusedActiveForeground #565B66
tab.unfocusedInactiveBackground #B7410E10
tab.unfocusedInactiveForeground #565B667f
terminal.ansiBlack #0D1017
terminal.ansiBlue #E6B450
terminal.ansiBrightBlack #B7410E
terminal.ansiBrightBlue #E6B450
terminal.ansiBrightCyan #FFB454
terminal.ansiBrightGreen #880000
terminal.ansiBrightMagenta #FF2400
terminal.ansiBrightRed #D2A6FF
terminal.ansiBrightWhite #BFBDB6
terminal.ansiBrightYellow #FF2400
terminal.ansiCyan #FFB454
terminal.ansiGreen #880000
terminal.ansiMagenta #FF2400
terminal.ansiRed #D2A6FF
terminal.ansiWhite #BFBDB6
terminal.ansiYellow #FF2400
terminalCursor.background #0D1017
terminalCursor.foreground #FF2400
textLink.activeForeground #565B66
textLink.foreground #B7410E
titleBar.activeBackground #0D1017
titleBar.activeForeground #565B66
titleBar.border #0D101760
titleBar.inactiveBackground #0D1017
titleBar.inactiveForeground #B7410E
tree.indentGuidesStroke #0B0E14
widget.shadow #0D101730 invalid, invalid.illegal #D2A6FF —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss, entity.name.type.numeric.rust, entity.name.type.primitive.rust #D2A6FF —
punctuation, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #FF6600 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #565B66 —
punctuation.definition, string.quoted.single.scss #D2A6FF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #D2A6FF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #565B66 —
variable.parameter.js, variable.parameter.keyframe-list.css #FF2400 —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #FF6600
comment, string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, punctuation.definition.string, punctuation.definition.char #E6B450 —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #FFB454 —
support.other.variable, string.other.link, markup.table #565B66 —
constant.numeric, constant.language, constant.character, constant.escape, punctuation.separator.key-value.html, punctuation.brackets.angle.rust #D2A6FF —
variable.parameter.function.language.special, variable.parameter #D2A6FF —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #880000
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #FF2400 —
support.type.primitive.rust #D2A6FF —
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 #FF6600 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #D2A6FF —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #E6B450 italic
entity.other.attribute-name, support.function #FF2400 —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #565B66 —
source.scss keyword.control #FF2400 —
constant.character.escape #FFB454 —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #565B66 italic
support.type.property-name.json #565B66 —
text.html.markdown, punctuation.definition.list_item.markdown #565B66 —
text.html.markdown markup.inline.raw.markdown #FF2400 —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #B7410E50 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #FF6600 bold
markup.underline #E6B450 underline
markup.quote punctuation.definition.blockquote.markdown #B7410E50 —
string.other.link.description.title.markdown #FF2400 —
constant.other.reference.link.markdown #FF2400 —
punctuation.definition.raw.markdown, punctuation.definition.markdown #FFB454 —
variable.language.fenced.markdown, keyword.operator, entity.name.type.enum.rust, entity.name.type.struct.rust, entity.name.type.rust, source.rust #B7410E —
token.error-token #FF293B —
token.debug-token #FFB454 —
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...
main*
Button.tsx
31
~/my-project
$
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 } !` ;
}
Rusty Coder Theme | Coding Theme