Claret & Chalk

Name: Claret & Chalk
Author: Nathan Inkiriwang

Publisher: Nathan InkiriwangThemes in package: 2

Dark and light themes built from two colours and a rose accent. Part of the Claret & Chalk palette.

Open in VS Code GitHub

Color themes

VS Code preview

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

Claret & Chalk — Chalk Rosé

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#f7f2ea
activityBar.border#f7f2ea
activityBar.foreground#7d4a5e
activityBar.inactiveForeground#b795a2
activityBarBadge.background#8f3d5c
activityBarBadge.foreground#f7f2ea
badge.background#8f3d5c
badge.foreground#f7f2ea
banner.background#efe6d9
banner.foreground#7d4a5e
breadcrumb.background#f7f2ea
breadcrumb.focusForeground#7d4a5e
breadcrumb.foreground#a5798a
breadcrumbPicker.background#efe6d9
button.background#8f3d5c
button.foreground#f7f2ea
button.hoverBackground#9d4867
button.secondaryBackground#efe6d9
button.secondaryForeground#7d4a5e
button.secondaryHoverBackground#e9ddcb
checkbox.background#fdfbf6
checkbox.border#e0cfc0
checkbox.foreground#7d4a5e
debugToolBar.background#efe6d9
descriptionForeground#a5798a
diffEditor.insertedTextBackground#8f3d5c14
diffEditor.removedTextBackground#a63d2a14
disabledForeground#b795a2
dropdown.background#fdfbf6
dropdown.border#e0cfc0
dropdown.foreground#7d4a5e
editor.background#f7f2ea
editor.findMatchBackground#8f3d5c33
editor.findMatchBorder#8f3d5c
editor.findMatchHighlightBackground#8f3d5c1a
editor.foreground#451325
editor.inactiveSelectionBackground#eedbe288
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#f1e9dc80
editor.selectionBackground#eedbe2
editor.selectionHighlightBackground#eedbe266
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#7d4a5e
editorBracketHighlight.foreground2#9c5b76
editorBracketHighlight.foreground3#5f2439
editorBracketMatch.background#eedbe266
editorBracketMatch.border#8f3d5c
editorCursor.background#f7f2ea
editorCursor.foreground#451325
editorError.foreground#a63d2a
editorGroup.border#e0cfc0
editorGroupHeader.noTabsBackground#f7f2ea
editorGroupHeader.tabsBackground#f7f2ea
editorGroupHeader.tabsBorder#f7f2ea
editorGutter.addedBackground#8f3d5c55
editorGutter.background#f7f2ea
editorGutter.deletedBackground#a63d2a55
editorGutter.modifiedBackground#8f3d5c55
editorHint.foreground#a5798a
editorHoverWidget.background#efe6d9
editorHoverWidget.border#e0cfc0
editorIndentGuide.activeBackground1#e0cfc0
editorIndentGuide.background1#e0cfc066
editorInfo.foreground#8f3d5c
editorLightBulb.foreground#8d6a32
editorLineNumber.activeForeground#7d4a5e
editorLineNumber.foreground#b795a2
editorLink.activeForeground#8f3d5c
editorOverviewRuler.border#00000000
editorRuler.foreground#e0cfc0
editorSuggestWidget.background#efe6d9
editorSuggestWidget.border#e0cfc0
editorSuggestWidget.foreground#7d4a5e
editorSuggestWidget.highlightForeground#8f3d5c
editorSuggestWidget.selectedBackground#eedbe2
editorSuggestWidget.selectedForeground#451325
editorWarning.foreground#8d6a32
editorWhitespace.foreground#e0cfc0
editorWidget.background#efe6d9
editorWidget.border#e0cfc0
errorForeground#a63d2a
extensionButton.prominentBackground#8f3d5c
extensionButton.prominentForeground#f7f2ea
extensionButton.prominentHoverBackground#9d4867
focusBorder#8f3d5c
foreground#5f2439
gitDecoration.conflictingResourceForeground#a63d2a
gitDecoration.deletedResourceForeground#a63d2a
gitDecoration.ignoredResourceForeground#b795a2
gitDecoration.modifiedResourceForeground#8d6a32
gitDecoration.untrackedResourceForeground#8f3d5c
icon.foreground#7d4a5e
input.background#fdfbf6
input.border#e0cfc0
input.foreground#451325
input.placeholderForeground#b795a2
inputOption.activeBackground#eedbe2
inputOption.activeBorder#8f3d5c
inputOption.activeForeground#451325
inputValidation.errorBackground#fdfbf6
inputValidation.errorBorder#a63d2a
keybindingLabel.background#efe6d9
keybindingLabel.border#e0cfc0
keybindingLabel.bottomBorder#e0cfc0
keybindingLabel.foreground#7d4a5e
list.activeSelectionBackground#eedbe2
list.activeSelectionForeground#451325
list.errorForeground#a63d2a
list.focusBackground#eedbe2
list.highlightForeground#8f3d5c
list.hoverBackground#f1e9dc
list.hoverForeground#451325
list.inactiveSelectionBackground#f0e5da
list.inactiveSelectionForeground#451325
list.warningForeground#8d6a32
menu.background#efe6d9
menu.foreground#7d4a5e
menu.selectionBackground#eedbe2
menu.selectionForeground#451325
menu.separatorBackground#e0cfc0
minimap.background#f7f2ea
notebook.cellBorderColor#d5bda9
notebook.cellEditorBackground#f7f2ea
notebook.cellInsertionIndicator#8f3d5c
notebook.cellStatusBarItemHoverBackground#f1e9dc
notebook.cellToolbarSeparator#e0cfc0
notebook.editorBackground#f7f2ea
notebook.focusedCellBorder#b57f95
notebook.focusedEditorBorder#b57f95
notebook.inactiveFocusedCellBorder#d5bda9
notebook.outputContainerBackgroundColor#efe6d9
notebook.outputContainerBorderColor#e0cfc0
notebook.selectedCellBackground#f1e9dc
notebook.selectedCellBorder#d5bda9
notebook.symbolHighlightBackground#f1e9dc80
notebookScrollbarSlider.background#eedbe2aa
notebookScrollbarSlider.hoverBackground#e5c9d4
notebookStatusErrorIcon.foreground#a63d2a
notebookStatusRunningIcon.foreground#8d6a32
notebookStatusSuccessIcon.foreground#8f3d5c
notificationCenterHeader.background#efe6d9
notificationLink.foreground#8f3d5c
notifications.background#efe6d9
notifications.border#e0cfc0
notifications.foreground#7d4a5e
notificationToast.border#e0cfc0
panel.background#f7f2ea
panel.border#e0cfc0
panelTitle.activeBorder#8f3d5c
panelTitle.activeForeground#7d4a5e
panelTitle.inactiveForeground#a5798a
peekView.border#8f3d5c
peekViewEditor.background#efe6d9
peekViewEditor.matchHighlightBackground#8f3d5c1a
peekViewResult.background#efe6d9
peekViewResult.matchHighlightBackground#8f3d5c1a
peekViewResult.selectionBackground#eedbe2
peekViewTitle.background#efe6d9
peekViewTitleDescription.foreground#a5798a
peekViewTitleLabel.foreground#451325
pickerGroup.border#e0cfc0
pickerGroup.foreground#8f3d5c
problemsErrorIcon.foreground#a63d2a
problemsInfoIcon.foreground#8f3d5c
problemsWarningIcon.foreground#8d6a32
progressBar.background#8f3d5c
quickInput.background#efe6d9
quickInput.foreground#7d4a5e
quickInputList.focusBackground#eedbe2
quickInputList.focusForeground#451325
quickInputTitle.background#efe6d9
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#dcb8c7
scrollbarSlider.background#eedbe2aa
scrollbarSlider.hoverBackground#e5c9d4
selection.background#eedbe2
settings.headerForeground#451325
settings.modifiedItemIndicator#8f3d5c
sideBar.background#efe6d9
sideBar.border#efe6d9
sideBar.foreground#7d4a5e
sideBarSectionHeader.background#efe6d9
sideBarSectionHeader.foreground#a5798a
sideBarTitle.foreground#a5798a
statusBar.background#efe6d9
statusBar.border#efe6d9
statusBar.debuggingBackground#eedbe2
statusBar.debuggingForeground#451325
statusBar.foreground#a5798a
statusBar.noFolderBackground#efe6d9
statusBarItem.remoteBackground#eedbe2
statusBarItem.remoteForeground#451325
tab.activeBackground#f7f2ea
tab.activeBorder#f7f2ea
tab.activeBorderTop#f7f2ea
tab.activeForeground#a5798a
tab.border#f7f2ea
tab.hoverBackground#f7f2ea
tab.hoverForeground#7d4a5e
tab.inactiveBackground#f7f2ea
tab.inactiveForeground#b795a2
terminal.ansiBlack#c9adb8
terminal.ansiBlue#8f3d5c
terminal.ansiBrightBlack#a4828f
terminal.ansiBrightBlue#7a314d
terminal.ansiBrightCyan#5f2439
terminal.ansiBrightGreen#7a314d
terminal.ansiBrightMagenta#7a314d
terminal.ansiBrightRed#8b3129
terminal.ansiBrightWhite#451325
terminal.ansiBrightYellow#79522e
terminal.ansiCyan#7d4a5e
terminal.ansiGreen#8f3d5c
terminal.ansiMagenta#8f3d5c
terminal.ansiRed#a63d2a
terminal.ansiWhite#5f2439
terminal.ansiYellow#8d6a32
terminal.background#f7f2ea
terminal.border#e0cfc0
terminal.foreground#5f2439
terminal.selectionBackground#eedbe2
terminalCursor.background#f7f2ea
terminalCursor.foreground#451325
textCodeBlock.background#efe6d9
textLink.activeForeground#6e2a45
textLink.foreground#8f3d5c
textPreformat.foreground#5f2439
titleBar.activeBackground#f7f2ea
titleBar.activeForeground#a5798a
titleBar.inactiveBackground#f7f2ea
titleBar.inactiveForeground#b795a2
tree.indentGuidesStroke#e0cfc0
walkThrough.embeddedEditorBackground#efe6d9
widget.shadow#4513251f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a5798a	italic
string, string.quoted, punctuation.definition.string	#7d4a5e	—
string.quoted.docstring, string.quoted.multi.python	#7d4a5e	italic
constant.numeric, constant.language, constant.character.escape, constant.other.caps, variable.other.constant	#5f2439
keyword, keyword.control, storage.type, storage.modifier	#8f3d5c	italic
keyword.operator	#7d4a5e
keyword.operator.logical, keyword.operator.word	#8f3d5c	italic
entity.name.function, support.function.magic, meta.function entity.name.function	#2f0a19	bold
entity.name.type, entity.name.class, entity.other.inherited-class	#2f0a19	bold
support.type, support.class	#5f2439	italic
support.function.builtin	#5f2439
entity.name.function.decorator, meta.function.decorator, punctuation.definition.decorator	#8f3d5c	italic
variable.language	#7d4a5e	italic
punctuation, meta.brace	#7d4a5e	—
entity.name.tag	#8f3d5c	—
entity.other.attribute-name	#5f2439	italic
support.type.property-name	#5f2439
markup.heading, entity.name.section	#2f0a19	bold
markup.italic	—	italic
markup.bold	#2f0a19	bold
markup.inline.raw, markup.fenced_code.block	#5f2439	—
markup.quote	#a5798a	italic
markup.underline.link, string.other.link	#8f3d5c	—
invalid, invalid.illegal	#a63d2a	—