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 Solarized

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#fdf6e3e6
activityBar.border#cac6ae
activityBar.foreground#073642
activityBar.inactiveForeground#07364266
activityBarBadge.background#1a6ea8
activityBarBadge.foreground#ffffff
badge.background#1a6ea8
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#1a6ea8
breadcrumb.background#fdf6e3
breadcrumb.focusForeground#073642
breadcrumb.foreground#07364299
breadcrumbPicker.background#ede8d0
button.background#1a6ea8
button.foreground#ffffff
button.hoverBackground#1a6ea8cc
button.secondaryBackground#cac6aecc
button.secondaryForeground#073642
checkbox.background#ede8d0
checkbox.border#cac6ae
checkbox.foreground#1a6ea8
descriptionForeground#073642b3
diffEditor.insertedTextBackground#5c6f0026
diffEditor.removedTextBackground#b81c1c26
dropdown.background#ede8d0
dropdown.border#cac6ae
dropdown.foreground#073642
editor.background#fdf6e3
editor.findMatchBackground#1a6ea866
editor.findMatchHighlightBackground#1a6ea833
editor.foreground#073642
editor.inactiveSelectionBackground#ddd8c080
editor.lineHighlightBackground#ede8d0
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#1a6ea81a
editor.selectionBackground#ddd8c0e6
editorBracketMatch.background#1a6ea833
editorBracketMatch.border#1a6ea8
editorCursor.background#fdf6e3
editorCursor.foreground#1a6ea8
editorError.foreground#b81c1c
editorGroup.border#cac6ae
editorGroup.dropBackground#1a6ea81a
editorGroupHeader.tabsBackground#f3ecda
editorGroupHeader.tabsBorder#cac6ae
editorGutter.addedBackground#5c6f00
editorGutter.background#fdf6e3
editorGutter.deletedBackground#b81c1c
editorGutter.modifiedBackground#1a6ea8
editorHint.foreground#1a6ea8
editorHoverWidget.background#ede8d0
editorHoverWidget.border#cac6ae
editorIndentGuide.activeBackground#cac6aecc
editorIndentGuide.background#cac6ae66
editorInfo.foreground#1a6ea8
editorLineNumber.activeForeground#1a6ea8
editorLineNumber.foreground#07364266
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#b81c1c
editorOverviewRuler.infoForeground#1a6ea8
editorOverviewRuler.warningForeground#8a6500
editorRuler.foreground#cac6ae80
editorSuggestWidget.background#ede8d0
editorSuggestWidget.border#cac6ae
editorSuggestWidget.foreground#073642
editorSuggestWidget.highlightForeground#1a6ea8
editorSuggestWidget.selectedBackground#1a6ea833
editorWarning.foreground#8a6500
editorWhitespace.foreground#07364226
editorWidget.background#fdf6e3fa
editorWidget.border#cac6ae
errorForeground#b81c1c
extensionButton.prominentBackground#1a6ea8
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#1a6ea8cc
focusBorder#1a6ea899
foreground#073642
gitDecoration.addedResourceForeground#455300
gitDecoration.conflictingResourceForeground#6e5100
gitDecoration.deletedResourceForeground#9c1818
gitDecoration.ignoredResourceForeground#07364273
gitDecoration.modifiedResourceForeground#155886
gitDecoration.renamedResourceForeground#155886
gitDecoration.stageDeletedResourceForeground#9c1818
gitDecoration.stageModifiedResourceForeground#155886
gitDecoration.untrackedResourceForeground#455300
icon.foreground#073642
input.background#ede8d0
input.border#cac6ae
input.foreground#073642
input.placeholderForeground#07364266
inputOption.activeBackground#1a6ea833
inputOption.activeBorder#1a6ea8
inputOption.activeForeground#073642
inputValidation.errorBackground#b81c1c1a
inputValidation.errorBorder#b81c1c
inputValidation.warningBackground#8a65001a
inputValidation.warningBorder#8a6500
list.activeSelectionBackground#1a6ea82e
list.activeSelectionForeground#06313b
list.dropBackground#1a6ea826
list.focusBackground#1a6ea81f
list.highlightForeground#1a6ea8
list.hoverBackground#f0ead8
list.inactiveSelectionBackground#e9e2d1
list.inactiveSelectionForeground#073642
menu.background#f5efdc
menu.foreground#073642
menu.selectionBackground#1a6ea833
menu.selectionForeground#073642
menu.separatorBackground#cac6ae
menubar.selectionBackground#e9e2d1
menubar.selectionForeground#073642
minimap.background#fdf6e3b3
minimap.errorHighlight#b81c1c
minimap.selectionHighlight#1a6ea84d
minimap.warningHighlight#8a6500
minimapGutter.addedBackground#4a5900
minimapGutter.deletedBackground#a61919
minimapGutter.modifiedBackground#165e8f
notificationCenter.border#cac6ae
notificationCenterHeader.background#ede8d0
notificationCenterHeader.foreground#073642
notifications.background#ede8d0
notifications.border#cac6ae
notifications.foreground#073642
notificationsErrorIcon.foreground#b81c1c
notificationsInfoIcon.foreground#1a6ea8
notificationsWarningIcon.foreground#8a6500
notificationToast.border#cac6ae
panel.background#fdf6e3
panel.border#cac6ae
panelTitle.activeBorder#1a6ea8
panelTitle.activeForeground#073642
panelTitle.inactiveForeground#07364280
peekView.border#1a6ea8
peekViewEditor.background#ede8d0cc
peekViewEditor.matchHighlightBackground#1a6ea833
peekViewResult.background#ede8d0
peekViewResult.fileForeground#073642
peekViewResult.lineForeground#073642b3
peekViewResult.matchHighlightBackground#1a6ea833
peekViewResult.selectionBackground#1a6ea826
peekViewResult.selectionForeground#073642
peekViewTitle.background#1a6ea81a
peekViewTitleDescription.foreground#073642b3
peekViewTitleLabel.foreground#073642
progressBar.background#1a6ea8
scrollbar.shadow#fdf6e380
scrollbarSlider.activeBackground#1a6ea866
scrollbarSlider.background#cac6ae66
scrollbarSlider.hoverBackground#cac6ae99
selection.background#1a6ea84d
settings.checkboxBackground#ede8d0
settings.checkboxBorder#cac6ae
settings.dropdownBackground#ede8d0
settings.dropdownBorder#cac6ae
settings.headerForeground#073642
settings.modifiedItemIndicator#1a6ea8
settings.numberInputBackground#ede8d0
settings.numberInputBorder#cac6ae
settings.textInputBackground#ede8d0
settings.textInputBorder#cac6ae
sideBar.background#eee7d5
sideBar.border#cac6ae
sideBar.foreground#073642
sideBarSectionHeader.background#e4ddcc
sideBarSectionHeader.border#cac6ae
sideBarSectionHeader.foreground#073642
sideBarTitle.foreground#073642bf
statusBar.background#f0ead8
statusBar.border#cac6ae
statusBar.debuggingBackground#a81676
statusBar.debuggingForeground#ffffff
statusBar.foreground#073642
statusBar.noFolderBackground#f0ead8
statusBarItem.errorBackground#b81c1c
statusBarItem.hoverBackground#e4ddcc
statusBarItem.remoteBackground#1a6ea8
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#8a6500
tab.activeBackground#fdf6e3
tab.activeBorder#1a6ea8
tab.activeBorderTop#00000000
tab.activeForeground#073642
tab.border#cac6ae
tab.hoverBackground#f0ead8
tab.inactiveBackground#f3ecda
tab.inactiveForeground#07364299
tab.unfocusedActiveBackground#fdf6e3
tab.unfocusedActiveBorder#1a6ea880
terminal.ansiBlack#000000
terminal.ansiBlue#1a6ea8
terminal.ansiBrightBlack#07364280
terminal.ansiBrightBlue#1a6ea8
terminal.ansiBrightCyan#1a6ea8
terminal.ansiBrightGreen#5c6f00
terminal.ansiBrightMagenta#a81676
terminal.ansiBrightRed#b81c1c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#8a6500
terminal.ansiCyan#1a6ea8
terminal.ansiGreen#5c6f00
terminal.ansiMagenta#a81676
terminal.ansiRed#b81c1c
terminal.ansiWhite#073642
terminal.ansiYellow#8a6500
terminal.background#fdf6e3
terminal.cursor.background#fdf6e3
terminal.cursor.foreground#1a6ea8
terminal.foreground#073642
terminal.selectionBackground#ddd8c0b3
terminalCursor.background#fdf6e3
terminalCursor.foreground#1a6ea8
textBlockQuote.background#f3ecda
textBlockQuote.border#1a6ea899
textCodeBlock.background#ebe5d3
textPreformat.foreground#165f5c
titleBar.activeBackground#f3ecda
titleBar.activeForeground#073642
titleBar.border#cac6ae
titleBar.inactiveBackground#ebe5d3
titleBar.inactiveForeground#07364280
tree.indentGuidesStroke#d7d1c1
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#708284	italic
string, string.quoted, string.template	#1d7f7a	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#5c6f00	—
constant.numeric, constant.language	#a81676	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#8a6500	—
entity.name.function, support.function, meta.function-call entity.name.function	#1a6ea8	—
variable, variable.other, support.variable	#073642	—
variable.parameter	#073642e6	italic
punctuation, meta.brace	#073642b3	—
keyword.operator	#073642cc	—
entity.name.tag	#5c6f00	—
entity.other.attribute-name	#1a6ea8	—
support.type.property-name.css	#1a6ea8	—
support.constant.property-value.css	#1d7f7a	—
keyword.control.import, keyword.control.from, keyword.control.export	#5c6f00	italic
meta.decorator, punctuation.decorator	#a81676	italic
invalid, invalid.illegal	#b81c1c	underline
markup.heading, entity.name.section	#1a6ea8	bold
markup.bold	#8a6500	bold
markup.italic	#a81676	italic
markup.underline.link, string.other.link	#1a6ea8	underline
markup.inline.raw, markup.inline.raw.string	#165f5c	—
markup.fenced_code.block, markup.raw.block	#07333f	—