Visi's Theme

Name: Visi's Theme
Author: Vicent Baeza

Publisher: Vicent BaezaThemes in package: 1

My personal theme that I've been using, based on the popular Palenight theme.

Open in VS Code GitHub

VS Code preview

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

Visi's Theme — Visi's Theme

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#282C3D
activityBar.border#282C3D
activityBar.foreground#eeffff
activityBarBadge.background#7e57c2
activityBarBadge.foreground#ffffff
badge.background#7e57c2
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#eeffff
breadcrumb.focusForeground#bfc7d5
breadcrumb.foreground#6c739a
breadcrumbPicker.background#292D3E
button.background#7e57c2cc
button.foreground#ffffffcc
button.hoverBackground#7e57c2
contrastBorder#282B3C
debugExceptionWidget.background#292D3E
debugExceptionWidget.border#7e57c2
debugToolBar.background#292D3E
diffEditor.insertedTextBackground#99b76d23
diffEditor.removedTextBackground#ef535033
dropdown.background#292D3E
dropdown.border#7e57c2
dropdown.foreground#ffffffcc
editor.background#292D3E
editor.findMatchBackground#7e57c25a
editor.findMatchHighlightBackground#2E3248
editor.foreground#BFC7D5
editor.hoverHighlightBackground#7e57c25a
editor.inactiveSelectionBackground#7e57c25a
editor.lineHighlightBackground#0003
editor.rangeHighlightBackground#7e57c25a
editor.selectionBackground#7580B850
editor.selectionHighlightBackground#383D51
editor.wordHighlightBackground#32374D
editor.wordHighlightStrongBackground#2E3250
editorCodeLens.foreground#FFCA28
editorCursor.foreground#7e57c2
editorError.foreground#EF5350
editorGroup.border#2E3245
editorGroup.dropBackground#7e57c273
editorGroupHeader.noTabsBackground#32374C
editorGroupHeader.tabsBackground#31364a
editorGroupHeader.tabsBorder#262A39
editorGutter.addedBackground#9CCC65
editorGutter.deletedBackground#EF5350
editorGutter.modifiedBackground#e2b93d
editorHoverWidget.background#292D3E
editorHoverWidget.border#7e57c2
editorIndentGuide.background#4E557980
editorLineNumber.activeForeground#eeffff
editorLineNumber.foreground#4c5374
editorMarkerNavigation.background#31364a
editorMarkerNavigationError.background#EF5350
editorMarkerNavigationWarning.background#FFCA28
editorOverviewRuler.commonContentForeground#7e57c2
editorOverviewRuler.currentContentForeground#7e57c2
editorOverviewRuler.incomingContentForeground#7e57c2
editorSuggestWidget.background#2C3043
editorSuggestWidget.border#2B2F40
editorSuggestWidget.foreground#bfc7d5
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#7e57c2
editorWarning.foreground#FFCA28
editorWidget.background#31364a
errorForeground#EF5350
extensionButton.prominentBackground#7e57c2cc
extensionButton.prominentForeground#ffffffcc
extensionButton.prominentHoverBackground#7e57c2
focusBorder#282B3C
foreground#ffffff
gitDecoration.conflictingResourceForeground#FFEB95CC
gitDecoration.deletedResourceForeground#EF535090
gitDecoration.ignoredResourceForeground#69709890
gitDecoration.modifiedResourceForeground#e2c08de6
gitDecoration.untrackedResourceForeground#a9c77dff
input.background#414863
input.border#7e57c2
input.foreground#ffffffcc
input.placeholderForeground#ffffffcc
inputOption.activeBorder#ffffffcc
inputValidation.errorBackground#ef5350f2
inputValidation.errorBorder#EF5350
inputValidation.infoBackground#64b5f6f2
inputValidation.infoBorder#64B5F6
inputValidation.warningBackground#ffca28f2
inputValidation.warningBorder#FFCA28
list.activeSelectionBackground#7e57c2
list.activeSelectionForeground#ffffff
list.dropBackground#2E3245
list.focusBackground#0000002e
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#0000001a
list.hoverForeground#ffffff
list.inactiveSelectionBackground#929ac90d
list.inactiveSelectionForeground#929ac9
merge.currentHeaderBackground#7e57c25a
merge.incomingHeaderBackground#7e57c25a
notificationLink.foreground#80CBC4
notifications.background#292D3E
notifications.foreground#ffffffcc
panel.background#292D3E
panel.border#282B3C
panelTitle.activeBorder#7e57c2
panelTitle.activeForeground#eeffff
panelTitle.inactiveForeground#bfc7d580
peekView.border#7e57c2
peekViewEditor.background#232635
peekViewEditor.matchHighlightBackground#7e57c25a
peekViewResult.background#2E3245
peekViewResult.fileForeground#eeffff
peekViewResult.lineForeground#eeffff
peekViewResult.matchHighlightBackground#7e57c25a
peekViewResult.selectionBackground#2E3250
peekViewResult.selectionForeground#eeffff
peekViewTitle.background#292D3E
peekViewTitleDescription.foreground#697098
peekViewTitleLabel.foreground#eeffff
pickerGroup.border#2E3245
pickerGroup.foreground#d1aaff
scrollbar.shadow#292D3E00
scrollbarSlider.activeBackground#694CA4cc
scrollbarSlider.background#694CA466
scrollbarSlider.hoverBackground#694CA4cc
selection.background#3C435E
sideBar.background#292D3E
sideBar.border#282B3C
sideBar.foreground#6C739A
sideBarSectionHeader.background#292D3E
sideBarSectionHeader.foreground#eeffff
sideBarTitle.foreground#eeffff
statusBar.background#282C3D
statusBar.border#262A39
statusBar.debuggingBackground#202431
statusBar.debuggingBorder#1F2330
statusBar.foreground#676E95
statusBar.noFolderBackground#292D3E
statusBar.noFolderBorder#25293A
statusBarItem.activeBackground#202431
statusBarItem.hoverBackground#202431
statusBarItem.prominentBackground#202431
statusBarItem.prominentHoverBackground#202431
tab.activeBackground#292D3E
tab.activeBorder#262A39
tab.activeForeground#eeffff
tab.border#272B3B
tab.inactiveBackground#31364A
tab.inactiveForeground#929ac9
tab.unfocusedActiveBorder#262A39
terminal.ansiBlack#676E95
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#676E95
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#ff5572
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#a9c77d
terminal.ansiMagenta#C792EA
terminal.ansiRed#ff5572
terminal.ansiWhite#ffffff
terminal.ansiYellow#FFCB6B
titleBar.activeBackground#292d3e
titleBar.activeForeground#eeefff
titleBar.border#30364c
titleBar.inactiveBackground#30364c
walkThrough.embeddedEditorBackground#232635
widget.shadow#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
, variable.other, string.unquoted.argument, string.interpolated.backtick.shell, entity.name.type.template	#eeffff	—
punctuation, meta.tag.inline.any, punctuation.definition.variable.shell variable.other.normal.shell, keyword.control.clause.bodyend, punctuation.definition.constant.math.tex, meta.brace, meta.preprocessor.string, string.unquoted.preprocessor, punctuation.separator.colon.access.control	#bfc7d5	—
comment, punctuation.definition.tag.cs, punctuation.definition.comment	#8189b8	italic
entity.name.tag.localname.cs, meta.tag.cs	#c5ccda	italic
string, punctuation.definition.string, constant.other.atom.quoted.prolog, support.class.math.block.tex, support.class.math.block.environment.latex	#C3E88D	—
string.regexp, string.regexp keyword.other, string.regexp, constant.character.escape, punctuation.definition.regexp, string.quoted.double constant.character.escape.cs, constant.other.atom.quoted	#80CBC4	—
string.unquoted	#bfc7d5	—
constant.numeric, constant.character.numeric, constant.language.boolean, constant.language.null, constant.language, punctuation.definition.constant, comment.wildcard, entity.name.function.preprocessor, invalid.illegal.constant, support.constant.subsections, entity.name.function.label.ahk, constant.keyword, support.constant.property-value, keyword.other.unit, constant.other.color, punctuation.separator.decimal.period, constant.character.entity, constant.character.math.tex	#ffae6b	—
keyword.operator, keyword.operator.bitwise.shift, punctuation.separator.continuation, punctuation.definition.tag, entity.name.function.operator, keyword.operator.assignment.arithmetic, keyword.operator.assignment.compound, punctuation.separator.question-mark, punctuation.accessor, punctuation.definition.equals.colon, punctuation.separator.period, punctuation.separator.colon, storage.modifier.reference, storage.modifier.pointer, punctuation.separator.dot-access, punctuation.section.angle-brackets.begin.template.call.cpp, punctuation.section.angle-brackets.end.template.call.cpp, entity.name.tag.reference, punctuation.definition.entity, entity.name.tag.wildcard, punctuation.separator.method, punctuation.definition.constant.elixir, keyword.symbol, punctuation.separator.statement.and, keyword.control.clause.bodybegin, punctuation.definition.variable.elixir, punctuation.math.operator.latex, entity.name.function.member.overload, keyword.control.if.prolog, keyword.control.else.prolog, keyword.control.cut.prolog	#ff5572	—
entity.name.function, entity.name.type.module, support.function, support.module, constant.other.symbol.prolog, entity.name.tag, meta.tag, meta.function-call, entity.name.function.clojure, entity.other.attribute-name	#fad87c	—
entity.name.namespace, storage.namespace, entity.name.namespace, entity.name.type.namespace, keyword.label, entity.name.label, variable.language.this, keyword.other.this, storage.modifier.import.java, variable.parameter.function.language.special.self, keyword.control.at-rule, variable.language.java, keyword.other.base, meta.preprocessor, keyword.control.directive, keyword.control.directives, entity.name.function.preprocessor	#82AAFF	—
storage.type, storage.namespace, entity.name.type, keyword.type, keyword.other.var, support.class, variable.other.prolog, entity.name.command, constant.language.ahk, entity.global.clojure, entity.name.class, entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.attribute, support.type.property-name, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.vendored.property-name, variable.other.constant.elixir, keyword.type, variable.language.anonymous.prolog, variable.parameter.uppercase.prolog, variable.parameter.function.latex, storage.type.template.argument, support.type.built-in.posix-reserved, support.type.posix-reserved	#82e6ff	—
keyword.other, keyword.control, meta.head.struct, storage.type.namespace.directive, storage.modifier, keyword.operator.new, storage.type.class, storage.type.function, storage.type.struct, storage.type.namespace, storage.type.interface, storage.type.enum, storage.control, entity.name.tag.css, constant.other.symbol.elixir, keyword.fsharp, keyword.function, keyword.interface, keyword.map, keyword.struct, keyword.channel, keyword.const, keyword.package, keyword.import, keyword.operator.wordlike, keyword.operator.sizeof, keyword.operator.delete, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.cast, keyword.operator.noexcept, storage.type.template, storage.type.template.argument.class, storage.type.template.argument.struct, storage.type.template.argument.typename	#C792EA	—

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