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 GitHub

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#ffffffe6
activityBar.border#c8ccd0
activityBar.foreground#1f2328
activityBar.inactiveForeground#1f232866
activityBarBadge.background#0550ae
activityBarBadge.foreground#ffffff
badge.background#0550ae
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#0550ae
breadcrumb.background#ffffff
breadcrumb.focusForeground#1f2328
breadcrumb.foreground#1f232899
breadcrumbPicker.background#f0f4f8
button.background#0550ae
button.foreground#ffffff
button.hoverBackground#0550aecc
button.secondaryBackground#c8ccd0cc
button.secondaryForeground#1f2328
checkbox.background#f0f4f8
checkbox.border#c8ccd0
checkbox.foreground#0550ae
descriptionForeground#1f2328b3
diffEditor.insertedTextBackground#11632926
diffEditor.removedTextBackground#b91c1c26
dropdown.background#f0f4f8
dropdown.border#c8ccd0
dropdown.foreground#1f2328
editor.background#ffffff
editor.findMatchBackground#0550ae66
editor.findMatchHighlightBackground#0550ae33
editor.foreground#1f2328
editor.inactiveSelectionBackground#b6d4fb80
editor.lineHighlightBackground#f0f4f8
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#0550ae1a
editor.selectionBackground#b6d4fbe6
editorBracketMatch.background#0550ae33
editorBracketMatch.border#0550ae
editorCursor.background#ffffff
editorCursor.foreground#0550ae
editorError.foreground#b91c1c
editorGroup.border#c8ccd0
editorGroup.dropBackground#0550ae1a
editorGroupHeader.tabsBackground#f5f5f5
editorGroupHeader.tabsBorder#c8ccd0
editorGutter.addedBackground#116329
editorGutter.background#ffffff
editorGutter.deletedBackground#b91c1c
editorGutter.modifiedBackground#0550ae
editorHint.foreground#0550ae
editorHoverWidget.background#f0f4f8
editorHoverWidget.border#c8ccd0
editorIndentGuide.activeBackground#c8ccd0cc
editorIndentGuide.background#c8ccd066
editorInfo.foreground#0550ae
editorLineNumber.activeForeground#0550ae
editorLineNumber.foreground#1f232866
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#b91c1c
editorOverviewRuler.infoForeground#0550ae
editorOverviewRuler.warningForeground#854d0e
editorRuler.foreground#c8ccd080
editorSuggestWidget.background#f0f4f8
editorSuggestWidget.border#c8ccd0
editorSuggestWidget.foreground#1f2328
editorSuggestWidget.highlightForeground#0550ae
editorSuggestWidget.selectedBackground#0550ae33
editorWarning.foreground#854d0e
editorWhitespace.foreground#1f232826
editorWidget.background#fffffffa
editorWidget.border#c8ccd0
errorForeground#b91c1c
extensionButton.prominentBackground#0550ae
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#0550aecc
focusBorder#0550ae99
foreground#1f2328
gitDecoration.addedResourceForeground#0d4a1f
gitDecoration.conflictingResourceForeground#6a3e0b
gitDecoration.deletedResourceForeground#9d1818
gitDecoration.ignoredResourceForeground#1f232873
gitDecoration.modifiedResourceForeground#04408b
gitDecoration.renamedResourceForeground#04408b
gitDecoration.stageDeletedResourceForeground#9d1818
gitDecoration.stageModifiedResourceForeground#04408b
gitDecoration.untrackedResourceForeground#0d4a1f
icon.foreground#1f2328
input.background#f0f4f8
input.border#c8ccd0
input.foreground#1f2328
input.placeholderForeground#1f232866
inputOption.activeBackground#0550ae33
inputOption.activeBorder#0550ae
inputOption.activeForeground#1f2328
inputValidation.errorBackground#b91c1c1a
inputValidation.errorBorder#b91c1c
inputValidation.warningBackground#854d0e1a
inputValidation.warningBorder#854d0e
list.activeSelectionBackground#0550ae2e
list.activeSelectionForeground#1c2024
list.dropBackground#0550ae26
list.focusBackground#0550ae1f
list.highlightForeground#0550ae
list.hoverBackground#f2f2f2
list.inactiveSelectionBackground#ebebeb
list.inactiveSelectionForeground#1f2328
menu.background#f7f7f7
menu.foreground#1f2328
menu.selectionBackground#0550ae33
menu.selectionForeground#1f2328
menu.separatorBackground#c8ccd0
menubar.selectionBackground#ebebeb
menubar.selectionForeground#1f2328
minimap.background#ffffffb3
minimap.errorHighlight#b91c1c
minimap.selectionHighlight#0550ae4d
minimap.warningHighlight#854d0e
minimapGutter.addedBackground#0e4f21
minimapGutter.deletedBackground#a71919
minimapGutter.modifiedBackground#044494
notificationCenter.border#c8ccd0
notificationCenterHeader.background#f0f4f8
notificationCenterHeader.foreground#1f2328
notifications.background#f0f4f8
notifications.border#c8ccd0
notifications.foreground#1f2328
notificationsErrorIcon.foreground#b91c1c
notificationsInfoIcon.foreground#0550ae
notificationsWarningIcon.foreground#854d0e
notificationToast.border#c8ccd0
panel.background#ffffff
panel.border#c8ccd0
panelTitle.activeBorder#0550ae
panelTitle.activeForeground#1f2328
panelTitle.inactiveForeground#1f232880
peekView.border#0550ae
peekViewEditor.background#f0f4f8cc
peekViewEditor.matchHighlightBackground#0550ae33
peekViewResult.background#f0f4f8
peekViewResult.fileForeground#1f2328
peekViewResult.lineForeground#1f2328b3
peekViewResult.matchHighlightBackground#0550ae33
peekViewResult.selectionBackground#0550ae26
peekViewResult.selectionForeground#1f2328
peekViewTitle.background#0550ae1a
peekViewTitleDescription.foreground#1f2328b3
peekViewTitleLabel.foreground#1f2328
progressBar.background#0550ae
scrollbar.shadow#ffffff80
scrollbarSlider.activeBackground#0550ae66
scrollbarSlider.background#c8ccd066
scrollbarSlider.hoverBackground#c8ccd099
selection.background#0550ae4d
settings.checkboxBackground#f0f4f8
settings.checkboxBorder#c8ccd0
settings.dropdownBackground#f0f4f8
settings.dropdownBorder#c8ccd0
settings.headerForeground#1f2328
settings.modifiedItemIndicator#0550ae
settings.numberInputBackground#f0f4f8
settings.numberInputBorder#c8ccd0
settings.textInputBackground#f0f4f8
settings.textInputBorder#c8ccd0
sideBar.background#f0f0f0
sideBar.border#c8ccd0
sideBar.foreground#1f2328
sideBarSectionHeader.background#e6e6e6
sideBarSectionHeader.border#c8ccd0
sideBarSectionHeader.foreground#1f2328
sideBarTitle.foreground#1f2328bf
statusBar.background#f2f2f2
statusBar.border#c8ccd0
statusBar.debuggingBackground#6639ba
statusBar.debuggingForeground#ffffff
statusBar.foreground#1f2328
statusBar.noFolderBackground#f2f2f2
statusBarItem.errorBackground#b91c1c
statusBarItem.hoverBackground#e6e6e6
statusBarItem.remoteBackground#0550ae
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#854d0e
tab.activeBackground#ffffff
tab.activeBorder#0550ae
tab.activeBorderTop#00000000
tab.activeForeground#1f2328
tab.border#c8ccd0
tab.hoverBackground#f2f2f2
tab.inactiveBackground#f5f5f5
tab.inactiveForeground#1f232899
tab.unfocusedActiveBackground#ffffff
tab.unfocusedActiveBorder#0550ae80
terminal.ansiBlack#000000
terminal.ansiBlue#0550ae
terminal.ansiBrightBlack#1f232880
terminal.ansiBrightBlue#0550ae
terminal.ansiBrightCyan#0550ae
terminal.ansiBrightGreen#116329
terminal.ansiBrightMagenta#6639ba
terminal.ansiBrightRed#b91c1c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#854d0e
terminal.ansiCyan#0550ae
terminal.ansiGreen#116329
terminal.ansiMagenta#6639ba
terminal.ansiRed#b91c1c
terminal.ansiWhite#1f2328
terminal.ansiYellow#854d0e
terminal.background#ffffff
terminal.cursor.background#ffffff
terminal.cursor.foreground#0550ae
terminal.foreground#1f2328
terminal.selectionBackground#b6d4fbb3
terminalCursor.background#ffffff
terminalCursor.foreground#0550ae
textBlockQuote.background#f5f5f5
textBlockQuote.border#0550ae99
textCodeBlock.background#ededed
textPreformat.foreground#02234a
titleBar.activeBackground#f5f5f5
titleBar.activeForeground#1f2328
titleBar.border#c8ccd0
titleBar.inactiveBackground#ededed
titleBar.inactiveForeground#1f232880
tree.indentGuidesStroke#d9d9d9
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#505a64	italic
string, string.quoted, string.template	#032f62	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#b91c1c	—
constant.numeric, constant.language	#0550ae	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#7c2d12	—
entity.name.function, support.function, meta.function-call entity.name.function	#6639ba	—
variable, variable.other, support.variable	#1f2328	—
variable.parameter	#1f2328e6	italic
punctuation, meta.brace	#1f2328b3	—
keyword.operator	#1f2328cc	—
entity.name.tag	#b91c1c	—
entity.other.attribute-name	#0550ae	—
support.type.property-name.css	#0550ae	—
support.constant.property-value.css	#032f62	—
keyword.control.import, keyword.control.from, keyword.control.export	#b91c1c	italic
meta.decorator, punctuation.decorator	#6639ba	italic
invalid, invalid.illegal	#b91c1c	underline
markup.heading, entity.name.section	#0550ae	bold
markup.bold	#7c2d12	bold
markup.italic	#6639ba	italic
markup.underline.link, string.other.link	#6639ba	underline
markup.inline.raw, markup.inline.raw.string	#02234a	—
markup.fenced_code.block, markup.raw.block	#1d2126	—