Skip to main content
Home Theme VS Code V Dark A Visual Studio Code theme based on my web braianvaylet.dev
V Dark | 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.activeBorder #D8FF00 activityBar.background #101219 activityBar.border #36425950 activityBar.foreground #dddfe9 activityBar.inactiveForeground #364259 activityBarBadge.background #36F213 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 #36F213 — 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.
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 #D8FF0010
checkbox.foreground #f0f0f0
contrastBorder #36425950
debugConsole.errorForeground #f56565
debugConsole.infoForeground #36F213
debugConsole.sourceForeground #bfc8d9
debugConsole.warningForeground #f6e05e
debugToolBar.background #101219
diffEditor.insertedTextBackground #A6FF0015
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 #D8FF007f
editorCursor.foreground #D8FF00
editorError.foreground #F56565
editorGroup.border #36425950
editorGroupHeader.tabsBackground #101219
editorGutter.addedBackground #A6FF0060
editorGutter.deletedBackground #36F21360
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 #36F21340
editorOverviewRuler.findMatchForeground #364259
editorOverviewRuler.infoForeground #7385AB40
editorOverviewRuler.warningForeground #F5656570
editorRuler.foreground #383b3d
editorSuggestWidget.background #101219
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #dddfe9
editorSuggestWidget.highlightForeground #D8FF00
editorSuggestWidget.selectedBackground #36425920
editorWarning.foreground #A6FF00
editorWhitespace.foreground #dddfe940
editorWidget.background #101219
editorWidget.border #D8FF00
editorWidget.resizeBorder #364259
extensionButton.prominentBackground #A6FF0090
extensionButton.prominentHoverBackground #36F213
focusBorder #ffffff00
gitDecoration.conflictingResourceForeground #A6FF00
gitDecoration.deletedResourceForeground #36F213
gitDecoration.ignoredResourceForeground #364259
gitDecoration.modifiedResourceForeground #D8FF00
gitDecoration.untrackedResourceForeground #7385AB
input.background #1d1e38
input.border #ffffff10
input.foreground #dddfe9
input.placeholderForeground #dddfe960
inputOption.activeBackground #dddfe930
inputOption.activeBorder #dddfe930
inputValidation.errorBorder #36F21350
inputValidation.infoBorder #7385AB50
inputValidation.warningBorder #D8FF0050
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 #D8FF00
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 #A6FF00
menu.separatorBackground #36F213
menubar.selectionBackground #08090C
menubar.selectionBorder #08090C50
menubar.selectionForeground #A6FF00
minimap.background #08090C
minimap.errorHighlight #f56565
minimap.findMatchHighlight #A6FF00
minimap.warningHighlight #f6e05e70
minimapGutter.addedBackground #D8FF00
minimapGutter.deletedBackground #D8FF00
minimapGutter.modifiedBackground #D8FF00
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 #A6FF00
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 #D8FF0090
sideBar.foreground #7385AB
sideBarSectionHeader.background #101219
sideBarSectionHeader.border #10121960
sideBarSectionHeader.foreground #7385AB
sideBarTitle.foreground #dddfe9
statusBar.background #08090C
statusBar.border #10121960
statusBar.debuggingBackground #36F213
statusBar.debuggingForeground #A6FF00
statusBar.foreground #c4cbff
statusBar.noFolderBackground #101219
statusBarItem.hoverBackground #36425920
statusBarItem.remoteBackground #364259
statusBarItem.remoteForeground #101219
tab.activeBackground #08090C
tab.activeBorder #36F213
tab.activeForeground #A6FF00
tab.activeModifiedBorder #364259
tab.border #36425950
tab.inactiveBackground #101219
tab.inactiveForeground #364259
tab.unfocusedActiveBorder #7385AB
tab.unfocusedActiveForeground #dddfe9
tab.unfocusedHoverBackground #36F213a0
tab.unfocusedHoverForeground #A6FF00a0
terminal.ansiBlack #101218
terminal.ansiBlue #A6FF00
terminal.ansiBrightBlack #364259
terminal.ansiBrightBlue #36F213
terminal.ansiBrightCyan #A6FF00
terminal.ansiBrightGreen #36F213
terminal.ansiBrightMagenta #36F213
terminal.ansiBrightRed #F56565
terminal.ansiBrightWhite #BFC8D9
terminal.ansiBrightYellow #F6E05E
terminal.ansiCyan #D8FF00
terminal.ansiGreen #A6FF00
terminal.ansiMagenta #36F213
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 #A6FF00 —
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 } !` ;
}