Zenburn

Name: Zenburn
Author: Ryan Olson

Publisher: Ryan OlsonThemes in package: 1

Optimized Zenburn theme for VS Code

GitHub

VS Code preview

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

Zenburn — Zenburn

fetchUser.ts

index.ts

README.md

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#313633
activityBarBadge.background#7f9f7f
activityBarBadge.foreground#313633
badge.foreground#313633
breadcrumb.focusForeground#9e8f68
breadcrumbPicker.background#3f3f3f
button.background#87ae86
button.foreground#373737
editor.background#3f3f3f
editor.foreground#dedede
editor.lineHighlightBackground#303030
editor.selectionBackground#8383839c
editorBracketHighlight.foreground1#cc9393
editorBracketHighlight.foreground2#8cd0d3
editorBracketHighlight.foreground3#f0dfaf
editorCursor.foreground#8cd0d3
editorError.foreground#cc9393
editorGutter.addedBackground#87ae86
editorGutter.deletedBackground#cc9393
editorGutter.modifiedBackground#e7c4a1
editorInfo.foreground#8cd0d388
editorLineNumber.activeForeground#9e8f68
editorLineNumber.foreground#90907e
editorSuggestWidget.background#3f3f3f
editorSuggestWidget.focusHighlightForeground#87ae86
editorSuggestWidget.foreground#dedede
editorSuggestWidget.highlightForeground#8cd0d3
editorSuggestWidget.selectedBackground#242424
editorSuggestWidget.selectedForeground#dedede
editorSuggestWidget.selectedIconForeground#87ae86
editorSuggestWidgetStatus.foreground#dedede
editorWarning.foreground#e7c4a1
editorWhitespace.foreground#a5a5a552
focusBorder#8cd0d344
gitDecoration.addedResourceForeground#87ae86
gitDecoration.conflictingResourceForeground#CC9393
gitDecoration.deletedResourceForeground#CC9393
gitDecoration.ignoredResourceForeground#7f9f7f
gitDecoration.modifiedResourceForeground#e7c4a1
gitDecoration.submoduleResourceForeground#e7c4a1
gitDecoration.untrackedResourceForeground#87ae86
list.highlightForeground#87ae86
quickInput.background#3f3f3f
quickInput.foreground#dedede
quickInputList.focusBackground#555555
quickInputList.focusForeground#dedede
quickInputList.focusIconForeground#3f3f3f
selection.background#8383839c
sideBar.background#3a3a3a
statusBar.background#2e3330
statusBar.foreground#87ae86
statusBar.noFolderBackground#2e3330
tab.activeForeground#dcdccc
tab.inactiveBackground#353535
terminal.ansiBlue#8cd0d3
terminal.ansiBrightBlue#8cd0d3
terminal.ansiBrightCyan#8cd0d3
terminal.ansiBrightGreen#7f9f7f
terminal.ansiBrightMagenta#dca3a3
terminal.ansiBrightRed#ecbcbc
terminal.ansiBrightYellow#f0dfaf
terminal.ansiCyan#8cd0d3
terminal.ansiGreen#7f9f7f
terminal.ansiMagenta#dca3a3
terminal.ansiRed#ecbcbc
terminal.ansiYellow#f0dfaf
terminal.foreground#dcdccc
terminal.selectionBackground#686868aa
textLink.activeForeground#82a282
textLink.foreground#8cd0d3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f9f7f	—
constant.language, support.constant, constant.other.color, entity.name.type.variant.ocaml, source.rust variable.language.rust, support.type.rust, source.elixir constant.other.symbol.elixir, source.elixir constant.other.symbol.elixir punctuation.definition.constant.elixir, source.elixir variable.language.elixir, source.elixir constant.other.keywords.elixir, source.ruby constant.other.symbol, source.ruby punctuation.definition.constant	#dca3a3	bold
string, punctuation.definition.string.begin, punctuation.definition.string.end	#cc9393	—
constant.character, source.scss keyword.operator.ampersand, source.css keyword.operator.ampersand	#dca3a3	bold
constant.numeric, storage.type.numeric, source.scss keyword.other.unit, source.css keyword.other.unit	#8cd0d3	—
constant.language.boolean	#dca3a3	—
meta.number.float.decimal constant.numeric, punctuation.separator.decimal, markup.underline.link	#c0bed1	—
source.scss variable.declaration, source.scss punctuation.definition.variable, source.css variable.declaration, source.css punctuation.definition.variable, support.class.js, keyword.operator.word.new.js, variable.other.php, variable.parameter.php, variable.language.php, meta.function.type-declaration.haskell entity.name.function.haskell, source.haskell meta.name.haskell, entity.name.type.fsharp, punctuation.definition.variable.ruby, variable.other.readwrite.instance.ruby	#efdcbc	—
keyword.declaration.function, source.scss support.function, source.css support.function, entity.name.function.c, entity.name.function.preprocessor.c, entity.name.function.c++, entity.name.function.preprocessor.c++, entity.name.function.python, variable.function.python support.function.builtin.python, entity.name.class.python, variable.annotation.python, meta.class.js entity.name.function.constructor.js,support.function.classobj.php, storage.type.function.php, meta.function-call.php support.function, entity.name.function.cs, source.rust meta.function.rust entity.name.function.rust, support.function.rust, entity.name.function.clojure, entity.name.function.elm, source.elixir meta.function.public.elixir entity.name.function.public.elixir, source.java entity.name.function.java, source.sql support.function, source.ruby entity.name.function, meta.definition.method.ts entity.name.function.ts, meta.definition.method.js entity.name.function.js	#efef8f	—
keyword.control.conditional	#f0dfaf	bold
keyword.control.loop, source.scss keyword.control.flow.sass	#ffd7a7	bold
keyword.control.conditional.case, keyword.control.conditional.default, source.json meta.mapping.key.json string.quoted.double.json, source.json meta.mapping.key.json string.quoted.double.json punctuation.definition.string.begin.json, source.json meta.mapping.key.json string.quoted.double.json punctuation.definition.string.end.json	#dfcfaf	—
punctuation.definition, punctuation.section, punctuation.separator, punctuation.terminator - punctuation.definition.numeric.base - keyword.operator	#f0efd0	—
keyword, constant.other.keyword.clojure - keyword.operator - keyword.operator.word - keyword.control.flow.return.js - keyword.operator.logical	#f0dfaf	bold
entity.name.tag, punctuation.definition.list_item, source.shell.bash support.function, keyword.control.flow.return.js, keyword.declaration.function.python, keyword.control.flow.assert.python, keyword.operator.new.cs - keyword.control.import, keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.as, source.sql keyword.other, source.sql keyword.operator.assignment	#e3ceab	bold
keyword.control.exception.try, keyword.control.exception.catch, text.html.basic entity.name.tag.script, source.cs keyword.control.trycatch	#c3bf9f	bold
source.scss entity.other.pseudo-class, source.shell.bash punctuation.definition.variable, source.shell.bash variable.other.readwrite, source.scss meta.function-call.sass variable.function.sass keyword.control.at-rule.sass, entity.other.pseudo-class.css, entity.other.pseudo-element.css, keyword.control.directive.css punctuation.definition.keyword.css, keyword.control.directive.css, comment.block.documentation.phpdoc.php keyword.other.phpdoc.php, source.haskell meta.preprocessor.c, source.haskell punctuation.definition.preprocessor.c, source.haskell meta.preprocessor.haskell	#ffcfaf	—
keyword.control.import.include, keyword.control.at-rule.import.scss, keyword.control.at-rule.import.scss punctuation.definition.keyword.scss, source.scss meta.function-call.sass variable.function.sass punctuation.definition.keyword.sass, keyword.control.import.js, keyword.control.default.js, keyword.control.export.js, keyword.control.from.js, keyword.control.as.js, keyword.control.import.python, keyword.control.import.from.python, keyword.other.use.php, meta.module-reference.ocaml, support.other.module.ocaml, entity.name.type.module.ocaml, keyword.control.import.haskell, namespace.open.fsharp keyword.fsharp, source.fsharp keyword.control.directive.fsharp, source.cs keyword.control.import.cs, source.go keyword.other.import.go, source.rust meta.path.rust, meta.declaration.module.elm keyword.other.elm, meta.import.elm keyword.other.elm, source.elm meta.import.elm keyword.import.elm, source.java meta.package-declaration.java keyword.other.package.java, source.java meta.import.java keyword.control.import.java	#dfaf8f	bold
keyword.control.import.define, meta.preprocessor.macro.c entity.name.constant.preprocessor.c, meta.preprocessor.macro.c++ entity.name.constant.preprocessor.c++, storage.modifier.def.clojure, meta.module.elixir keyword.control.module.elixir, source.ruby keyword.declaration.class, source.ruby keyword.declaration.function, source.ruby keyword.control.block.end	#ffcfaf	—
support.macro.rust, source.ruby keyword.other.special-method	#ffcfaf	bold
keyword.control.import.c, meta.preprocessor.c, keyword.control.import.c++, meta.preprocessor.c++	#dfaf8f	bold
entity.name.type, support.type, entity.other.attribute-name, storage.type, support.class.builtin, source.scss entity.other, constant.other.haskell, source.haskell meta.import.haskell support.other.module.haskell, source.haskell meta.declaration.module.haskell entity.name.namespace.haskell, abstract.definition.fsharp entity.name.type.fsharp, source.elixir entity.name.type, source.java support.class.java, entity.name.class.ruby, entity.other.inherited-class.ruby, support.class.ruby	#dfdfbf	bold
storage.modifier, support.type.property-name, abstract.definition.fsharp keyword.fsharp, keyword.declaration, storage.type.js, storage.type.ts	#c3bf9f	bold
keyword.declaration.enum, keyword.declaration.struct, keyword.declaration.union, variable.language.this.js, keyword.declaration.type.haskell	#efefaf	bold
constant.character.escape, punctuation.section.interpolation, source.scss keyword.other.important, source.css keyword.other.important, source.scss support.type, source.css support.type, text.html.basic punctuation.definition.entity.html, text.html.basic constant.character.entity.named, text.html.basic punctuation.terminator.entity.html, entity.other.custom-property.css, variable.function.clojure	#cfbfaf	—
variable.annotation	#82a282	bold
markup.heading punctuation.definition.heading, punctuation.definition.raw.begin, punctuation.definition.raw.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#8f8f8f	—
entity.name.section.markdown	#efefef	bold
keyword.operator.logical	#dedede	bold
constant.language.import-export-all.js	#dedede	—
invalid	#ffffff	—
invalid.deprecated	#ffffff	—
markup.bold	—	bold
markup.italic	—	italic
meta.link.inline.description.markdown	—	underline
markup.italic markup.bold \| markup.bold markup.italic	—	bold italic
markup.underline markup.bold \| markup.bold markup.underline	—	bold underline
markup.underline markup.italic \| markup.italic markup.underline	—	italic underline
markup.bold markup.italic markup.underline \| markup.bold markup.underline markup.italic \| markup.italic markup.bold markup.underline \| markup.italic markup.underline markup.bold \| markup.underline markup.bold markup.italic \| markup.underline markup.italic markup.bold	—	bold italic underline
meta.diff, meta.diff.header	#e3ceab	—
markup.deleted	#cfbfaf	—
markup.inserted	#efdcbc	bold
markup.changed	#ffcfaf	—
message.error	#cc9393	—

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}!`;
}