Skip to main content
wDark Theme for VS Code | Coding Theme
Home Theme VS Code wDark Theme for VS Code Completely black background, designed by wykys, inspired by One Dark
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 #000000 activityBar.border #222222 activityBar.foreground #abb2bf activityBarBadge.background #e5c07b activityBarBadge.foreground #000000 badge.background #23272e tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded #ABB2BF — punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #E06C75 — variable.other.generic-type.haskell #C678DD — storage.type.haskell #D19A66
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
wDark Theme for VS Code — wDark Theme
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
button.background
#e5c07b
button.foreground #000000
button.secondaryBackground #30333d
button.secondaryForeground #c0bdbd
checkbox.border #404754
debugToolBar.background #1e2227
descriptionForeground #abb2bf
diffEditor.insertedTextBackground #00809b33
dropdown.background #1e2227
dropdown.border #1e2227
editor.background #000000
editor.findMatchBackground #d19a6644
editor.findMatchBorder #ffffff5a
editor.findMatchHighlightBackground #ffffff22
editor.foreground #aaaaaa
editor.inactiveSelectionBackground #b217f04d
editor.lineHighlightBackground #222222
editor.selectionBackground #b217f063
editor.selectionHighlightBackground #b217f02f
editor.selectionHighlightBorder #dddddd
editor.wordHighlightBackground #d2e0ff2f
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorBracketHighlight.foreground1 #d19a66
editorBracketHighlight.foreground2 #c678dd
editorBracketHighlight.foreground3 #56b6c2
editorBracketMatch.background #515a6b
editorBracketMatch.border #515a6b
editorCursor.background #000000
editorCursor.foreground #ffff00
editorError.foreground #c24038
editorGroup.border #222222
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #222222
editorGutter.addedBackground #109868
editorGutter.deletedBackground #9a353d
editorGutter.modifiedBackground #948b60
editorHoverWidget.background #1e2227
editorHoverWidget.border #181a1f
editorHoverWidget.highlightForeground #61afef
editorIndentGuide.activeBackground1 #777777
editorIndentGuide.background1 #3b4048
editorInlayHint.background #2c313c
editorInlayHint.foreground #abb2bf
editorLineNumber.activeForeground #abb2bf
editorLineNumber.foreground #495162
editorMarkerNavigation.background #1e2227
editorRuler.foreground #abb2bf26
editorSuggestWidget.background #1e2227
editorSuggestWidget.border #181a1f
editorSuggestWidget.selectedBackground #2c313a
editorWarning.foreground #d19a66
editorWhitespace.foreground #333333
editorWidget.background #1e2227
focusBorder #3e4452
gitDecoration.ignoredResourceForeground #636b78
input.background #1d1f23
input.foreground #abb2bf
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #323842
list.focusForeground #f0f0f0
list.highlightForeground #ecebeb
list.hoverBackground #2c313a
list.hoverForeground #abb2bf
list.inactiveSelectionBackground #222222
list.inactiveSelectionForeground #d7dae0
list.warningForeground #d19a66
menu.foreground #abb2bf
menu.separatorBackground #343a45
minimapGutter.addedBackground #109868
minimapGutter.deletedBackground #9a353d
minimapGutter.modifiedBackground #948b60
panel.border #3e4452
panelSectionHeader.background #1e2227
peekViewEditor.background #1b1d23
peekViewEditor.matchHighlightBackground #29244b
peekViewResult.background #22262b
pickerGroup.foreground #e5c07b
scrollbar.shadow #23252c
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566660
scrollbarSlider.hoverBackground #5a637580
settings.focusedRowBackground #23272e
settings.headerForeground #ffffff
sideBar.background #000000
sideBar.border #222222
sideBar.foreground #aaaaaa
sideBarSectionHeader.background #000000
sideBarSectionHeader.border #222222
sideBarSectionHeader.foreground #c678dd
statusBar.background #000000
statusBar.debuggingBackground #cc6633
statusBar.debuggingBorder #000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #777777
statusBar.noFolderBackground #000000
statusBarItem.remoteBackground #000000
statusBarItem.remoteForeground #aaaaaa
tab.activeBackground #000000
tab.activeBorder #e06c75
tab.activeForeground #dcdcdc
tab.border #000000
tab.hoverBackground #323842
tab.hoverBorder #98c379
tab.inactiveBackground #000000
tab.unfocusedHoverBackground #323842
terminal.ansiBlack #3f4451
terminal.ansiBlue #4aa5f0
terminal.ansiBrightBlack #4f5666
terminal.ansiBrightBlue #4dc4ff
terminal.ansiBrightCyan #4cd1e0
terminal.ansiBrightGreen #a5e075
terminal.ansiBrightMagenta #de73ff
terminal.ansiBrightRed #ff616e
terminal.ansiBrightWhite #e6e6e6
terminal.ansiBrightYellow #f0a45d
terminal.ansiCyan #42b3c2
terminal.ansiGreen #8cc265
terminal.ansiMagenta #c162de
terminal.ansiRed #e05561
terminal.ansiWhite #d7dae0
terminal.ansiYellow #d18f52
terminal.background #000000
terminal.border #3e4452
terminal.foreground #abb2bf
terminal.selectionBackground #abb2bf30
textBlockQuote.background #2e3440
textBlockQuote.border #4b5362
textLink.foreground #61afef
textPreformat.foreground #d19a66
titleBar.activeBackground #000000
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #aaaaaa
tree.indentGuidesStroke #ffffff1d
walkThrough.embeddedEditorBackground #2e3440 support.variable.magic.python #E06C75 —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ABB2BF —
variable.parameter.function.language.special.self.python #E5C07B —
variable.parameter.function.language.special.cls.python #E5C07B —
storage.modifier.lifetime.rust #ABB2BF —
support.function.std.rust #61AFEF —
entity.name.lifetime.rust #E5C07B —
variable.language.rust #E06C75 —
support.constant.edge #C678DD —
constant.other.character-class.regexp #E06C75 —
keyword.operator.word #C678DD —
keyword.operator.quantifier.regexp #D19A66 —
variable.parameter.function #ABB2BF —
comment markup.link #5C6370 —
markup.changed.diff #E5C07B —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61AFEF —
markup.inserted.diff #98C379 —
markup.deleted.diff #E06C75 —
meta.function.c,meta.function.cpp #E06C75 —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #ABB2BF —
punctuation.separator.key-value #ABB2BF —
keyword.operator.expression.import #61AFEF —
support.constant.math #E5C07B —
support.constant.property.math #D19A66 —
variable.other.constant #E5C07B —
storage.type.annotation.java, storage.type.object.array.java #E5C07B —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #ABB2BF —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #E5C07B —
keyword.operator.instanceof.java #C678DD —
meta.definition.variable.name.java #E06C75 —
keyword.operator.logical #56B6C2 —
keyword.operator.bitwise #56B6C2 —
keyword.operator.channel #56B6C2 —
support.constant.property-value.scss,support.constant.property-value.css #D19A66 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56B6C2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #D19A66 —
punctuation.separator.list.comma.css #ABB2BF —
support.constant.color.w3c-standard-color-name.css #D19A66 —
support.type.vendored.property-name.css #56B6C2 —
support.module.node,support.type.object.module,support.module.node #E5C07B —
entity.name.type.module #E5C07B —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #E06C75 —
support.constant.json #D19A66 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #C678DD —
support.type.object.console #E06C75 —
support.variable.property.process #D19A66 —
entity.name.function,support.function.console #61AFEF —
keyword.operator.misc.rust #ABB2BF —
keyword.operator.sigil.rust #C678DD —
keyword.operator.delete #C678DD —
support.type.object.dom #56B6C2 —
support.variable.dom,support.variable.property.dom #E06C75 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56B6C2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #C678DD —
punctuation.separator.delimiter #ABB2BF —
punctuation.separator.c,punctuation.separator.cpp #C678DD —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56B6C2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #C678DD —
variable.parameter.function.language.python #D19A66 —
support.type.python #56B6C2 —
keyword.operator.logical.python #C678DD —
variable.parameter.function.python #D19A66 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ABB2BF —
meta.function-call.generic.python #61AFEF —
constant.character.format.placeholder.other.python #D19A66 —
keyword.operator.assignment.compound #C678DD —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56B6C2 —
entity.name.namespace #E5C07B —
variable.language #E5C07B —
token.variable.parameter.java #ABB2BF —
import.storage.java #E5C07B —
token.package.keyword #C678DD —
entity.name.function, meta.require, support.function.any-method, variable.function #61AFEF —
entity.name.type.namespace #E5C07B —
support.class, entity.name.type.class #E5C07B —
entity.name.class.identifier.namespace.type #E5C07B —
entity.name.class, variable.other.class.js, variable.other.class.ts #E5C07B —
variable.other.class.php #E06C75 —
control.elements, keyword.operator.less #D19A66 —
keyword.other.special-method #61AFEF —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #C678DD —
token.storage.type.java #E5C07B —
support.type.property-name #ABB2BF —
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml #E06C75 —
support.constant.property-value #ABB2BF —
support.constant.font-name #D19A66 —
constant.other.symbol #56B6C2 —
punctuation.definition.constant #D19A66 —
entity.other.attribute-name #D19A66 —
entity.other.attribute-name.id #61AFEF —
entity.other.attribute-name.class.css #D19A66 —
markup.heading punctuation.definition.heading, entity.name.section #61AFEF —
keyword.other.unit #E06C75 —
markup.bold,todo.bold #D19A66 —
punctuation.definition.bold #E5C07B —
markup.italic, punctuation.definition.italic,todo.emphasis #C678DD —
entity.name.section.markdown #E06C75 —
punctuation.definition.heading.markdown #E06C75 —
punctuation.definition.list.begin.markdown #E5C07B —
markup.heading.setext #ABB2BF —
punctuation.definition.bold.markdown #D19A66 —
markup.inline.raw.markdown #98C379 —
markup.inline.raw.string.markdown #98C379 —
punctuation.definition.raw.markdown #E5C07B —
punctuation.definition.list.markdown #E5C07B —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #E06C75 —
beginning.punctuation.definition.list.markdown #E06C75 —
punctuation.definition.metadata.markdown #E06C75 —
markup.underline.link.markdown,markup.underline.link.image.markdown #C678DD —
string.other.link.title.markdown,string.other.link.description.markdown #61AFEF —
markup.raw.monospace.asciidoc #98C379 —
punctuation.definition.asciidoc #E5C07B —
markup.list.asciidoc #E5C07B —
markup.link.asciidoc,markup.other.url.asciidoc #C678DD —
string.unquoted.asciidoc,markup.other.url.asciidoc #61AFEF —
punctuation.section.embedded, variable.interpolation #E06C75 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #C678DD —
invalid.illegal.bad-ampersand.html #ABB2BF —
invalid.illegal.unrecognized-tag.html #E06C75 —
invalid.deprecated #FFFFFF —
invalid.deprecated.entity.other.attribute-name.html #D19A66 —
invalid.unimplemented #FFFFFF —
source.json meta.structure.dictionary.json > string.quoted.json #E06C75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #E06C75 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #98C379 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56B6C2 —
support.type.property-name.json #E06C75 —
support.type.property-name.json punctuation #E06C75 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #C678DD —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #C678DD —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #E5C07B —
keyword.operator.error-control.php #C678DD —
keyword.operator.type.php #C678DD —
punctuation.section.array.begin.php #ABB2BF —
punctuation.section.array.end.php #ABB2BF —
invalid.illegal.non-null-typehinted.php #F44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #E5C07B —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61AFEF —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #ABB2BF —
support.constant.core.rust #D19A66 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #D19A66 —
entity.name.goto-label.php,support.other.php #61AFEF —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56B6C2 —
keyword.operator.regexp.php #C678DD —
keyword.operator.comparison.php #56B6C2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #C678DD —
meta.function.decorator.python #61AFEF —
support.token.decorator.python,meta.function.decorator.identifier.python #56B6C2 —
function.parameter #ABB2BF —
function.parameter.ruby, function.parameter.cs #ABB2BF —
constant.language.symbol.ruby #56B6C2 —
constant.language.symbol.hashkey.ruby #56B6C2 —
inline-color-decoration rgb-value #D19A66 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #E5C07B —
block.scope.end,block.scope.begin #ABB2BF —
entity.name.variable.local.cs #E06C75 —
token.error-token #F44747 —
token.debug-token #C678DD —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #C678DD —
meta.template.expression #ABB2BF —
keyword.operator.module #C678DD —
support.type.type.flowtype #61AFEF —
support.type.primitive #E5C07B —
meta.property.object #E06C75 —
variable.parameter.function.js #E06C75 —
keyword.other.template.begin #98C379 —
keyword.other.template.end #98C379 —
keyword.other.substitution.begin #98C379 —
keyword.other.substitution.end #98C379 —
keyword.operator.assignment #56B6C2 —
keyword.operator.assignment.go #E5C07B —
keyword.operator.arithmetic.go, keyword.operator.address.go #C678DD —
entity.name.package.go #E5C07B —
support.type.prelude.elm #56B6C2 —
support.constant.elm #D19A66 —
punctuation.quasi.element #C678DD —
constant.character.entity #E06C75 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56B6C2 —
entity.global.clojure #E5C07B —
meta.symbol.clojure #E06C75 —
constant.keyword.clojure #56B6C2 —
meta.arguments.coffee, variable.parameter.function.coffee #E06C75 —
meta.scope.prerequisites.makefile #E06C75 —
storage.modifier.import.groovy #E5C07B —
meta.method.groovy #61AFEF —
meta.definition.variable.name.groovy #E06C75 —
meta.definition.class.inherited.classes.groovy #98C379 —
support.variable.semantic.hlsl #E5C07B —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #C678DD —
text.variable, text.bracketed #E06C75 —
support.type.swift, support.type.vb.asp #E5C07B —
entity.name.function.xi #E5C07B —
entity.name.class.xi #56B6C2 —
constant.character.character-class.regexp.xi #E06C75 —
constant.regexp.xi #C678DD —
keyword.control.xi #56B6C2 —
beginning.punctuation.definition.quote.markdown.xi #98C379 —
beginning.punctuation.definition.list.markdown.xi #7F848E —
constant.character.xi #61AFEF —
constant.other.color.rgb-value.xi #FFFFFF —
punctuation.definition.tag.xi #5C6370 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #E5C07B —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #E06C75 —
meta.brace.square #ABB2BF —
comment, punctuation.definition.comment #7F848E —
markup.quote.markdown #5C6370 —
punctuation.definition.block.sequence.item.yaml #ABB2BF —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #56B6C2 —
entity.name.variable.parameter.cs #E5C07B —
entity.name.variable.field.cs #E06C75 —
markup.underline — underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
support.other.namespace.php #ABB2BF —
variable.parameter.function.latex #E06C75 —
variable.other.object #E5C07B —
variable.other.constant.property #E06C75 —
entity.other.inherited-class #E5C07B —
variable.other.readwrite.c #E06C75 —
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php #ABB2BF —
constant.numeric.decimal.asm.x86_64 #C678DD —
support.other.parenthesis.regexp #D19A66 —
constant.character.escape #56B6C2 —
keyword.operator.expression.is #C678DD —
entity.name.label #E06C75 —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
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}!`;
}
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 $