Tiranga Theme

Name: Tiranga Theme
Author: dotnetabhishekai

Publisher: dotnetabhishekaiThemes in package: 1

A VS Code color theme inspired by the Indian national flag (Tiranga) — saffron, white, green, with navy blue Ashoka Chakra accents.

Open in VS Code GitHub

VS Code preview

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

Tiranga Theme — Tiranga

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

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#080B0F
activityBar.border#1E242B
activityBar.foreground#F5F3EE
activityBar.inactiveForeground#6B6F76
activityBarBadge.background#FF9933
activityBarBadge.foreground#0B0F14
badge.background#000080
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#FF9933
breadcrumb.focusForeground#F5F3EE
breadcrumb.foreground#6B6F76
button.background#138808
button.foreground#FFFFFF
button.hoverBackground#1AA30B
button.secondaryBackground#2A3138
button.secondaryForeground#F5F3EE
button.secondaryHoverBackground#3A4048
disabledForeground#6B6F76
dropdown.background#12171D
dropdown.border#1E242B
dropdown.foreground#E8E6E1
editor.background#0B0F14
editor.findMatchBackground#FF993355
editor.findMatchHighlightBackground#FF993330
editor.foreground#E8E6E1
editor.inactiveSelectionBackground#13880822
editor.lineHighlightBackground#FFFFFF0D
editor.lineHighlightBorder#FFFFFF00
editor.selectionBackground#13880855
editor.selectionHighlightBackground#13880833
editor.wordHighlightBackground#00008055
editor.wordHighlightStrongBackground#00008077
editorBracketMatch.background#13880833
editorBracketMatch.border#138808AA
editorCodeLens.foreground#6B6F76
editorCursor.foreground#FFFFFF
editorError.foreground#E5484D
editorGroup.border#1E242B
editorGroupHeader.tabsBackground#080B0F
editorGroupHeader.tabsBorder#1E242B
editorGutter.addedBackground#138808
editorGutter.deletedBackground#E5484D
editorGutter.modifiedBackground#FF9933
editorHint.foreground#138808
editorHoverWidget.background#12171D
editorHoverWidget.border#1E242B
editorIndentGuide.activeBackground#3A4048
editorIndentGuide.background#1E242B
editorInfo.foreground#4FC3F7
editorLightBulb.foreground#FF9933
editorLightBulbAutoFix.foreground#138808
editorLineNumber.activeForeground#FF9933
editorLineNumber.foreground#3A4048
editorOverviewRuler.border#0B0F14
editorRuler.foreground#1E242B
editorSuggestWidget.background#12171D
editorSuggestWidget.border#1E242B
editorSuggestWidget.highlightForeground#FF9933
editorSuggestWidget.selectedBackground#13880833
editorWarning.foreground#FF9933
editorWhitespace.foreground#2A3138
editorWidget.background#12171D
editorWidget.border#1E242B
focusBorder#FF993380
foreground#E8E6E1
gitDecoration.addedResourceForeground#138808
gitDecoration.conflictingResourceForeground#B366CC
gitDecoration.deletedResourceForeground#E5484D
gitDecoration.ignoredResourceForeground#6B6F76
gitDecoration.modifiedResourceForeground#FF9933
gitDecoration.untrackedResourceForeground#4FC3F7
input.background#12171D
input.border#1E242B
input.foreground#E8E6E1
input.placeholderForeground#6B6F76
inputOption.activeBackground#FF993333
inputOption.activeBorder#FF9933
inputValidation.errorBorder#E5484D
inputValidation.infoBorder#000080
inputValidation.warningBorder#FF9933
list.activeSelectionBackground#13880833
list.activeSelectionForeground#FFFFFF
list.focusBackground#FF993322
list.highlightForeground#FF9933
list.hoverBackground#FFFFFF08
list.inactiveSelectionBackground#FFFFFF0D
notificationCenterHeader.background#12171D
notifications.background#12171D
notifications.border#1E242B
notificationsErrorIcon.foreground#E5484D
notificationsInfoIcon.foreground#138808
notificationsWarningIcon.foreground#FF9933
panel.background#0B0F14
panel.border#1E242B
panelTitle.activeBorder#FF9933
panelTitle.activeForeground#F5F3EE
panelTitle.inactiveForeground#6B6F76
peekView.border#FF9933
peekViewEditor.background#0D1218
peekViewResult.background#0B0F14
peekViewTitle.background#12171D
progressBar.background#FF9933
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#3A4048EE
scrollbarSlider.background#3A404866
scrollbarSlider.hoverBackground#3A4048AA
selection.background#13880855
sideBar.background#0D1218
sideBar.border#1E242B
sideBar.foreground#CFCDC7
sideBarSectionHeader.background#0D1218
sideBarSectionHeader.border#1E242B
sideBarTitle.foreground#F5F3EE
statusBar.background#000080
statusBar.border#000080
statusBar.debuggingBackground#E5484D
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#F5F3EE
statusBar.noFolderBackground#000080
statusBarItem.hoverBackground#FFFFFF22
statusBarItem.remoteBackground#138808
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#0B0F14
tab.activeBorderTop#FF9933
tab.activeForeground#FFFFFF
tab.border#1E242B
tab.hoverBackground#161C23
tab.inactiveBackground#0D1218
tab.inactiveForeground#6B6F76
terminal.ansiBlack#0B0F14
terminal.ansiBlue#000080
terminal.ansiBrightBlack#3A4048
terminal.ansiBrightBlue#5555C7
terminal.ansiBrightCyan#8FE0FF
terminal.ansiBrightGreen#3FB528
terminal.ansiBrightMagenta#D699E8
terminal.ansiBrightRed#FF6B6E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFB366
terminal.ansiCyan#4FC3F7
terminal.ansiGreen#138808
terminal.ansiMagenta#B366CC
terminal.ansiRed#E5484D
terminal.ansiWhite#F5F3EE
terminal.ansiYellow#FF9933
terminal.background#0B0F14
terminal.foreground#E8E6E1
terminalCursor.foreground#FF9933
titleBar.activeBackground#080B0F
titleBar.activeForeground#F5F3EE
titleBar.border#1E242B
titleBar.inactiveBackground#080B0F
titleBar.inactiveForeground#6B6F76
tree.indentGuidesStroke#1E242B
walkThrough.embeddedEditorBackground#0B0F14
welcomePage.progress.foreground#FF9933
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B6F76	italic
variable, string constant.other.placeholder	#E8E6E1	—
keyword, storage.type, storage.modifier	#FF9933	—
keyword.control, keyword.control.flow	#FF9933	bold
entity.name.class, entity.name.type, support.class, support.type	#F5F3EE	—
entity.name.function, support.function, meta.function-call	#FFC266	—
string, punctuation.definition.string	#4FC97A	—
constant.numeric, constant.language, constant.character, variable.language.this	#66B3FF	—
string.regexp	#FF9933	—
entity.name.tag, punctuation.definition.tag	#FF9933	—
entity.other.attribute-name	#B3E086	—
keyword.operator, punctuation	#B8BDC4	—
variable.other.property, support.type.property-name	#8FE0FF	—
entity.name.namespace, storage.modifier.import, meta.import	#138808	—
markup.heading	#FF9933	bold
markup.bold	#F5F3EE	bold
markup.italic	#F5F3EE	italic
markup.underline.link, string.other.link	#4FC3F7	—
markup.inserted, diff.inserted	#138808	—
markup.deleted, diff.deleted	#E5484D	—
invalid, invalid.illegal	#FFFFFF	—