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.activeBorder #1db0a400 activityBar.background #181818 activityBar.border #28282800 activityBar.foreground #1db0a4 activityBar.inactiveForeground #dedcd530 activityBarBadge.background #181818 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file #a2bffc italic markup.deleted.diff #EF535090 italic markup.inserted.diff #c5e478ff italic Global settings #d6deeb — comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
lone-wolf-dark — lone-wolf-dark
activityBarBadge.foreground
#1db0a4
badge.background #dedcd590
badge.foreground #181818
breadcrumb.activeSelectionForeground #eeeeee15
breadcrumb.focusForeground #dbd7caee
breadcrumb.foreground #959da5
breadcrumbPicker.background #181818
button.background #1db0a4
button.foreground #181818
button.hoverBackground #1db0a4
checkbox.background #181818
checkbox.border #2f363d
debugToolBar.background #181818
descriptionForeground #dedcd590
diffEditor.insertedTextBackground #1db0a422
diffEditor.removedTextBackground #ab595922
dropdown.background #181818
dropdown.border #191919
dropdown.foreground #dbd7caee
dropdown.listBackground #181818
editor.background #181818
editor.findMatchBackground #e6cc7722
editor.findMatchHighlightBackground #e6cc7744
editor.focusedStackFrameHighlightBackground #b808
editor.foldBackground #eeeeee10
editor.foreground #dbd7caee
editor.inactiveSelectionBackground #eeeeee08
editor.lineHighlightBackground #2e2e2e3f
editor.selectionBackground #eeeeee15
editor.selectionHighlightBackground #eeeeee08
editor.stackFrameHighlightBackground #a707
editor.wordHighlightBackground #1c6b4805
editor.wordHighlightStrongBackground #1c6b4810
editorBracketHighlight.foreground1 #5eaab5
editorBracketHighlight.foreground2 #1db0a4
editorBracketHighlight.foreground3 #d4976c
editorBracketHighlight.foreground4 #d9739f
editorBracketHighlight.foreground5 #e6cc77
editorBracketHighlight.foreground6 #6394bf
editorBracketMatch.background #1db0a420
editorError.foreground #cb7676
editorGroup.border #191919
editorGroupHeader.tabsBackground #181818
editorGroupHeader.tabsBorder #191919
editorGutter.addedBackground #1db0a4
editorGutter.commentRangeForeground #dedcd530
editorGutter.deletedBackground #cb7676
editorGutter.foldingControlForeground #dedcd590
editorGutter.modifiedBackground #6394bf
editorHint.foreground #1db0a4
editorIndentGuide.activeBackground #ffffff30
editorIndentGuide.background #ffffff15
editorInfo.foreground #6394bf
editorInlayHint.background #00000000
editorInlayHint.foreground #666666
editorLineNumber.activeForeground #646464
editorLineNumber.foreground #dedcd530
editorOverviewRuler.border #111
editorWarning.foreground #d4976c
editorWhitespace.foreground #ffffff15
editorWidget.background #181818
errorForeground #cb7676
focusBorder #00000000
foreground #dbd7caee
gitDecoration.addedResourceForeground #1db0a4
gitDecoration.conflictingResourceForeground #d4976c
gitDecoration.deletedResourceForeground #cb7676
gitDecoration.ignoredResourceForeground #dedcd530
gitDecoration.modifiedResourceForeground #6394bf
gitDecoration.submoduleResourceForeground #dedcd590
gitDecoration.untrackedResourceForeground #5eaab5
input.background #181818
input.border #191919
input.foreground #dbd7caee
input.placeholderForeground #dedcd590
inputOption.activeBackground #dedcd530
list.activeSelectionBackground #181818
list.activeSelectionForeground #dbd7caee
list.focusBackground #181818
list.hoverBackground #181818
list.hoverForeground #dbd7caee
list.inactiveFocusBackground #181818
list.inactiveSelectionBackground #181818
list.inactiveSelectionForeground #dbd7caee
notificationCenterHeader.background #181818
notificationCenterHeader.foreground #959da5
notifications.background #181818
notifications.border #282828
notifications.foreground #dbd7caee
notificationsErrorIcon.foreground #cb7676
notificationsInfoIcon.foreground #6394bf
notificationsWarningIcon.foreground #d4976c
panel.background #181818
panel.border #282828
panelInput.border #2f363d
panelTitle.activeBorder #1db0a4
panelTitle.activeForeground #dbd7caee
panelTitle.inactiveForeground #959da5
peekViewEditor.background #181818
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #181818
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #dbd7caee
problemsErrorIcon.foreground #cb7676
problemsInfoIcon.foreground #6394bf
problemsWarningIcon.foreground #d4976c
progressBar.background #1db0a4
quickInput.background #181818
quickInput.foreground #dbd7caee
scrollbar.shadow #0008
scrollbarSlider.activeBackground #dedcd530
scrollbarSlider.background #dedcd510
scrollbarSlider.hoverBackground #dedcd530
settings.headerForeground #dbd7caee
settings.modifiedItemIndicator #1db0a4
sideBar.background #181818
sideBar.border #282828
sideBar.foreground #646464
sideBarSectionHeader.background #181818
sideBarSectionHeader.border #282828
sideBarSectionHeader.foreground #dbd7caee
sideBarTitle.foreground #dbd7caee
statusBar.background #181818
statusBar.border #282828
statusBar.debuggingBackground #181818
statusBar.debuggingForeground #646464
statusBar.foreground #646464
statusBar.noFolderBackground #181818
statusBarItem.prominentBackground #181818
tab.activeBackground #181818
tab.activeBorder #3bc4b9
tab.activeBorderTop #dedcd500
tab.activeForeground #dbd7caee
tab.border #191919
tab.hoverBackground #181818
tab.inactiveBackground #181818
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #191919
tab.unfocusedActiveBorderTop #191919
tab.unfocusedHoverBackground #181818
terminal.ansiBlack #393a34
terminal.ansiBlue #6394bf
terminal.ansiBrightBlack #777777
terminal.ansiBrightBlue #6394bf
terminal.ansiBrightCyan #5eaab5
terminal.ansiBrightGreen #1db0a4
terminal.ansiBrightMagenta #d9739f
terminal.ansiBrightRed #cb7676
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #e6cc77
terminal.ansiCyan #5eaab5
terminal.ansiGreen #1db0a4
terminal.ansiMagenta #d9739f
terminal.ansiRed #cb7676
terminal.ansiWhite #dbd7caee
terminal.ansiYellow #e6cc77
terminal.foreground #dbd7caee
terminal.selectionBackground #eeeeee15
textBlockQuote.background #181818
textBlockQuote.border #191919
textCodeBlock.background #181818
textLink.activeForeground #1db0a4
textLink.foreground #1db0a4
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #181818
titleBar.activeForeground #646464
titleBar.border #181818
titleBar.inactiveBackground #181818
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #2f363d
welcomePage.buttonBackground #2f363d
welcomePage.buttonHoverBackground #444d56 string.quoted, variable.other.readwrite.js #ecc48d —
support.constant.math #c5e478 —
constant.numeric, constant.character.numeric #F78C6C
constant.language, punctuation.definition.constant, variable.other.constant #82AAFF —
constant.character, constant.other #82AAFF —
constant.character.escape #F78C6C —
string.regexp, string.regexp keyword.other #5ca7e4 —
meta.function punctuation.separator.comma #5f7e97 —
punctuation.accessor, keyword #c792ea italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #c792ea italic
storage.type.function.arrow.js —
entity.name.class, meta.class entity.name.type.class #ffcb8b —
entity.other.inherited-class #c5e478 —
entity.name.function #c792ea italic
punctuation.definition.tag, meta.tag #7fdbca —
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html #caece6
entity.other.attribute-name #c5e478 italic
entity.name.tag.custom #f78c6c —
support.function, support.constant #82AAFF —
support.constant.meta.property-value #7fdbca —
support.type, support.class #c5e478 —
support.variable.dom #c5e478 —
invalid.deprecated #ffffff —
keyword.operator.relational #c792ea italic
keyword.operator.assignment #c792ea —
keyword.operator.arithmetic #c792ea —
keyword.operator.bitwise #c792ea —
keyword.operator.increment #c792ea —
keyword.operator.ternary #c792ea —
comment.line.double-slash #637777 —
constant.language.null #ff5874 —
meta.delimiter.period #c792ea italic
punctuation.definition.string #d9f5dd —
punctuation.definition.string.begin.markdown #ff5874 —
constant.language.boolean #ff5874 —
variable.parameter.function #7fdbca
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag #80CBC4
meta.property-list entity.name.tag.reference #57eaf1 —
constant.other.color.rgb-value punctuation.definition.constant #F78C6C —
constant.other.color #FFEB95 —
keyword.other.unit #FFEB95 —
meta.selector #c792ea italic
entity.other.attribute-name.id #FAD430 —
meta.property-name #80CBC4 —
entity.name.tag.doctype, meta.tag.sgml.doctype #c792ea italic
punctuation.definition.parameters #d9f5dd —
keyword.control.operator #7fdbca —
keyword.operator.logical #c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #baebe2 —
variable.other.object.property #faf39f italic
variable.other.object.js —
entity.name.function #82AAFF italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #c792ea italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts #c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #7fdbca —
invalid.unimplemented #ffffff —
variable.language #7fdbca —
support.variable.property #7fdbca —
variable.function #82AAFF —
variable.interpolation #ec5f67 —
meta.function-call #82AAFF —
punctuation.section.embedded #d3423e —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #d6deeb —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #d9f5dd —
string.template meta.template.expression #d3423e —
string.template punctuation.definition.string #d6deeb —
variable.assignment.coffee #31e1eb —
variable.parameter.function.coffee #d6deeb —
variable.assignment.coffee #7fdbca —
variable.other.readwrite.cs #d6deeb —
entity.name.type.class.cs, storage.type.cs #ffcb8b —
entity.name.type.namespace.cs #B2CCD6 —
string.unquoted.preprocessor.message.cs #d6deeb —
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs #ffcb8b bold
variable.other.object.cs #B2CCD6 —
entity.name.type.enum.cs #c5e478 —
string.interpolated.single.dart, string.interpolated.double.dart #FFCB8B —
support.class.dart #FFCB8B —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css #ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #7fdbca —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js #F78C6C —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #82AAFF —
source.elixir entity.name.function #c5e478 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #82AAFF —
source.elixir punctuation.definition.string #c5e478 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #c5e478 —
source.elixir .punctuation.binary.elixir #c792ea italic
constant.keyword.clojure #7fdbca —
source.go meta.function-call.go #DDDDDD —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #c792ea italic
source.go constant.language.go, source.go constant.other.placeholder.go #ff5874 —
entity.name.function.preprocessor.cpp, entity.scope.name.cpp #7fdbcaff —
meta.namespace-block.cpp #e0dec6 —
storage.type.language.primitive.cpp #ff5874 —
meta.preprocessor.macro.cpp #d6deeb —
variable.parameter #ffcb8b —
variable.other.readwrite.powershell #82AAFF —
support.function.powershell #7fdbcaff —
entity.other.attribute-name.id.html #c5e478 —
punctuation.definition.tag.html #6ae9f0 —
meta.tag.sgml.doctype.html #c792ea italic
meta.class entity.name.type.class.js #ffcb8b —
meta.method.declaration storage.type.js #82AAFF —
meta.js punctuation.definition.js #d6deeb —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #5f7e97 —
variable.other.jsdoc, variable.other.phpdoc #78ccf0 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #d6deeb —
variable.parameter.function.js #7986E7 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #d6deeb —
variable.js, variable.other.js #d6deeb —
entity.name.type.js, entity.name.type.module.js #ffcb8b
support.type.property-name.json #7fdbca —
support.constant.json #c5e478 —
meta.structure.dictionary.value.json string.quoted.double #c789d6 —
string.quoted.double.json punctuation.definition.string.json #80CBC4 —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #ff5874 —
variable.other.object.js #7fdbca italic
variable.other.ruby #d6deeb —
entity.name.type.class.ruby #ecc48d —
constant.language.symbol.hashkey.ruby #7fdbca —
constant.language.symbol.ruby #7fdbca —
entity.name.tag.less #7fdbca —
keyword.other.unit.css #FFEB95 —
meta.attribute-selector.less entity.other.attribute-name.attribute #F78C6C —
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #82b1ff —
markup.italic.markdown #c792ea italic
markup.bold.markdown #c5e478 bold
markup.quote.markdown #697098 italic
markup.inline.raw.markdown #80CBC4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #ff869a —
string.other.link.title.markdown, string.other.link.description.markdown #d6deeb —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #82b1ff —
punctuation.definition.metadata.markdown #7fdbca —
beginning.punctuation.definition.list.markdown #82b1ff —
markup.inline.raw.string.markdown #c5e478 —
variable.other.php, variable.other.property.php #bec5d4 —
support.class.php #ffcb8b —
meta.function-call.php punctuation #d6deeb —
variable.other.global.php #c5e478 —
variable.other.global.php punctuation.definition.variable #c5e478 —
constant.language.python #ff5874 —
variable.parameter.function.python, meta.function-call.arguments.python #82AAFF —
meta.function-call.python, meta.function-call.generic.python #B2CCD6 —
punctuation.python #d6deeb —
entity.name.function.decorator.python #c5e478 —
source.python variable.language.special #8EACE3 —
keyword.control #c792ea italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #c5e478 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #82AAFF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bec5d4 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #F78C6C —
entity.name.tag.scss, entity.name.tag.sass #7fdbca —
keyword.other.unit.scss, keyword.other.unit.sass #FFEB95 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #d6deeb —
entity.name.type.ts, entity.name.type.tsx #ffcb8b —
support.class.node.ts, support.class.node.tsx #82AAFF —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #5f7e97 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #d6deeb —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #82AAFF —
meta.tag.js meta.jsx.children.tsx #82AAFF —
entity.name.tag.yaml #7fdbca —
variable.other.readwrite.js, variable.parameter #d7dbe0 —
support.class.component.js, support.class.component.tsx #f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #d6deeb —
meta.class entity.name.type.class.tsx #ffcb8b —
entity.name.type.tsx, entity.name.type.module.tsx #ffcb8b —
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx #C792EA —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #82AAFF —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted —
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 } ! ` ;
}
lone-wolf-dark | Coding Theme