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 Catppuccin Latte

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#eff1f5e6
activityBar.border#b0b4c8
activityBar.foreground#3d3f55
activityBar.inactiveForeground#3d3f5566
activityBarBadge.background#7c3aed
activityBarBadge.foreground#ffffff
badge.background#7c3aed
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#7c3aed
breadcrumb.background#eff1f5
breadcrumb.focusForeground#3d3f55
breadcrumb.foreground#3d3f5599
breadcrumbPicker.background#e2e5ef
button.background#7c3aed
button.foreground#ffffff
button.hoverBackground#7c3aedcc
button.secondaryBackground#b0b4c8cc
button.secondaryForeground#3d3f55
checkbox.background#e2e5ef
checkbox.border#b0b4c8
checkbox.foreground#7c3aed
descriptionForeground#3d3f55b3
diffEditor.insertedTextBackground#16653426
diffEditor.removedTextBackground#b91c1c26
dropdown.background#e2e5ef
dropdown.border#b0b4c8
dropdown.foreground#3d3f55
editor.background#eff1f5
editor.findMatchBackground#7c3aed66
editor.findMatchHighlightBackground#7c3aed33
editor.foreground#3d3f55
editor.inactiveSelectionBackground#c4c8da80
editor.lineHighlightBackground#e2e5ef
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#7c3aed1a
editor.selectionBackground#c4c8dae6
editorBracketMatch.background#7c3aed33
editorBracketMatch.border#7c3aed
editorCursor.background#eff1f5
editorCursor.foreground#7c3aed
editorError.foreground#b91c1c
editorGroup.border#b0b4c8
editorGroup.dropBackground#7c3aed1a
editorGroupHeader.tabsBackground#e5e7eb
editorGroupHeader.tabsBorder#b0b4c8
editorGutter.addedBackground#166534
editorGutter.background#eff1f5
editorGutter.deletedBackground#b91c1c
editorGutter.modifiedBackground#7c3aed
editorHint.foreground#1d4ed8
editorHoverWidget.background#e2e5ef
editorHoverWidget.border#b0b4c8
editorIndentGuide.activeBackground#b0b4c8cc
editorIndentGuide.background#b0b4c866
editorInfo.foreground#1d4ed8
editorLineNumber.activeForeground#7c3aed
editorLineNumber.foreground#3d3f5566
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#b91c1c
editorOverviewRuler.infoForeground#1d4ed8
editorOverviewRuler.warningForeground#b45309
editorRuler.foreground#b0b4c880
editorSuggestWidget.background#e2e5ef
editorSuggestWidget.border#b0b4c8
editorSuggestWidget.foreground#3d3f55
editorSuggestWidget.highlightForeground#7c3aed
editorSuggestWidget.selectedBackground#7c3aed33
editorWarning.foreground#b45309
editorWhitespace.foreground#3d3f5526
editorWidget.background#eff1f5fa
editorWidget.border#b0b4c8
errorForeground#b91c1c
extensionButton.prominentBackground#7c3aed
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#7c3aedcc
focusBorder#7c3aed99
foreground#3d3f55
gitDecoration.addedResourceForeground#114c27
gitDecoration.conflictingResourceForeground#904207
gitDecoration.deletedResourceForeground#9d1818
gitDecoration.ignoredResourceForeground#3d3f5573
gitDecoration.modifiedResourceForeground#632ebe
gitDecoration.renamedResourceForeground#632ebe
gitDecoration.stageDeletedResourceForeground#9d1818
gitDecoration.stageModifiedResourceForeground#632ebe
gitDecoration.untrackedResourceForeground#114c27
icon.foreground#3d3f55
input.background#e2e5ef
input.border#b0b4c8
input.foreground#3d3f55
input.placeholderForeground#3d3f5566
inputOption.activeBackground#7c3aed33
inputOption.activeBorder#7c3aed
inputOption.activeForeground#3d3f55
inputValidation.errorBackground#b91c1c1a
inputValidation.errorBorder#b91c1c
inputValidation.warningBackground#b453091a
inputValidation.warningBorder#b45309
list.activeSelectionBackground#7c3aed2e
list.activeSelectionForeground#37394d
list.dropBackground#7c3aed26
list.focusBackground#7c3aed1f
list.highlightForeground#7c3aed
list.hoverBackground#e3e5e9
list.inactiveSelectionBackground#dcdee1
list.inactiveSelectionForeground#3d3f55
menu.background#e8eaee
menu.foreground#3d3f55
menu.selectionBackground#7c3aed33
menu.selectionForeground#3d3f55
menu.separatorBackground#b0b4c8
menubar.selectionBackground#dcdee1
menubar.selectionForeground#3d3f55
minimap.background#eff1f5b3
minimap.errorHighlight#b91c1c
minimap.selectionHighlight#7c3aed4d
minimap.warningHighlight#b45309
minimapGutter.addedBackground#12512a
minimapGutter.deletedBackground#a71919
minimapGutter.modifiedBackground#6931c9
notificationCenter.border#b0b4c8
notificationCenterHeader.background#e2e5ef
notificationCenterHeader.foreground#3d3f55
notifications.background#e2e5ef
notifications.border#b0b4c8
notifications.foreground#3d3f55
notificationsErrorIcon.foreground#b91c1c
notificationsInfoIcon.foreground#1d4ed8
notificationsWarningIcon.foreground#b45309
notificationToast.border#b0b4c8
panel.background#eff1f5
panel.border#b0b4c8
panelTitle.activeBorder#7c3aed
panelTitle.activeForeground#3d3f55
panelTitle.inactiveForeground#3d3f5580
peekView.border#7c3aed
peekViewEditor.background#e2e5efcc
peekViewEditor.matchHighlightBackground#7c3aed33
peekViewResult.background#e2e5ef
peekViewResult.fileForeground#3d3f55
peekViewResult.lineForeground#3d3f55b3
peekViewResult.matchHighlightBackground#7c3aed33
peekViewResult.selectionBackground#7c3aed26
peekViewResult.selectionForeground#3d3f55
peekViewTitle.background#7c3aed1a
peekViewTitleDescription.foreground#3d3f55b3
peekViewTitleLabel.foreground#3d3f55
progressBar.background#7c3aed
scrollbar.shadow#eff1f580
scrollbarSlider.activeBackground#7c3aed66
scrollbarSlider.background#b0b4c866
scrollbarSlider.hoverBackground#b0b4c899
selection.background#7c3aed4d
settings.checkboxBackground#e2e5ef
settings.checkboxBorder#b0b4c8
settings.dropdownBackground#e2e5ef
settings.dropdownBorder#b0b4c8
settings.headerForeground#3d3f55
settings.modifiedItemIndicator#7c3aed
settings.numberInputBackground#e2e5ef
settings.numberInputBorder#b0b4c8
settings.textInputBackground#e2e5ef
settings.textInputBorder#b0b4c8
sideBar.background#e1e3e6
sideBar.border#b0b4c8
sideBar.foreground#3d3f55
sideBarSectionHeader.background#d7d9dd
sideBarSectionHeader.border#b0b4c8
sideBarSectionHeader.foreground#3d3f55
sideBarTitle.foreground#3d3f55bf
statusBar.background#e3e5e9
statusBar.border#b0b4c8
statusBar.debuggingBackground#1d4ed8
statusBar.debuggingForeground#ffffff
statusBar.foreground#3d3f55
statusBar.noFolderBackground#e3e5e9
statusBarItem.errorBackground#b91c1c
statusBarItem.hoverBackground#d7d9dd
statusBarItem.remoteBackground#7c3aed
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#b45309
tab.activeBackground#eff1f5
tab.activeBorder#7c3aed
tab.activeBorderTop#00000000
tab.activeForeground#3d3f55
tab.border#b0b4c8
tab.hoverBackground#e3e5e9
tab.inactiveBackground#e5e7eb
tab.inactiveForeground#3d3f5599
tab.unfocusedActiveBackground#eff1f5
tab.unfocusedActiveBorder#7c3aed80
terminal.ansiBlack#000000
terminal.ansiBlue#7c3aed
terminal.ansiBrightBlack#3d3f5580
terminal.ansiBrightBlue#7c3aed
terminal.ansiBrightCyan#1d4ed8
terminal.ansiBrightGreen#166534
terminal.ansiBrightMagenta#1d4ed8
terminal.ansiBrightRed#b91c1c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#b45309
terminal.ansiCyan#1d4ed8
terminal.ansiGreen#166534
terminal.ansiMagenta#1d4ed8
terminal.ansiRed#b91c1c
terminal.ansiWhite#3d3f55
terminal.ansiYellow#b45309
terminal.background#eff1f5
terminal.cursor.background#eff1f5
terminal.cursor.foreground#7c3aed
terminal.foreground#3d3f55
terminal.selectionBackground#c4c8dab3
terminalCursor.background#eff1f5
terminalCursor.foreground#7c3aed
textBlockQuote.background#e5e7eb
textBlockQuote.border#7c3aed99
textCodeBlock.background#dee0e4
textPreformat.foreground#114c27
titleBar.activeBackground#e5e7eb
titleBar.activeForeground#3d3f55
titleBar.border#b0b4c8
titleBar.inactiveBackground#dee0e4
titleBar.inactiveForeground#3d3f5580
tree.indentGuidesStroke#cbcdd0
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7c7f9e	italic
string, string.quoted, string.template	#166534	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#7c3aed	—
constant.numeric, constant.language	#c2410c	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#0e7490	—
entity.name.function, support.function, meta.function-call entity.name.function	#1d4ed8	—
variable, variable.other, support.variable	#3d3f55	—
variable.parameter	#3d3f55e6	italic
punctuation, meta.brace	#3d3f55b3	—
keyword.operator	#3d3f55cc	—
entity.name.tag	#7c3aed	—
entity.other.attribute-name	#7c3aed	—
support.type.property-name.css	#7c3aed	—
support.constant.property-value.css	#166534	—
keyword.control.import, keyword.control.from, keyword.control.export	#7c3aed	italic
meta.decorator, punctuation.decorator	#1d4ed8	italic
invalid, invalid.illegal	#b91c1c	underline
markup.heading, entity.name.section	#7c3aed	bold
markup.bold	#0e7490	bold
markup.italic	#1d4ed8	italic
markup.underline.link, string.other.link	#1d4ed8	underline
markup.inline.raw, markup.inline.raw.string	#114c27	—
markup.fenced_code.block, markup.raw.block	#3a3c51	—