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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#994C48
activityBar.background#F7F3F0
activityBar.border#2221201A
activityBar.foreground#76726F
activityBarBadge.background#B29084
activityBarBadge.foreground#FEFDFD
activityBarTop.activeBorder#994C48
badge.background#B29084
badge.foreground#FEFDFD
breadcrumb.activeSelectionForeground#222120
breadcrumb.background#F7F3F0
breadcrumb.focusForeground#222120
breadcrumb.foreground#76726F
breadcrumbPicker.background#FFFFFF
button.background#538A8A
button.foreground#FEFDFD
debugExceptionWidget.background#FEFDFD
debugExceptionWidget.border#2221201A
debugToolBar.background#F7DDCB
descriptionForeground#222120
diffEditor.border#2221201A
diffEditor.diagonalFill#22212011
diffEditor.insertedLineBackground#538A8A11
diffEditor.insertedTextBackground#538A8A11
diffEditor.removedLineBackground#994C4811
diffEditor.removedTextBackground#994C4811
diffEditor.unchangedCodeBackground#FEFDFD
diffEditor.unchangedRegionBackground#FEFDFD
diffEditorGutter.insertedLineBackground#538A8A11
diffEditorGutter.removedLineBackground#994C4811
dropdown.background#FEFDFD
dropdown.border#2221201A
dropdown.foreground#222120
editor.background#FEFDFD
editor.findMatchBackground#E5979344
editor.findMatchHighlightBackground#E5979344
editor.findRangeHighlightBackground#E5979344
editor.foreground#222120
editor.hoverHighlightBackground#E5979344
editor.lineHighlightBackground#FEFDFD
editor.linkedEditingBackground#E5979344
editor.rangeHighlightBackground#22212009
editor.selectionBackground#538A8A33
editor.selectionHighlightBackground#E5979344
editor.wordHighlightBackground#E5979333
editor.wordHighlightStrongBackground#994C4844
editorBracketHighlight.foreground1#76726F
editorBracketHighlight.foreground2#76726F
editorBracketHighlight.foreground3#76726F
editorBracketHighlight.foreground4#76726F
editorBracketHighlight.foreground5#76726F
editorBracketHighlight.foreground6#76726F
editorBracketMatch.background#538A8A33
editorBracketMatch.border#538A8A33
editorCodeLens.foreground#222120
editorCursor.foreground#994C48CC
editorError.border#2221201A
editorError.foreground#994C4899
editorGroup.border#2221201A
editorGroup.dropBackground#76726F22
editorGroupHeader.border#2221201A
editorGroupHeader.noTabsBackground#F7F3F0
editorGroupHeader.tabsBackground#F7F3F0
editorGroupHeader.tabsBorder#2221201A
editorHoverWidget.background#FEFDFD
editorHoverWidget.border#2221201A
editorIndentGuide.activeBackground1#2221201A
editorIndentGuide.background1#00000001
editorInlayHint.foreground#B29084
editorInlayHint.parameterForeground#B29084
editorInlayHint.typeForeground#B29084
editorLightBulb.foreground#B29084
editorLightBulbAi.foreground#B29084
editorLightBulbAutoFix.foreground#B29084
editorLineNumber.activeForeground#22212099
editorLineNumber.foreground#22212044
editorLink.activeForeground#538A8A
editorMarkerNavigation.background#76726F
editorMarkerNavigationError.background#F7DDCB
editorMarkerNavigationWarning.background#F7DDCB
editorOverviewRuler.errorForeground#994C4899
editorOverviewRuler.warningForeground#B29084
editorRuler.foreground#22212018
editorSuggestWidget.background#FEFDFD
editorSuggestWidget.border#2221201A
editorSuggestWidget.foreground#222120CC
editorSuggestWidget.highlightForeground#538A8A
editorSuggestWidget.selectedBackground#2221201A
editorUnnecessaryCode.opacity#00000099
editorWarning.border#2221201A
editorWarning.foreground#B29084
editorWhitespace.foreground#2221201A
editorWidget.background#FFFFFF
editorWidget.border#2221201A
errorForeground#994C48
extensionButton.prominentBackground#538A8A
extensionButton.prominentForeground#FEFDFD
focusBorder#2D5C8099
foreground#222120
gitDecoration.addedResourceForeground#D28450
gitDecoration.conflictingResourceForeground#994C48
gitDecoration.deletedResourceForeground#994C48
gitDecoration.ignoredResourceForeground#76726F
gitDecoration.modifiedResourceForeground#2D5C80
gitDecoration.renamedResourceForeground#2D5C80
gitDecoration.stageDeletedResourceForeground#994C48
gitDecoration.stageModifiedResourceForeground#2D5C80
gitDecoration.submoduleResourceForeground#76726F
gitDecoration.untrackedResourceForeground#538A8A
icon.foreground#76726FAA
input.background#FEFDFD
input.border#2221201A
input.foreground#222120
input.placeholderForeground#76726F
inputOption.activeBorder#994C48
inputValidation.errorBackground#F7DDCB
inputValidation.errorBorder#994C48
inputValidation.infoBackground#FEFDFD
inputValidation.infoBorder#2221201A
inputValidation.warningBackground#F7DDCB
inputValidation.warningBorder#F7DDCB
keybindingLabel.background#538A8A11
keybindingLabel.border#538A8A55
keybindingLabel.bottomBorder#538A8A55
keybindingLabel.foreground#538A8A
list.activeSelectionBackground#76726F22
list.activeSelectionForeground#222120
list.dropBackground#76726F22
list.errorForeground#E59793
list.focusBackground#76726F22
list.focusForeground#222120
list.highlightForeground#538A8A
list.hoverBackground#76726F11
list.inactiveSelectionBackground#76726F22
list.inactiveSelectionForeground#76726F
list.warningForeground#222120
notificationCenter.border#2221201A
notificationCenterHeader.background#FEFDFD
notificationCenterHeader.foreground#222120
notificationLink.foreground#2D5C80
notifications.background#FEFDFD
notifications.border#2221201A
notifications.foreground#76726F
notificationToast.border#2221201A
panel.background#FEFDFD
panel.border#2221201A
panelInput.border#2221201A
panelSection.dropBackground#76726F22
panelSectionHeader.foreground#76726F
panelTitle.activeBorder#994C48CC
peekView.border#2221201A
peekViewEditor.background#FEFDFD
peekViewEditor.matchHighlightBackground#F7DDCB55
peekViewEditorGutter.background#FEFDFD
peekViewResult.background#FEFDFD
peekViewResult.fileForeground#222120
peekViewResult.lineForeground#222120
peekViewResult.matchHighlightBackground#F7DDCB55
peekViewResult.selectionBackground#538A8A33
peekViewResult.selectionForeground#222120
peekViewTitle.background#FEFDFD
peekViewTitleDescription.foreground#222120
peekViewTitleLabel.foreground#222120
pickerGroup.border#2221201A
pickerGroup.foreground#222120
progressBar.background#538A8A
scrollbar.shadow#76726F22
scrollbarSlider.activeBackground#2221201A
scrollbarSlider.background#2221201A
scrollbarSlider.hoverBackground#76726F66
selection.background#538A8A44
sideBar.background#F7F3F0
sideBar.border#2221201A
sideBar.dropBackground#76726F22
sideBar.foreground#222120CC
sideBarSectionHeader.background#F7F3F0
sideBarSectionHeader.border#2221201A
sideBarSectionHeader.foreground#76726F
sideBarTitle.foreground#76726F
statusBar.background#F7F3F0
statusBar.border#2221201A
statusBar.debuggingBackground#538A8A33
statusBar.debuggingForeground#76726F
statusBar.foreground#76726F
statusBar.noFolderBackground#F7F3F0
statusBar.noFolderForeground#76726F
statusBarItem.hoverBackground#76726F11
tab.activeBorder#994C48
tab.activeForeground#222120
tab.activeModifiedBorder#538A8A
tab.border#2221201A
tab.hoverBorder#994C4899
tab.inactiveBackground#F7F3F0
tab.inactiveForeground#76726F
tab.inactiveModifiedBorder#538A8A99
tab.unfocusedActiveBorder#994C4866
tab.unfocusedActiveModifiedBorder#994C4899
tab.unfocusedInactiveModifiedBorder#994C4855
terminal.ansiBlack#44403C
terminal.ansiBlue#2D5C80
terminal.ansiBrightBlack#B7B5AC
terminal.ansiBrightBlue#2D5C80
terminal.ansiBrightCyan#538A8A
terminal.ansiBrightGreen#538A8A
terminal.ansiBrightMagenta#BD71A4
terminal.ansiBrightRed#994C48
terminal.ansiBrightWhite#E6E4D9
terminal.ansiBrightYellow#E59793
terminal.ansiCyan#538A8A
terminal.ansiGreen#538A8A
terminal.ansiMagenta#804C6E
terminal.ansiRed#994C48
terminal.ansiWhite#DAD8CE
terminal.ansiYellow#994C48
terminal.background#FEFDFD
terminal.dropBackground#76726F22
terminal.foreground#222120DD
titleBar.activeBackground#FEFDFD
titleBar.border#2221201A
toolbar.hoverBackground#76726F11
tree.indentGuidesStroke#2221201A
tree.tableColumnsBorder#2221201A
tree.tableOddRowsBackground#0000
widget.shadow#2221201A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, entity.name.type.tsx, support.type.primitive.tsx, entity.name.type.ts, support.type.primitive.ts	#76726F99	—
punctuation, keyword.operator, punctuation.definition.comment, constant.character.escape	#76726FBB	—
constant.character.escape	#76726F88	—
entity.name.tag, keyword, markup.inline.raw, meta.brace, meta.delimiter, meta.method, meta.property-name, object.comma, raw, storage, support.constant, keyword.other, keyword.control, variable.language	#76726F	—
constant, entity.name.tag.css, entity.other.attribute-name.css, meta.selector.css, meta.tag, meta.jsx.children, source, string, support.class	#222120	—
entity.name.function, invalid.broken, markup.underline.link, meta.template.expression, support.variable, variable, variable.other.property, variable.other.readwrite	#994C48	—
entity.other, markup.inserted, 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	#2D5C80	—
invalid	#E59793	—
markup.changed, meta.diff.header	#2D5C8099	—
markup.deleted	#994C4899	—
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, 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}!`;
}