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 Tokyo Night

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#1a1b2ee6
activityBar.border#3b4261
activityBar.foreground#c0caf5
activityBar.inactiveForeground#c0caf566
activityBarBadge.background#7aa2f7
activityBarBadge.foreground#000000
badge.background#7aa2f7
badge.foreground#000000
breadcrumb.activeSelectionForeground#7aa2f7
breadcrumb.background#1a1b2e
breadcrumb.focusForeground#c0caf5
breadcrumb.foreground#c0caf599
breadcrumbPicker.background#1f2335
button.background#7aa2f7
button.foreground#000000
button.hoverBackground#7aa2f7cc
button.secondaryBackground#3b4261cc
button.secondaryForeground#c0caf5
checkbox.background#1f2335
checkbox.border#3b4261
checkbox.foreground#7aa2f7
descriptionForeground#c0caf5b3
diffEditor.insertedTextBackground#9ece6a26
diffEditor.removedTextBackground#f7768e26
dropdown.background#1f2335
dropdown.border#3b4261
dropdown.foreground#c0caf5
editor.background#1a1b2e
editor.findMatchBackground#7aa2f766
editor.findMatchHighlightBackground#7aa2f733
editor.foreground#c0caf5
editor.inactiveSelectionBackground#28345780
editor.lineHighlightBackground#1f2335
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#7aa2f71a
editor.selectionBackground#283457e6
editorBracketMatch.background#7aa2f733
editorBracketMatch.border#7aa2f7
editorCursor.background#1a1b2e
editorCursor.foreground#7aa2f7
editorError.foreground#f7768e
editorGroup.border#3b4261
editorGroup.dropBackground#7aa2f71a
editorGroupHeader.tabsBackground#191a2c
editorGroupHeader.tabsBorder#3b4261
editorGutter.addedBackground#9ece6a
editorGutter.background#1a1b2e
editorGutter.deletedBackground#f7768e
editorGutter.modifiedBackground#7aa2f7
editorHint.foreground#7aa2f7
editorHoverWidget.background#1f2335
editorHoverWidget.border#3b4261
editorIndentGuide.activeBackground#3b4261cc
editorIndentGuide.background#3b426166
editorInfo.foreground#7aa2f7
editorLineNumber.activeForeground#7aa2f7
editorLineNumber.foreground#c0caf566
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.infoForeground#7aa2f7
editorOverviewRuler.warningForeground#ff9e64
editorRuler.foreground#3b426180
editorSuggestWidget.background#1f2335
editorSuggestWidget.border#3b4261
editorSuggestWidget.foreground#c0caf5
editorSuggestWidget.highlightForeground#7aa2f7
editorSuggestWidget.selectedBackground#7aa2f733
editorWarning.foreground#ff9e64
editorWhitespace.foreground#c0caf526
editorWidget.background#1a1b2efa
editorWidget.border#3b4261
errorForeground#f7768e
extensionButton.prominentBackground#7aa2f7
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#7aa2f7cc
focusBorder#7aa2f799
foreground#c0caf5
gitDecoration.addedResourceForeground#9ece6a
gitDecoration.conflictingResourceForeground#ff9e64
gitDecoration.deletedResourceForeground#f7768e
gitDecoration.ignoredResourceForeground#c0caf54d
gitDecoration.modifiedResourceForeground#7aa2f7
gitDecoration.renamedResourceForeground#7aa2f7
gitDecoration.stageDeletedResourceForeground#f7768e
gitDecoration.stageModifiedResourceForeground#7aa2f7
gitDecoration.untrackedResourceForeground#9ece6a
icon.foreground#c0caf5
input.background#1f2335
input.border#3b4261
input.foreground#c0caf5
input.placeholderForeground#c0caf566
inputOption.activeBackground#7aa2f733
inputOption.activeBorder#7aa2f7
inputOption.activeForeground#c0caf5
inputValidation.errorBackground#f7768e1a
inputValidation.errorBorder#f7768e
inputValidation.warningBackground#ff9e641a
inputValidation.warningBorder#ff9e64
list.activeSelectionBackground#7aa2f740
list.activeSelectionForeground#c0caf5
list.dropBackground#7aa2f726
list.focusBackground#7aa2f726
list.highlightForeground#7aa2f7
list.hoverBackground#2834574d
list.inactiveSelectionBackground#28345780
list.inactiveSelectionForeground#c0caf5
menu.background#1f2335
menu.foreground#c0caf5
menu.selectionBackground#7aa2f733
menu.selectionForeground#c0caf5
menu.separatorBackground#3b4261
menubar.selectionBackground#28345780
menubar.selectionForeground#c0caf5
minimap.background#1a1b2eb3
minimap.errorHighlight#f7768e
minimap.selectionHighlight#7aa2f74d
minimap.warningHighlight#ff9e64
minimapGutter.addedBackground#9ece6a
minimapGutter.deletedBackground#f7768e
minimapGutter.modifiedBackground#7aa2f7
notificationCenter.border#3b4261
notificationCenterHeader.background#1f2335
notificationCenterHeader.foreground#c0caf5
notifications.background#1f2335
notifications.border#3b4261
notifications.foreground#c0caf5
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#7aa2f7
notificationsWarningIcon.foreground#ff9e64
notificationToast.border#3b4261
panel.background#1a1b2e
panel.border#3b4261
panelTitle.activeBorder#7aa2f7
panelTitle.activeForeground#c0caf5
panelTitle.inactiveForeground#c0caf580
peekView.border#7aa2f7
peekViewEditor.background#1f2335cc
peekViewEditor.matchHighlightBackground#7aa2f733
peekViewResult.background#1f2335
peekViewResult.fileForeground#c0caf5
peekViewResult.lineForeground#c0caf5b3
peekViewResult.matchHighlightBackground#7aa2f733
peekViewResult.selectionBackground#7aa2f726
peekViewResult.selectionForeground#c0caf5
peekViewTitle.background#7aa2f71a
peekViewTitleDescription.foreground#c0caf5b3
peekViewTitleLabel.foreground#c0caf5
progressBar.background#7aa2f7
scrollbar.shadow#1a1b2e80
scrollbarSlider.activeBackground#7aa2f766
scrollbarSlider.background#3b426166
scrollbarSlider.hoverBackground#3b426199
selection.background#7aa2f74d
settings.checkboxBackground#1f2335
settings.checkboxBorder#3b4261
settings.dropdownBackground#1f2335
settings.dropdownBorder#3b4261
settings.headerForeground#c0caf5
settings.modifiedItemIndicator#7aa2f7
settings.numberInputBackground#1f2335
settings.numberInputBorder#3b4261
settings.textInputBackground#1f2335
settings.textInputBorder#3b4261
sideBar.background#191a2d
sideBar.border#3b4261
sideBar.foreground#c0caf5
sideBarSectionHeader.background#1f233580
sideBarSectionHeader.border#3b4261
sideBarSectionHeader.foreground#c0caf5
sideBarTitle.foreground#c0caf599
statusBar.background#1a1b2e
statusBar.border#3b4261
statusBar.debuggingBackground#bb9af7
statusBar.debuggingForeground#ffffff
statusBar.foreground#c0caf5b3
statusBar.noFolderBackground#1a1b2e
statusBarItem.errorBackground#f7768e
statusBarItem.hoverBackground#28345780
statusBarItem.remoteBackground#7aa2f7
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#ff9e64
tab.activeBackground#1a1b2e
tab.activeBorder#7aa2f7
tab.activeBorderTop#00000000
tab.activeForeground#c0caf5
tab.border#3b4261
tab.hoverBackground#2834574d
tab.inactiveBackground#191a2c
tab.inactiveForeground#c0caf580
tab.unfocusedActiveBackground#1a1b2e
tab.unfocusedActiveBorder#7aa2f780
terminal.ansiBlack#000000
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#c0caf580
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#7aa2f7
terminal.ansiBrightGreen#9ece6a
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ff9e64
terminal.ansiCyan#7aa2f7
terminal.ansiGreen#9ece6a
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#c0caf5
terminal.ansiYellow#ff9e64
terminal.background#1a1b2e
terminal.cursor.background#1a1b2e
terminal.cursor.foreground#7aa2f7
terminal.foreground#c0caf5
terminal.selectionBackground#283457b3
terminalCursor.background#1a1b2e
terminalCursor.foreground#7aa2f7
textBlockQuote.background#252638
textBlockQuote.border#7aa2f799
textCodeBlock.background#313243
textPreformat.foreground#9ece6a
titleBar.activeBackground#1a1b2e
titleBar.activeForeground#c0caf5
titleBar.border#3b4261
titleBar.inactiveBackground#191a2c
titleBar.inactiveForeground#c0caf580
tree.indentGuidesStroke#3b426180
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#565f89	italic
string, string.quoted, string.template	#9ece6a	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#bb9af7	—
constant.numeric, constant.language	#ff9e64	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#2ac3de	—
entity.name.function, support.function, meta.function-call entity.name.function	#7aa2f7	—
variable, variable.other, support.variable	#c0caf5	—
variable.parameter	#c0caf5e6	italic
punctuation, meta.brace	#c0caf5b3	—
keyword.operator	#c0caf5cc	—
entity.name.tag	#bb9af7	—
entity.other.attribute-name	#7aa2f7	—
support.type.property-name.css	#7aa2f7	—
support.constant.property-value.css	#9ece6a	—
keyword.control.import, keyword.control.from, keyword.control.export	#bb9af7	italic
meta.decorator, punctuation.decorator	#bb9af7	italic
invalid, invalid.illegal	#f7768e	underline
markup.heading, entity.name.section	#7aa2f7	bold
markup.bold	#2ac3de	bold
markup.italic	#bb9af7	italic
markup.underline.link, string.other.link	#7aa2f7	underline
markup.inline.raw, markup.inline.raw.string	#9ece6a	—
markup.fenced_code.block, markup.raw.block	#c0caf5	—