Zenburn+ Dark Theme

Name: Zenburn+ Dark Theme
Author: igolskyi

Publisher: igolskyiThemes in package: 2

Theme based on zenburn-emacs color theme ported to VS Code

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Zenburn+ Dark Theme — Zenburn+ Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#3F3F3F
badge.background#047aa6
button.background#2AA19899
debugExceptionWidget.background#2B2B2B
debugExceptionWidget.border#AB395B
debugToolBar.background#2B2B2B
dropdown.background#2B2B2B
dropdown.border#2AA19899
editor.background#3F3F3F
editor.findMatchBackground#85990059
editor.findMatchHighlightBackground#85990033
editor.findRangeHighlightBackground#6c71c433
editor.foreground#DCDCCC
editor.hoverHighlightBackground#2aa19826
editor.inactiveSelectionBackground#586e7540
editor.lineHighlightBackground#1CD1FF12
editor.rangeHighlightBackground#6c71c41A
editor.selectionBackground#586e7559
editor.selectionHighlightBackground#2aa19826
editor.wordHighlightBackground#6c71c433
editor.wordHighlightStrongBackground#6c71c466
editorCursor.foreground#FFFFEF
editorError.foreground#ff0000cc
editorGroup.border#2B2B2B
editorGroup.dropBackground#2AA19844
editorGroupHeader.tabsBackground#2B2B2B
editorHoverWidget.background#2B2B2B
editorIndentGuide.activeBackground#44444422
editorIndentGuide.background#1CD1FF12
editorInfo.foreground#00f
editorLineNumber.foreground#aaaaaa
editorLink.activeForeground#268bd2
editorMarkerNavigationError.background#AB395B
editorMarkerNavigationWarning.background#5B7E7A
editorWarning.foreground#F4DC21
editorWhitespace.foreground#586e7599
editorWidget.background#2B2B2B
errorForeground#ffeaea
focusBorder#2AA19899
input.background#2B2B2B
input.foreground#93A1A1
input.placeholderForeground#93A1A1AA
inputOption.activeBorder#2AA19899
inputValidation.errorBackground#571b26
inputValidation.errorBorder#a92049
inputValidation.infoBackground#052730
inputValidation.infoBorder#363b5f
inputValidation.warningBackground#5d5938
inputValidation.warningBorder#9d8a5e
list.activeSelectionBackground#005A6F
list.dropBackground#00445488
list.focusBackground#005A6F
list.highlightForeground#1ebcc5
list.hoverBackground#004454AA
list.inactiveSelectionBackground#00445488
panel.border#aaaaaa
peekView.border#aaaaaa
peekViewEditor.background#10192c
peekViewEditor.matchHighlightBackground#7744AA40
peekViewResult.background#2B2B2B
peekViewTitle.background#2B2B2B
pickerGroup.border#2AA19899
pickerGroup.foreground#2AA19899
progressBar.background#047aa6
selection.background#2AA19899
sideBar.background#2B2B2B
sideBar.border#aaaaaa55
sideBarTitle.foreground#93A1A1
statusBar.background#2B2B2B
statusBar.debuggingBackground#2B2B2B
statusBar.foreground#d6dbdb
statusBar.noFolderBackground#2B2B2B
statusBarItem.prominentBackground#2B2B2B
statusBarItem.prominentHoverBackground#2B2B2B
tab.activeBackground#3F3F3F
tab.activeForeground#d6dbdb
tab.border#494949
tab.inactiveBackground#2B2B2B
tab.inactiveForeground#93A1A1
titleBar.activeBackground#002C39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7F9F7F	—
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread	#DCDCCC	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#94BFF3	—
keyword.input.graphql, keyword.type.graphql	#F0DFAF	bold
variable.graphql	#94BFF3	—
variable.parameter.graphql, variable.parameter.velocity	#DCDCCC	—
support.type.graphql	#DFAF8F	—
support.type.builtin.graphql	#98C379	—
string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag	#CC9393	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end	#CC9393	—
expression.string,meta.template.expression	#DCDCCC	—
constant.numeric	#BFEBBF	—
constant.language,variable.language	#DC8CC3	—
constant.character, constant.other, string.unquoted	#94BFF3	—
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression	#DC8CC3	—
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive	#94BFF3	—
entity.name.type.ts,support.type.primitive.ts	#98C379	—
support.class.console, storage.type.function.arrow	#DCDCCC	—
support.class.component.html	#94BFF3	bold
storage.modifier,storage.arrow, storage.type.class, storage.type.function	#F0DFAF	—
storage,meta.var.expr storage.type,storage.type.class,keyword.control.loop,keyword.operator.expression.in,keyword.operator.new,keyword.control.switch,keyword.control.conditional,keyword.control.flow,keyword.operator.expression.instanceof,keyword.operator.expression.of,keyword.operator.expression.delete,keyword.operator.expression.void,keyword.control.module,keyword.control.trycatch, keyword.control.export,keyword.control.default,keyword.control.import,keyword.control.from	#F0DFAF	bold
constant.language.boolean.false,constant.language.boolean.true, constant.language.null, constant.language.undefined, constant.language.json	#BFEBBF	—
variable.language.this, variable.language.super	#DCDCCC	bold
support.type.object.module	#F0DFAF	bold
class.instance.constructor	#D0BF8F	—
support.function, entity.name.function, new.expr entity.name.type	#8CD0D3	—
annotation.meta.ts, annotation.meta.tsx	#DCDCCC	—
variable.parameter, operator.rest.parameters	#DFAF8F	—
variable.property,variable.object.property,variable.constant,variable.other.property,variable.other.object.property,support.variable.property, variable.other.env	#94BFF3	—
variable.other.constant, variable.other.readwrite.alias	#DFAF8F	—
quote.module	#93E0E3	—
meta.embedded, punctuation, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json	#DCDCCC	—
punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.strike.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown	#8FB28F	—
markup.heading	#F0DFAF	bold
markup.italic	#D0BF8F	italic
markup.bold	#D0BF8F	bold
markup.underline.link.markdown, markup.underline.link.image.markdown	#94BFF3	—
string.other.link.title.markdown	#DFAF8F	—
punctuation.definition.raw.markdown, markup.inline.raw, markup.fenced_code.block	#CC9393	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#94BFF3	—
punctuation.definition.tag.html, entity.name.tag	#94BFF3	—
entity.other.attribute-name	#F0DFAF	—
meta.object-literal.key, support.type.property-name.json	#94BFF3	—
storage.modifier.ts	#DC8CC3	—
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation	#94BFF3	—
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration	#94BFF3	—
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters	#D0BF8F	—
comment.block.documentation	#7F9F7F	—
storage.type.class.jsdoc	#8FB28F	—
constant.language.import-export-all	#DFAF8F	—
objectliteral.key.separator, punctuation.separator.key-value	#DCDCCC	—
regex	—	italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace	#DCDCCC	—
regex.character-class	#DCDCCC	—
entity.name.type.class	#8CD0D3	—
entity.other.inherited-class	#8CD0D3	—
entity.name.type.instance.jsdoc	#D0BF8F	—
keyword.control.directive.velocity	#F0DFAF	bold
variable.other.readwrite.velocity	#DFAF8F	—
variable.parameter.velocity	#DCDCCC	—
text.html.velocity	#94BFF3	—
yaml.entity.name,yaml.string.entity.name	#DC8CC3	—
yaml.string.out	#DCDCCC	—
string.unquoted.plain.out.yaml	#CC9393	—
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end	#DCDCCC	—
string.regexp	#DC8CC3	—
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp	#D0BF8F	—
constant.other.character-class.regexp, constant.character.escape.ts	#DCDCCC	—
expr.regex.or.operator	#DCDCCC	—
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag	#CC9393	—
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded	#DCDCCC	—
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square	#DCDCCC	—
property-list.property-value,property-list.constant	#A5C261	—
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss, support.type.property-name.css	#94BFF3	—
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss	#D0BF8F	—
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss, keyword.other.sql	#94BFF3	—
property-list.property-value.function	#D0BF8F	—
support.constant.property-value.css,support.constant.property-value.scss	#A5C261	—
css.entity.name.tag,scss.entity.name.tag, entity.name.tag.css,entity.name.tag.scss	#DC8CC3	—
constant.character.escape.codepoint.css	#b267e6	—
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css	#D0BF8F	—
keyword.scss,keyword.css	#DC8CC3	—
triple-slash.tag	#DCDCCC	italic
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—