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 Dark (no italic)

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffd43b
activityBar.activeFocusBorder#ffd43b
activityBar.background#202736
activityBar.border#374151
activityBar.foreground#D9DBE1
activityBar.inactiveForeground#9ba4b7
activityBarBadge.background#ffd43b
activityBarBadge.foreground#15181f
activityBarTop.activeBorder#ffd43b
activityErrorBadge.background#ff6b6b
activityErrorBadge.foreground#15181f
activityWarningBadge.background#ffd43b
activityWarningBadge.foreground#15181f
badge.background#ffd43b
badge.foreground#15181f
breadcrumb.activeSelectionForeground#ffd43b
breadcrumb.background#15181f
breadcrumb.focusForeground#D9DBE1
breadcrumb.foreground#9ba4b7
breadcrumbPicker.background#202736
button.background#ffd43b
button.foreground#15181f
button.hoverBackground#e6be36
button.secondaryBackground#757083
button.secondaryForeground#D9DBE1
button.secondaryHoverBackground#757083
chat.avatarBackground#1f1f1f
chat.avatarForeground#d9dbe1
chat.editedFileForeground#e2c08d
chat.linesAddedForeground#54b05480
chat.linesRemovedForeground#fc6a6a80
chat.requestBackground#15181f9e
chat.requestBorder#ffffff1a
chat.requestBubbleBackground#2d3142fd
chat.requestCodeBorder#004972b8
chat.slashCommandBackground#264778
chat.slashCommandForeground#85b6ff
checkbox.background#202736
checkbox.border#374151
debugConsole.errorForeground#ff6b6b
debugConsole.infoForeground#a8b2c4
debugConsole.sourceForeground#e6be36
debugConsole.warningForeground#ffd43b
debugConsoleInputIcon.foreground#d0bfff
debugIcon.breakpointForeground#ff6b6b
debugTokenExpression.boolean#51cf66
debugTokenExpression.error#ff6b6b
debugTokenExpression.name#74c0fc
debugTokenExpression.number#51cf66
debugTokenExpression.string#8bb3ff
debugTokenExpression.value#8bb3ff
debugToolBar.background#202736
debugToolBar.border#374151
descriptionForeground#bfc7d5
diffEditor.diagonalFill#a8b2c433
diffEditor.insertedLineBackground#51cf6626
diffEditor.insertedTextBackground#51cf664d
diffEditor.removedLineBackground#ff6b6b26
diffEditor.removedTextBackground#ff6b6b4d
diffEditor.unchangedCodeBackground#6b728066
diffEditor.unchangedRegionBackground#202736
diffEditor.unchangedRegionForeground#D9DBE1
dropdown.background#202736
dropdown.border#374151
dropdown.foreground#D9DBE1
dropdown.listBackground#202736
editor.background#15181f
editor.findMatchBackground#ffd43b55
editor.findMatchHighlightBackground#ffd43b33
editor.focusedStackFrameHighlightBackground#51cf6666
editor.foldBackground#6b72801a
editor.foreground#D9DBE1
editor.lineHighlightBackground#202736
editor.linkedEditingBackground#ffd43b12
editor.selectionBackground#ffd43b44
editor.selectionHighlightBackground#ffd43b22
editor.stackFrameHighlightBackground#ffd43b66
editor.wordHighlightBackground#6b728180
editor.wordHighlightBorder#6b728199
editor.wordHighlightStrongBackground#6b72814d
editor.wordHighlightStrongBorder#6b728199
editorActionList.background#202736
editorActionList.focusBackground#ffd43b44
editorActionList.focusForeground#ffffff
editorActionList.foreground#D9DBE1
editorBracketHighlight.foreground1#74c0fc
editorBracketHighlight.foreground2#51cf66
editorBracketHighlight.foreground3#ffd43b
editorBracketHighlight.foreground4#ff6b6b
editorBracketHighlight.foreground5#ED217C
editorBracketHighlight.foreground6#d0bfff
editorBracketHighlight.unexpectedBracket.foreground#9ba4b7
editorBracketMatch.background#ffd43b22
editorBracketMatch.border#ffd43b
editorCursor.foreground#ffd43b
editorGroup.border#374151
editorGroupHeader.tabsBackground#202736
editorGroupHeader.tabsBorder#374151
editorGutter.addedBackground#51cf6666
editorGutter.deletedBackground#ff6b6b66
editorGutter.modifiedBackground#ffd43b66
editorHoverWidget.statusBarBackground#2d3142
editorIndentGuide.activeBackground1#505869
editorIndentGuide.background1#2d3142
editorInlayHint.background#a8b2c433
editorInlayHint.foreground#9ba4b7
editorInlayHint.parameterBackground#a8b2c433
editorInlayHint.parameterForeground#9ba4b7
editorInlayHint.typeBackground#a8b2c433
editorInlayHint.typeForeground#9ba4b7
editorLightBulb.foreground#ffd43b
editorLightBulbAi.foreground#ffd43b
editorLightBulbAutoFix.foreground#74c0fc
editorLineNumber.activeForeground#ffd43b
editorLineNumber.foreground#a8b2c4
editorOverviewRuler.border#15181f
editorOverviewRuler.commonContentForeground#6b728066
editorOverviewRuler.currentContentForeground#51cf6680
editorOverviewRuler.findMatchForeground#ffd43b7d
editorOverviewRuler.incomingContentForeground#74c0fc80
editorOverviewRuler.selectionHighlightForeground#a8b2c4cc
editorStickyScroll.background#15181f
editorStickyScroll.shadow#2d314233
editorStickyScrollHover.background#2d3142
editorWhitespace.foreground#2d3142
editorWidget.background#202736
editorWidget.border#6b7280
errorForeground#ff6b6b
extensionButton.background#757083
extensionButton.foreground#D9DBE1
extensionButton.hoverBackground#757083
extensionButton.prominentBackground#ffd43b
extensionButton.prominentForeground#15181f
extensionButton.prominentHoverBackground#e6be36
focusBorder#ffd43b
foreground#D9DBE1
gitDecoration.addedResourceForeground#51cf66
gitDecoration.conflictingResourceForeground#d0bfff
gitDecoration.deletedResourceForeground#ff6b6b
gitDecoration.ignoredResourceForeground#9ba4b7
gitDecoration.modifiedResourceForeground#ffd43b
gitDecoration.submoduleResourceForeground#9ba4b7
gitDecoration.untrackedResourceForeground#51cf66
icon.foreground#9ba4b7
input.background#2d3142
input.border#6b7280
input.foreground#D9DBE1
input.placeholderForeground#9ba4b7
keybindingLabel.foreground#D9DBE1
list.activeSelectionBackground#ffd43b44
list.activeSelectionForeground#ffffff
list.deemphasizedForeground#a8b2c4
list.filterMatchBackground#ffd43b80
list.focusBackground#ffd43b22
list.focusForeground#D9DBE1
list.focusOutline#ffd43b
list.highlightForeground#74c0fc
list.hoverBackground#2d3142
list.hoverForeground#D9DBE1
list.inactiveFocusBackground#ffd43b22
list.inactiveSelectionBackground#2d3142
list.inactiveSelectionForeground#D9DBE1
listFilterWidget.background#202736
listFilterWidget.noMatchesOutline#ff6b6b
listFilterWidget.outline#00000000
listFilterWidget.shadow#0000005c
menu.background#2d3142
menu.border#6b7280
menu.foreground#D9DBE1
menu.selectionBackground#ffd43b44
menu.selectionForeground#ffffff
menu.separatorBackground#6b7280
menubar.selectionBackground#ffd43b44
menubar.selectionForeground#ffffff
merge.commonContentBackground#6b728028
merge.commonHeaderBackground#6b728066
merge.currentContentBackground#51cf6633
merge.currentHeaderBackground#51cf6680
merge.incomingContentBackground#74c0fc33
merge.incomingHeaderBackground#74c0fc80
minimapSlider.activeBackground#a8b2c447
minimapSlider.background#a8b2c433
minimapSlider.hoverBackground#a8b2c43d
notificationCenter.border#6b7280
notificationCenterHeader.background#202736
notificationCenterHeader.foreground#9ba4b7
notifications.background#202736
notifications.border#374151
notifications.foreground#D9DBE1
notificationsErrorIcon.foreground#ff6b6b
notificationsInfoIcon.foreground#74c0fc
notificationsWarningIcon.foreground#ffd43b
notificationToast.border#6b7280
panel.background#202736
panel.border#374151
panelInput.border#374151
panelTitle.activeBorder#ffd43b
panelTitle.activeForeground#D9DBE1
panelTitle.inactiveForeground#9ba4b7
peekViewEditor.background#6b72801a
peekViewEditor.matchHighlightBackground#ffd43b66
peekViewResult.background#15181f
peekViewResult.matchHighlightBackground#ffd43b66
pickerGroup.border#374151
pickerGroup.foreground#a8b2c4
problemsErrorIcon.foreground#ff6b6b
problemsInfoIcon.foreground#74c0fc
problemsWarningIcon.foreground#ffd43b
progressBar.background#ffd43b
quickInput.background#202736
quickInput.foreground#D9DBE1
quickInputList.focusBackground#ffd43b44
quickInputList.focusForeground#D9DBE1
quickInputTitle.background#202736
sash.hoverBorder#ffd43b
scrollbar.shadow#2d314233
scrollbarSlider.activeBackground#a8b2c447
scrollbarSlider.background#a8b2c433
scrollbarSlider.hoverBackground#a8b2c43d
settings.headerForeground#D9DBE1
settings.modifiedItemIndicator#ffd43b66
sideBar.background#202736
sideBar.border#374151
sideBar.foreground#D9DBE1
sideBarSectionHeader.background#2d3142
sideBarSectionHeader.border#374151
sideBarSectionHeader.foreground#D9DBE1
sideBarTitle.foreground#D9DBE1
statusBar.background#202736
statusBar.border#374151
statusBar.debuggingBackground#ff6b6b
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#ffd43b80
statusBar.foreground#D9DBE1
statusBar.noFolderBackground#202736
statusBarItem.activeBackground#D9DBE114
statusBarItem.errorBackground#ff6b6b
statusBarItem.errorForeground#15181f
statusBarItem.errorHoverBackground#FF0A0A
statusBarItem.errorHoverForeground#15181f
statusBarItem.focusBorder#ffd43b
statusBarItem.hoverBackground#2d3142
statusBarItem.prominentBackground#6b728066
statusBarItem.remoteBackground#ffd43b
statusBarItem.remoteForeground#15181f
statusBarItem.warningBackground#ffd43b
statusBarItem.warningForeground#15181f
statusBarItem.warningHoverBackground#E0B000
statusBarItem.warningHoverForeground#15181f
symbolIcon.arrayForeground#ffd43b
symbolIcon.booleanForeground#74c0fc
symbolIcon.classForeground#ffd43b
symbolIcon.colorForeground#74c0fc
symbolIcon.constantForeground#51cf66
symbolIcon.constructorForeground#d0bfff
symbolIcon.enumeratorForeground#ffd43b
symbolIcon.enumeratorMemberForeground#74c0fc
symbolIcon.eventForeground#6b7280
symbolIcon.fieldForeground#ffd43b
symbolIcon.fileForeground#ffd43b
symbolIcon.folderForeground#ffd43b
symbolIcon.functionForeground#d0bfff
symbolIcon.interfaceForeground#ffd43b
symbolIcon.keyForeground#74c0fc
symbolIcon.keywordForeground#ED217C
symbolIcon.methodForeground#d0bfff
symbolIcon.moduleForeground#ED217C
symbolIcon.namespaceForeground#ED217C
symbolIcon.nullForeground#74c0fc
symbolIcon.numberForeground#51cf66
symbolIcon.objectForeground#ffd43b
symbolIcon.operatorForeground#74c0fc
symbolIcon.packageForeground#ffd43b
symbolIcon.propertyForeground#ffd43b
symbolIcon.referenceForeground#74c0fc
symbolIcon.snippetForeground#74c0fc
symbolIcon.stringForeground#74c0fc
symbolIcon.structForeground#ffd43b
symbolIcon.textForeground#74c0fc
symbolIcon.typeParameterForeground#74c0fc
symbolIcon.unitForeground#74c0fc
symbolIcon.variableForeground#ffd43b
tab.activeBackground#15181f
tab.activeBorder#15181f
tab.activeBorderTop#ffd43b
tab.activeForeground#ffffff
tab.border#374151
tab.hoverBackground#15181f
tab.inactiveBackground#202736
tab.inactiveForeground#9ba4b7
tab.unfocusedActiveBorder#15181f
tab.unfocusedActiveBorderTop#374151
tab.unfocusedHoverBackground#6b72801a
terminal.ansiBlack#15181f
terminal.ansiBlue#74c0fc
terminal.ansiBrightBlack#6b7280
terminal.ansiBrightBlue#8bb3ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#7ee787
terminal.ansiBrightMagenta#d2a8ff
terminal.ansiBrightRed#ED217C
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e6be36
terminal.ansiCyan#66d9ef
terminal.ansiGreen#51cf66
terminal.ansiMagenta#d0bfff
terminal.ansiRed#ff6b6b
terminal.ansiWhite#D9DBE1
terminal.ansiYellow#ffd43b
terminal.background#15181f
terminal.foreground#D9DBE1
textBlockQuote.background#15181f
textBlockQuote.border#374151
textCodeBlock.background#6b728066
textLink.activeForeground#74c0fc
textLink.foreground#74c0fc
textPreformat.background#6b728066
textPreformat.foreground#9ba4b7
textSeparator.foreground#2d3142
titleBar.activeBackground#202736
titleBar.activeForeground#D9DBE1
titleBar.border#374151
titleBar.inactiveBackground#15181f
titleBar.inactiveForeground#9ba4b7
toolbar.activeBackground#37415150
toolbar.hoverBackground#2d314250
tree.inactiveIndentGuidesStroke#2d314266
tree.indentGuidesStroke#2d3142
tree.tableColumnsBorder#37415121
tree.tableOddRowsBackground#D9DBE10a
welcomePage.background#15181f
welcomePage.progress.background#2d3142
welcomePage.progress.foreground#ffd43b
welcomePage.tileBackground#2d3142
welcomePage.tileHoverBackground#374151

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#8B949E	—
constant.other.placeholder, constant.character	#ED217C	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#3EC8E8	—
entity.name, meta.export.default, meta.definition.variable	#ffd43b	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#D9DBE1	—
entity.name.function	#92D1F0	—
entity.name.tag, support.class.component	#4ECDC4	—
keyword	#ED217C	—
storage, storage.type	#ED217C	—
storage.modifier.package, storage.modifier.import, storage.type.java	#D9DBE1	—
string, string punctuation.section.embedded source	#B794F6	—
support	#3EC8E8	—
meta.property-name	#3EC8E8	—
variable	#ffd43b	—
variable.other	#D9DBE1	—
invalid.broken	#FF4C61	—
invalid.deprecated	#FF4C61	—
invalid.illegal	#FF4C61	—
invalid.unimplemented	#FF4C61	—
carriage-return	#15181f	italic underline
message.error	#FF4C61	—
string variable	#3EC8E8	—
source.regexp, string.regexp	#B794F6	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#B794F6	—
string.regexp constant.character.escape	#58D680	bold
support.constant	#58D680	—
support.variable	#8bb3ff	—
support.type.property-name.json	#4ECDC4	—
meta.module-reference	#3EC8E8	—
punctuation.definition.list.begin.markdown	#ffd43b	—
markup.heading, markup.heading entity.name	#e6be36	bold italic
markup.quote	#4ECDC4	—
markup.italic	#D9DBE1	—
markup.bold	#D9DBE1	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#3EC8E8	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#FF6B6B	—
punctuation.section.embedded	#ED217C	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#58D680	—
markup.changed, punctuation.definition.changed	#F4A259	—
markup.ignored, markup.untracked	#202736	—
meta.diff.range	#B794F6	bold
meta.diff.header	#74c0fc	—
meta.separator	#3EC8E8	bold
meta.output	#3EC8E8	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#a8b2c4	—
brackethighlighter.unmatched	#ff6b6b	—
constant.other.reference.link, string.other.link	#B794F6	—

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