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 — Claret Rosé

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#3b0f1f
activityBar.border#3b0f1f
activityBar.foreground#d8c5b0
activityBar.inactiveForeground#81636a
activityBarBadge.background#d69cb2
activityBarBadge.foreground#3b0f1f
badge.background#d69cb2
badge.foreground#3b0f1f
banner.background#2d0b18
banner.foreground#d8c5b0
breadcrumb.background#3b0f1f
breadcrumb.focusForeground#d8c5b0
breadcrumb.foreground#91777c
breadcrumbPicker.background#2d0b18
button.background#65243c
button.foreground#f7f2ea
button.hoverBackground#6f2a43
button.secondaryBackground#2d0b18
button.secondaryForeground#d8c5b0
button.secondaryHoverBackground#451426
checkbox.background#2d0b18
checkbox.border#501b2e
checkbox.foreground#d8c5b0
debugToolBar.background#2d0b18
descriptionForeground#a28c8f
diffEditor.insertedTextBackground#d69cb21f
diffEditor.removedTextBackground#e08d7c1f
disabledForeground#91777c
dropdown.background#2d0b18
dropdown.border#501b2e
dropdown.foreground#d8c5b0
editor.background#3b0f1f
editor.findMatchBackground#d69cb24d
editor.findMatchBorder#d69cb2
editor.findMatchHighlightBackground#d69cb226
editor.foreground#f7f2ea
editor.inactiveSelectionBackground#65243c88
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#45142680
editor.selectionBackground#65243c
editor.selectionHighlightBackground#65243c66
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#d8c5b0
editorBracketHighlight.foreground2#c9a9b6
editorBracketHighlight.foreground3#eadfce
editorBracketMatch.background#65243c66
editorBracketMatch.border#8d4a63
editorCursor.background#3b0f1f
editorCursor.foreground#f7f2ea
editorError.foreground#e08d7c
editorGroup.border#501b2e
editorGroupHeader.noTabsBackground#3b0f1f
editorGroupHeader.tabsBackground#3b0f1f
editorGroupHeader.tabsBorder#3b0f1f
editorGutter.addedBackground#d69cb266
editorGutter.background#3b0f1f
editorGutter.deletedBackground#e08d7c66
editorGutter.modifiedBackground#d69cb266
editorHint.foreground#a28c8f
editorHoverWidget.background#2d0b18
editorHoverWidget.border#501b2e
editorIndentGuide.activeBackground1#501b2e
editorIndentGuide.background1#501b2e66
editorInfo.foreground#d69cb2
editorLightBulb.foreground#dfc69a
editorLineNumber.activeForeground#d8c5b0
editorLineNumber.foreground#91777c
editorLink.activeForeground#d69cb2
editorOverviewRuler.border#00000000
editorRuler.foreground#501b2e
editorSuggestWidget.background#2d0b18
editorSuggestWidget.border#501b2e
editorSuggestWidget.foreground#d8c5b0
editorSuggestWidget.highlightForeground#d69cb2
editorSuggestWidget.selectedBackground#65243c
editorSuggestWidget.selectedForeground#f7f2ea
editorWarning.foreground#dfc69a
editorWhitespace.foreground#501b2e
editorWidget.background#2d0b18
editorWidget.border#501b2e
errorForeground#e08d7c
extensionButton.prominentBackground#65243c
extensionButton.prominentForeground#f7f2ea
extensionButton.prominentHoverBackground#6f2a43
focusBorder#8d4a63
foreground#eadfce
gitDecoration.conflictingResourceForeground#e08d7c
gitDecoration.deletedResourceForeground#e08d7c
gitDecoration.ignoredResourceForeground#91777c
gitDecoration.modifiedResourceForeground#dfc69a
gitDecoration.untrackedResourceForeground#d69cb2
icon.foreground#d8c5b0
input.background#2d0b18
input.border#501b2e
input.foreground#f7f2ea
input.placeholderForeground#91777c
inputOption.activeBackground#65243c
inputOption.activeBorder#d69cb2
inputOption.activeForeground#f7f2ea
inputValidation.errorBackground#2d0b18
inputValidation.errorBorder#e08d7c
keybindingLabel.background#2d0b18
keybindingLabel.border#501b2e
keybindingLabel.bottomBorder#501b2e
keybindingLabel.foreground#d8c5b0
list.activeSelectionBackground#65243c
list.activeSelectionForeground#f7f2ea
list.errorForeground#e08d7c
list.focusBackground#65243c
list.highlightForeground#d69cb2
list.hoverBackground#451426
list.hoverForeground#f7f2ea
list.inactiveSelectionBackground#5b2035
list.inactiveSelectionForeground#f7f2ea
list.warningForeground#dfc69a
menu.background#2d0b18
menu.foreground#d8c5b0
menu.selectionBackground#65243c
menu.selectionForeground#f7f2ea
menu.separatorBackground#501b2e
minimap.background#3b0f1f
notebook.cellBorderColor#5d2238
notebook.cellEditorBackground#3b0f1f
notebook.cellInsertionIndicator#d69cb2
notebook.cellStatusBarItemHoverBackground#451426
notebook.cellToolbarSeparator#501b2e
notebook.editorBackground#3b0f1f
notebook.focusedCellBorder#8d4a63
notebook.focusedEditorBorder#8d4a63
notebook.inactiveFocusedCellBorder#5d2238
notebook.outputContainerBackgroundColor#2d0b18
notebook.outputContainerBorderColor#501b2e
notebook.selectedCellBackground#451426
notebook.selectedCellBorder#5d2238
notebook.symbolHighlightBackground#45142680
notebookScrollbarSlider.background#65243c55
notebookScrollbarSlider.hoverBackground#65243c88
notebookStatusErrorIcon.foreground#e08d7c
notebookStatusRunningIcon.foreground#dfc69a
notebookStatusSuccessIcon.foreground#d69cb2
notificationCenterHeader.background#2d0b18
notificationLink.foreground#d69cb2
notifications.background#2d0b18
notifications.border#501b2e
notifications.foreground#d8c5b0
notificationToast.border#501b2e
panel.background#3b0f1f
panel.border#501b2e
panelTitle.activeBorder#8d4a63
panelTitle.activeForeground#d8c5b0
panelTitle.inactiveForeground#91777c
peekView.border#8d4a63
peekViewEditor.background#2d0b18
peekViewEditor.matchHighlightBackground#d69cb226
peekViewResult.background#2d0b18
peekViewResult.matchHighlightBackground#d69cb226
peekViewResult.selectionBackground#65243c
peekViewTitle.background#2d0b18
peekViewTitleDescription.foreground#a28c8f
peekViewTitleLabel.foreground#f7f2ea
pickerGroup.border#501b2e
pickerGroup.foreground#d69cb2
problemsErrorIcon.foreground#e08d7c
problemsInfoIcon.foreground#d69cb2
problemsWarningIcon.foreground#dfc69a
progressBar.background#d69cb2
quickInput.background#2d0b18
quickInput.foreground#d8c5b0
quickInputList.focusBackground#65243c
quickInputList.focusForeground#f7f2ea
quickInputTitle.background#2d0b18
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#65243caa
scrollbarSlider.background#65243c55
scrollbarSlider.hoverBackground#65243c88
selection.background#65243c
settings.headerForeground#f7f2ea
settings.modifiedItemIndicator#d69cb2
sideBar.background#2d0b18
sideBar.border#2d0b18
sideBar.foreground#d8c5b0
sideBarSectionHeader.background#2d0b18
sideBarSectionHeader.foreground#91777c
sideBarTitle.foreground#91777c
statusBar.background#2d0b18
statusBar.border#2d0b18
statusBar.debuggingBackground#65243c
statusBar.debuggingForeground#f7f2ea
statusBar.foreground#91777c
statusBar.noFolderBackground#2d0b18
statusBarItem.remoteBackground#65243c
statusBarItem.remoteForeground#f7f2ea
tab.activeBackground#3b0f1f
tab.activeBorder#3b0f1f
tab.activeBorderTop#3b0f1f
tab.activeForeground#91777c
tab.border#3b0f1f
tab.hoverBackground#3b0f1f
tab.hoverForeground#d8c5b0
tab.inactiveBackground#3b0f1f
tab.inactiveForeground#81636a
terminal.ansiBlack#81636a
terminal.ansiBlue#d69cb2
terminal.ansiBrightBlack#957c80
terminal.ansiBrightBlue#dfb4c2
terminal.ansiBrightCyan#f7f2ea
terminal.ansiBrightGreen#dfb4c2
terminal.ansiBrightMagenta#dfb4c2
terminal.ansiBrightRed#e6a99b
terminal.ansiBrightWhite#fffdf9
terminal.ansiBrightYellow#e6d2b0
terminal.ansiCyan#eadfce
terminal.ansiGreen#d69cb2
terminal.ansiMagenta#d69cb2
terminal.ansiRed#e08d7c
terminal.ansiWhite#f7f2ea
terminal.ansiYellow#dfc69a
terminal.background#3b0f1f
terminal.border#501b2e
terminal.foreground#eadfce
terminal.selectionBackground#65243c
terminalCursor.background#3b0f1f
terminalCursor.foreground#f7f2ea
textCodeBlock.background#2d0b18
textLink.activeForeground#e4b3c6
textLink.foreground#d69cb2
textPreformat.foreground#eadfce
titleBar.activeBackground#3b0f1f
titleBar.activeForeground#91777c
titleBar.inactiveBackground#3b0f1f
titleBar.inactiveForeground#81636a
tree.indentGuidesStroke#501b2e
walkThrough.embeddedEditorBackground#2d0b18
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a28c8f	italic
string, string.quoted, punctuation.definition.string	#d8c5b0	—
string.quoted.docstring, string.quoted.multi.python	#d8c5b0	italic
constant.numeric, constant.language, constant.character.escape, constant.other.caps, variable.other.constant	#eadfce
keyword, keyword.control, storage.type, storage.modifier	#d69cb2	italic
keyword.operator	#d8c5b0
keyword.operator.logical, keyword.operator.word	#d69cb2	italic
entity.name.function, support.function.magic, meta.function entity.name.function	#fffdf9	bold
entity.name.type, entity.name.class, entity.other.inherited-class	#fffdf9	bold
support.type, support.class	#eadfce	italic
support.function.builtin	#eadfce
entity.name.function.decorator, meta.function.decorator, punctuation.definition.decorator	#d69cb2	italic
variable.language	#d8c5b0	italic
punctuation, meta.brace	#d8c5b0	—
entity.name.tag	#d69cb2	—
entity.other.attribute-name	#eadfce	italic
support.type.property-name	#eadfce
markup.heading, entity.name.section	#fffdf9	bold
markup.italic	—	italic
markup.bold	#fffdf9	bold
markup.inline.raw, markup.fenced_code.block	#eadfce	—
markup.quote	#a28c8f	italic
markup.underline.link, string.other.link	#d69cb2	—
invalid, invalid.illegal	#e08d7c	—