Frontend Themes

Name: Frontend Themes
Author: StraightRight

Publisher: StraightRightThemes in package: 26

A curated collection of VSCode themes, based on colors of frontend frameworks

Open in VS Code GitHub

Color themes

VS Code preview

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

Frontend Themes — Svelte Pastel 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...
~/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.activeBorder#E4A895
activityBar.background#1D1816
activityBar.foreground#D5D0DB
activityBarBadge.background#E4A895
activityBarBadge.foreground#000000
badge.background#E4A895
badge.foreground#000000
button.background#E4A895
button.foreground#000000
button.hoverBackground#BF7E69
editor.background#251F1D
editor.findMatchBackground#89544366
editor.findMatchHighlightBackground#89544333
editor.foreground#D5D0DB
editor.selectionBackground#89544355
editor.selectionHighlightBackground#89544333
editor.wordHighlightBackground#89544333
editorCursor.foreground#E4A895
editorIndentGuide.activeBackground1#89544388
editorLineNumber.activeForeground#E4A895
editorLineNumber.foreground#8B8694
extensionButton.prominentBackground#E4A895
extensionButton.prominentHoverBackground#BF7E69
focusBorder#E4A895
gitDecoration.modifiedResourceForeground#E4A895
list.activeSelectionBackground#89544344
list.activeSelectionForeground#D5D0DB
list.highlightForeground#E4A895
list.hoverBackground#362E2B
list.inactiveSelectionBackground#89544322
panel.border#3E3532
panelTitle.activeBorder#E4A895
progressBar.background#E4A895
scrollbarSlider.activeBackground#E4A89577
scrollbarSlider.background#8954433a
scrollbarSlider.hoverBackground#8954435a
sideBar.background#1D1816
sideBar.foreground#B4AFBC
sideBarSectionHeader.background#362E2B
sideBarTitle.foreground#B4AFBC
statusBar.background#895443
statusBar.debuggingBackground#AC6149
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#895443
tab.activeBackground#251F1D
tab.activeBorderTop#E4A895
tab.activeForeground#D5D0DB
tab.inactiveBackground#1D1816
tab.inactiveForeground#8B8694
terminal.ansiBlue#E4A895
textLink.activeForeground#E4A895
textLink.foreground#E4A895
titleBar.activeBackground#1D1816
titleBar.activeForeground#B4AFBC
titleBar.inactiveBackground#251F1D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#E4F6C0	italic
string, punctuation.definition.string	#E4A242	—
constant.numeric, constant.language, constant.character	#CCF6EA	—
keyword, keyword.control, storage, storage.type	#E4A895	—
entity.name.function, support.function	#EAEA66	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#C6DEF6	—
variable, variable.parameter	#9CA8F0	—
entity.name.tag, meta.tag	#E4A895	—
entity.other.attribute-name	#9CA8F0	—
keyword.operator, punctuation	#A2B4B4	—
meta.decorator, punctuation.decorator	#EAEA66	—