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 Monokai Pro

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#2d2a2ee6
activityBar.border#5b5662
activityBar.foreground#fcfcfa
activityBar.inactiveForeground#fcfcfa66
activityBarBadge.background#a9dc76
activityBarBadge.foreground#000000
badge.background#a9dc76
badge.foreground#000000
breadcrumb.activeSelectionForeground#a9dc76
breadcrumb.background#2d2a2e
breadcrumb.focusForeground#fcfcfa
breadcrumb.foreground#fcfcfa99
breadcrumbPicker.background#3a3740
button.background#a9dc76
button.foreground#000000
button.hoverBackground#a9dc76cc
button.secondaryBackground#5b5662cc
button.secondaryForeground#fcfcfa
checkbox.background#3a3740
checkbox.border#5b5662
checkbox.foreground#a9dc76
descriptionForeground#fcfcfab3
diffEditor.insertedTextBackground#78dce826
diffEditor.removedTextBackground#ff618826
dropdown.background#3a3740
dropdown.border#5b5662
dropdown.foreground#fcfcfa
editor.background#2d2a2e
editor.findMatchBackground#a9dc7666
editor.findMatchHighlightBackground#a9dc7633
editor.foreground#fcfcfa
editor.inactiveSelectionBackground#423f4680
editor.lineHighlightBackground#3a3740
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#a9dc761a
editor.selectionBackground#423f46e6
editorBracketMatch.background#a9dc7633
editorBracketMatch.border#a9dc76
editorCursor.background#2d2a2e
editorCursor.foreground#a9dc76
editorError.foreground#ff6188
editorGroup.border#5b5662
editorGroup.dropBackground#a9dc761a
editorGroupHeader.tabsBackground#2b282c
editorGroupHeader.tabsBorder#5b5662
editorGutter.addedBackground#78dce8
editorGutter.background#2d2a2e
editorGutter.deletedBackground#ff6188
editorGutter.modifiedBackground#a9dc76
editorHint.foreground#78dce8
editorHoverWidget.background#3a3740
editorHoverWidget.border#5b5662
editorIndentGuide.activeBackground#5b5662cc
editorIndentGuide.background#5b566266
editorInfo.foreground#78dce8
editorLineNumber.activeForeground#a9dc76
editorLineNumber.foreground#fcfcfa66
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#ff6188
editorOverviewRuler.infoForeground#78dce8
editorOverviewRuler.warningForeground#ffd866
editorRuler.foreground#5b566280
editorSuggestWidget.background#3a3740
editorSuggestWidget.border#5b5662
editorSuggestWidget.foreground#fcfcfa
editorSuggestWidget.highlightForeground#a9dc76
editorSuggestWidget.selectedBackground#a9dc7633
editorWarning.foreground#ffd866
editorWhitespace.foreground#fcfcfa26
editorWidget.background#2d2a2efa
editorWidget.border#5b5662
errorForeground#ff6188
extensionButton.prominentBackground#a9dc76
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#a9dc76cc
focusBorder#a9dc7699
foreground#fcfcfa
gitDecoration.addedResourceForeground#78dce8
gitDecoration.conflictingResourceForeground#ffd866
gitDecoration.deletedResourceForeground#ff6188
gitDecoration.ignoredResourceForeground#fcfcfa4d
gitDecoration.modifiedResourceForeground#a9dc76
gitDecoration.renamedResourceForeground#a9dc76
gitDecoration.stageDeletedResourceForeground#ff6188
gitDecoration.stageModifiedResourceForeground#a9dc76
gitDecoration.untrackedResourceForeground#78dce8
icon.foreground#fcfcfa
input.background#3a3740
input.border#5b5662
input.foreground#fcfcfa
input.placeholderForeground#fcfcfa66
inputOption.activeBackground#a9dc7633
inputOption.activeBorder#a9dc76
inputOption.activeForeground#fcfcfa
inputValidation.errorBackground#ff61881a
inputValidation.errorBorder#ff6188
inputValidation.warningBackground#ffd8661a
inputValidation.warningBorder#ffd866
list.activeSelectionBackground#a9dc7640
list.activeSelectionForeground#fcfcfa
list.dropBackground#a9dc7626
list.focusBackground#a9dc7626
list.highlightForeground#a9dc76
list.hoverBackground#423f464d
list.inactiveSelectionBackground#423f4680
list.inactiveSelectionForeground#fcfcfa
menu.background#3a3740
menu.foreground#fcfcfa
menu.selectionBackground#a9dc7633
menu.selectionForeground#fcfcfa
menu.separatorBackground#5b5662
menubar.selectionBackground#423f4680
menubar.selectionForeground#fcfcfa
minimap.background#2d2a2eb3
minimap.errorHighlight#ff6188
minimap.selectionHighlight#a9dc764d
minimap.warningHighlight#ffd866
minimapGutter.addedBackground#78dce8
minimapGutter.deletedBackground#ff6188
minimapGutter.modifiedBackground#a9dc76
notificationCenter.border#5b5662
notificationCenterHeader.background#3a3740
notificationCenterHeader.foreground#fcfcfa
notifications.background#3a3740
notifications.border#5b5662
notifications.foreground#fcfcfa
notificationsErrorIcon.foreground#ff6188
notificationsInfoIcon.foreground#78dce8
notificationsWarningIcon.foreground#ffd866
notificationToast.border#5b5662
panel.background#2d2a2e
panel.border#5b5662
panelTitle.activeBorder#a9dc76
panelTitle.activeForeground#fcfcfa
panelTitle.inactiveForeground#fcfcfa80
peekView.border#a9dc76
peekViewEditor.background#3a3740cc
peekViewEditor.matchHighlightBackground#a9dc7633
peekViewResult.background#3a3740
peekViewResult.fileForeground#fcfcfa
peekViewResult.lineForeground#fcfcfab3
peekViewResult.matchHighlightBackground#a9dc7633
peekViewResult.selectionBackground#a9dc7626
peekViewResult.selectionForeground#fcfcfa
peekViewTitle.background#a9dc761a
peekViewTitleDescription.foreground#fcfcfab3
peekViewTitleLabel.foreground#fcfcfa
progressBar.background#a9dc76
scrollbar.shadow#2d2a2e80
scrollbarSlider.activeBackground#a9dc7666
scrollbarSlider.background#5b566266
scrollbarSlider.hoverBackground#5b566299
selection.background#a9dc764d
settings.checkboxBackground#3a3740
settings.checkboxBorder#5b5662
settings.dropdownBackground#3a3740
settings.dropdownBorder#5b5662
settings.headerForeground#fcfcfa
settings.modifiedItemIndicator#a9dc76
settings.numberInputBackground#3a3740
settings.numberInputBorder#5b5662
settings.textInputBackground#3a3740
settings.textInputBorder#5b5662
sideBar.background#2c292d
sideBar.border#5b5662
sideBar.foreground#fcfcfa
sideBarSectionHeader.background#3a374080
sideBarSectionHeader.border#5b5662
sideBarSectionHeader.foreground#fcfcfa
sideBarTitle.foreground#fcfcfa99
statusBar.background#2d2a2e
statusBar.border#5b5662
statusBar.debuggingBackground#ff6188
statusBar.debuggingForeground#ffffff
statusBar.foreground#fcfcfab3
statusBar.noFolderBackground#2d2a2e
statusBarItem.errorBackground#ff6188
statusBarItem.hoverBackground#423f4680
statusBarItem.remoteBackground#a9dc76
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#ffd866
tab.activeBackground#2d2a2e
tab.activeBorder#a9dc76
tab.activeBorderTop#00000000
tab.activeForeground#fcfcfa
tab.border#5b5662
tab.hoverBackground#423f464d
tab.inactiveBackground#2b282c
tab.inactiveForeground#fcfcfa80
tab.unfocusedActiveBackground#2d2a2e
tab.unfocusedActiveBorder#a9dc7680
terminal.ansiBlack#000000
terminal.ansiBlue#a9dc76
terminal.ansiBrightBlack#fcfcfa80
terminal.ansiBrightBlue#a9dc76
terminal.ansiBrightCyan#78dce8
terminal.ansiBrightGreen#78dce8
terminal.ansiBrightMagenta#ff6188
terminal.ansiBrightRed#ff6188
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd866
terminal.ansiCyan#78dce8
terminal.ansiGreen#78dce8
terminal.ansiMagenta#ff6188
terminal.ansiRed#ff6188
terminal.ansiWhite#fcfcfa
terminal.ansiYellow#ffd866
terminal.background#2d2a2e
terminal.cursor.background#2d2a2e
terminal.cursor.foreground#a9dc76
terminal.foreground#fcfcfa
terminal.selectionBackground#423f46b3
terminalCursor.background#2d2a2e
terminalCursor.foreground#a9dc76
textBlockQuote.background#383538
textBlockQuote.border#a9dc7699
textCodeBlock.background#423f43
textPreformat.foreground#ffd866
titleBar.activeBackground#2d2a2e
titleBar.activeForeground#fcfcfa
titleBar.border#5b5662
titleBar.inactiveBackground#2b282c
titleBar.inactiveForeground#fcfcfa80
tree.indentGuidesStroke#5b566280
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#727072	italic
string, string.quoted, string.template	#ffd866	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#ff6188	—
constant.numeric, constant.language	#ab9df2	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#78dce8	—
entity.name.function, support.function, meta.function-call entity.name.function	#a9dc76	—
variable, variable.other, support.variable	#fc9867	—
variable.parameter	#fc9867e6	italic
punctuation, meta.brace	#fcfcfab3	—
keyword.operator	#fcfcfacc	—
entity.name.tag	#ff6188	—
entity.other.attribute-name	#a9dc76	—
support.type.property-name.css	#a9dc76	—
support.constant.property-value.css	#ffd866	—
keyword.control.import, keyword.control.from, keyword.control.export	#ff6188	italic
meta.decorator, punctuation.decorator	#ff6188	italic
invalid, invalid.illegal	#ff6188	underline
markup.heading, entity.name.section	#a9dc76	bold
markup.bold	#78dce8	bold
markup.italic	#ff6188	italic
markup.underline.link, string.other.link	#a9dc76	underline
markup.inline.raw, markup.inline.raw.string	#ffd866	—
markup.fenced_code.block, markup.raw.block	#fcfcfa	—