XK Theme - Safe Colors & Custom Background

Name: XK Theme - Safe Colors & Custom Background
Author: x1ngkong

Publisher: x1ngkongThemes in package: 11

A VSCode & Cursor theme extension with safe color presets and custom background image support.

Open in VS Code GitHub

Color themes

VS Code preview

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

XK Theme - Safe Colors & Custom Background — XK Light Rosé Pine

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#faf4ede6
activityBar.border#c8c0b9
activityBar.foreground#3d3951
activityBar.inactiveForeground#3d395166
activityBarBadge.background#1a5f78
activityBarBadge.foreground#ffffff
badge.background#1a5f78
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#1a5f78
breadcrumb.background#faf4ed
breadcrumb.focusForeground#3d3951
breadcrumb.foreground#3d395199
breadcrumbPicker.background#f0e9e2
button.background#1a5f78
button.foreground#ffffff
button.hoverBackground#1a5f78cc
button.secondaryBackground#c8c0b9cc
button.secondaryForeground#3d3951
checkbox.background#f0e9e2
checkbox.border#c8c0b9
checkbox.foreground#1a5f78
descriptionForeground#3d3951b3
diffEditor.insertedTextBackground#3a7a8426
diffEditor.removedTextBackground#96344a26
dropdown.background#f0e9e2
dropdown.border#c8c0b9
dropdown.foreground#3d3951
editor.background#faf4ed
editor.findMatchBackground#1a5f7866
editor.findMatchHighlightBackground#1a5f7833
editor.foreground#3d3951
editor.inactiveSelectionBackground#e2d9d080
editor.lineHighlightBackground#f0e9e2
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#1a5f781a
editor.selectionBackground#e2d9d0e6
editorBracketMatch.background#1a5f7833
editorBracketMatch.border#1a5f78
editorCursor.background#faf4ed
editorCursor.foreground#1a5f78
editorError.foreground#96344a
editorGroup.border#c8c0b9
editorGroup.dropBackground#1a5f781a
editorGroupHeader.tabsBackground#f0eae4
editorGroupHeader.tabsBorder#c8c0b9
editorGutter.addedBackground#3a7a84
editorGutter.background#faf4ed
editorGutter.deletedBackground#96344a
editorGutter.modifiedBackground#1a5f78
editorHint.foreground#1a5f78
editorHoverWidget.background#f0e9e2
editorHoverWidget.border#c8c0b9
editorIndentGuide.activeBackground#c8c0b9cc
editorIndentGuide.background#c8c0b966
editorInfo.foreground#1a5f78
editorLineNumber.activeForeground#1a5f78
editorLineNumber.foreground#3d395166
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#96344a
editorOverviewRuler.infoForeground#1a5f78
editorOverviewRuler.warningForeground#b85e00
editorRuler.foreground#c8c0b980
editorSuggestWidget.background#f0e9e2
editorSuggestWidget.border#c8c0b9
editorSuggestWidget.foreground#3d3951
editorSuggestWidget.highlightForeground#1a5f78
editorSuggestWidget.selectedBackground#1a5f7833
editorWarning.foreground#b85e00
editorWhitespace.foreground#3d395126
editorWidget.background#faf4edfa
editorWidget.border#c8c0b9
errorForeground#96344a
extensionButton.prominentBackground#1a5f78
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#1a5f78cc
focusBorder#1a5f7899
foreground#3d3951
gitDecoration.addedResourceForeground#2c5c63
gitDecoration.conflictingResourceForeground#934b00
gitDecoration.deletedResourceForeground#802c3f
gitDecoration.ignoredResourceForeground#3d395173
gitDecoration.modifiedResourceForeground#154c60
gitDecoration.renamedResourceForeground#154c60
gitDecoration.stageDeletedResourceForeground#802c3f
gitDecoration.stageModifiedResourceForeground#154c60
gitDecoration.untrackedResourceForeground#2c5c63
icon.foreground#3d3951
input.background#f0e9e2
input.border#c8c0b9
input.foreground#3d3951
input.placeholderForeground#3d395166
inputOption.activeBackground#1a5f7833
inputOption.activeBorder#1a5f78
inputOption.activeForeground#3d3951
inputValidation.errorBackground#96344a1a
inputValidation.errorBorder#96344a
inputValidation.warningBackground#b85e001a
inputValidation.warningBorder#b85e00
list.activeSelectionBackground#1a5f782e
list.activeSelectionForeground#373349
list.dropBackground#1a5f7826
list.focusBackground#1a5f781f
list.highlightForeground#1a5f78
list.hoverBackground#eee8e1
list.inactiveSelectionBackground#e6e0da
list.inactiveSelectionForeground#3d3951
menu.background#f3ede6
menu.foreground#3d3951
menu.selectionBackground#1a5f7833
menu.selectionForeground#3d3951
menu.separatorBackground#c8c0b9
menubar.selectionBackground#e6e0da
menubar.selectionForeground#3d3951
minimap.background#faf4edb3
minimap.errorHighlight#96344a
minimap.selectionHighlight#1a5f784d
minimap.warningHighlight#b85e00
minimapGutter.addedBackground#2e626a
minimapGutter.deletedBackground#872f43
minimapGutter.modifiedBackground#165166
notificationCenter.border#c8c0b9
notificationCenterHeader.background#f0e9e2
notificationCenterHeader.foreground#3d3951
notifications.background#f0e9e2
notifications.border#c8c0b9
notifications.foreground#3d3951
notificationsErrorIcon.foreground#96344a
notificationsInfoIcon.foreground#1a5f78
notificationsWarningIcon.foreground#b85e00
notificationToast.border#c8c0b9
panel.background#faf4ed
panel.border#c8c0b9
panelTitle.activeBorder#1a5f78
panelTitle.activeForeground#3d3951
panelTitle.inactiveForeground#3d395180
peekView.border#1a5f78
peekViewEditor.background#f0e9e2cc
peekViewEditor.matchHighlightBackground#1a5f7833
peekViewResult.background#f0e9e2
peekViewResult.fileForeground#3d3951
peekViewResult.lineForeground#3d3951b3
peekViewResult.matchHighlightBackground#1a5f7833
peekViewResult.selectionBackground#1a5f7826
peekViewResult.selectionForeground#3d3951
peekViewTitle.background#1a5f781a
peekViewTitleDescription.foreground#3d3951b3
peekViewTitleLabel.foreground#3d3951
progressBar.background#1a5f78
scrollbar.shadow#faf4ed80
scrollbarSlider.activeBackground#1a5f7866
scrollbarSlider.background#c8c0b966
scrollbarSlider.hoverBackground#c8c0b999
selection.background#1a5f784d
settings.checkboxBackground#f0e9e2
settings.checkboxBorder#c8c0b9
settings.dropdownBackground#f0e9e2
settings.dropdownBorder#c8c0b9
settings.headerForeground#3d3951
settings.modifiedItemIndicator#1a5f78
settings.numberInputBackground#f0e9e2
settings.numberInputBorder#c8c0b9
settings.textInputBackground#f0e9e2
settings.textInputBorder#c8c0b9
sideBar.background#ebe5df
sideBar.border#c8c0b9
sideBar.foreground#3d3951
sideBarSectionHeader.background#e1dcd5
sideBarSectionHeader.border#c8c0b9
sideBarSectionHeader.foreground#3d3951
sideBarTitle.foreground#3d3951bf
statusBar.background#eee8e1
statusBar.border#c8c0b9
statusBar.debuggingBackground#b85c58
statusBar.debuggingForeground#ffffff
statusBar.foreground#3d3951
statusBar.noFolderBackground#eee8e1
statusBarItem.errorBackground#96344a
statusBarItem.hoverBackground#e1dcd5
statusBarItem.remoteBackground#1a5f78
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#b85e00
tab.activeBackground#faf4ed
tab.activeBorder#1a5f78
tab.activeBorderTop#00000000
tab.activeForeground#3d3951
tab.border#c8c0b9
tab.hoverBackground#eee8e1
tab.inactiveBackground#f0eae4
tab.inactiveForeground#3d395199
tab.unfocusedActiveBackground#faf4ed
tab.unfocusedActiveBorder#1a5f7880
terminal.ansiBlack#000000
terminal.ansiBlue#1a5f78
terminal.ansiBrightBlack#3d395180
terminal.ansiBrightBlue#1a5f78
terminal.ansiBrightCyan#1a5f78
terminal.ansiBrightGreen#3a7a84
terminal.ansiBrightMagenta#b85c58
terminal.ansiBrightRed#96344a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#b85e00
terminal.ansiCyan#1a5f78
terminal.ansiGreen#3a7a84
terminal.ansiMagenta#b85c58
terminal.ansiRed#96344a
terminal.ansiWhite#3d3951
terminal.ansiYellow#b85e00
terminal.background#faf4ed
terminal.cursor.background#faf4ed
terminal.cursor.foreground#1a5f78
terminal.foreground#3d3951
terminal.selectionBackground#e2d9d0b3
terminalCursor.background#faf4ed
terminalCursor.foreground#1a5f78
textBlockQuote.background#f0eae4
textBlockQuote.border#1a5f7899
textCodeBlock.background#e8e3dc
textPreformat.foreground#8a4700
titleBar.activeBackground#f0eae4
titleBar.activeForeground#3d3951
titleBar.border#c8c0b9
titleBar.inactiveBackground#e8e3dc
titleBar.inactiveForeground#3d395180
tree.indentGuidesStroke#d5cfc9
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7a7390	italic
string, string.quoted, string.template	#b85e00	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#1a5f78	—
constant.numeric, constant.language	#96344a	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#3a7a84	—
entity.name.function, support.function, meta.function-call entity.name.function	#b85c58	—
variable, variable.other, support.variable	#3d3951	—
variable.parameter	#3d3951e6	italic
punctuation, meta.brace	#3d3951b3	—
keyword.operator	#3d3951cc	—
entity.name.tag	#1a5f78	—
entity.other.attribute-name	#1a5f78	—
support.type.property-name.css	#1a5f78	—
support.constant.property-value.css	#b85e00	—
keyword.control.import, keyword.control.from, keyword.control.export	#1a5f78	italic
meta.decorator, punctuation.decorator	#b85c58	italic
invalid, invalid.illegal	#96344a	underline
markup.heading, entity.name.section	#1a5f78	bold
markup.bold	#3a7a84	bold
markup.italic	#b85c58	italic
markup.underline.link, string.other.link	#b85c58	underline
markup.inline.raw, markup.inline.raw.string	#8a4700	—
markup.fenced_code.block, markup.raw.block	#3a364d	—