Vivid Hope Theme

Name: Vivid Hope Theme
Author: matanich

Publisher: matanichThemes in package: 1

Dark theme with bright customizable colors

Open in VS Code GitHub

VS Code preview

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

Vivid Hope Theme — Vivid Hope Dark

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.

actionBar.toggledBackground#383a49
activityBar.background#202020
activityBarBadge.background#007ACC
checkbox.border#6B6B6B
editor.background#000000
editor.foreground#c8c8c8
editor.inactiveSelectionBackground#3A3D41
editor.selectionHighlightBackground#ADD6FF26
editorGroupHeader.tabsBackground#252526
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
input.placeholderForeground#A6A6A6
list.activeSelectionIconForeground#FFF
list.dropBackground#383B3D
menu.background#252526
menu.border#454545
menu.foreground#CCCCCC
menu.selectionBackground#0078d4
menu.separatorBackground#454545
ports.iconRunningProcessForeground#369432
sideBar.background#121212
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarTitle.foreground#BBBBBB
statusBar.background#0c6cb1
statusBarItem.remoteBackground#16825D
statusBarItem.remoteForeground#FFF
tab.activeBackground#000000
tab.border#000000
tab.inactiveBackground#2c2c2c00
tab.lastPinnedBorder#ccc3
tab.selectedBackground#222222
tab.selectedForeground#ffffffa0
terminal.inactiveSelectionBackground#3A3D41
titleBar.activeBackground#323233
titleBar.inactiveBackground#3c3c3c
widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#787878	—
constant.language	#f05aaa	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#ff783d	—
constant.regexp	#646695	—
entity.name.tag	#f05aaa	—
entity.name.tag.css, entity.name.tag.less	#e6c84c	—
entity.other.attribute-name	#e6c84c	—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#e6c84c	—
entity.other.attribute-name.pseudo-element.css	#00be6e	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#aa78ff	bold
markup.heading	#f05aaa	bold
markup.italic	#aa78ff	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted	#ce9178	—
markup.changed	#f05aaa	—
punctuation.definition.quote.begin.markdown	#00be6e	—
punctuation.definition.list.begin.markdown	#e6c84c	—
fenced_code.block.language	#ff783d	—
markup.underline.link, markup.fenced_code, markup.inline.raw	#00be6e	—
punctuation.definition.tag	#787878	—
meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.structure.html entity.name.tag.html, meta.tag.structure.head entity.name.tag.html, meta.tag.structure.body entity.name.tag.html, meta.tag.structure.svg entity.name.tag.html, meta.tag.structure.math entity.name.tag.html, meta.tag.object.img entity.name.tag.html, meta.tag.object.picture entity.name.tag.html, meta.tag.object.video entity.name.tag.html, meta.tag.object.source entity.name.tag.html, meta.tag.object.track entity.name.tag.html, meta.tag.object.audio entity.name.tag.html, meta.tag.object.iframe entity.name.tag.html, meta.tag.object.canvas entity.name.tag.html, meta.tag.metadata.script entity.name.tag.html, meta.tag.metadata.noscript entity.name.tag.html, meta.tag.metadata.style entity.name.tag.html, meta.tag.metadata.link entity.name.tag.html, meta.tag.inline.a entity.name.tag.html, meta.element.structure.svg.html entity.name.tag.html	#00be6e	—
meta.tag.structure.button entity.name.tag.html, meta.tag.structure.form entity.name.tag.html, meta.tag.structure.label entity.name.tag.html, meta.tag.structure.textarea entity.name.tag.html, meta.tag.structure.input entity.name.tag.html, meta.tag.structure.select entity.name.tag.html, meta.tag.structure.option entity.name.tag.html, meta.tag.structure.optgroup entity.name.tag.html, meta.tag.structure.progress entity.name.tag.html, meta.tag.structure.output entity.name.tag.html, meta.tag.structure.meter entity.name.tag.html, meta.tag.structure.fieldset entity.name.tag.html, meta.tag.structure.legend entity.name.tag.html, meta.tag.structure.datalist entity.name.tag.html	#ff783d	—
meta.tag.structure.slot entity.name.tag.html, meta.tag.structure.template entity.name.tag.html, meta.tag.structure.nav entity.name.tag.html, meta.tag.structure.menu entity.name.tag.html, meta.tag.structure.dialog entity.name.tag.html, meta.tag.structure.details entity.name.tag.html, meta.tag.structure.summary entity.name.tag.html	#1e78ff	—
meta.tag.structure.main entity.name.tag.html, meta.tag.structure.header entity.name.tag.html, meta.tag.structure.footer entity.name.tag.html, meta.tag.structure.aside entity.name.tag.html, meta.tag.structure.section entity.name.tag.html, meta.tag.structure.search entity.name.tag.html	#aa78ff	—
invalid.deprecated	#f03c46	—
meta.preprocessor, entity.name.function.preprocessor	#f05aaa	—
meta.preprocessor.string	#ce9178	—
meta.preprocessor.numeric	#b5cea8	—
meta.structure.dictionary.key.python	#9cdcfe	—
meta.diff.header	#f05aaa	—
storage	#f05aaa	—
storage.type	#f03c46	—
storage.modifier, keyword.operator.noexcept	#f05aaa	—
string, meta.embedded.assembly	#00cbf5	—
string.tag	#ce9178	—
string.value	#ce9178	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#f05aaa	—
meta.template.expression	#d4d4d4	—
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded	#00cbf5	—
support.type.property-name.json	#c8c8c8	—
_string.quoted.single.css, _string.quoted.double.css	#00be6e	—
source.css variable	#aa78ff	—
keyword	#f05aaa	—
keyword.control	#f05aaa	—
keyword.operator	#00be6e	—
keyword.operator.accessor	#c8c8c8	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#00be6e	—
keyword.other.unit	#00be6e	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#f05aaa	—
support.function.git-rebase	#9cdcfe	—
constant.sha.git-rebase	#b5cea8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#d4d4d4	—
variable.language	#f05aaa	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#e6c84c	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#e6c84c	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#e6c84c	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#00be6e	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#c8c8c8	—
variable.parameter	#aa78ff	—
support.variable	#1e78ff	—
variable.other.constant, variable.other.enummember	#c8c8c8	—
meta.object-literal.key	#9CDCFE	—
source.css keyword.control, punctuation.definition.constant.css	#00be6e	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.rgb-value, support.constant.color	#f05aaa	—
constant.other.color.rgb-value	#ff783d	—
string.regexp, keyword.control.anchor.regexp	#00cbf5	—
string.regexp keyword.operator	#f05aaa	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp	#e6c84c	—
constant.other.character-class.set.regexp, constant.character.regexp, constant.other.option, punctuation.definition.character-class.regexp	#00be6e	—
constant.character.escape.backslash.regexp	#aa78ff	—
constant.other.character-class.regexp	#c8c8c8	—
constant.character, constant.other.option	#e6c84c	—
constant.character.escape	#e6c84c	—
entity.name.label	#C8C8C8	—

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