Skip to main content
Home Theme VS Code V Dark A Visual Studio Code theme based on my web braianvaylet.dev
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.activeBorder #19FDB5 activityBar.background #101219 activityBar.border #36425950 activityBar.foreground #dddfe9 activityBar.inactiveForeground #364259 activityBarBadge.background #FF6AA3 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, storage.type, storage.modifier, string constant.other.placeholder, string, string.quoted.double.html, string.quoted.double.json, punctuation.definition.string, keyword, keyword.control.at-rule, keyword.control.operator, keyword.operator.assignment.js, keyword.other.special-method, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, markup.bold, markup.bold.markdown, markup.italic.markdown, markup.underline, entity.name.function, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.method.js, entity.name.function, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.class-method.js entity.name.function.js, source.sass keyword.control, invalid.deprecated #7385AB — punctuation.separator.key-value, invalid, invalid.illegal, constant.numeric, constant.language, constant.character, constant.escape, constant.other.symbol, constant.other.key, keyword.other.unit, keyword.other.unit, keyword.other, variable.parameter.function.language.special, variable.parameter, variable.import.parameter, variable.other.class, entity.other.inherited-class, entity.name.module.js, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.scss keyword.control #FF6AA3 — constant.other.php, constant.other.reference.link.markdown, punctuation.definition, string.quoted.single.scss, string.other.link.title.markdown, string.other.link.description.title.markdown, entity.name, support.type, support.class, support.type.sys-types, support.function, markup.changed.git_gutter, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.raw.block, 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, text.html.markdown markup.inline.raw.markdown, markdown.heading, token.warn-token, keyword.control.export, storage.type.modifier, keyword.control.flow, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
V Dark | Coding Theme
activityBarBadge.foreground
#08090C
badge.background #10121930
badge.foreground #364259
breadcrumb.activeSelectionForeground #364259
breadcrumb.background #101219
breadcrumb.focusForeground #dddfe9
breadcrumb.foreground #BFC8D9
breadcrumbPicker.background #101219
button.background #36425950
checkbox.background #101219
checkbox.border #19FDB510
checkbox.foreground #f0f0f0
contrastBorder #36425950
debugConsole.errorForeground #f56565
debugConsole.infoForeground #FF6AA3
debugConsole.sourceForeground #bfc8d9
debugConsole.warningForeground #f6e05e
debugToolBar.background #101219
diffEditor.insertedTextBackground #18D89B15
diffEditor.removedTextBackground #3be9f920
dropdown.background #101219
dropdown.border #ffffff10
editor.background #101219
editor.findMatchBackground #101219
editor.findMatchBorder #364259
editor.findMatchHighlightBackground #36425993
editor.findMatchHighlightBorder #ffffff30
editor.foreground #dddfe9
editor.lineHighlightBackground #10121950
editor.selectionBackground #7385AB30
editor.selectionHighlightBackground #3642596b
editor.selectionHighlightBorder #7385ABf0
editorBracketMatch.background #101219
editorBracketMatch.border #19FDB57f
editorCursor.foreground #19FDB5
editorError.foreground #F56565
editorGroup.border #36425950
editorGroupHeader.tabsBackground #101219
editorGutter.addedBackground #18D89B60
editorGutter.deletedBackground #FF6AA360
editorGutter.modifiedBackground #7385AB60
editorHoverWidget.background #101219
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground #3d3d38
editorIndentGuide.background #383b3d70
editorInfo.foreground #7385AB70
editorLineNumber.activeForeground #7385AB
editorLineNumber.foreground #364259c0
editorLink.activeForeground #dddfe9
editorMarkerNavigation.background #dddfe905
editorOverviewRuler.border #101219
editorOverviewRuler.errorForeground #FF6AA340
editorOverviewRuler.findMatchForeground #364259
editorOverviewRuler.infoForeground #7385AB40
editorOverviewRuler.warningForeground #F5656570
editorRuler.foreground #383b3d
editorSuggestWidget.background #101219
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #dddfe9
editorSuggestWidget.highlightForeground #19FDB5
editorSuggestWidget.selectedBackground #36425920
editorWarning.foreground #18D89B
editorWhitespace.foreground #dddfe940
editorWidget.background #101219
editorWidget.border #19FDB5
editorWidget.resizeBorder #364259
extensionButton.prominentBackground #18D89B90
extensionButton.prominentHoverBackground #FF6AA3
focusBorder #ffffff00
gitDecoration.conflictingResourceForeground #18D89B
gitDecoration.deletedResourceForeground #FF6AA3
gitDecoration.ignoredResourceForeground #364259
gitDecoration.modifiedResourceForeground #19FDB5
gitDecoration.untrackedResourceForeground #7385AB
input.background #1d1e38
input.border #ffffff10
input.foreground #dddfe9
input.placeholderForeground #dddfe960
inputOption.activeBackground #dddfe930
inputOption.activeBorder #dddfe930
inputValidation.errorBorder #FF6AA350
inputValidation.infoBorder #7385AB50
inputValidation.warningBorder #19FDB550
list.activeSelectionBackground #101219
list.activeSelectionForeground #364259
list.focusBackground #1d1e38
list.focusForeground #7385AB
list.highlightForeground #364259
list.hoverBackground #383b3d
list.hoverForeground #ffffff
list.inactiveSelectionBackground #10121930
list.inactiveSelectionForeground #364259
list.warningForeground #19FDB5
listFilterWidget.background #10121930
listFilterWidget.noMatchesOutline #10121930
listFilterWidget.outline #10121930
menu.background #101219f8
menu.border #36425950
menu.foreground #dddfe9
menu.selectionBackground #08090C
menu.selectionBorder #10121930
menu.selectionForeground #18D89B
menu.separatorBackground #FF6AA3
menubar.selectionBackground #08090C
menubar.selectionBorder #08090C50
menubar.selectionForeground #18D89B
minimap.background #08090C
minimap.errorHighlight #f56565
minimap.findMatchHighlight #18D89B
minimap.warningHighlight #f6e05e70
minimapGutter.addedBackground #19FDB5
minimapGutter.deletedBackground #19FDB5
minimapGutter.modifiedBackground #19FDB5
minimapSlider.activeBackground #364259b0
minimapSlider.background #36425980
minimapSlider.hoverBackground #364259a0
notificationLink.foreground #364259
notifications.background #101219
notifications.foreground #dddfe9
panel.background #101219
panel.border #36425950
panelTitle.activeBorder #364259
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #dddfe9
peekView.border #10121930
peekViewEditor.background #dddfe905
peekViewEditor.matchHighlightBackground #36425950
peekViewEditorGutter.background #dddfe905
peekViewResult.background #dddfe905
peekViewResult.matchHighlightBackground #36425950
peekViewResult.selectionBackground #36425970
peekViewTitle.background #dddfe905
peekViewTitleDescription.foreground #dddfe960
pickerGroup.foreground #364259
progressBar.background #364259
scrollbar.shadow #10121900
scrollbarSlider.activeBackground #18D89B
scrollbarSlider.background #364259
scrollbarSlider.hoverBackground #364259
selection.background #364259
settings.checkboxBackground #101219
settings.checkboxForeground #dddfe9
settings.dropdownBackground #101219
settings.dropdownForeground #dddfe9
settings.headerForeground #364259
settings.modifiedItemIndicator #364259
settings.numberInputBackground #101219
settings.numberInputForeground #dddfe9
settings.textInputBackground #101219
settings.textInputForeground #dddfe9
sideBar.background #101219
sideBar.border #36425950
sideBar.dropBackground #19FDB590
sideBar.foreground #7385AB
sideBarSectionHeader.background #101219
sideBarSectionHeader.border #10121960
sideBarSectionHeader.foreground #7385AB
sideBarTitle.foreground #dddfe9
statusBar.background #08090C
statusBar.border #10121960
statusBar.debuggingBackground #FF6AA3
statusBar.debuggingForeground #18D89B
statusBar.foreground #c4cbff
statusBar.noFolderBackground #101219
statusBarItem.hoverBackground #36425920
statusBarItem.remoteBackground #364259
statusBarItem.remoteForeground #101219
tab.activeBackground #08090C
tab.activeBorder #FF6AA3
tab.activeForeground #18D89B
tab.activeModifiedBorder #364259
tab.border #36425950
tab.inactiveBackground #101219
tab.inactiveForeground #364259
tab.unfocusedActiveBorder #7385AB
tab.unfocusedActiveForeground #dddfe9
tab.unfocusedHoverBackground #FF6AA3a0
tab.unfocusedHoverForeground #18D89Ba0
terminal.ansiBlack #101218
terminal.ansiBlue #18D89B
terminal.ansiBrightBlack #364259
terminal.ansiBrightBlue #FF6AA3
terminal.ansiBrightCyan #18D89B
terminal.ansiBrightGreen #FF6AA3
terminal.ansiBrightMagenta #FF6AA3
terminal.ansiBrightRed #F56565
terminal.ansiBrightWhite #BFC8D9
terminal.ansiBrightYellow #F6E05E
terminal.ansiCyan #19FDB5
terminal.ansiGreen #18D89B
terminal.ansiMagenta #FF6AA3
terminal.ansiRed #F56565
terminal.ansiWhite #BFC8D9
terminal.ansiYellow #F6E05E
terminalCursor.background #171923
terminalCursor.foreground #7385AB
textLink.activeForeground #7385AB
textLink.foreground #364259
titleBar.activeBackground #101219
titleBar.activeForeground #dddfe9
titleBar.border #36425950
titleBar.inactiveBackground #101219
titleBar.inactiveForeground #364259
tree.indentGuidesStroke #383b3d
widget.shadow #10121930
window.activeBorder #101219 punctuation.separator.comma, punctuation.terminator.rule, constant.other.color, storage.type #FFFFFF —
constant.other.color, keyword.control, keyword.other.template, keyword.other.substitution, entity.other.attribute-name, text.html.derivative, meta.separator, support.type, support.other.variable, string.other.link, markup.table #BFC8D9 —
comment.line, comment.line.double-slash, comment.block, punctuation.definition.comment, punctuation.definition.raw, punctuation.definition.markdown, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, markup.quote punctuation.definition.blockquote.markdown, variable.language.fenced.markdown, token.info-token, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator.key-value #364259 —
entity.name.tag, markup.deleted.git_gutter, markup.inserted #18D89B —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, support.type.property-name.less, keyword.control.conditional, meta.object-literal.key, source.js constant.other.object.key.js string.unquoted.label.js, support.type.property-name.json, text.html.markdown, punctuation.definition.list_item.markdown #dddfe9 —
markup.deleted, token.error-token #F56565 —
markup.changed, string.regexp, constant.character.escape, token.debug-token #F6E05E —
variable, string constant.other.placeholder, entity.name.function, entity.name.method.js, entity.name.function, markup.quote, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, Keyword, Storage, source.js constant.other.object.key.js string.unquoted.label.js — italic
keyword.control, markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown, meta.separator — bold
markup.underline, *url*, *link*, *uri* — 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 } !` ;
}
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 } !` ;
}