Demo Time - Theme

Name: Demo Time - Theme
Author: Elio Struyf

Publisher: Elio StruyfThemes in package: 4

A vibrant and modern VS Code theme inspired by the colors of Demo Time.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Demo Time - Theme — Demo Time Light (no italic)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ffd43b33
activityBar.activeBorder#a08000
activityBar.activeFocusBorder#a08000
activityBar.background#eaeef6
activityBar.border#bcc4d1
activityBar.foreground#202736
activityBar.inactiveForeground#505869
activityBarBadge.background#ffd43b
activityBarBadge.foreground#15181f
activityBarTop.activeBorder#a08000
activityErrorBadge.background#d73a49
activityErrorBadge.foreground#ffffff
activityWarningBadge.background#a08000
activityWarningBadge.foreground#ffffff
badge.background#ffd43b
badge.foreground#15181f
breadcrumb.activeSelectionForeground#b39629
breadcrumb.background#ffffff
breadcrumb.focusForeground#202736
breadcrumb.foreground#505869
breadcrumbPicker.background#ffffff
button.background#ffd43b
button.foreground#15181f
button.hoverBackground#a08000
button.secondaryBackground#e1e4e8
button.secondaryForeground#202736
button.secondaryHoverBackground#d1d5db
chat.avatarBackground#e1e4e8
chat.avatarForeground#202736
chat.editedFileForeground#916c00
chat.linesAddedForeground#00B8A280
chat.linesRemovedForeground#d73a4980
chat.requestBackground#f8f9fb9e
chat.requestBorder#bcc4d11a
chat.requestBubbleBackground#a0800014
chat.requestCodeBorder#bcc4d1b8
chat.slashCommandBackground#e1f4fd
chat.slashCommandForeground#005cc5
checkbox.background#f8f9fb
checkbox.border#bcc4d1
debugConsole.errorForeground#d73a49
debugConsole.infoForeground#505869
debugConsole.sourceForeground#916c00
debugConsole.warningForeground#a08000
debugConsoleInputIcon.foreground#6f42c1
debugIcon.breakpointForeground#d73a49
debugTokenExpression.boolean#00B8A2
debugTokenExpression.error#d73a49
debugTokenExpression.name#005cc5
debugTokenExpression.number#00B8A2
debugTokenExpression.string#00B8A2
debugTokenExpression.value#00B8A2
debugToolBar.background#eaeef6
debugToolBar.border#bcc4d1
descriptionForeground#505869
diffEditor.diagonalFill#9ba4b733
diffEditor.insertedLineBackground#00B8A24d
diffEditor.insertedTextBackground#00B8A280
diffEditor.removedLineBackground#d73a494d
diffEditor.removedTextBackground#d73a4966
diffEditor.unchangedCodeBackground#9ba4b728
diffEditor.unchangedRegionBackground#f4f6fa
diffEditor.unchangedRegionForeground#202736
dropdown.background#ffffff
dropdown.border#bcc4d1
dropdown.foreground#202736
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#e6bd3699
editor.findMatchHighlightBackground#ffd43b80
editor.focusedStackFrameHighlightBackground#00B8A266
editor.foldBackground#50586980
editor.foreground#202736
editor.lineHighlightBackground#f8f9fb
editor.linkedEditingBackground#a0800012
editor.selectionBackground#ffd43b44
editor.selectionHighlightBackground#ffd43b22
editor.stackFrameHighlightBackground#a0800066
editor.wordHighlightBackground#e1e4e880
editor.wordHighlightBorder#9ba4b799
editor.wordHighlightStrongBackground#9ba4b74d
editor.wordHighlightStrongBorder#9ba4b799
editorActionList.background#ffffff
editorActionList.focusBackground#ffd43b44
editorActionList.focusForeground#15181f
editorActionList.foreground#202736
editorBracketHighlight.foreground1#005cc5
editorBracketHighlight.foreground2#00B8A2
editorBracketHighlight.foreground3#a08000
editorBracketHighlight.foreground4#d73a49
editorBracketHighlight.foreground5#d63384
editorBracketHighlight.foreground6#6f42c1
editorBracketHighlight.unexpectedBracket.foreground#505869
editorBracketMatch.background#ffd43b22
editorBracketMatch.border#ffd43b
editorCursor.foreground#a08000
editorGroup.border#bcc4d1
editorGroupHeader.tabsBackground#f4f6fa
editorGroupHeader.tabsBorder#bcc4d1
editorGutter.addedBackground#00B8A266
editorGutter.deletedBackground#d73a4966
editorGutter.modifiedBackground#a0800066
editorHoverWidget.statusBarBackground#e1e4e8
editorIndentGuide.activeBackground1#9ba4b7
editorIndentGuide.background1#e1e4e8
editorInlayHint.background#9ba4b733
editorInlayHint.foreground#505869
editorInlayHint.parameterBackground#9ba4b733
editorInlayHint.parameterForeground#505869
editorInlayHint.typeBackground#9ba4b733
editorInlayHint.typeForeground#505869
editorLightBulb.foreground#a08000
editorLightBulbAi.foreground#a08000
editorLightBulbAutoFix.foreground#005cc5
editorLineNumber.activeForeground#b39629
editorLineNumber.foreground#9ba4b7
editorOverviewRuler.border#ffffff
editorOverviewRuler.commonContentForeground#9ba4b766
editorOverviewRuler.currentContentForeground#00B8A280
editorOverviewRuler.findMatchForeground#a080007d
editorOverviewRuler.incomingContentForeground#005cc580
editorOverviewRuler.selectionHighlightForeground#505869cc
editorStickyScroll.background#ffffff
editorStickyScroll.shadow#50586933
editorStickyScrollHover.background#f8f9fb
editorWhitespace.foreground#e1e4e8
editorWidget.background#ffffff
editorWidget.border#bcc4d1
errorForeground#d73a49
focusBorder#a08000
foreground#202736
gitDecoration.addedResourceForeground#00B8A2
gitDecoration.conflictingResourceForeground#6f42c1
gitDecoration.deletedResourceForeground#d73a49
gitDecoration.ignoredResourceForeground#505869
gitDecoration.modifiedResourceForeground#a08000
gitDecoration.submoduleResourceForeground#505869
gitDecoration.untrackedResourceForeground#00B8A2
icon.foreground#505869
input.background#ffffff
input.border#6b7280
input.foreground#202736
input.placeholderForeground#505869
keybindingLabel.foreground#202736
list.activeSelectionBackground#ffd43b44
list.activeSelectionForeground#15181f
list.deemphasizedForeground#9ba4b7
list.filterMatchBackground#a0800080
list.focusBackground#ffd43b22
list.focusForeground#202736
list.focusOutline#ffd43b
list.highlightForeground#005cc5
list.hoverBackground#e1e4e8
list.hoverForeground#202736
list.inactiveFocusBackground#ffd43b22
list.inactiveSelectionBackground#e1e4e8
list.inactiveSelectionForeground#202736
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#d73a49
listFilterWidget.outline#00000000
listFilterWidget.shadow#50586933
menu.background#ffffff
menu.border#bcc4d1
menu.foreground#202736
menu.selectionBackground#ffd43b44
menu.selectionForeground#15181f
menu.separatorBackground#9ba4b7
menubar.selectionBackground#ffd43b44
menubar.selectionForeground#15181f
merge.commonContentBackground#9ba4b728
merge.commonHeaderBackground#9ba4b766
merge.currentContentBackground#00B8A233
merge.currentHeaderBackground#00B8A280
merge.incomingContentBackground#005cc533
merge.incomingHeaderBackground#005cc580
minimapSlider.activeBackground#9ba4b747
minimapSlider.background#9ba4b733
minimapSlider.hoverBackground#9ba4b73d
notificationCenter.border#bcc4d1
notificationCenterHeader.background#f4f6fa
notificationCenterHeader.foreground#505869
notifications.background#ffffff
notifications.border#bcc4d1
notifications.foreground#202736
notificationsErrorIcon.foreground#d73a49
notificationsInfoIcon.foreground#005cc5
notificationsWarningIcon.foreground#a08000
notificationToast.border#bcc4d1
panel.background#f4f6fa
panel.border#bcc4d1
panelInput.border#bcc4d1
panelTitle.activeBorder#ffd43b
panelTitle.activeForeground#202736
panelTitle.inactiveForeground#505869
pickerGroup.border#bcc4d1
pickerGroup.foreground#505869
problemsErrorIcon.foreground#d73a49
problemsInfoIcon.foreground#005cc5
problemsWarningIcon.foreground#a08000
progressBar.background#a08000
quickInput.background#ffffff
quickInput.foreground#202736
quickInputList.focusBackground#e1e4e8
quickInputList.focusForeground#202736
quickInputTitle.background#f4f6fa
sash.hoverBorder#a08000
scrollbar.shadow#50586933
scrollbarSlider.activeBackground#9ba4b747
scrollbarSlider.background#9ba4b733
scrollbarSlider.hoverBackground#9ba4b73d
settings.headerForeground#202736
settings.modifiedItemIndicator#a0800066
sideBar.background#f4f6fa
sideBar.border#bcc4d1
sideBar.foreground#202736
sideBarSectionHeader.background#e1e4e8
sideBarSectionHeader.border#bcc4d1
sideBarSectionHeader.foreground#202736
sideBarTitle.foreground#202736
statusBar.background#eaeef6
statusBar.border#bcc4d1
statusBar.debuggingBackground#d73a49
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#a0800080
statusBar.foreground#202736
statusBar.noFolderBackground#eaeef6
statusBarItem.activeBackground#20273614
statusBarItem.errorBackground#ff6b6b
statusBarItem.errorForeground#15181f
statusBarItem.errorHoverBackground#FF0A0A
statusBarItem.errorHoverForeground#15181f
statusBarItem.focusBorder#a08000
statusBarItem.hoverBackground#d1d5db
statusBarItem.prominentBackground#9ba4b733
statusBarItem.remoteBackground#ffd43b
statusBarItem.remoteForeground#374151
statusBarItem.warningBackground#ffd43b
statusBarItem.warningForeground#15181f
statusBarItem.warningHoverBackground#E0B000
statusBarItem.warningHoverForeground#15181f
symbolIcon.arrayForeground#a08000
symbolIcon.booleanForeground#005cc5
symbolIcon.classForeground#a08000
symbolIcon.colorForeground#00B8A2
symbolIcon.constantForeground#00B8A2
symbolIcon.constructorForeground#6f42c1
symbolIcon.enumeratorForeground#a08000
symbolIcon.enumeratorMemberForeground#005cc5
symbolIcon.eventForeground#505869
symbolIcon.fieldForeground#a08000
symbolIcon.fileForeground#a08000
symbolIcon.folderForeground#a08000
symbolIcon.functionForeground#6f42c1
symbolIcon.interfaceForeground#a08000
symbolIcon.keyForeground#005cc5
symbolIcon.keywordForeground#d73a49
symbolIcon.methodForeground#6f42c1
symbolIcon.moduleForeground#d73a49
symbolIcon.namespaceForeground#d73a49
symbolIcon.nullForeground#005cc5
symbolIcon.numberForeground#00B8A2
symbolIcon.objectForeground#a08000
symbolIcon.operatorForeground#00B8A2
symbolIcon.packageForeground#a08000
symbolIcon.propertyForeground#a08000
symbolIcon.referenceForeground#005cc5
symbolIcon.snippetForeground#005cc5
symbolIcon.stringForeground#00B8A2
symbolIcon.structForeground#a08000
symbolIcon.textForeground#00B8A2
symbolIcon.typeParameterForeground#00B8A2
symbolIcon.unitForeground#005cc5
symbolIcon.variableForeground#a08000
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#ffd43b
tab.activeForeground#202736
tab.border#bcc4d1
tab.hoverBackground#ffffff
tab.inactiveBackground#eaeef6
tab.inactiveForeground#505869
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#bcc4d1
tab.unfocusedHoverBackground#e1e4e880
terminal.ansiBlack#24292e
terminal.ansiBlue#005cc5
terminal.ansiBrightBlack#505869
terminal.ansiBrightBlue#005cc5
terminal.ansiBrightCyan#0891b2
terminal.ansiBrightGreen#00B8A2
terminal.ansiBrightMagenta#6f42c1
terminal.ansiBrightRed#b73545
terminal.ansiBrightWhite#9ba4b7
terminal.ansiBrightYellow#916c00
terminal.ansiCyan#17a2b8
terminal.ansiGreen#00B8A2
terminal.ansiMagenta#6f42c1
terminal.ansiRed#d73a49
terminal.ansiWhite#6a737d
terminal.ansiYellow#a08000
terminal.background#ffffff
terminal.foreground#202736
textBlockQuote.background#f8f9fb
textBlockQuote.border#bcc4d1
textCodeBlock.background#9ba4b733
textLink.activeForeground#005cc5
textLink.foreground#005cc5
textPreformat.background#9ba4b733
textPreformat.foreground#505869
textSeparator.foreground#d1d5db
titleBar.activeBackground#eaeef6
titleBar.activeForeground#202736
titleBar.border#bcc4d1
titleBar.inactiveBackground#f4f6fa
titleBar.inactiveForeground#505869
toolbar.activeBackground#d1d5db50
toolbar.hoverBackground#e1e4e850
tree.inactiveIndentGuidesStroke#bcc4d166
tree.indentGuidesStroke#bcc4d1
tree.tableColumnsBorder#bcc4d121
tree.tableOddRowsBackground#20273610
welcomePage.background#ffffff
welcomePage.progress.background#e1e4e8
welcomePage.progress.foreground#a08000
welcomePage.tileBackground#f4f6fa
welcomePage.tileHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#505869	—
constant.other.placeholder, constant.character	#d63384	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#005cc5	—
entity.name, meta.export.default, meta.definition.variable	#a08000	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#202736	—
entity.name.function	#6f42c1	—
entity.name.tag, support.class.component	#22863a	—
keyword	#d63384	—
storage, storage.type	#d63384	—
storage.modifier.package, storage.modifier.import, storage.type.java	#202736	—
string, string punctuation.section.embedded source	#7C3AED	—
support	#005cc5	—
meta.property-name	#005cc5	—
variable	#a08000	—
variable.other	#202736	—
invalid.broken	#d73a49	—
invalid.deprecated	#d73a49	—
invalid.illegal	#d73a49	—
invalid.unimplemented	#d73a49	—
carriage-return	#f8f9fb	italic underline
message.error	#d73a49	—
string variable	#005cc5	—
source.regexp, string.regexp	#22863a	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#22863a	—
string.regexp constant.character.escape	#22863a	bold
support.constant	#005cc5	—
support.variable	#005cc5	—
support.type.property-name.json	#00a384	—
meta.module-reference	#005cc5	—
punctuation.definition.list.begin.markdown	#a08000	—
markup.heading, markup.heading entity.name	#a08000	bold
markup.quote	#22863a	—
markup.italic	#202736	—
markup.bold	#202736	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#005cc5	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#d73a49	—
punctuation.section.embedded	#d63384	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#22863a	—
markup.changed, punctuation.definition.changed	#a08000	—
markup.ignored, markup.untracked	#d1d5db	—
meta.diff.range	#6f42c1	bold
meta.diff.header	#005cc5	—
meta.separator	#005cc5	bold
meta.output	#005cc5	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#505869	—
brackethighlighter.unmatched	#d73a49	—
constant.other.reference.link, string.other.link	#22863a	—

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}!`;
}