Time Flow

Name: Time Flow
Author: Mais Um Dev

Publisher: Mais Um DevThemes in package: 1

Time Flow app theme.

Open in VS Code GitHub

VS Code preview

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

Time Flow — TimeFlow

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#fc5fa306
activityBar.background#000
activityBar.border#000
activityBar.foreground#fc5fa3
activityBar.inactiveForeground#36363f
activityBarBadge.background#fc5fa3
activityBarBadge.foreground#ffffff
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#000
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccccc
button.background#fc5fa3
button.foreground#ffffff
button.hoverBackground#fc5fa3
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#3c3c3c
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#333333
debugExceptionWidget.border#474747
debugIcon.breakpointCurrentStackframeForeground#007aff
debugIcon.breakpointForeground#007aff
debugToolBar.background#333333
debugToolBar.border#474747
diffEditor.border#444444
diffEditor.insertedTextBackground#9ef1dd22
diffEditor.removedTextBackground#fc6a5d2c
dropdown.background#3c3c3c
dropdown.border#00000000
dropdown.foreground#cccccc
editor.background#000
editor.findMatchBackground#7d647b
editor.findMatchBorder#ae68b8
editor.findMatchHighlightBackground#5dd8ff1c
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#d0bf69
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#4b2445
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#495F77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#5dd8ff62
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#1b1b1b
editorCursor.foreground#aeafad
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#fc6a5d
editorGroup.border#444444
editorGroup.emptyBackground#000
editorGroupHeader.noTabsBackground#383a3d
editorGroupHeader.tabsBackground#000
editorGutter.addedBackground#67b7a4
editorGutter.background#000
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#fc6a5d
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#41a1c0
editorHoverWidget.background#252526
editorHoverWidget.border#454545
editorHoverWidget.foreground#cccccc
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#5482ff
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#858585
editorLink.activeForeground#4e94ce
editorOverviewRuler.addedForeground#4f82ce
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorOverviewRuler.deletedForeground#4f82ce
editorOverviewRuler.errorForeground#e21514
editorOverviewRuler.findMatchForeground#fffb00
editorOverviewRuler.modifiedForeground#4f82ce
editorOverviewRuler.warningForeground#f5c443
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#252526
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#fc5fa3
editorSuggestWidget.selectedBackground#283e7b
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#d0bf69
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.foreground#cccccc
editorWidget.resizeBorder#5F5F5F
errorForeground#e21514
focusBorder#35628b
foreground#dfdfdf
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#cccccc
input.background#3c3c3c
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#d0bf69
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
list.activeSelectionBackground#6c7986
list.activeSelectionForeground#ffffff
list.dropBackground#383b3d
list.focusBackground#6c7986
list.focusForeground#cccccc
list.highlightForeground#41a1c0
list.hoverBackground#2a2d2e
list.hoverForeground#cccccc
list.inactiveSelectionBackground#37373d
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#303030
listFilterWidget.noMatchesOutline#fc6a5d
listFilterWidget.outline#00000000
menu.background#000
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#313138
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#cccccc
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#67b7a4
merge.currentHeaderBackground#8dffe4
merge.incomingContentBackground#5dd8ff
merge.incomingHeaderBackground#41a1c0
minimap.background#000
minimap.errorHighlight#e21514
minimap.findMatchHighlight#fffb00
minimap.selectionHighlight#646f83
minimap.warningHighlight#f5c443
minimapGutter.addedBackground#4f82ce
minimapGutter.deletedBackground#4f82ce
minimapGutter.modifiedBackground#4f82ce
notificationCenter.border#474747
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#cccccc
notifications.background#252526
notifications.border#303031
notifications.foreground#cccccc
notificationsErrorIcon.foreground#ff5370
notificationsInfoIcon.foreground#41a1c0
notificationsWarningIcon.foreground#d0bf69
notificationToast.border#474747
panel.background#000
panel.border#80808059
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#3071db
peekViewEditor.background#292a30
peekViewEditor.matchHighlightBackground#545558
peekViewEditor.matchHighlightBorder#fd8f3f
peekViewEditorGutter.background#000
peekViewResult.background#2a2c2f
peekViewResult.fileForeground#dfdfdf
peekViewResult.lineForeground#dfdfdf99
peekViewResult.matchHighlightBackground#545558
peekViewResult.selectionBackground#3071db
peekViewResult.selectionForeground#dfdfdf
peekViewTitle.background#2a2c2f
peekViewTitleDescription.foreground#6699ff
peekViewTitleLabel.foreground#dfdfdf
pickerGroup.border#3f3f46
pickerGroup.foreground#fc5fa3
progressBar.background#fc5fa3
scrollbar.shadow#000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
searchEditor.findMatchBackground#fffb00
selection.background#36363f
settings.focusedRowBackground#ffffff07
settings.headerForeground#cccccc
sideBar.background#000
sideBar.border#000000
sideBar.dropBackground#383b3d
sideBar.foreground#8a8383
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarSectionHeader.foreground#41a1c0
sideBarTitle.foreground#bbbbbb
statusBar.background#000
statusBar.border#000000
statusBar.debuggingBackground#fc5fa3
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#000
statusBar.noFolderBorder#000000
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#fc5fa3
statusBarItem.remoteForeground#ffffff
tab.activeBackground#5e1537
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#ffffff
tab.border#233338
tab.inactiveBackground#000
tab.inactiveForeground#ffffff80
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#cccccc
terminal.selectionBackground#ffffff40
terminalCursor.background#fc5fa3
terminalCursor.foreground#ffffff
textLink.activeForeground#6699ff
textLink.foreground#d0bf69
titleBar.activeBackground#000000
titleBar.activeForeground#cccccc
titleBar.border#00000000
titleBar.inactiveBackground#3c3c3c99
titleBar.inactiveForeground#cccccc99
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#424242	—
punctuation.definition.string, string	#FC6A5D	—
constant.numeric, keyword.other.unit, support.constant	#D0BF69	—
constant.language, entity.name.tag, keyword, storage.modifier, storage.type, support.type.primitive, variable.language	#fc5fa3	bold
keyword.control.directive, keyword.control.preprocessor, punctuation.definition.preprocessor	#FFA14F	—
markup.underline.link	#6699FF	—
entity.name.type.class.std.rust, storage.type.cs, support.type, meta.object-literal.key	#ACF2E4	—
meta.object-literal.key	#72BFAE	—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, support.type.property-name, variable.other.property	#83C9BC	—
meta.definition.function, meta.definition.method, meta.method.declaration	#5dd8ff	—
variable.other.constant, meta.definition.variable	#FFFFFF	—
variable.parameter, meta.parameters, meta.method.declaration, meta.object.member	#4eb1cc	—
variable.other.object, meta.var.expr, meta.definition.variable, meta.block	#4EB1CC	—
constant.language.boolean.false, constant.language.boolean.true, meta.objectliteral	#d0bf69	—
entity.name.type	#E5CFFF	—
entity.name.type.class, entity.other.inherited-class	#5DD8FF	—
keyword.operator	#A167E6	—
meta.return.type, meta.function, support.type.primitive, meta.field.declaration, meta.interface	#D0A8FF	—
meta.function-call	#B281EB	—
entity.name.type.namespace, entity.name.variable, variable.other.assignment	#49B7D7	—
variable.object.property, meta.definition.property, meta.field.declaration, meta.class	#49B7D7	—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#72BFAE	—
string.other.link.title.markdown	#DFDFE0	—
entity.name.section	#DFDFE0	bold
variable.other.object.property, support.variable.property, variable.other.constant.property	#83C9BC	—
markup.bold	#DFDFE0	bold
markup.italic	#DFDFE0	italic
punctuation	#DFDFE0	—
punctuation.decorator, meta.brace.round	#FFFFFF	—
entity.other.attribute-name	#D0A8FF	—
meta.tag.without-attributes, metax.children	#FFFFFF	—
variable.other.readwrite.alias	#FFFFFF	—
punctuation.terminator.statement	#505050	—
punctuation.accessor.optional	#a167e6	—
case-clause.expr, switch-block.expr, switch-statement.expr	#41A1C0	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#a167e6	—

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