Cookie Tin Theme

Name: Cookie Tin Theme
Author: Gabriel Lathos

Publisher: Gabriel LathosThemes in package: 5

Celestial theme for butter cookies that love to code

Open in VS Code GitHub

Color themes

VS Code preview

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

Cookie Tin Theme — Codename: Seamstress

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#151518
activityBar.foreground#D9B85F
activityBar.inactiveForeground#8E8C88
activityBarBadge.background#B397CA
activityBarBadge.foreground#101012
badge.background#D9B85F
badge.foreground#101012
button.background#3A3442
button.foreground#F0ECE4
button.hoverBackground#4A4254
button.secondaryBackground#2B2B2F
button.secondaryForeground#D8D8D6
button.secondaryHoverBackground#36363A
descriptionForeground#A9A7A2
dropdown.background#151518
dropdown.border#3A3442
dropdown.foreground#E6E2D8
editor.background#101012
editor.findMatchBackground#D9B85F99
editor.findMatchHighlightBackground#B397CA44
editor.foreground#E6E2D8
editor.inactiveSelectionBackground#3A344266
editor.lineHighlightBackground#1E1E22
editor.selectionBackground#3A3442AA
editor.selectionHighlightBackground#B397CA33
editorBracketMatch.background#3A344299
editorBracketMatch.border#D8D8D6
editorCursor.foreground#D9B85F
editorGroupHeader.tabsBackground#1A1A1D
editorIndentGuide.activeBackground1#B397CA66
editorIndentGuide.background1#5A5A5E55
editorLineNumber.activeForeground#D9B85F
editorLineNumber.foreground#77777A
editorSuggestWidget.selectedBackground#3A344288
editorWhitespace.foreground#5A5A5E66
editorWidget.background#1A1A1D
editorWidget.border#3A3442
editorWidget.foreground#E6E2D8
errorForeground#E58B8F
focusBorder#B397CA
foreground#E6E2D8
input.background#151518
input.border#3A3442
input.foreground#E6E2D8
list.activeSelectionBackground#3A3442
list.activeSelectionForeground#F0ECE4
list.highlightForeground#D9B85F
list.hoverBackground#2B2B2F
list.inactiveSelectionBackground#2B2B2F
notificationCenterHeader.background#2B2B2F
notifications.background#1A1A1D
notifications.border#3A3442
notifications.foreground#E6E2D8
progressBar.background#B397CA
sideBar.background#1A1A1D
sideBar.foreground#D8D8D6
sideBarSectionHeader.background#1A1A1D
sideBarSectionHeader.foreground#D9B85F
sideBarTitle.foreground#D9B85F
statusBar.background#151518
statusBar.debuggingBackground#B397CA
statusBar.debuggingForeground#101012
statusBar.foreground#D8D8D6
statusBar.noFolderBackground#151518
statusBar.noFolderForeground#D8D8D6
statusBarItem.hoverBackground#2B2B2F
tab.activeBackground#101012
tab.activeBorderTop#D9B85F
tab.activeForeground#F0ECE4
tab.border#2B2B2F
tab.inactiveBackground#1A1A1D
tab.inactiveForeground#A9A7A2
terminal.background#101012
terminal.foreground#E6E2D8
terminalCursor.foreground#D9B85F
textLink.activeForeground#F0ECE4
textLink.foreground#D9B85F
titleBar.activeBackground#151518
titleBar.activeForeground#D8D8D6
titleBar.inactiveBackground#151518
titleBar.inactiveForeground#8E8C88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8E8C88	italic
keyword, storage, storage.type, storage.modifier	#B397CA	—
string, constant.other.symbol	#D9B85F	—
constant.numeric, constant.language, constant.character, constant.escape	#E58B8F	—
entity.name.function, meta.function-call, variable.function, support.function	#D8D8D6	—
entity.name.type, entity.name.class, support.type, support.class	#C9C0F0	—
variable, support.variable	#E6E2D8	—
entity.name.tag, entity.other.attribute-name	#D9C79C	—
keyword.operator, punctuation, meta.tag	#AFAEAD	—
invalid, invalid.illegal	#F0B4B8	—