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 One

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#fafafae6
activityBar.border#cacaca
activityBar.foreground#282c33
activityBar.inactiveForeground#282c3366
activityBarBadge.background#2c64d6
activityBarBadge.foreground#ffffff
badge.background#2c64d6
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2c64d6
breadcrumb.background#fafafa
breadcrumb.focusForeground#282c33
breadcrumb.foreground#282c3399
breadcrumbPicker.background#f0f0f0
button.background#2c64d6
button.foreground#ffffff
button.hoverBackground#2c64d6cc
button.secondaryBackground#cacacacc
button.secondaryForeground#282c33
checkbox.background#f0f0f0
checkbox.border#cacaca
checkbox.foreground#2c64d6
descriptionForeground#282c33b3
diffEditor.insertedTextBackground#3d8a3d26
diffEditor.removedTextBackground#c0392b26
dropdown.background#f0f0f0
dropdown.border#cacaca
dropdown.foreground#282c33
editor.background#fafafa
editor.findMatchBackground#2c64d666
editor.findMatchHighlightBackground#2c64d633
editor.foreground#282c33
editor.inactiveSelectionBackground#d2dff780
editor.lineHighlightBackground#f0f0f0
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#2c64d61a
editor.selectionBackground#d2dff7e6
editorBracketMatch.background#2c64d633
editorBracketMatch.border#2c64d6
editorCursor.background#fafafa
editorCursor.foreground#2c64d6
editorError.foreground#c0392b
editorGroup.border#cacaca
editorGroup.dropBackground#2c64d61a
editorGroupHeader.tabsBackground#f0f0f0
editorGroupHeader.tabsBorder#cacaca
editorGutter.addedBackground#3d8a3d
editorGutter.background#fafafa
editorGutter.deletedBackground#c0392b
editorGutter.modifiedBackground#2c64d6
editorHint.foreground#2c64d6
editorHoverWidget.background#f0f0f0
editorHoverWidget.border#cacaca
editorIndentGuide.activeBackground#cacacacc
editorIndentGuide.background#cacaca66
editorInfo.foreground#2c64d6
editorLineNumber.activeForeground#2c64d6
editorLineNumber.foreground#282c3366
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#c0392b
editorOverviewRuler.infoForeground#2c64d6
editorOverviewRuler.warningForeground#8a5c00
editorRuler.foreground#cacaca80
editorSuggestWidget.background#f0f0f0
editorSuggestWidget.border#cacaca
editorSuggestWidget.foreground#282c33
editorSuggestWidget.highlightForeground#2c64d6
editorSuggestWidget.selectedBackground#2c64d633
editorWarning.foreground#8a5c00
editorWhitespace.foreground#282c3326
editorWidget.background#fafafafa
editorWidget.border#cacaca
errorForeground#c0392b
extensionButton.prominentBackground#2c64d6
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#2c64d6cc
focusBorder#2c64d699
foreground#282c33
gitDecoration.addedResourceForeground#2e682e
gitDecoration.conflictingResourceForeground#6e4a00
gitDecoration.deletedResourceForeground#a33025
gitDecoration.ignoredResourceForeground#282c3373
gitDecoration.modifiedResourceForeground#2350ab
gitDecoration.renamedResourceForeground#2350ab
gitDecoration.stageDeletedResourceForeground#a33025
gitDecoration.stageModifiedResourceForeground#2350ab
gitDecoration.untrackedResourceForeground#2e682e
icon.foreground#282c33
input.background#f0f0f0
input.border#cacaca
input.foreground#282c33
input.placeholderForeground#282c3366
inputOption.activeBackground#2c64d633
inputOption.activeBorder#2c64d6
inputOption.activeForeground#282c33
inputValidation.errorBackground#c0392b1a
inputValidation.errorBorder#c0392b
inputValidation.warningBackground#8a5c001a
inputValidation.warningBorder#8a5c00
list.activeSelectionBackground#2c64d62e
list.activeSelectionForeground#24282e
list.dropBackground#2c64d626
list.focusBackground#2c64d61f
list.highlightForeground#2c64d6
list.hoverBackground#eeeeee
list.inactiveSelectionBackground#e6e6e6
list.inactiveSelectionForeground#282c33
menu.background#f3f3f3
menu.foreground#282c33
menu.selectionBackground#2c64d633
menu.selectionForeground#282c33
menu.separatorBackground#cacaca
menubar.selectionBackground#e6e6e6
menubar.selectionForeground#282c33
minimap.background#fafafab3
minimap.errorHighlight#c0392b
minimap.selectionHighlight#2c64d64d
minimap.warningHighlight#8a5c00
minimapGutter.addedBackground#316e31
minimapGutter.deletedBackground#ad3327
minimapGutter.modifiedBackground#2555b6
notificationCenter.border#cacaca
notificationCenterHeader.background#f0f0f0
notificationCenterHeader.foreground#282c33
notifications.background#f0f0f0
notifications.border#cacaca
notifications.foreground#282c33
notificationsErrorIcon.foreground#c0392b
notificationsInfoIcon.foreground#2c64d6
notificationsWarningIcon.foreground#8a5c00
notificationToast.border#cacaca
panel.background#fafafa
panel.border#cacaca
panelTitle.activeBorder#2c64d6
panelTitle.activeForeground#282c33
panelTitle.inactiveForeground#282c3380
peekView.border#2c64d6
peekViewEditor.background#f0f0f0cc
peekViewEditor.matchHighlightBackground#2c64d633
peekViewResult.background#f0f0f0
peekViewResult.fileForeground#282c33
peekViewResult.lineForeground#282c33b3
peekViewResult.matchHighlightBackground#2c64d633
peekViewResult.selectionBackground#2c64d626
peekViewResult.selectionForeground#282c33
peekViewTitle.background#2c64d61a
peekViewTitleDescription.foreground#282c33b3
peekViewTitleLabel.foreground#282c33
progressBar.background#2c64d6
scrollbar.shadow#fafafa80
scrollbarSlider.activeBackground#2c64d666
scrollbarSlider.background#cacaca66
scrollbarSlider.hoverBackground#cacaca99
selection.background#2c64d64d
settings.checkboxBackground#f0f0f0
settings.checkboxBorder#cacaca
settings.dropdownBackground#f0f0f0
settings.dropdownBorder#cacaca
settings.headerForeground#282c33
settings.modifiedItemIndicator#2c64d6
settings.numberInputBackground#f0f0f0
settings.numberInputBorder#cacaca
settings.textInputBackground#f0f0f0
settings.textInputBorder#cacaca
sideBar.background#ebebeb
sideBar.border#cacaca
sideBar.foreground#282c33
sideBarSectionHeader.background#e1e1e1
sideBarSectionHeader.border#cacaca
sideBarSectionHeader.foreground#282c33
sideBarTitle.foreground#282c33bf
statusBar.background#eeeeee
statusBar.border#cacaca
statusBar.debuggingBackground#8b1ea0
statusBar.debuggingForeground#ffffff
statusBar.foreground#282c33
statusBar.noFolderBackground#eeeeee
statusBarItem.errorBackground#c0392b
statusBarItem.hoverBackground#e1e1e1
statusBarItem.remoteBackground#2c64d6
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#8a5c00
tab.activeBackground#fafafa
tab.activeBorder#2c64d6
tab.activeBorderTop#00000000
tab.activeForeground#282c33
tab.border#cacaca
tab.hoverBackground#eeeeee
tab.inactiveBackground#f0f0f0
tab.inactiveForeground#282c3399
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveBorder#2c64d680
terminal.ansiBlack#000000
terminal.ansiBlue#2c64d6
terminal.ansiBrightBlack#282c3380
terminal.ansiBrightBlue#2c64d6
terminal.ansiBrightCyan#2c64d6
terminal.ansiBrightGreen#3d8a3d
terminal.ansiBrightMagenta#8b1ea0
terminal.ansiBrightRed#c0392b
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#8a5c00
terminal.ansiCyan#2c64d6
terminal.ansiGreen#3d8a3d
terminal.ansiMagenta#8b1ea0
terminal.ansiRed#c0392b
terminal.ansiWhite#282c33
terminal.ansiYellow#8a5c00
terminal.background#fafafa
terminal.cursor.background#fafafa
terminal.cursor.foreground#2c64d6
terminal.foreground#282c33
terminal.selectionBackground#d2dff7b3
terminalCursor.background#fafafa
terminalCursor.foreground#2c64d6
textBlockQuote.background#f0f0f0
textBlockQuote.border#2c64d699
textCodeBlock.background#e8e8e8
textPreformat.foreground#2e682e
titleBar.activeBackground#f0f0f0
titleBar.activeForeground#282c33
titleBar.border#cacaca
titleBar.inactiveBackground#e8e8e8
titleBar.inactiveForeground#282c3380
tree.indentGuidesStroke#d5d5d5
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#808390	italic
string, string.quoted, string.template	#3d8a3d	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#8b1ea0	—
constant.numeric, constant.language	#7a5200	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#006b9e	—
entity.name.function, support.function, meta.function-call entity.name.function	#2c64d6	—
variable, variable.other, support.variable	#c0392b	—
variable.parameter	#c0392be6	italic
punctuation, meta.brace	#282c33b3	—
keyword.operator	#282c33cc	—
entity.name.tag	#8b1ea0	—
entity.other.attribute-name	#2c64d6	—
support.type.property-name.css	#2c64d6	—
support.constant.property-value.css	#3d8a3d	—
keyword.control.import, keyword.control.from, keyword.control.export	#8b1ea0	italic
meta.decorator, punctuation.decorator	#8b1ea0	italic
invalid, invalid.illegal	#c0392b	underline
markup.heading, entity.name.section	#2c64d6	bold
markup.bold	#006b9e	bold
markup.italic	#8b1ea0	italic
markup.underline.link, string.other.link	#2c64d6	underline
markup.inline.raw, markup.inline.raw.string	#2e682e	—
markup.fenced_code.block, markup.raw.block	#262a30	—