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 Dracula

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#282a36e6
activityBar.border#6272a4
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#f8f8f266
activityBarBadge.background#bd93f9
activityBarBadge.foreground#000000
badge.background#bd93f9
badge.foreground#000000
breadcrumb.activeSelectionForeground#bd93f9
breadcrumb.background#282a36
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#f8f8f299
breadcrumbPicker.background#3a3c4e
button.background#bd93f9
button.foreground#000000
button.hoverBackground#bd93f9cc
button.secondaryBackground#6272a4cc
button.secondaryForeground#f8f8f2
checkbox.background#3a3c4e
checkbox.border#6272a4
checkbox.foreground#bd93f9
descriptionForeground#f8f8f2b3
diffEditor.insertedTextBackground#50fa7b26
diffEditor.removedTextBackground#ff555526
dropdown.background#3a3c4e
dropdown.border#6272a4
dropdown.foreground#f8f8f2
editor.background#282a36
editor.findMatchBackground#bd93f966
editor.findMatchHighlightBackground#bd93f933
editor.foreground#f8f8f2
editor.inactiveSelectionBackground#44475a80
editor.lineHighlightBackground#3a3c4e
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#bd93f91a
editor.selectionBackground#44475ae6
editorBracketMatch.background#bd93f933
editorBracketMatch.border#bd93f9
editorCursor.background#282a36
editorCursor.foreground#bd93f9
editorError.foreground#ff5555
editorGroup.border#6272a4
editorGroup.dropBackground#bd93f91a
editorGroupHeader.tabsBackground#262833
editorGroupHeader.tabsBorder#6272a4
editorGutter.addedBackground#50fa7b
editorGutter.background#282a36
editorGutter.deletedBackground#ff5555
editorGutter.modifiedBackground#bd93f9
editorHint.foreground#8be9fd
editorHoverWidget.background#3a3c4e
editorHoverWidget.border#6272a4
editorIndentGuide.activeBackground#6272a4cc
editorIndentGuide.background#6272a466
editorInfo.foreground#8be9fd
editorLineNumber.activeForeground#bd93f9
editorLineNumber.foreground#f8f8f266
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#ff5555
editorOverviewRuler.infoForeground#8be9fd
editorOverviewRuler.warningForeground#ffb86c
editorRuler.foreground#6272a480
editorSuggestWidget.background#3a3c4e
editorSuggestWidget.border#6272a4
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.highlightForeground#bd93f9
editorSuggestWidget.selectedBackground#bd93f933
editorWarning.foreground#ffb86c
editorWhitespace.foreground#f8f8f226
editorWidget.background#282a36fa
editorWidget.border#6272a4
errorForeground#ff5555
extensionButton.prominentBackground#bd93f9
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#bd93f9cc
focusBorder#bd93f999
foreground#f8f8f2
gitDecoration.addedResourceForeground#50fa7b
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#f8f8f24d
gitDecoration.modifiedResourceForeground#bd93f9
gitDecoration.renamedResourceForeground#bd93f9
gitDecoration.stageDeletedResourceForeground#ff5555
gitDecoration.stageModifiedResourceForeground#bd93f9
gitDecoration.untrackedResourceForeground#50fa7b
icon.foreground#f8f8f2
input.background#3a3c4e
input.border#6272a4
input.foreground#f8f8f2
input.placeholderForeground#f8f8f266
inputOption.activeBackground#bd93f933
inputOption.activeBorder#bd93f9
inputOption.activeForeground#f8f8f2
inputValidation.errorBackground#ff55551a
inputValidation.errorBorder#ff5555
inputValidation.warningBackground#ffb86c1a
inputValidation.warningBorder#ffb86c
list.activeSelectionBackground#bd93f940
list.activeSelectionForeground#f8f8f2
list.dropBackground#bd93f926
list.focusBackground#bd93f926
list.highlightForeground#bd93f9
list.hoverBackground#44475a4d
list.inactiveSelectionBackground#44475a80
list.inactiveSelectionForeground#f8f8f2
menu.background#3a3c4e
menu.foreground#f8f8f2
menu.selectionBackground#bd93f933
menu.selectionForeground#f8f8f2
menu.separatorBackground#6272a4
menubar.selectionBackground#44475a80
menubar.selectionForeground#f8f8f2
minimap.background#282a36b3
minimap.errorHighlight#ff5555
minimap.selectionHighlight#bd93f94d
minimap.warningHighlight#ffb86c
minimapGutter.addedBackground#50fa7b
minimapGutter.deletedBackground#ff5555
minimapGutter.modifiedBackground#bd93f9
notificationCenter.border#6272a4
notificationCenterHeader.background#3a3c4e
notificationCenterHeader.foreground#f8f8f2
notifications.background#3a3c4e
notifications.border#6272a4
notifications.foreground#f8f8f2
notificationsErrorIcon.foreground#ff5555
notificationsInfoIcon.foreground#8be9fd
notificationsWarningIcon.foreground#ffb86c
notificationToast.border#6272a4
panel.background#282a36
panel.border#6272a4
panelTitle.activeBorder#bd93f9
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#f8f8f280
peekView.border#bd93f9
peekViewEditor.background#3a3c4ecc
peekViewEditor.matchHighlightBackground#bd93f933
peekViewResult.background#3a3c4e
peekViewResult.fileForeground#f8f8f2
peekViewResult.lineForeground#f8f8f2b3
peekViewResult.matchHighlightBackground#bd93f933
peekViewResult.selectionBackground#bd93f926
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#bd93f91a
peekViewTitleDescription.foreground#f8f8f2b3
peekViewTitleLabel.foreground#f8f8f2
progressBar.background#bd93f9
scrollbar.shadow#282a3680
scrollbarSlider.activeBackground#bd93f966
scrollbarSlider.background#6272a466
scrollbarSlider.hoverBackground#6272a499
selection.background#bd93f94d
settings.checkboxBackground#3a3c4e
settings.checkboxBorder#6272a4
settings.dropdownBackground#3a3c4e
settings.dropdownBorder#6272a4
settings.headerForeground#f8f8f2
settings.modifiedItemIndicator#bd93f9
settings.numberInputBackground#3a3c4e
settings.numberInputBorder#6272a4
settings.textInputBackground#3a3c4e
settings.textInputBorder#6272a4
sideBar.background#272934
sideBar.border#6272a4
sideBar.foreground#f8f8f2
sideBarSectionHeader.background#3a3c4e80
sideBarSectionHeader.border#6272a4
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f299
statusBar.background#282a36
statusBar.border#6272a4
statusBar.debuggingBackground#ff79c6
statusBar.debuggingForeground#ffffff
statusBar.foreground#f8f8f2b3
statusBar.noFolderBackground#282a36
statusBarItem.errorBackground#ff5555
statusBarItem.hoverBackground#44475a80
statusBarItem.remoteBackground#bd93f9
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#ffb86c
tab.activeBackground#282a36
tab.activeBorder#bd93f9
tab.activeBorderTop#00000000
tab.activeForeground#f8f8f2
tab.border#6272a4
tab.hoverBackground#44475a4d
tab.inactiveBackground#262833
tab.inactiveForeground#f8f8f280
tab.unfocusedActiveBackground#282a36
tab.unfocusedActiveBorder#bd93f980
terminal.ansiBlack#000000
terminal.ansiBlue#bd93f9
terminal.ansiBrightBlack#f8f8f280
terminal.ansiBrightBlue#bd93f9
terminal.ansiBrightCyan#8be9fd
terminal.ansiBrightGreen#50fa7b
terminal.ansiBrightMagenta#ff79c6
terminal.ansiBrightRed#ff5555
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb86c
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#ffb86c
terminal.background#282a36
terminal.cursor.background#282a36
terminal.cursor.foreground#bd93f9
terminal.foreground#f8f8f2
terminal.selectionBackground#44475ab3
terminalCursor.background#282a36
terminalCursor.foreground#bd93f9
textBlockQuote.background#333540
textBlockQuote.border#bd93f999
textCodeBlock.background#3e3f4a
textPreformat.foreground#f1fa8c
titleBar.activeBackground#282a36
titleBar.activeForeground#f8f8f2
titleBar.border#6272a4
titleBar.inactiveBackground#262833
titleBar.inactiveForeground#f8f8f280
tree.indentGuidesStroke#6272a480
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6272a4	italic
string, string.quoted, string.template	#f1fa8c	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#ff79c6	—
constant.numeric, constant.language	#bd93f9	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#8be9fd	—
entity.name.function, support.function, meta.function-call entity.name.function	#50fa7b	—
variable, variable.other, support.variable	#f8f8f2	—
variable.parameter	#f8f8f2e6	italic
punctuation, meta.brace	#f8f8f2b3	—
keyword.operator	#f8f8f2cc	—
entity.name.tag	#ff79c6	—
entity.other.attribute-name	#bd93f9	—
support.type.property-name.css	#bd93f9	—
support.constant.property-value.css	#f1fa8c	—
keyword.control.import, keyword.control.from, keyword.control.export	#ff79c6	italic
meta.decorator, punctuation.decorator	#ff79c6	italic
invalid, invalid.illegal	#ff5555	underline
markup.heading, entity.name.section	#bd93f9	bold
markup.bold	#8be9fd	bold
markup.italic	#ff79c6	italic
markup.underline.link, string.other.link	#50fa7b	underline
markup.inline.raw, markup.inline.raw.string	#f1fa8c	—
markup.fenced_code.block, markup.raw.block	#f8f8f2	—