Vlad.studio Tiniri Theme

Name: Vlad.studio Tiniri Theme
Author: Vlad.studio

Publisher: Vlad.studioThemes in package: 4

A soft and cozy theme, with slightly retro warm colours.

Open in VS Code GitHub

Color themes

VS Code preview

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

Vlad.studio Tiniri Theme — Tiniri Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#AD514CCC
activityBar.background#161718
activityBar.border#0006
activityBar.foreground#E8E6E3AA
activityBarBadge.background#314352
activityBarBadge.foreground#E8E6E3AA
activityBarTop.activeBorder#AD514CCC
badge.background#314352
badge.foreground#E8E6E399
breadcrumb.activeSelectionForeground#E8E6E3
breadcrumb.background#161718
breadcrumb.focusForeground#E8E6E3
breadcrumb.foreground#E8E6E377
breadcrumbPicker.background#1A1C1E
button.background#314F52
button.foreground#E8E6E3
debugExceptionWidget.background#1A1C1E
debugExceptionWidget.border#0006
debugToolBar.background#1A1C1E
descriptionForeground#E8E6E3
diffEditor.border#0006
diffEditor.diagonalFill#0002
diffEditor.insertedLineBackground#314F5233
diffEditor.insertedTextBackground#314F5233
diffEditor.removedLineBackground#F5768018
diffEditor.removedTextBackground#F5768018
diffEditor.unchangedCodeBackground#1A1C1E
diffEditor.unchangedRegionBackground#1A1C1E
diffEditorGutter.insertedLineBackground#314F5233
diffEditorGutter.removedLineBackground#F5768018
dropdown.background#1A1C1E
dropdown.border#0004
dropdown.foreground#E8E6E3
editor.background#1A1C1E
editor.findMatchBackground#F5768055
editor.findMatchHighlightBackground#F5768033
editor.findRangeHighlightBackground#F5768033
editor.foreground#E8E6E3
editor.hoverHighlightBackground#AD514C55
editor.lineHighlightBackground#25272B
editor.linkedEditingBackground#F5768033
editor.rangeHighlightBackground#E8E6E30A
editor.selectionBackground#314F5299
editor.selectionHighlightBackground#F5768044
editor.wordHighlightBackground#F5768033
editor.wordHighlightStrongBackground#F09E7688
editorBracketHighlight.foreground1#9F9A93
editorBracketHighlight.foreground2#9F9A93
editorBracketHighlight.foreground3#9F9A93
editorBracketHighlight.foreground4#9F9A93
editorBracketHighlight.foreground5#9F9A93
editorBracketHighlight.foreground6#9F9A93
editorBracketMatch.background#314F52CC
editorBracketMatch.border#0000
editorCodeLens.foreground#E8E6E3
editorCursor.foreground#AD514CCC
editorError.border#0006
editorError.foreground#AD514C
editorGroup.border#0006
editorGroup.dropBackground#9F9A9322
editorGroupHeader.border#0006
editorGroupHeader.noTabsBackground#161718
editorGroupHeader.tabsBackground#161718
editorGroupHeader.tabsBorder#0006
editorHoverWidget.background#1A1C1E
editorHoverWidget.border#0006
editorIndentGuide.activeBackground1#9F9A9322
editorIndentGuide.background1#00000001
editorInlayHint.foreground#9F9A93
editorInlayHint.parameterForeground#9F9A93
editorInlayHint.typeForeground#9F9A93
editorLightBulb.foreground#9F9A93
editorLightBulbAi.foreground#9F9A93
editorLightBulbAutoFix.foreground#9F9A93
editorLineNumber.activeForeground#9F9A93CC
editorLineNumber.foreground#9F9A9366
editorLink.activeForeground#85A0AD
editorMarkerNavigation.background#0004
editorMarkerNavigationError.background#C74D1044
editorMarkerNavigationWarning.background#C74D1044
editorOverviewRuler.errorForeground#AD514C
editorOverviewRuler.warningForeground#AD514C
editorRuler.foreground#E8E6E399
editorSuggestWidget.background#1A1C1E
editorSuggestWidget.border#0006
editorSuggestWidget.foreground#E8E6E3
editorSuggestWidget.highlightForeground#AD514C
editorSuggestWidget.selectedBackground#0008
editorUnnecessaryCode.opacity#00000066
editorWarning.border#F09E7644
editorWarning.foreground#F09E76
editorWhitespace.foreground#E8E6E333
editorWidget.background#1A1C1E
editorWidget.border#0006
errorForeground#C74D10CC
extensionButton.prominentBackground#314F52
extensionButton.prominentForeground#E8E6E3
focusBorder#AD514C66
foreground#E8E6E3
gitDecoration.addedResourceForeground#D28450
gitDecoration.conflictingResourceForeground#F57680
gitDecoration.deletedResourceForeground#F57680
gitDecoration.ignoredResourceForeground#78716C
gitDecoration.modifiedResourceForeground#5486ad
gitDecoration.renamedResourceForeground#5486ad
gitDecoration.stageDeletedResourceForeground#F57680
gitDecoration.stageModifiedResourceForeground#5486ad
gitDecoration.submoduleResourceForeground#78716C
gitDecoration.untrackedResourceForeground#538A8A
icon.foreground#E8E6E3AA
input.background#0002
input.border#0004
input.foreground#E8E6E3BB
input.placeholderForeground#E8E6E377
inputOption.activeBorder#AD514CCC
inputValidation.errorBackground#0002
inputValidation.errorBorder#C74D10CC
inputValidation.infoBackground#0002
inputValidation.infoBorder#0004
inputValidation.warningBackground#0002
inputValidation.warningBorder#0004
keybindingLabel.background#9F9A9322
keybindingLabel.border#0006
keybindingLabel.bottomBorder#0004
keybindingLabel.foreground#9F9A93
list.activeSelectionBackground#9F9A9322
list.activeSelectionForeground#E8E6E3
list.dropBackground#9F9A9322
list.errorForeground#F57680
list.focusBackground#0004
list.focusForeground#E8E6E3
list.highlightForeground#F09E76
list.hoverBackground#0004
list.inactiveSelectionBackground#9F9A9322
list.inactiveSelectionForeground#E8E6E399
list.warningForeground#F57680
notificationCenter.border#0006
notificationCenterHeader.background#1A1C1E
notificationCenterHeader.foreground#E8E6E399
notificationLink.foreground#9F9A93
notifications.background#1A1C1E
notifications.border#0006
notifications.foreground#E8E6E399
notificationToast.border#0006
panel.background#1A1C1E
panel.border#0006
panelInput.border#0004
panelSection.dropBackground#9F9A9322
panelSectionHeader.foreground#E8E6E399
panelTitle.activeBorder#AD514CCC
peekView.border#0006
peekViewEditor.background#1A1C1E
peekViewEditor.matchHighlightBackground#F5768033
peekViewEditorGutter.background#1A1C1E
peekViewResult.background#1A1C1E
peekViewResult.fileForeground#E8E6E399
peekViewResult.lineForeground#E8E6E3
peekViewResult.matchHighlightBackground#F5768033
peekViewResult.selectionBackground#0008
peekViewResult.selectionForeground#E8E6E3
peekViewTitle.background#1A1C1E
peekViewTitleDescription.foreground#E8E6E377
peekViewTitleLabel.foreground#E8E6E399
pickerGroup.border#0006
pickerGroup.foreground#E8E6E3
progressBar.background#314F52
scrollbar.shadow#0002
scrollbarSlider.activeBackground#E8E6E318
scrollbarSlider.background#E8E6E318
scrollbarSlider.hoverBackground#E8E6E333
selection.background#314F52
sideBar.background#161718
sideBar.border#0006
sideBar.dropBackground#9F9A9322
sideBar.foreground#E8E6E399
sideBarSectionHeader.background#161718
sideBarSectionHeader.border#0006
sideBarSectionHeader.foreground#E8E6E399
sideBarTitle.foreground#AD514CCC
statusBar.background#161718
statusBar.border#0006
statusBar.debuggingBackground#538A8A33
statusBar.debuggingForeground#E8E6E388
statusBar.foreground#E8E6E388
statusBar.noFolderBackground#161718
statusBar.noFolderForeground#E8E6E388
statusBarItem.hoverBackground#0004
tab.activeBorder#AD514C
tab.activeForeground#E8E6E3
tab.activeModifiedBorder#AD514C
tab.border#0006
tab.hoverBackground#0004
tab.inactiveBackground#161718
tab.inactiveForeground#E8E6E399
tab.inactiveModifiedBorder#AD514C88
tab.unfocusedActiveBorder#AD514C66
tab.unfocusedActiveModifiedBorder#AD514CAA
tab.unfocusedInactiveModifiedBorder#AD514C55
terminal.ansiBlack#1A1C1E
terminal.ansiBlue#CEA182
terminal.ansiBrightBlack#575653
terminal.ansiBrightBlue#E5C7B2
terminal.ansiBrightCyan#E8E5E3
terminal.ansiBrightGreen#85A0AD
terminal.ansiBrightMagenta#ABA49C
terminal.ansiBrightRed#D9726C
terminal.ansiBrightWhite#FFFCF0
terminal.ansiBrightYellow#E5C7B2
terminal.ansiCyan#85A0AD
terminal.ansiGreen#85A0AD
terminal.ansiMagenta#9F9A93
terminal.ansiRed#c66b67
terminal.ansiWhite#E8E5E3
terminal.ansiYellow#CEA182
terminal.background#1A1C1E
terminal.dropBackground#9F9A9322
terminal.foreground#E8E6E3BB
titleBar.activeBackground#161718
titleBar.border#0006
toolbar.hoverBackground#0004
tree.indentGuidesStroke#9F9A9322
tree.tableColumnsBorder#0004
tree.tableOddRowsBackground#0000
widget.shadow#0005

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#4E535F	—
constant.character.escape, entity.name.type.tsx, support.type.primitive.tsx, entity.name.type.ts, support.type.primitive.ts	#9F9A9388	—
punctuation	#9F9A93BB	—
punctuation.definition.comment	#9F9A9355	—
entity.name.tag, keyword, markup.inline.raw, markup.quote.markdown, meta.brace, meta.delimiter, meta.method, meta.property-name, object.comma, raw, storage, support.constant, keyword.other, keyword.control, variable.language	#9F9A93	—
constant, entity.name.tag.css, entity.other.attribute-name.css, meta.selector.css, meta.tag, meta.jsx.children, source, string, support.class	#E8E6E3	—
entity.name.function, entity.name.section.markdown, invalid.broken, meta.template.expression, support.variable, variable, variable.other.property, variable.other.readwrite	#F09E76	—
entity.other, markup.inserted, markup.underline.link, meta.attribute-selector, meta.function-call, meta.object-literal.key, meta.selector, object, support.function, support.type, variable.function, variable.other, variable.parameter, variable.scss, variable.sass, variable.parameter.url	#85A0AD	—
invalid	#E59793	—
markup.changed, meta.diff.header	#85A0AD99	—
markup.deleted	#F09E7699	—
quote	#538A8A	—
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, storage.type, source.css, string.quoted	—

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