Cita Theme

Name: Cita Theme
Author: Silvestar Bistrović

Publisher: Silvestar BistrovićThemes in package: 2

Light and dark themes in mint, pink, and navy, based on the colors of silvestar.codes.

Open in VS Code GitHub

Color themes

VS Code preview

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

Cita Theme — Cita Light

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0439710F
activityBar.activeBorder#043A73
activityBar.background#E0FCF3
activityBar.border#D6E1EC
activityBar.foreground#043A73
activityBar.inactiveForeground#043A7380
activityBarBadge.background#043A73
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBorder#043A73
activityBarTop.foreground#043A73
activityBarTop.inactiveForeground#7F93AD
badge.background#D1124A
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#043A73
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#043A73
breadcrumb.foreground#7F93AD
breadcrumbPicker.background#F3F7FB
button.background#043A73
button.foreground#FFFFFF
button.hoverBackground#06447F
button.secondaryBackground#E8EFF6
button.secondaryForeground#043A73
button.secondaryHoverBackground#E8EFF6
button.separator#FFFFFF66
charts.blue#0B5CAD
charts.foreground#043A73
charts.green#08805A
charts.lines#7F93AD
charts.orange#945A00
charts.purple#B3336B
charts.red#D1124A
charts.yellow#945A00
checkbox.background#FFFFFF
checkbox.border#D6E1EC
checkbox.foreground#043A73
commandCenter.activeBackground#04397114
commandCenter.activeForeground#043A73
commandCenter.background#0439710A
commandCenter.border#D6E1EC
commandCenter.foreground#4F6A8C
debugIcon.breakpointForeground#FF3366
debugToolBar.background#F3F7FB
debugToolBar.border#D6E1EC
descriptionForeground#4F6A8C
diffEditor.border#D6E1EC
diffEditor.diagonalFill#D6E1EC99
diffEditor.insertedLineBackground#63F2C51A
diffEditor.insertedTextBackground#63F2C533
diffEditor.removedLineBackground#FF336614
diffEditor.removedTextBackground#FF33662E
diffEditorGutter.insertedLineBackground#63F2C533
diffEditorGutter.removedLineBackground#FF336633
disabledForeground#7F93AD
dropdown.background#FFFFFF
dropdown.border#D6E1EC
dropdown.foreground#043A73
dropdown.listBackground#F3F7FB
editor.background#FFFFFF
editor.findMatchBackground#FF336659
editor.findMatchBorder#D1124A
editor.findMatchHighlightBackground#FF336629
editor.findRangeHighlightBackground#0439710A
editor.focusedStackFrameHighlightBackground#63F2C533
editor.foldBackground#04397108
editor.foreground#043A73
editor.hoverHighlightBackground#63F2C51F
editor.inactiveSelectionBackground#63F2C533
editor.lineHighlightBackground#0439710F
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#0439710A
editor.selectionBackground#63F2C554
editor.selectionHighlightBackground#0439711F
editor.stackFrameHighlightBackground#FFD27A33
editor.wordHighlightBackground#0439711F
editor.wordHighlightStrongBackground#63F2C540
editorBracketHighlight.foreground1#08805A
editorBracketHighlight.foreground2#D1124A
editorBracketHighlight.foreground3#0B5CAD
editorBracketHighlight.foreground4#945A00
editorBracketHighlight.foreground5#B3336B
editorBracketHighlight.foreground6#1C6FA8
editorBracketHighlight.unexpectedBracket.foreground#D1124A
editorBracketMatch.background#63F2C526
editorBracketMatch.border#043A7399
editorCodeLens.foreground#7F93AD
editorCursor.foreground#043A73
editorError.foreground#D1124A
editorGhostText.foreground#7F93AD
editorGroup.border#D6E1EC
editorGroup.dropBackground#63F2C51F
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#F3F7FB
editorGroupHeader.tabsBorder#D6E1EC
editorGutter.addedBackground#0FB883
editorGutter.background#FFFFFF
editorGutter.deletedBackground#D1124A
editorGutter.foldingControlForeground#7F93AD
editorGutter.modifiedBackground#1C6FA8
editorHint.foreground#08805A
editorHoverWidget.background#F3F7FB
editorHoverWidget.border#D6E1EC
editorIndentGuide.activeBackground1#7F93AD
editorIndentGuide.background1#D6E1ECCC
editorInfo.foreground#0B5CAD
editorInlayHint.background#0439710A
editorInlayHint.foreground#4F6A8C
editorLineNumber.activeForeground#043A73
editorLineNumber.foreground#7F93AD
editorLink.activeForeground#0B5CAD
editorMarkerNavigation.background#F3F7FB
editorMarkerNavigationError.background#D1124A
editorMarkerNavigationInfo.background#0B5CAD
editorMarkerNavigationWarning.background#945A00
editorOverviewRuler.addedForeground#0FB883
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#D1124A
editorOverviewRuler.errorForeground#D1124A
editorOverviewRuler.findMatchForeground#D1124AB3
editorOverviewRuler.infoForeground#0B5CAD
editorOverviewRuler.modifiedForeground#1C6FA8
editorOverviewRuler.selectionHighlightForeground#63F2C599
editorOverviewRuler.warningForeground#945A00
editorRuler.foreground#D6E1EC
editorStickyScroll.background#FFFFFF
editorStickyScroll.shadow#04397126
editorStickyScrollHover.background#E8EFF6
editorSuggestWidget.background#F3F7FB
editorSuggestWidget.border#D6E1EC
editorSuggestWidget.focusHighlightForeground#D1124A
editorSuggestWidget.foreground#043A73
editorSuggestWidget.highlightForeground#D1124A
editorSuggestWidget.selectedBackground#0439711A
editorSuggestWidget.selectedForeground#043A73
editorUnnecessaryCode.opacity#000000A0
editorWarning.foreground#945A00
editorWhitespace.foreground#7F93AD66
editorWidget.background#F3F7FB
editorWidget.border#D6E1EC
editorWidget.foreground#043A73
errorForeground#D1124A
extensionBadge.remoteBackground#63F2C5
extensionBadge.remoteForeground#043A73
extensionButton.prominentBackground#043A73
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#06447F
focusBorder#043A7380
foreground#043A73
gitDecoration.addedResourceForeground#08805A
gitDecoration.conflictingResourceForeground#D1124A
gitDecoration.deletedResourceForeground#D1124A
gitDecoration.ignoredResourceForeground#7F93AD
gitDecoration.modifiedResourceForeground#1C6FA8
gitDecoration.renamedResourceForeground#945A00
gitDecoration.stageDeletedResourceForeground#D1124A
gitDecoration.stageModifiedResourceForeground#1C6FA8
gitDecoration.submoduleResourceForeground#B3336B
gitDecoration.untrackedResourceForeground#08805A
icon.foreground#4F6A8C
input.background#FFFFFF
input.border#D6E1EC
input.foreground#043A73
input.placeholderForeground#7F93AD
inputOption.activeBackground#63F2C54D
inputOption.activeBorder#043A73
inputOption.activeForeground#043A73
inputValidation.errorBackground#F3F7FB
inputValidation.errorBorder#D1124A
inputValidation.infoBackground#F3F7FB
inputValidation.infoBorder#0B5CAD
inputValidation.warningBackground#F3F7FB
inputValidation.warningBorder#945A00
keybindingLabel.background#0439710A
keybindingLabel.border#D6E1EC
keybindingLabel.bottomBorder#D6E1EC
keybindingLabel.foreground#043A73
list.activeSelectionBackground#0439711A
list.activeSelectionForeground#043A73
list.dropBackground#63F2C526
list.errorForeground#D1124A
list.focusBackground#0439711A
list.focusHighlightForeground#D1124A
list.focusOutline#043A7399
list.highlightForeground#D1124A
list.hoverBackground#0439710A
list.hoverForeground#043A73
list.inactiveSelectionBackground#04397112
list.inactiveSelectionForeground#043A73
list.warningForeground#945A00
menu.background#F3F7FB
menu.border#D6E1EC
menu.foreground#043A73
menu.selectionBackground#0439711A
menu.selectionForeground#043A73
menu.separatorBackground#D6E1EC
merge.commonContentBackground#7F93AD26
merge.commonHeaderBackground#7F93AD66
merge.currentContentBackground#63F2C526
merge.currentHeaderBackground#63F2C566
merge.incomingContentBackground#8FD3FF26
merge.incomingHeaderBackground#8FD3FF66
minimap.background#FFFFFF
minimap.errorHighlight#D1124A
minimap.findMatchHighlight#FF336699
minimap.selectionHighlight#63F2C580
minimap.warningHighlight#945A00
minimapGutter.addedBackground#0FB883
minimapGutter.deletedBackground#D1124A
minimapGutter.modifiedBackground#1C6FA8
notificationCenterHeader.background#E8EFF6
notificationCenterHeader.foreground#043A73
notificationLink.foreground#0B5CAD
notifications.background#F3F7FB
notifications.border#D6E1EC
notifications.foreground#043A73
notificationsErrorIcon.foreground#D1124A
notificationsInfoIcon.foreground#0B5CAD
notificationsWarningIcon.foreground#945A00
panel.background#F3F7FB
panel.border#D6E1EC
panelInput.border#D6E1EC
panelSection.border#D6E1EC
panelTitle.activeBorder#043A73
panelTitle.activeForeground#043A73
panelTitle.inactiveForeground#7F93AD
peekView.border#043A73
peekViewEditor.background#F3F7FB
peekViewEditor.matchHighlightBackground#FF336629
peekViewResult.background#F3F7FB
peekViewResult.fileForeground#043A73
peekViewResult.lineForeground#4F6A8C
peekViewResult.matchHighlightBackground#FF336629
peekViewResult.selectionBackground#0439711A
peekViewResult.selectionForeground#043A73
peekViewTitle.background#E8EFF6
peekViewTitleDescription.foreground#4F6A8C
peekViewTitleLabel.foreground#043A73
pickerGroup.border#D6E1EC
pickerGroup.foreground#D1124A
progressBar.background#043A73
quickInput.background#F3F7FB
quickInput.foreground#043A73
quickInputList.focusBackground#0439711A
quickInputList.focusForeground#043A73
sash.hoverBorder#043A73
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#63F2C5CC
scrollbarSlider.background#63F2C566
scrollbarSlider.hoverBackground#63F2C599
selection.background#63F2C554
settings.focusedRowBackground#04397108
settings.headerForeground#043A73
settings.modifiedItemIndicator#043A73
settings.rowHoverBackground#04397108
sideBar.background#F3F7FB
sideBar.border#D6E1EC
sideBar.foreground#4F6A8C
sideBarSectionHeader.background#F3F7FB
sideBarSectionHeader.border#D6E1EC
sideBarSectionHeader.foreground#043A73
sideBarTitle.foreground#043A73
statusBar.background#E0FCF3
statusBar.border#D6E1EC
statusBar.debuggingBackground#D1124A
statusBar.debuggingBorder#D1124A
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#043A73
statusBar.noFolderBackground#06447F
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#0439712E
statusBarItem.errorBackground#D1124A
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#0439711F
statusBarItem.prominentBackground#043A7314
statusBarItem.prominentHoverBackground#043A7324
statusBarItem.remoteBackground#043A73
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#FFD27A
statusBarItem.warningForeground#043A73
tab.activeBackground#FFFFFF
tab.activeBorder#FFFFFF
tab.activeBorderTop#043A73
tab.activeForeground#043A73
tab.activeModifiedBorder#D1124A
tab.border#D6E1EC
tab.hoverBackground#FFFFFF
tab.hoverForeground#043A73
tab.inactiveBackground#F3F7FB
tab.inactiveForeground#7F93AD
tab.inactiveModifiedBorder#D1124A80
tab.lastPinnedBorder#D6E1EC
tab.unfocusedActiveBorderTop#043A7366
tab.unfocusedActiveForeground#4F6A8C
terminal.ansiBlack#043A73
terminal.ansiBlue#0B5CAD
terminal.ansiBrightBlack#4F6A8C
terminal.ansiBrightBlue#1C6FA8
terminal.ansiBrightCyan#1293A5
terminal.ansiBrightGreen#0FA374
terminal.ansiBrightMagenta#C94F84
terminal.ansiBrightRed#E8325F
terminal.ansiBrightWhite#A9B8CC
terminal.ansiBrightYellow#B87400
terminal.ansiCyan#0A7A8A
terminal.ansiGreen#08805A
terminal.ansiMagenta#B3336B
terminal.ansiRed#D1124A
terminal.ansiWhite#7F93AD
terminal.ansiYellow#945A00
terminal.background#F3F7FB
terminal.border#D6E1EC
terminal.foreground#043A73
terminal.selectionBackground#63F2C554
terminalCommandDecoration.defaultBackground#7F93AD
terminalCommandDecoration.errorBackground#D1124A
terminalCommandDecoration.successBackground#08805A
terminalCursor.foreground#043A73
testing.iconFailed#D1124A
testing.iconPassed#08805A
testing.iconQueued#945A00
textBlockQuote.background#F3F7FB
textBlockQuote.border#63F2C5
textCodeBlock.background#F3F7FB
textLink.activeForeground#043A73
textLink.foreground#0B5CAD
textPreformat.background#04397112
textPreformat.foreground#08805A
textSeparator.foreground#D6E1EC
titleBar.activeBackground#F3F7FB
titleBar.activeForeground#043A73
titleBar.border#D6E1EC
titleBar.inactiveBackground#F3F7FB
titleBar.inactiveForeground#7F93AD
toolbar.hoverBackground#04397114
tree.inactiveIndentGuidesStroke#D6E1EC80
tree.indentGuidesStroke#D6E1EC
walkThrough.embeddedEditorBackground#F3F7FB
welcomePage.tileBackground#F3F7FB
welcomePage.tileBorder#D6E1EC
welcomePage.tileHoverBackground#E8EFF6
widget.border#D6E1EC
widget.shadow#04397126
window.activeBorder#D6E1EC
window.inactiveBorder#D6E1EC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Default	#043A73	—
comment, punctuation.definition.comment, string.comment	#5A7394	italic
storage.type.class.jsdoc, keyword.other.phpdoc, comment.block.documentation storage.type	#5A7394	bold italic
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, keyword.operator.wordlike, variable.language.this, variable.language.self, variable.language.super	#D1124A	—
keyword.operator, punctuation.accessor, punctuation.separator.key-value	#4F6A8C	—
punctuation, meta.brace, punctuation.definition.tag, punctuation.separator, punctuation.terminator	#4F6A8C	—
string, punctuation.definition.string, string.template, markup.inline.raw.string	#08805A	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression	#D1124A	—
string.regexp, constant.character.escape, constant.other.character-class	#945A00	—
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant, support.constant, keyword.other.unit	#B3336B	—
entity.name.function, meta.function-call entity.name.function, support.function, variable.function, meta.function-call.generic, entity.name.method	#0B5CAD	—
entity.name.type, entity.name.class, entity.name.namespace, entity.other.inherited-class, support.type, support.class, storage.type.primitive, storage.type.built-in, entity.name.type.module	#945A00	—
variable, variable.other.readwrite, meta.definition.variable	#043A73	—
variable.parameter, meta.parameter	#043A73	italic
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property, entity.name.tag.yaml	#1C6FA8	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#945A00	italic
entity.name.tag	#D1124A	—
support.class.component, entity.name.tag.component	#945A00	—
entity.other.attribute-name	#945A00	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#0B5CAD
support.type.property-name, support.type.vendored.property-name, meta.property-name	#1C6FA8	—
support.constant.property-value, support.constant.font-name, support.constant.color, constant.other.color	#08805A	—
variable.css, variable.argument.css, variable.scss, variable.other.less	#B3336B	—
keyword.control.at-rule, punctuation.definition.keyword.css	#D1124A	—
source.json meta.structure.dictionary.json support.type.property-name.json	#1C6FA8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0B5CAD	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#945A00	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#D1124A	bold
markup.bold, punctuation.definition.bold	#945A00	bold
markup.italic, punctuation.definition.italic	#B3336B	italic
markup.strikethrough	—	strikethrough
markup.underline.link, string.other.link, constant.other.reference.link.markdown	#08805A	—
meta.link.inline.markdown string.other.link.title.markdown, string.other.link.description	#0B5CAD	—
markup.inline.raw, markup.fenced_code.block.markdown, markup.raw	#1C6FA8	—
markup.quote, punctuation.definition.quote.begin.markdown	#5A7394	italic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown	#D1124A	—
markup.inserted	#08805A	—
markup.deleted	#D1124A	—
markup.changed	#0B5CAD	—
variable.other.normal.shell, variable.other.special.shell, punctuation.definition.variable.shell	#B3336B	—
support.function.magic.python, support.variable.magic.python	#0B5CAD	italic
invalid, invalid.illegal	#D1124A	—
invalid.deprecated	#945A00	strikethrough