Skip to main content
QCD Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #461d51 activityBar.activeBorder #fce566 activityBar.background #2e122e activityBar.border #000000 activityBar.foreground #c3c0b5 activityBar.inactiveForeground #c3c0b5 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #8B8772 — comment.block.documentation.c storage.type.class.doxygen.c #8B8772 — comment.block.documentation.c variable.parameter.c #8B8772 — constant.enum.member #FE61FA — constant.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}
QCD Theme — QCD Theme
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.background
#fce566
activityBarBadge.foreground #211421
badge.background #fce566
badge.foreground #211421
breadcrumb.activeSelectionForeground #fce566
breadcrumb.focusForeground #c3c0b5
breadcrumb.foreground #c3c0b5
breadcrumbPicker.background #231c27
button.background #211421
button.foreground #c3c0b5
button.hoverBackground #003f2f
button.secondaryBackground #211421
button.secondaryForeground #c3c0b5
button.secondaryHoverBackground #003f2f
checkbox.background #211421
checkbox.foreground #c3c0b5
contrastActiveBorder #ffffff00
contrastBorder #ffffff00
debugExceptionWidget.background #211421
debugExceptionWidget.border #000000
debugIcon.continueForeground #c3c0b5
debugIcon.disconnectForeground #c3c0b5
debugIcon.pauseForeground #c3c0b5
debugIcon.restartForeground #7bd88f
debugIcon.startForeground #7bd88f
debugIcon.stepBackForeground #c3c0b5
debugIcon.stepIntoForeground #c3c0b5
debugIcon.stepOutForeground #c3c0b5
debugIcon.stepOverForeground #c3c0b5
debugIcon.stopForeground #fc618d
debugToolBar.background #141014
descriptionForeground #c3c0b5
diffEditor.insertedLineBackground #7bd88f1a
diffEditor.insertedTextBackground #7bd88f33
diffEditor.insertedTextBorder #00FF0000
diffEditor.removedLineBackground #fc618d1a
diffEditor.removedTextBackground #fc618d33
diffEditor.removedTextBorder #FF000D00
diffEditorOverview.insertedForeground #7bd88f80
diffEditorOverview.removedForeground #fc618d80
dropdown.background #141014
dropdown.border #000000
dropdown.foreground #c3c0b5
editor.background #1e181e
editor.findMatchBackground #4b6153
editor.findMatchHighlightBackground #ff7b00a1
editor.findRangeHighlightBackground #211925
editor.foreground #c3c0b5
editor.hoverHighlightBackground #003f2f
editor.inactiveSelectionBackground #211925
editor.lineHighlightBackground #211925
editor.lineHighlightBorder #00000000
editor.linkedEditingBackground #211421
editor.rangeHighlightBackground #211421
editor.selectionBackground #56036b
editor.selectionHighlightBackground #494949
editor.snippetFinalTabstopHighlightBackground #6943ff62
editor.snippetFinalTabstopHighlightBorder #000000
editor.snippetTabstopHighlightBackground #6943ff62
editor.snippetTabstopHighlightBorder #000000
editor.wordHighlightBackground #c3c0b526
editor.wordHighlightStrongBackground #c3c0b526
editorBracketMatch.background #141014
editorBracketMatch.border #000000
editorCodeLens.foreground #c3c0b5
editorCursor.foreground #fce566
editorError.foreground #fc618d
editorGroup.border #000000
editorGroup.dropBackground #141014
editorGroupHeader.noTabsBackground #141014
editorGroupHeader.tabsBackground #141014
editorGroupHeader.tabsBorder #000000
editorGutter.addedBackground #7bd88f
editorGutter.background #211421
editorGutter.deletedBackground #fc618d
editorGutter.modifiedBackground #fd9353
editorHoverWidget.background #003f2f
editorHoverWidget.border #003f2f
editorIndentGuide.activeBackground1 #767771
editorIndentGuide.background1 #211421
editorInlayHint.background #00000000
editorInlayHint.foreground #4f4f4f
editorLineNumber.foreground #c3c0b5
editorLink.activeForeground #5ad4e6
editorMarkerNavigation.background #211421
editorMarkerNavigationError.background #fc618d
editorMarkerNavigationWarning.background #fd9353
editorOverviewRuler.addedForeground #7bd88f80
editorOverviewRuler.background #141014
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #14101480
editorOverviewRuler.commentDraftForeground #fce56680
editorOverviewRuler.commonContentForeground #FFC60055
editorOverviewRuler.currentContentForeground #7bd88f80
editorOverviewRuler.deletedForeground #fc618d80
editorOverviewRuler.errorForeground #fc618d80
editorOverviewRuler.findMatchForeground #ff7b00a1
editorOverviewRuler.incomingContentForeground #fc618d80
editorOverviewRuler.infoForeground #5ad4e680
editorOverviewRuler.inlineChatInserted #7bd88f80
editorOverviewRuler.inlineChatRemoved #fc618d80
editorOverviewRuler.modifiedForeground #fd935380
editorOverviewRuler.rangeHighlightForeground #211925a1
editorOverviewRuler.selectionHighlightForeground #494949a1
editorOverviewRuler.warningForeground #fd935380
editorOverviewRuler.wordHighlightForeground #c3c0b526
editorOverviewRuler.wordHighlightStrongForeground #c3c0b526
editorOverviewRuler.wordHighlightTextForeground #c3c0b526
editorRuler.foreground #c3c0b5
editorSuggestWidget.background #003f2f
editorSuggestWidget.border #211421
editorSuggestWidget.foreground #c3c0b5
editorSuggestWidget.highlightForeground #c3c0b5
editorSuggestWidget.selectedBackground #003f2f
editorWarning.border #00000000
editorWarning.foreground #fd9353
editorWhitespace.foreground #c3c0b5
editorWidget.background #211421
editorWidget.border #000000
editorWidget.foreground #c3c0b5
editorWidget.resizeBorder #000000
errorForeground #fc618d
extensionButton.prominentBackground #211421
extensionButton.prominentForeground #c3c0b5
extensionButton.prominentHoverBackground #003f2f
focusBorder #fce566
foreground #c3c0b5
gitDecoration.conflictingResourceForeground #fd9353
gitDecoration.deletedResourceForeground #fc618d
gitDecoration.ignoredResourceForeground #c3c0b5
gitDecoration.modifiedResourceForeground #fce566
gitDecoration.untrackedResourceForeground #c3c0b5
input.background #4a1a4a
input.border #000000
input.foreground #c3c0b5
input.placeholderForeground #c3c0b5
inputOption.activeBackground #003f2f
inputOption.activeBorder #000000
inputOption.activeForeground #fce566
inputOption.hoverBackground #003f2f
inputValidation.errorBackground #211421
inputValidation.errorBorder #fc618d
inputValidation.infoBackground #211421
inputValidation.infoBorder #5ad4e6
inputValidation.warningBackground #211421
inputValidation.warningBorder #fd9353
list.activeSelectionBackground #211925
list.activeSelectionForeground #fce566
list.dropBackground #141014bf
list.focusBackground #211925
list.focusForeground #fce566
list.highlightForeground #fce566
list.hoverBackground #003f2f
list.hoverForeground #c3c0b5
list.inactiveSelectionBackground #211925
list.inactiveSelectionForeground #fce566
listFilterWidget.background #141014
listFilterWidget.noMatchesOutline #fc618d
listFilterWidget.outline #141014
menu.separatorBackground #211421
merge.border #000000
merge.commonContentBackground #c3c0b519
merge.commonHeaderBackground #c3c0b526
merge.currentContentBackground #fc618d19
merge.currentHeaderBackground #fc618d26
notificationCenter.border #000000
notificationCenterHeader.background #211421
notificationCenterHeader.foreground #c3c0b5
notificationLink.foreground #fce566
notifications.background #211421
notifications.border #000000
notifications.foreground #c3c0b5
notificationToast.border #000000
panel.background #211421
panel.border #000000
panelTitle.activeBorder #fce566
panelTitle.activeForeground #fce566
panelTitle.inactiveForeground #c3c0b5
peekView.border #fce566
peekViewEditor.background #141014
peekViewEditor.matchHighlightBackground #4b6153
peekViewEditorGutter.background #141014
peekViewResult.background #141014
peekViewResult.fileForeground #c3c0b5
peekViewResult.lineForeground #c3c0b5
peekViewResult.matchHighlightBackground #4b6153
peekViewResult.selectionBackground #003f2f
peekViewResult.selectionForeground #c3c0b5
peekViewTitle.background #141014
peekViewTitleDescription.foreground #c3c0b5
peekViewTitleLabel.foreground #c3c0b5
pickerGroup.border #000000
pickerGroup.foreground #c3c0b5
progressBar.background #211421
sash.hoverBorder #003f2f
scrollbar.shadow #141014
scrollbarSlider.activeBackground #cecece66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #a6a6a666
selection.background #003f2f
settings.checkboxBackground #211421
settings.checkboxBorder #000000
settings.checkboxForeground #c3c0b5
settings.dropdownBackground #211421
settings.dropdownBorder #000000
settings.dropdownForeground #c3c0b5
settings.dropdownListBorder #000000
settings.headerForeground #fce566
settings.modifiedItemIndicator #fce566
settings.numberInputBackground #211421
settings.numberInputBorder #000000
settings.numberInputForeground #c3c0b5
settings.textInputBackground #211421
settings.textInputBorder #000000
settings.textInputForeground #c3c0b5
sideBar.background #211421
sideBar.border #000000
sideBar.foreground #c3c0b5
sideBarSectionHeader.background #292629
sideBarSectionHeader.border #000000
sideBarSectionHeader.foreground #c3c0b5
sideBarTitle.foreground #c3c0b5
statusBar.background #141014
statusBar.border #000000
statusBar.debuggingBackground #c3c0b5
statusBar.debuggingForeground #c3c0b5
statusBar.foreground #c3c0b5
statusBar.noFolderBackground #141014
statusBar.noFolderForeground #c3c0b5
statusBarItem.activeBackground #141014
statusBarItem.hoverBackground #003f2f
statusBarItem.prominentBackground #211421
statusBarItem.prominentHoverBackground #003f2f
tab.activeBackground #211421
tab.activeBorder #fce566
tab.activeForeground #fce566
tab.activeModifiedBorder #000000
tab.border #000000
tab.inactiveBackground #141014
tab.inactiveForeground #c3c0b5
tab.inactiveModifiedBorder #000000
tab.unfocusedActiveForeground #c3c0b5
tab.unfocusedActiveModifiedBorder #000000
tab.unfocusedInactiveForeground #c3c0b5
tab.unfocusedInactiveModifiedBorder #000000
terminal.ansiBlack #211421
terminal.ansiBlue #fd9353
terminal.ansiBrightBlack #c3c0b5
terminal.ansiBrightBlue #fd9353
terminal.ansiBrightCyan #5ad4e6
terminal.ansiBrightGreen #7bd88f
terminal.ansiBrightMagenta #948ae3
terminal.ansiBrightRed #fc618d
terminal.ansiBrightWhite #c3c0b5
terminal.ansiBrightYellow #fce566
terminal.ansiCyan #5ad4e6
terminal.ansiGreen #7bd88f
terminal.ansiMagenta #948ae3
terminal.ansiRed #fc618d
terminal.ansiWhite #c3c0b5
terminal.ansiYellow #fce566
terminal.background #281528
terminal.foreground #c3c0b5
terminalCursor.background #00000000
terminalCursor.foreground #c3c0b5
textBlockQuote.background #211421
textBlockQuote.border #000000
textCodeBlock.background #211421
textLink.activeForeground #c3c0b5
textLink.foreground #fce566
textPreformat.foreground #c3c0b5
textSeparator.foreground #c3c0b5
titleBar.activeBackground #141014
titleBar.activeForeground #c3c0b5
titleBar.inactiveBackground #141014
titleBar.inactiveForeground #c3c0b5
walkThrough.embeddedEditorBackground #141014
widget.shadow #141014 keyword.other.unit.suffix #FE61FA —
entity.name.class #FEF93A —
entity.name.event #B0E0E6 —
entity.name.function #54FE50 —
entity.name.interface #FEF93A —
entity.name.label #BA55D3 —
entity.name.method #54FE50 —
entity.name.namespace #B7B7DB —
entity.name.section #B0E0E6 —
entity.name.struct #FEF93A —
entity.name.tag.yaml #FF0080 —
entity.name.type.parameter #FE9732 —
entity.other.attribute-name #8D81FE —
entity.other.inherited-class #FEF93A —
keyword.control.directive #a38c26 —
markup.underline.link #1E90FF —
meta.function-call #54FE50 —
meta.preprocessor #FE61FA —
source.json constant.language #ffe600 —
source.json support.type #c3fc94 —
source.json string #aeebfa —
storage.type.struct.c #FF0080 —
storage.type.enum.c #FF0080 —
storage.type.union.c #FF0080 —
variable.language #FF8040 —
variable.other.constant #FE61FA —
variable.parameter #57E6FF —
variable.property #8D81FE —
meta.parameter.fortran #fff3dc —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline components
fetchUser.ts
fetchUser
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
id: string;
name: string;
role: "admin" | "member";
tags: string[];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser(id: string): Promise<User | null> {
if (!id) {
return null;
}
const response = await fetch(`/api/users/${id}`, {
method: "GET",
headers: { Accept: "application/json" },
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as User;
}
function greet(user: User): string {
// Simple greeting function that uses the user's name
return `Hello, ${user.name}!`;
}
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...
~/my-project $