Shyama

Name: Shyama
Author: Rahul Singh

Publisher: Rahul SinghThemes in package: 2

A premium obsidian dark developer theme named Shyama (teal), with electric teal, orange, and lavender highlights, featuring cursive imports.

Open in VS Code

Color themes

VS Code preview

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

Shyama — Shyama

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...
~/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#07080a
activityBar.border#0f1115
activityBar.foreground#ff9f43
activityBar.inactiveForeground#52787c
activityBarBadge.background#ff9f43
activityBarBadge.foreground#07080a
dropdown.background#07080a
dropdown.border#0f1115
dropdown.foreground#e2e8f0
editor.background#0b0d0f
editor.foreground#e2e8f0
editor.lineHighlightBackground#111417
editor.selectionBackground#ff9f4333
editor.selectionHighlightBackground#ff9f4320
editor.wordHighlightBackground#ff9f4315
editor.wordHighlightStrongBackground#ff9f4325
editorCursor.foreground#ff9f43
editorGroup.border#0f1115
editorGroupHeader.tabsBackground#07080a
editorGroupHeader.tabsBorder#0f1115
editorGutter.addedBackground#00f5d4
editorGutter.deletedBackground#fb7185
editorGutter.modifiedBackground#38bdf8
editorLineNumber.activeForeground#ff9f43
editorLineNumber.foreground#475569
editorSuggestWidget.background#07080a
editorSuggestWidget.border#0f1115
editorSuggestWidget.highlightForeground#ff9f43
editorSuggestWidget.selectedBackground#ff9f4325
editorWidget.background#07080a
editorWidget.border#0f1115
errorForeground#fb7185
focusBorder#ff9f4350
foreground#e2e8f0
input.background#07080a
input.border#0f1115
input.foreground#e2e8f0
input.placeholderForeground#64748b
list.activeSelectionBackground#ff9f4325
list.activeSelectionForeground#ff9f43
list.hoverBackground#ff9f4315
list.hoverForeground#e2e8f0
list.inactiveSelectionBackground#ff9f4315
list.inactiveSelectionForeground#e2e8f0
peekView.border#ff9f43
peekViewEditor.background#0b0d0f
peekViewResult.background#07080a
scrollbarSlider.activeBackground#ff9f4340
scrollbarSlider.background#ff9f4315
scrollbarSlider.hoverBackground#ff9f4325
selection.background#ff9f4333
sideBar.background#07080a
sideBar.border#0f1115
sideBar.foreground#94a3b8
sideBarSectionHeader.background#07080a
sideBarSectionHeader.border#0f1115
sideBarSectionHeader.foreground#e2e8f0
statusBar.background#07080a
statusBar.border#0f1115
statusBar.foreground#e2e8f0
tab.activeBackground#0b0d0f
tab.activeBorder#ff9f43
tab.activeForeground#ff9f43
tab.border#07080a
tab.inactiveBackground#07080a
tab.inactiveForeground#64748b
titleBar.activeBackground#07080a
titleBar.activeForeground#e2e8f0
titleBar.border#0f1115
widget.shadow#000000d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#52787c	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#00f5d4	italic
storage.type, storage.modifier	#00f5d4	italic
keyword.control.import, keyword.control.export, keyword.control.from, meta.import keyword.control, meta.export keyword.control	#e2e8f0
meta.import punctuation.section.block, meta.import punctuation.definition.binding-pattern, meta.import punctuation.section.braces, meta.import meta.block punctuation.definition.block, meta.import punctuation.separator, meta.import punctuation	#e2e8f0
meta.import string.quoted, meta.import string.quoted.single, meta.import string.quoted.double	#fdba74
meta.import variable.other.readwrite, meta.import variable.other.readwrite.alias, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.jsx, meta.import entity.name.type, meta.import support.class	#00f5d4	bold italic
entity.name.function, support.function, meta.function-call, variable.function	#ff9f43	—
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace, entity.other.inherited-class	#00f5d4	italic
string, punctuation.definition.string	#a6f3d0	—
constant.numeric	#fb923c	—
constant.language, support.constant	#f472b6	—
variable, variable.other.readwrite, variable.other.object, variable.other.property, meta.definition.variable	#e2e8f0	—
variable.parameter, variable.other.type.parameter	#d2e5e4	italic
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#93aead	—
meta.decorator, entity.name.function.decorator	#ff9f43	italic
entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag.ts, entity.name.tag, meta.tag.js entity.name.tag, meta.tag.tsx entity.name.tag, meta.tag.ts entity.name.tag	#38bdf8	—
support.class.component.js, support.class.component.tsx, support.class.component.ts, entity.name.tag.component.js, entity.name.tag.component.tsx, entity.name.tag.component.ts, entity.name.tag.keyword, entity.name.tag.custom	#ff7a00	—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name, meta.tag.js entity.other.attribute-name, meta.tag.tsx entity.other.attribute-name, meta.tag.ts entity.other.attribute-name	#cba6f7	italic
meta.jsx.children, meta.tsx.children	#e2e8f0	—
entity.name.tag	#38bdf8	—
entity.other.attribute-name, meta.attribute-name	#cba6f7	italic
entity.other.attribute-name.class, entity.other.attribute-name.id	#00f5d4	—
support.type.property-name	#2dd4bf	—
markup.heading	#ff9f43	bold
string.other.link.title, markup.underline.link	#00e5ff	—