Skip to main content
Home Theme VS Code Darkly Theme Vibrant yet subtle syntax colours on a dark palette for those long days of coding.
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 #1e2132 activityBar.border #21233760 activityBar.foreground #aab3e5 activityBarBadge.background #5881ea activityBarBadge.foreground #ffffff badge.background #00000030 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #C3CDEE — comment, punctuation.definition.comment #7e8eda — variable, string constant.other.placeholder #C3CDEE — variable.object.property #4CC8B3 — constant.other.php
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Darkly Theme — Darkly Theme
badge.foreground
#7c85b3
breadcrumb.activeSelectionForeground #74a0f1
breadcrumb.background #212337
breadcrumb.focusForeground #aab3e5
breadcrumb.foreground #777fab
breadcrumbPicker.background #1e2132
button.background #4e80ffbb
contrastBorder #121523aa
debugToolBar.background #1e2132
diffEditor.insertedTextBackground #C3E88D15
diffEditor.removedTextBackground #FF537020
dropdown.background #212337
dropdown.border #00000066
editor.background #212337
editor.findMatchBackground #74a0f155
editor.findMatchBorder #74c6f1bb
editor.findMatchHighlightBackground #74a0f133
editor.findMatchHighlightBorder #74a0f166
editor.foreground #aab3e5
editor.lineHighlightBackground #2a2e48
editor.selectionBackground #717CB450
editor.selectionHighlightBackground #3c4361
editorBracketMatch.background #212337
editorBracketMatch.border #65BCFF50
editorCursor.foreground #65BCFF
editorError.foreground #FF5370cc
editorGroup.border #161a2a
editorGroupHeader.tabsBackground #1e2132
editorGutter.addedBackground #C3E88D60
editorGutter.deletedBackground #FF537060
editorGutter.modifiedBackground #65BCFF60
editorHoverWidget.background #1b1d2c
editorHoverWidget.border #121523aa
editorIndentGuide.activeBackground #4E5579
editorIndentGuide.background #4E557970
editorLineNumber.activeForeground #9da5d7
editorLineNumber.foreground #5b6395
editorLink.activeForeground #aab3e5
editorMarkerNavigation.background #aab3e505
editorOverviewRuler.border #212337
editorRuler.foreground #4E5579
editorSuggestWidget.background #1a1e30
editorSuggestWidget.border #C3CDEE10
editorSuggestWidget.foreground #aab3e5
editorSuggestWidget.highlightForeground #74a0f1
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #C3E88Dbb
editorWhitespace.foreground #aab3e540
editorWidget.background #1e2132
editorWidget.border
editorWidget.resizeBorder #74a0f1
extensionButton.prominentBackground #C3E88D90
extensionButton.prominentHoverBackground #C3E88D
focusBorder #65BCFF
foreground #dcebff
gitDecoration.conflictingResourceForeground #ffdf9bcc
gitDecoration.deletedResourceForeground #FF5370CC
gitDecoration.ignoredResourceForeground #777fabaa
gitDecoration.modifiedResourceForeground #65BCFFee
gitDecoration.untrackedResourceForeground #7af8cabb
input.background #191a2a
input.border #00000066
input.focus #34d3fb
input.foreground #C3CDEE
input.placeholderForeground #aab3e5aa
inputValidation.errorBackground #c53b53
inputValidation.errorBorder #FF537050
inputValidation.errorForeground #FFFFFF
inputValidation.infoBackground #446bbb
inputValidation.infoBorder #65BCFF50
inputValidation.infoForeground #FFFFFF
inputValidation.warningBackground #ad7c43
inputValidation.warningBorder #ffdf9b50
inputValidation.warningForeground #FFFFFF
list.activeSelectionBackground #383e5c
list.activeSelectionForeground #ffffff
list.focusBackground #293056
list.focusForeground #ffffff
list.highlightForeground #86E1FC
list.hoverBackground #1e2132
list.hoverForeground #C3CDEE
list.inactiveSelectionBackground #292e46
list.inactiveSelectionForeground #C3CDEE
list.warningForeground #deb86e
menu.background #1e2132
menu.foreground #aab3e5
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #74a0f1
menu.separatorBackground #aab3e5
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #74a0f1
notificationLink.foreground #74a0f1
notifications.background #1e2132
notifications.foreground #aab3e5
panel.background #1e2132
panel.border #21233760
panel.dropBackground #aab3e5
panelTitle.activeBorder #74a0f1
panelTitle.activeForeground #C3CDEE
panelTitle.inactiveForeground #aab3e5
peekView.border #00000030
peekViewEditor.background #aab3e505
peekViewEditor.matchHighlightBackground #717CB450
peekViewEditorGutter.background #aab3e505
peekViewResult.background #aab3e505
peekViewResult.matchHighlightBackground #717CB450
peekViewResult.selectionBackground #7c85b370
peekViewTitle.background #aab3e505
peekViewTitleDescription.foreground #aab3e560
pickerGroup.foreground #74a0f1
progressBar.background #74a0f1
scrollbar.shadow #00000022
scrollbarSlider.activeBackground #74a0f1
scrollbarSlider.background #aab3e520
scrollbarSlider.hoverBackground #aab3e510
selection.background #aab3e5
settings.checkboxBackground #191a2a
settings.checkboxBorder #00000066
settings.checkboxForeground #aab3e5
settings.dropdownBackground #2c314b
settings.dropdownBorder #161a2a
settings.dropdownForeground #aab3e5
settings.headerForeground #65BCFF
settings.modifiedItemIndicator #65BCFF
settings.numberInputBackground #191a2a
settings.numberInputBorder #00000066
settings.numberInputForeground #aab3e5
settings.textInputBackground #191a2a
settings.textInputBorder #00000066
settings.textInputForeground #aab3e5
sideBar.background #1e2132
sideBar.border #161a2a
sideBar.foreground #7c85b3
sideBarSectionHeader.background #1e2132
sideBarSectionHeader.border #aab3e520
sideBarTitle.foreground #aab3e5
statusBar.background #1e2132
statusBar.border #161a2a
statusBar.debuggingBackground #C099FF
statusBar.debuggingForeground #C3CDEE
statusBar.foreground #7c85b3
statusBar.noFolderBackground #212337
statusBarItem.hoverBackground #7c85b320
tab.activeBackground #212337
tab.activeBorder #74a0f1
tab.activeForeground #C3CDEE
tab.activeModifiedBorder #7c85b3
tab.border #161a2a
tab.inactiveBackground #1e2132
tab.inactiveForeground #7c85b3
tab.unfocusedActiveBorder #7c85b3
tab.unfocusedActiveForeground #aab3e5
terminal.ansiBlack #000000
terminal.ansiBlue #65BCFF
terminal.ansiBrightBlack #7c85b3
terminal.ansiBrightBlue #65BCFF
terminal.ansiBrightCyan #86E1FC
terminal.ansiBrightGreen #C3E88D
terminal.ansiBrightMagenta #C099FF
terminal.ansiBrightRed #FF5370
terminal.ansiBrightWhite #C3CDEE
terminal.ansiBrightYellow #ffdb8e
terminal.ansiCyan #86E1FC
terminal.ansiGreen #C3E88D
terminal.ansiMagenta #C099FF
terminal.ansiRed #FF5370
terminal.ansiWhite #C3CDEE
terminal.ansiYellow #ffdb8e
terminal.border #aab3e520
textLink.activeForeground #b2dfff
textLink.foreground #34d3fb
titleBar.activeBackground #1e2132
titleBar.activeForeground #aab3e5
titleBar.border #161a2a
titleBar.inactiveBackground #1e2132
titleBar.inactiveForeground #7c85b3
widget.shadow #00000033 #ffdf9b
constant.other.color #C3CDEE —
text, meta.jsx.children #C3CDEE —
invalid, invalid.illegal #FF5370 —
invalid.deprecated #C099FF —
keyword, storage.type, storage.modifier #C099FF —
keyword.control.flow #a6eefb —
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, constant.other.color, punctuation, meta.tag, meta.block, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, keyword.other.template, keyword.other.substitution, keyword.operator, meta.brace #86E1FC —
punctuation.definition.template-expression #FF757F —
keyword.operator.logical, keyword.operator.comparison #C099FF —
keyword.operator.spread, keyword.operator.rest #FF757F bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #FF757F —
entity.name.function, meta.function-call, variable.function, keyword.other.special-method #65BCFF —
support.function, meta.object.member #34d3fb —
source.cpp meta.block variable.other #FF757F —
variable.other.object.property #a6eefb —
support.variable.property, variable.other.property #FC946B —
meta.object-literal.key, entity.name.label.js, string.unquoted #C3E88D —
support.variable.dom, support.constant.json, support.constant.math #ffdb8e —
support.variable.object.node, support.variable.object.process #ffd88c —
support.other.variable, string.other.link #FF757F —
constant.language, support.constant, constant.escape, keyword.other.unit #FF98A4 —
constant.character #FF757F —
constant.numeric, constant.language.infinity, constant.language.nan #ff9668 —
constant.language.undefined, constant.language.null #969bb8 —
variable.parameter.function.language.special, variable.parameter #f3c1ff —
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 #7af8ca normal
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, support.type.object.module #ffdb8e —
support.class.component #ff8dd3 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #C3E88D —
keyword.other.unit #FF98A4 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF757F —
meta.class-method.js entity.name.function.js, variable.function.constructor #65BCFF —
entity.other.attribute-name #ffbd76 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #ffbd76 —
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name #C099FF —
entity.other.attribute-name.class #ffbd76 —
support.type.property-name.css, support.type.property-name #65BCFF —
meta.property-name.css, meta.property-name.scss, meta.property-name.less, support.type.vendored.property-name #98b4e6 —
support.constant.property-value.css, meta.property-value, support.constant.font-name.css, support.constant.vendored.property-value.css #a9eaff —
variable.parameter.keyframe-list, meta.at-rule.keyframes entity.name.function #f989d3 —
entity.other.keyframe-offset, meta.at-rule.keyframes entity.other.attribute-name #ceec94 —
meta.attribute-selector #7af8ca —
source.sass keyword.control #65BCFF —
constant.other.character-class.regexp #ceec94 —
constant.other.character-class.set.regexp #ffbd76 —
keyword.operator.quantifier.regexp #f989d3 —
constant.character.escape #86E1FC —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #65BCFF —
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 —
source.json meta.structure.dictionary.json support.type.property-name.json #65BCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #34d3fb —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #ffdf9b —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f0c4ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C099FF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF757F —
text.html.markdown, meta.embedded.block #C3CDEE —
text.html.markdown markup.inline.raw.markdown #C099FF —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4E5579 —
text.html.markdown meta.dummy.line-break —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #86E1FC —
entity.name.section.markdown #65BCFF —
markup.italic #FF757F italic
markup.bold, markup.bold string #FF757F bold
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 #FF757F bold
markup.underline #34d3fb underline
markup.quote punctuation.definition.blockquote.markdown #4E5579 —
string.other.link.title.markdown #aff1ff —
constant.other.reference.link.markdown #ffdf9b —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown #FC946B —
variable.language.fenced.markdown #4E5579 —
meta.separator #4E5579 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...
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 } ! ` ;
}
Darkly Theme | Coding Theme