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 Gruvbox

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#1d2021e6
activityBar.border#504945
activityBar.foreground#ebdbb2
activityBar.inactiveForeground#ebdbb266
activityBarBadge.background#fabd2f
activityBarBadge.foreground#000000
badge.background#fabd2f
badge.foreground#000000
breadcrumb.activeSelectionForeground#fabd2f
breadcrumb.background#1d2021
breadcrumb.focusForeground#ebdbb2
breadcrumb.foreground#ebdbb299
breadcrumbPicker.background#32302f
button.background#fabd2f
button.foreground#000000
button.hoverBackground#fabd2fcc
button.secondaryBackground#504945cc
button.secondaryForeground#ebdbb2
checkbox.background#32302f
checkbox.border#504945
checkbox.foreground#fabd2f
descriptionForeground#ebdbb2b3
diffEditor.insertedTextBackground#b8bb2626
diffEditor.removedTextBackground#fb493426
dropdown.background#32302f
dropdown.border#504945
dropdown.foreground#ebdbb2
editor.background#1d2021
editor.findMatchBackground#fabd2f66
editor.findMatchHighlightBackground#fabd2f33
editor.foreground#ebdbb2
editor.inactiveSelectionBackground#3c383680
editor.lineHighlightBackground#32302f
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#fabd2f1a
editor.selectionBackground#3c3836e6
editorBracketMatch.background#fabd2f33
editorBracketMatch.border#fabd2f
editorCursor.background#1d2021
editorCursor.foreground#fabd2f
editorError.foreground#fb4934
editorGroup.border#504945
editorGroup.dropBackground#fabd2f1a
editorGroupHeader.tabsBackground#1c1e1f
editorGroupHeader.tabsBorder#504945
editorGutter.addedBackground#b8bb26
editorGutter.background#1d2021
editorGutter.deletedBackground#fb4934
editorGutter.modifiedBackground#fabd2f
editorHint.foreground#83a598
editorHoverWidget.background#32302f
editorHoverWidget.border#504945
editorIndentGuide.activeBackground#504945cc
editorIndentGuide.background#50494566
editorInfo.foreground#83a598
editorLineNumber.activeForeground#fabd2f
editorLineNumber.foreground#ebdbb266
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#fb4934
editorOverviewRuler.infoForeground#83a598
editorOverviewRuler.warningForeground#fabd2f
editorRuler.foreground#50494580
editorSuggestWidget.background#32302f
editorSuggestWidget.border#504945
editorSuggestWidget.foreground#ebdbb2
editorSuggestWidget.highlightForeground#fabd2f
editorSuggestWidget.selectedBackground#fabd2f33
editorWarning.foreground#fabd2f
editorWhitespace.foreground#ebdbb226
editorWidget.background#1d2021fa
editorWidget.border#504945
errorForeground#fb4934
extensionButton.prominentBackground#fabd2f
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#fabd2fcc
focusBorder#fabd2f99
foreground#ebdbb2
gitDecoration.addedResourceForeground#b8bb26
gitDecoration.conflictingResourceForeground#fabd2f
gitDecoration.deletedResourceForeground#fb4934
gitDecoration.ignoredResourceForeground#ebdbb24d
gitDecoration.modifiedResourceForeground#fabd2f
gitDecoration.renamedResourceForeground#fabd2f
gitDecoration.stageDeletedResourceForeground#fb4934
gitDecoration.stageModifiedResourceForeground#fabd2f
gitDecoration.untrackedResourceForeground#b8bb26
icon.foreground#ebdbb2
input.background#32302f
input.border#504945
input.foreground#ebdbb2
input.placeholderForeground#ebdbb266
inputOption.activeBackground#fabd2f33
inputOption.activeBorder#fabd2f
inputOption.activeForeground#ebdbb2
inputValidation.errorBackground#fb49341a
inputValidation.errorBorder#fb4934
inputValidation.warningBackground#fabd2f1a
inputValidation.warningBorder#fabd2f
list.activeSelectionBackground#fabd2f40
list.activeSelectionForeground#ebdbb2
list.dropBackground#fabd2f26
list.focusBackground#fabd2f26
list.highlightForeground#fabd2f
list.hoverBackground#3c38364d
list.inactiveSelectionBackground#3c383680
list.inactiveSelectionForeground#ebdbb2
menu.background#32302f
menu.foreground#ebdbb2
menu.selectionBackground#fabd2f33
menu.selectionForeground#ebdbb2
menu.separatorBackground#504945
menubar.selectionBackground#3c383680
menubar.selectionForeground#ebdbb2
minimap.background#1d2021b3
minimap.errorHighlight#fb4934
minimap.selectionHighlight#fabd2f4d
minimap.warningHighlight#fabd2f
minimapGutter.addedBackground#b8bb26
minimapGutter.deletedBackground#fb4934
minimapGutter.modifiedBackground#fabd2f
notificationCenter.border#504945
notificationCenterHeader.background#32302f
notificationCenterHeader.foreground#ebdbb2
notifications.background#32302f
notifications.border#504945
notifications.foreground#ebdbb2
notificationsErrorIcon.foreground#fb4934
notificationsInfoIcon.foreground#83a598
notificationsWarningIcon.foreground#fabd2f
notificationToast.border#504945
panel.background#1d2021
panel.border#504945
panelTitle.activeBorder#fabd2f
panelTitle.activeForeground#ebdbb2
panelTitle.inactiveForeground#ebdbb280
peekView.border#fabd2f
peekViewEditor.background#32302fcc
peekViewEditor.matchHighlightBackground#fabd2f33
peekViewResult.background#32302f
peekViewResult.fileForeground#ebdbb2
peekViewResult.lineForeground#ebdbb2b3
peekViewResult.matchHighlightBackground#fabd2f33
peekViewResult.selectionBackground#fabd2f26
peekViewResult.selectionForeground#ebdbb2
peekViewTitle.background#fabd2f1a
peekViewTitleDescription.foreground#ebdbb2b3
peekViewTitleLabel.foreground#ebdbb2
progressBar.background#fabd2f
scrollbar.shadow#1d202180
scrollbarSlider.activeBackground#fabd2f66
scrollbarSlider.background#50494566
scrollbarSlider.hoverBackground#50494599
selection.background#fabd2f4d
settings.checkboxBackground#32302f
settings.checkboxBorder#504945
settings.dropdownBackground#32302f
settings.dropdownBorder#504945
settings.headerForeground#ebdbb2
settings.modifiedItemIndicator#fabd2f
settings.numberInputBackground#32302f
settings.numberInputBorder#504945
settings.textInputBackground#32302f
settings.textInputBorder#504945
sideBar.background#1c1f20
sideBar.border#504945
sideBar.foreground#ebdbb2
sideBarSectionHeader.background#32302f80
sideBarSectionHeader.border#504945
sideBarSectionHeader.foreground#ebdbb2
sideBarTitle.foreground#ebdbb299
statusBar.background#1d2021
statusBar.border#504945
statusBar.debuggingBackground#fe8019
statusBar.debuggingForeground#ffffff
statusBar.foreground#ebdbb2b3
statusBar.noFolderBackground#1d2021
statusBarItem.errorBackground#fb4934
statusBarItem.hoverBackground#3c383680
statusBarItem.remoteBackground#fabd2f
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#fabd2f
tab.activeBackground#1d2021
tab.activeBorder#fabd2f
tab.activeBorderTop#00000000
tab.activeForeground#ebdbb2
tab.border#504945
tab.hoverBackground#3c38364d
tab.inactiveBackground#1c1e1f
tab.inactiveForeground#ebdbb280
tab.unfocusedActiveBackground#1d2021
tab.unfocusedActiveBorder#fabd2f80
terminal.ansiBlack#000000
terminal.ansiBlue#fabd2f
terminal.ansiBrightBlack#ebdbb280
terminal.ansiBrightBlue#fabd2f
terminal.ansiBrightCyan#83a598
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#fe8019
terminal.ansiBrightRed#fb4934
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fabd2f
terminal.ansiCyan#83a598
terminal.ansiGreen#b8bb26
terminal.ansiMagenta#fe8019
terminal.ansiRed#fb4934
terminal.ansiWhite#ebdbb2
terminal.ansiYellow#fabd2f
terminal.background#1d2021
terminal.cursor.background#1d2021
terminal.cursor.foreground#fabd2f
terminal.foreground#ebdbb2
terminal.selectionBackground#3c3836b3
terminalCursor.background#1d2021
terminalCursor.foreground#fabd2f
textBlockQuote.background#282b2c
textBlockQuote.border#fabd2f99
textCodeBlock.background#343637
textPreformat.foreground#b8bb26
titleBar.activeBackground#1d2021
titleBar.activeForeground#ebdbb2
titleBar.border#504945
titleBar.inactiveBackground#1c1e1f
titleBar.inactiveForeground#ebdbb280
tree.indentGuidesStroke#50494580
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#928374	italic
string, string.quoted, string.template	#b8bb26	—
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#fb4934	—
constant.numeric, constant.language	#d3869b	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class	#fabd2f	—
entity.name.function, support.function, meta.function-call entity.name.function	#8ec07c	—
variable, variable.other, support.variable	#83a598	—
variable.parameter	#83a598e6	italic
punctuation, meta.brace	#ebdbb2b3	—
keyword.operator	#ebdbb2cc	—
entity.name.tag	#fb4934	—
entity.other.attribute-name	#fabd2f	—
support.type.property-name.css	#fabd2f	—
support.constant.property-value.css	#b8bb26	—
keyword.control.import, keyword.control.from, keyword.control.export	#fb4934	italic
meta.decorator, punctuation.decorator	#fe8019	italic
invalid, invalid.illegal	#fb4934	underline
markup.heading, entity.name.section	#fabd2f	bold
markup.bold	#fabd2f	bold
markup.italic	#fe8019	italic
markup.underline.link, string.other.link	#8ec07c	underline
markup.inline.raw, markup.inline.raw.string	#b8bb26	—
markup.fenced_code.block, markup.raw.block	#ebdbb2	—