FectionLabs Themes

Name: FectionLabs Themes
Author: FectionLabs

Publisher: FectionLabsThemes in package: 12

FectionLabs branded color themes — 12 variants for VS Code, Cursor, Windsurf, VSCodium, Trae, Antigravity IDE, and other VS Code-compatible editors.

Open in VS Code GitHub

Color themes

VS Code preview

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

FectionLabs Themes — FectionLabs Theme Sand

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.background#034972
activityBar.border#D4A853
activityBar.foreground#FFFFFF
activityBarBadge.background#D4A853
activityBarBadge.foreground#3D3428
badge.background#B8923A
badge.foreground#FFFFFF
button.background#034972
button.foreground#FFFFFF
editor.background#F5F0E8
editor.foreground#3D3428
editor.lineHighlightBackground#EDE6DA
editor.selectionBackground#03497233
editor.selectionHighlightBackground#03497222
editor.wordHighlightBackground#E8E0D4
editor.wordHighlightStrongBackground#B8923A22
editorBracketMatch.background#03497218
editorBracketMatch.border#D4A853
editorCursor.foreground#034972
editorGroup.border#03497240
editorGroupHeader.tabsBackground#EDE6DA
editorGutter.background#F8F4EE
editorIndentGuide.activeBackground#034972
editorIndentGuide.background#D9D0C4
editorLineNumber.activeForeground#B8923A
editorLineNumber.foreground#9A8B78
editorWidget.border#D4A853
focusBorder#0D9488
input.background#FFFFFF
input.border#03497255
list.activeSelectionBackground#034972
list.activeSelectionForeground#FFFFFF
list.focusOutline#D4A853
list.hoverBackground#E8E0D4
notificationCenter.border#D4A853
panel.background#F5F0E8
panel.border#03497230
panelTitle.activeForeground#034972
progressBar.background#D4A853
sash.hoverBorder#0D9488
sideBar.background#EDE6DA
sideBar.border#03497240
sideBar.foreground#3D3428
sideBarTitle.foreground#034972
statusBar.background#034972
statusBar.border#D4A853
statusBar.foreground#FFFFFF
tab.activeBackground#F5F0E8
tab.activeBorder#D4A853
tab.activeBorderTop#D4A853
tab.activeForeground#3D3428
tab.inactiveBackground#EDE6DA
tab.inactiveForeground#7A6E5E
terminal.ansiBlue#034972
terminal.ansiCyan#0D9488
terminal.ansiGreen#1B7A4A
terminal.ansiMagenta#7A5C8C
terminal.ansiRed#A34A3A
terminal.ansiYellow#B8923A
terminal.background#F5F0E8
terminal.foreground#3D3428
titleBar.activeBackground#EDE6DA
titleBar.activeForeground#023556

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A7A68	italic
string, punctuation.definition.string	#1B7A4A	—
constant.numeric	#B8923A	—
keyword	#034972	bold
entity.name.function, support.function	#0D9488	—
variable	#2A2218	bold
storage.type, storage.modifier	#023556	—
entity.name.type, entity.other.inherited-class	#B8923A	—
entity.name.tag	#1B7A4A	—
entity.other.attribute-name	#7A5C8C	—
markup.heading	#034972	bold