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 Dark Catppuccin Mocha

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...

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#1e1e2ee6
activityBar.border#45475a
activityBar.foreground#cdd6f4
activityBar.inactiveForeground#cdd6f466
activityBarBadge.background#cba6f7
activityBarBadge.foreground#000000
badge.background#cba6f7
badge.foreground#000000
breadcrumb.activeSelectionForeground#cba6f7
breadcrumb.background#1e1e2e
breadcrumb.focusForeground#cdd6f4
breadcrumb.foreground#cdd6f499
breadcrumbPicker.background#2a2b3c
button.background#cba6f7
button.foreground#000000
button.hoverBackground#cba6f7cc
button.secondaryBackground#45475acc
button.secondaryForeground#cdd6f4
checkbox.background#2a2b3c
checkbox.border#45475a
checkbox.foreground#cba6f7
descriptionForeground#cdd6f4b3
diffEditor.insertedTextBackground#a6e3a126
diffEditor.removedTextBackground#f38ba826
dropdown.background#2a2b3c
dropdown.border#45475a
dropdown.foreground#cdd6f4
editor.background#1e1e2e
editor.findMatchBackground#cba6f766
editor.findMatchHighlightBackground#cba6f733
editor.foreground#cdd6f4
editor.inactiveSelectionBackground#31324480
editor.lineHighlightBackground#2a2b3c
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#cba6f71a
editor.selectionBackground#313244e6
editorBracketMatch.background#cba6f733
editorBracketMatch.border#cba6f7
editorCursor.background#1e1e2e
editorCursor.foreground#cba6f7
editorError.foreground#f38ba8
editorGroup.border#45475a
editorGroup.dropBackground#cba6f71a
editorGroupHeader.tabsBackground#1d1d2c
editorGroupHeader.tabsBorder#45475a
editorGutter.addedBackground#a6e3a1
editorGutter.background#1e1e2e
editorGutter.deletedBackground#f38ba8
editorGutter.modifiedBackground#cba6f7
editorHint.foreground#89b4fa
editorHoverWidget.background#2a2b3c
editorHoverWidget.border#45475a
editorIndentGuide.activeBackground#45475acc
editorIndentGuide.background#45475a66
editorInfo.foreground#89b4fa
editorLineNumber.activeForeground#cba6f7
editorLineNumber.foreground#cdd6f466
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#f38ba8
editorOverviewRuler.infoForeground#89b4fa
editorOverviewRuler.warningForeground#fab387
editorRuler.foreground#45475a80
editorSuggestWidget.background#2a2b3c
editorSuggestWidget.border#45475a
editorSuggestWidget.foreground#cdd6f4
editorSuggestWidget.highlightForeground#cba6f7
editorSuggestWidget.selectedBackground#cba6f733
editorWarning.foreground#fab387
editorWhitespace.foreground#cdd6f426
editorWidget.background#1e1e2efa
editorWidget.border#45475a
errorForeground#f38ba8
extensionButton.prominentBackground#cba6f7
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#cba6f7cc
focusBorder#cba6f799
foreground#cdd6f4
gitDecoration.addedResourceForeground#a6e3a1
gitDecoration.conflictingResourceForeground#fab387
gitDecoration.deletedResourceForeground#f38ba8
gitDecoration.ignoredResourceForeground#cdd6f44d
gitDecoration.modifiedResourceForeground#cba6f7
gitDecoration.renamedResourceForeground#cba6f7
gitDecoration.stageDeletedResourceForeground#f38ba8
gitDecoration.stageModifiedResourceForeground#cba6f7
gitDecoration.untrackedResourceForeground#a6e3a1
icon.foreground#cdd6f4
input.background#2a2b3c
input.border#45475a
input.foreground#cdd6f4
input.placeholderForeground#cdd6f466
inputOption.activeBackground#cba6f733
inputOption.activeBorder#cba6f7
inputOption.activeForeground#cdd6f4
inputValidation.errorBackground#f38ba81a
inputValidation.errorBorder#f38ba8
inputValidation.warningBackground#fab3871a
inputValidation.warningBorder#fab387
list.activeSelectionBackground#cba6f740
list.activeSelectionForeground#cdd6f4
list.dropBackground#cba6f726
list.focusBackground#cba6f726
list.highlightForeground#cba6f7
list.hoverBackground#3132444d
list.inactiveSelectionBackground#31324480
list.inactiveSelectionForeground#cdd6f4
menu.background#2a2b3c
menu.foreground#cdd6f4
menu.selectionBackground#cba6f733
menu.selectionForeground#cdd6f4
menu.separatorBackground#45475a
menubar.selectionBackground#31324480
menubar.selectionForeground#cdd6f4
minimap.background#1e1e2eb3
minimap.errorHighlight#f38ba8
minimap.selectionHighlight#cba6f74d
minimap.warningHighlight#fab387
minimapGutter.addedBackground#a6e3a1
minimapGutter.deletedBackground#f38ba8
minimapGutter.modifiedBackground#cba6f7
notificationCenter.border#45475a
notificationCenterHeader.background#2a2b3c
notificationCenterHeader.foreground#cdd6f4
notifications.background#2a2b3c
notifications.border#45475a
notifications.foreground#cdd6f4
notificationsErrorIcon.foreground#f38ba8
notificationsInfoIcon.foreground#89b4fa
notificationsWarningIcon.foreground#fab387
notificationToast.border#45475a
panel.background#1e1e2e
panel.border#45475a
panelTitle.activeBorder#cba6f7
panelTitle.activeForeground#cdd6f4
panelTitle.inactiveForeground#cdd6f480
peekView.border#cba6f7
peekViewEditor.background#2a2b3ccc
peekViewEditor.matchHighlightBackground#cba6f733
peekViewResult.background#2a2b3c
peekViewResult.fileForeground#cdd6f4
peekViewResult.lineForeground#cdd6f4b3
peekViewResult.matchHighlightBackground#cba6f733
peekViewResult.selectionBackground#cba6f726
peekViewResult.selectionForeground#cdd6f4
peekViewTitle.background#cba6f71a
peekViewTitleDescription.foreground#cdd6f4b3
peekViewTitleLabel.foreground#cdd6f4
progressBar.background#cba6f7
scrollbar.shadow#1e1e2e80
scrollbarSlider.activeBackground#cba6f766
scrollbarSlider.background#45475a66
scrollbarSlider.hoverBackground#45475a99
selection.background#cba6f74d
settings.checkboxBackground#2a2b3c
settings.checkboxBorder#45475a
settings.dropdownBackground#2a2b3c
settings.dropdownBorder#45475a
settings.headerForeground#cdd6f4
settings.modifiedItemIndicator#cba6f7
settings.numberInputBackground#2a2b3c
settings.numberInputBorder#45475a
settings.textInputBackground#2a2b3c
settings.textInputBorder#45475a
sideBar.background#1d1d2d
sideBar.border#45475a
sideBar.foreground#cdd6f4
sideBarSectionHeader.background#2a2b3c80
sideBarSectionHeader.border#45475a
sideBarSectionHeader.foreground#cdd6f4
sideBarTitle.foreground#cdd6f499
statusBar.background#1e1e2e
statusBar.border#45475a
statusBar.debuggingBackground#89b4fa
statusBar.debuggingForeground#ffffff
statusBar.foreground#cdd6f4b3
statusBar.noFolderBackground#1e1e2e
statusBarItem.errorBackground#f38ba8
statusBarItem.hoverBackground#31324480
statusBarItem.remoteBackground#cba6f7
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#fab387
tab.activeBackground#1e1e2e
tab.activeBorder#cba6f7
tab.activeBorderTop#00000000
tab.activeForeground#cdd6f4
tab.border#45475a
tab.hoverBackground#3132444d
tab.inactiveBackground#1d1d2c
tab.inactiveForeground#cdd6f480
tab.unfocusedActiveBackground#1e1e2e
tab.unfocusedActiveBorder#cba6f780
terminal.ansiBlack#000000
terminal.ansiBlue#cba6f7
terminal.ansiBrightBlack#cdd6f480
terminal.ansiBrightBlue#cba6f7
terminal.ansiBrightCyan#89b4fa
terminal.ansiBrightGreen#a6e3a1
terminal.ansiBrightMagenta#89b4fa
terminal.ansiBrightRed#f38ba8
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fab387
terminal.ansiCyan#89b4fa
terminal.ansiGreen#a6e3a1
terminal.ansiMagenta#89b4fa
terminal.ansiRed#f38ba8
terminal.ansiWhite#cdd6f4
terminal.ansiYellow#fab387
terminal.background#1e1e2e
terminal.cursor.background#1e1e2e
terminal.cursor.foreground#cba6f7
terminal.foreground#cdd6f4
terminal.selectionBackground#313244b3
terminalCursor.background#1e1e2e
terminalCursor.foreground#cba6f7
textBlockQuote.background#292938
textBlockQuote.border#cba6f799
textCodeBlock.background#353543
textPreformat.foreground#a6e3a1
titleBar.activeBackground#1e1e2e
titleBar.activeForeground#cdd6f4
titleBar.border#45475a
titleBar.inactiveBackground#1d1d2c
titleBar.inactiveForeground#cdd6f480
tree.indentGuidesStroke#45475a80
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6c7086	italic
string, string.quoted, string.template	#a6e3a1	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#cba6f7	—
constant.numeric, constant.language	#fab387	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#89dceb	—
entity.name.function, support.function, meta.function-call entity.name.function	#89b4fa	—
variable, variable.other, support.variable	#cdd6f4	—
variable.parameter	#cdd6f4e6	italic
punctuation, meta.brace	#cdd6f4b3	—
keyword.operator	#cdd6f4cc	—
entity.name.tag	#cba6f7	—
entity.other.attribute-name	#cba6f7	—
support.type.property-name.css	#cba6f7	—
support.constant.property-value.css	#a6e3a1	—
keyword.control.import, keyword.control.from, keyword.control.export	#cba6f7	italic
meta.decorator, punctuation.decorator	#89b4fa	italic
invalid, invalid.illegal	#f38ba8	underline
markup.heading, entity.name.section	#cba6f7	bold
markup.bold	#89dceb	bold
markup.italic	#89b4fa	italic
markup.underline.link, string.other.link	#89b4fa	underline
markup.inline.raw, markup.inline.raw.string	#a6e3a1	—
markup.fenced_code.block, markup.raw.block	#cdd6f4	—