Flora

Name: Flora
Author: mmerle

Publisher: mmerleThemes in package: 1

Ready to code syntax theme for all conditions

GitHub

VS Code preview

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

Flora — Flora

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#0000
activityBar.activeBorder#0000
activityBar.activeFocusBorder#0000
activityBar.background#1a1b1e
activityBar.border#0000
activityBar.foreground#606974
activityBar.inactiveForeground#60697466
activityBarBadge.background#9dd5d9
activityBarBadge.foreground#1a1b1e
badge.background#9dd5d9
badge.foreground#1a1b1e
breadcrumb.activeSelectionForeground#f4b1e1
breadcrumb.background#1a1b1e
breadcrumb.focusForeground#606974
breadcrumb.foreground#60697466
breadcrumbPicker.background#1a1b1e
button.background#6069741a
button.foreground#e9e8e6
button.hoverBackground#60697466
checkbox.background#1f2023
checkbox.border#60697433
checkbox.foreground#9dd5d9
contrastActiveBorder#0000
contrastBorder#0000
debugExceptionWidget.background#1f2023
debugExceptionWidget.border#60697433
debugIcon.breakpointCurrentStackframeForeground#e9e8e6
debugIcon.breakpointDisabledForeground#e9e8e6
debugIcon.breakpointForeground#e9e8e6
debugIcon.breakpointStackframeForeground#e9e8e6
debugIcon.breakpointUnverifiedForeground#e9e8e6
debugIcon.continueForeground#e9e8e6
debugIcon.disconnectForeground#e9e8e6
debugIcon.pauseForeground#e9e8e6
debugIcon.restartForeground#e9e8e6
debugIcon.startForeground#e9e8e6
debugIcon.stepBackForeground#e9e8e6
debugIcon.stepIntoForeground#e9e8e6
debugIcon.stepOutForeground#e9e8e6
debugIcon.stepOverForeground#e9e8e6
debugIcon.stopForeground#fc8466
debugToolBar.background#1f2023
debugToolBar.border#161616
descriptionForeground#606974
diffEditor.border#1a1b1e
diffEditor.diagonalFill#60697466
diffEditor.insertedTextBackground#1f2023
diffEditor.insertedTextBorder#9dd5d980
diffEditor.removedTextBackground#1f2023
diffEditor.removedTextBorder#fc846680
dropdown.background#1f2023
dropdown.border#60697433
dropdown.foreground#e9e8e6
dropdown.listBackground#1f2023
editor.background#1a1b1e
editor.findMatchBackground#60697480
editor.findMatchBorder#0000
editor.findMatchHighlightBackground#60697466
editor.findMatchHighlightBorder#0000
editor.findRangeHighlightBackground#60697466
editor.findRangeHighlightBorder#0000
editor.focusedStackFrameHighlightBackground#60697433
editor.foldBackground#1f2023
editor.foreground#e9e8e6
editor.hoverHighlightBackground#0000
editor.inactiveSelectionBackground#6069741a
editor.lineHighlightBackground#6069741a
editor.lineHighlightBorder#0000
editor.rangeHighlightBackground#6069741a
editor.rangeHighlightBorder#0000
editor.selectionBackground#60697433
editor.selectionForeground#e9e8e6
editor.selectionHighlightBackground#60697433
editor.selectionHighlightBorder#0000
editor.snippetFinalTabstopHighlightBackground#60697433
editor.snippetFinalTabstopHighlightBorder#1f2023
editor.snippetTabstopHighlightBackground#60697433
editor.snippetTabstopHighlightBorder#1f2023
editor.stackFrameHighlightBackground#60697433
editor.symbolHighlightBackground#60697433
editor.symbolHighlightBorder#0000
editor.wordHighlightBackground#60697433
editor.wordHighlightBorder#0000
editor.wordHighlightStrongBackground#60697433
editor.wordHighlightStrongBorder#60697433
editorBracketMatch.background#0000
editorBracketMatch.border#606974
editorCodeLens.foreground#f4b1e1
editorCursor.background#e9e8e6
editorCursor.foreground#60697490
editorError.border#0000
editorError.foreground#fc8466
editorGroup.border#0000
editorGroup.dropBackground#1f2023
editorGroup.emptyBackground#0000
editorGroup.focusedEmptyBorder#0000
editorGroupHeader.noTabsBackground#0000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#d7aafd
editorGutter.background#0000
editorGutter.commentRangeForeground#606974
editorGutter.deletedBackground#fc8466
editorGutter.modifiedBackground#9dd5d9
editorHint.border#0000
editorHint.foreground#606974
editorHoverWidget.background#1f2023
editorHoverWidget.border#60697433
editorHoverWidget.foreground#e9e8e6
editorHoverWidget.statusBarBackground#0000
editorIndentGuide.activeBackground#60697480
editorIndentGuide.background#6069741a
editorInfo.border#1a1b1e
editorInfo.foreground#e9e8e6
editorLightBulb.foreground#d7aafd
editorLightBulbAutoFix.foreground#f4b1e1
editorLineNumber.activeForeground#e9e8e6ff
editorLineNumber.foreground#60697480
editorLink.activeForeground#d7aafd
editorMarkerNavigation.background#1f2023
editorMarkerNavigationError.background#1f2023
editorMarkerNavigationInfo.background#1f2023
editorMarkerNavigationWarning.background#1f2023
editorOverviewRuler.addedForeground#9dd5d980
editorOverviewRuler.background#1a1b1e
editorOverviewRuler.border#0000
editorOverviewRuler.bracketMatchForeground#60697460
editorOverviewRuler.commonContentForeground#60697480
editorOverviewRuler.currentContentForeground#60697480
editorOverviewRuler.deletedForeground#fc846680
editorOverviewRuler.errorForeground#fc8466
editorOverviewRuler.findMatchForeground#60697480
editorOverviewRuler.incomingContentForeground#9dd5d980
editorOverviewRuler.infoForeground#d7aafd80
editorOverviewRuler.modifiedForeground#f6c17780
editorOverviewRuler.rangeHighlightForeground#60697480
editorOverviewRuler.selectionHighlightForeground#60697480
editorOverviewRuler.warningForeground#f6c17780
editorOverviewRuler.wordHighlightForeground#60697480
editorOverviewRuler.wordHighlightStrongForeground#60697480
editorPane.background#0000
editorRuler.foreground#606974
editorSuggestWidget.background#1f2023
editorSuggestWidget.border#0000
editorSuggestWidget.foreground#606974
editorSuggestWidget.highlightForeground#e9e8e6
editorSuggestWidget.selectedBackground#6069741a
editorUnnecessaryCode.border#0000
editorUnnecessaryCode.opacity#60697480
editorWarning.border#0000
editorWarning.foreground#f6c177
editorWhitespace.foreground#60697480
editorWidget.background#1f2023
editorWidget.border#1a1b1e
editorWidget.foreground#606974
editorWidget.resizeBorder#60697480
errorForeground#fc8466
extensionBadge.remoteBackground#d7aafd
extensionBadge.remoteForeground#1f2023
extensionButton.prominentBackground#0000
extensionButton.prominentForeground#9dd5d9
extensionButton.prominentHoverBackground#6069741a
focusBorder#60697433
foreground#e9e8e6
gitDecoration.addedResourceForeground#d7aafd
gitDecoration.conflictingResourceForeground#fc8466
gitDecoration.deletedResourceForeground#fc8466
gitDecoration.ignoredResourceForeground#60697480
gitDecoration.modifiedResourceForeground#9dd5d9
gitDecoration.renamedResourceForeground#d7aafd
gitDecoration.submoduleResourceForeground#f6c177
gitDecoration.untrackedResourceForeground#f6c177
icon.foreground#606974
input.background#1a1b1e80
input.border#60697433
input.foreground#e9e8e6
input.placeholderForeground#606974
inputOption.activeBackground#f4b1e1
inputOption.activeBorder#0000
inputValidation.errorBackground#0000
inputValidation.errorBorder#0000
inputValidation.errorForeground#fc8466
inputValidation.infoBackground#0000
inputValidation.infoBorder#0000
inputValidation.infoForeground#e9e8e6
inputValidation.warningBackground#0000
inputValidation.warningBorder#0000
inputValidation.warningForeground#f6c177
keybindingLabel.background#1a1b1e
keybindingLabel.border#60697466
keybindingLabel.bottomBorder#60697466
keybindingLabel.foreground#d7aafd
list.activeSelectionBackground#60697433
list.activeSelectionForeground#e9e8e6
list.deemphasizedForeground#606974
list.dropBackground#1f2023
list.errorForeground#fc8466
list.filterMatchBackground#1f2023
list.filterMatchBorder#d7aafd
list.focusForeground#e9e8e6
list.highlightForeground#1fa2af
list.hoverBackground#6069741a
list.hoverForeground#e9e8e6
list.inactiveFocusBackground#6069741a
list.inactiveSelectionBackground#6069741a
list.inactiveSelectionForeground#e9e8e6
list.invalidItemForeground#fc8466
list.warningForeground#f6c177
listFilterWidget.background#1f2023
listFilterWidget.noMatchesOutline#fc8466
listFilterWidget.outline#1a1b1e
menu.background#1a1b1e
menu.border#0000
menu.foreground#e9e8e6
menu.selectionBackground#60697433
menu.selectionBorder#1a1b1e
menu.selectionForeground#e9e8e6
menu.separatorBackground#e9e8e6
menubar.selectionBackground#60697433
menubar.selectionBorder#0000
menubar.selectionForeground#e9e8e6
merge.border#1a1b1e
merge.commonContentBackground#6069741a
merge.commonHeaderBackground#60697480
merge.currentContentBackground#f6c17780
merge.currentHeaderBackground#f6c17780
merge.incomingContentBackground#9dd5d980
merge.incomingHeaderBackground#9dd5d980
minimap.background#1f2023
minimap.errorHighlight#fc846680
minimap.findMatchHighlight#6069741a
minimap.selectionHighlight#6069741a
minimap.warningHighlight#f6c17780
minimapGutter.addedBackground#d7aafd
minimapGutter.deletedBackground#fc8466
minimapGutter.modifiedBackground#f4b1e1
minimapSlider.activeBackground#60697480
minimapSlider.background#6069741a
minimapSlider.hoverBackground#6069741a
notificationCenter.border#60697433
notificationCenterHeader.background#1A1B1Dff
notificationCenterHeader.foreground#606974ff
notificationLink.foreground#d7aafd
notifications.background#1f2023
notifications.border#1a1b1e
notifications.foreground#e9e8e6
notificationsErrorIcon.foreground#fc8466
notificationsInfoIcon.foreground#e9e8e6
notificationsWarningIcon.foreground#f6c177
notificationToast.border#60697433
panel.background#1f2023
panel.border#0000
panel.dropBorder#1a1b1e
panelInput.border#1f2023
panelTitle.activeBorder#0000
panelTitle.activeForeground#e9e8e6
panelTitle.inactiveForeground#606974
peekView.border#0000
peekViewEditor.background#1f2023
peekViewEditor.matchHighlightBackground#6069741a
peekViewEditor.matchHighlightBorder#0000
peekViewEditorGutter.background#1f2023
peekViewResult.background#1f2023
peekViewResult.fileForeground#e9e8e6
peekViewResult.lineForeground#606974
peekViewResult.matchHighlightBackground#6069741a
peekViewResult.selectionBackground#6069741a
peekViewResult.selectionForeground#e9e8e6
peekViewTitle.background#1f2023
peekViewTitleDescription.foreground#606974
peekViewTitleLabel.foreground#e9e8e6
pickerGroup.border#0000
pickerGroup.foreground#9dd5d9
problemsErrorIcon.foreground#fc8466
problemsInfoIcon.foreground#e9e8e6
problemsWarningIcon.foreground#f6c177
progressBar.background#d7aafd
quickInput.background#1f2023
quickInput.foreground#606974
quickInputList.focusBackground#60697433
scrollbar.shadow#0000
scrollbarSlider.activeBackground#60697480
scrollbarSlider.background#6069741a
scrollbarSlider.hoverBackground#6069742a
searchEditor.findMatchBackground#60697433
searchEditor.findMatchBorder#0000
searchEditor.textInputBorder#0000
selection.background#60697466
settings.checkboxBackground#1f2023
settings.checkboxBorder#1a1b1e
settings.checkboxForeground#d7aafd
settings.dropdownBackground#1f2023
settings.dropdownBorder#1a1b1e
settings.dropdownForeground#e9e8e6
settings.dropdownListBorder#0000
settings.headerForeground#e9e8e6
settings.modifiedItemIndicator#f4b1e1
settings.numberInputBackground#1f2023
settings.numberInputBorder#1a1b1e
settings.numberInputForeground#e9e8e6
settings.textInputBackground#1f2023
settings.textInputBorder#1a1b1e
settings.textInputForeground#e9e8e6
sideBar.background#1a1b1e
sideBar.border#0000
sideBar.dropBackground#1f2023
sideBar.foreground#606974
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#0000
sideBarSectionHeader.foreground#606974
sideBarTitle.foreground#606974
statusBar.background#1a1b1e
statusBar.border#0000
statusBar.debuggingBackground#1fa2af
statusBar.debuggingBorder#0000
statusBar.debuggingForeground#1a1b1e
statusBar.foreground#606974
statusBar.noFolderBackground#1a1b1e
statusBar.noFolderBorder#0000
statusBar.noFolderForeground#606974
statusBarItem.activeBackground#1a1b1e
statusBarItem.hoverBackground#1f2023
statusBarItem.prominentBackground#0000
statusBarItem.prominentForeground#e9e8e6
statusBarItem.prominentHoverBackground#0000
statusBarItem.remoteBackground#1a1b1e
statusBarItem.remoteForeground#9dd5d9
symbolIcon.arrayForeground#e9e8e6
symbolIcon.booleanForeground#e9e8e6
symbolIcon.classForeground#e9e8e6
symbolIcon.colorForeground#e9e8e6
symbolIcon.constantForeground#e9e8e6
symbolIcon.constructorForeground#e9e8e6
symbolIcon.enumeratorForeground#e9e8e6
symbolIcon.enumeratorMemberForeground#e9e8e6
symbolIcon.eventForeground#e9e8e6
symbolIcon.fieldForeground#e9e8e6
symbolIcon.fileForeground#e9e8e6
symbolIcon.folderForeground#e9e8e6
symbolIcon.functionForeground#e9e8e6
symbolIcon.interfaceForeground#e9e8e6
symbolIcon.keyForeground#e9e8e6
symbolIcon.keywordForeground#e9e8e6
symbolIcon.methodForeground#e9e8e6
symbolIcon.moduleForeground#e9e8e6
symbolIcon.namespaceForeground#e9e8e6
symbolIcon.nullForeground#e9e8e6
symbolIcon.numberForeground#e9e8e6
symbolIcon.objectForeground#e9e8e6
symbolIcon.operatorForeground#e9e8e6
symbolIcon.packageForeground#e9e8e6
symbolIcon.propertyForeground#e9e8e6
symbolIcon.referenceForeground#e9e8e6
symbolIcon.snippetForeground#e9e8e6
symbolIcon.stringForeground#e9e8e6
symbolIcon.structForeground#e9e8e6
symbolIcon.textForeground#e9e8e6
symbolIcon.typeParameterForeground#e9e8e6
symbolIcon.unitForeground#e9e8e6
symbolIcon.variableForeground#e9e8e6
tab.activeBackground#6069741a
tab.activeBorder#0000
tab.activeBorderTop#0000
tab.activeForeground#e9e8e6
tab.activeModifiedBorder#0000
tab.border#0000
tab.hoverBackground#6069742a
tab.hoverBorder#0000
tab.inactiveBackground#0000
tab.inactiveForeground#606974
tab.inactiveModifiedBorder#0000
tab.unfocusedActiveBackground#0000
tab.unfocusedActiveBorder#0000
tab.unfocusedActiveBorderTop#0000
tab.unfocusedActiveForeground#e9e8e6
tab.unfocusedActiveModifiedBorder#0000
tab.unfocusedHoverBackground#0000
tab.unfocusedHoverBorder#0000
tab.unfocusedInactiveForeground#606974
tab.unfocusedInactiveModifiedBorder#0000
terminal.ansiBlack#1f2023
terminal.ansiBlue#9dd5d9
terminal.ansiBrightBlack#1f2023
terminal.ansiBrightBlue#9dd5d9
terminal.ansiBrightCyan#f4b1e1
terminal.ansiBrightGreen#1fa2af
terminal.ansiBrightMagenta#d7aafd
terminal.ansiBrightRed#fc8466
terminal.ansiBrightWhite#e9e8e6
terminal.ansiBrightYellow#f6c177
terminal.ansiCyan#f4b1e1
terminal.ansiGreen#1fa2af
terminal.ansiMagenta#d7aafd
terminal.ansiRed#fc8466
terminal.ansiWhite#e9e8e6
terminal.ansiYellow#f6c177
terminal.background#1f2023
terminal.border#0000
terminal.foreground#e9e8e6
terminal.selectionBackground#9dd5d92a
terminalCursor.background#e9e8e6
terminalCursor.foreground#60697490
textBlockQuote.background#1f2023
textBlockQuote.border#0000
textCodeBlock.background#6069741a
textLink.activeForeground#d7aafd
textLink.foreground#d7aafd
textPreformat.foreground#f6c177
textSeparator.foreground#60697480
titleBar.activeBackground#1a1b1e
titleBar.activeForeground#606974
titleBar.border#0000
titleBar.inactiveBackground#1f2023
titleBar.inactiveForeground#606974
tree.indentGuidesStroke#606974
walkThrough.embeddedEditorBackground#1a1b1e
welcomePage.background#1a1b1e
welcomePage.buttonBackground#1a1b1e
welcomePage.buttonHoverBackground#1f2023
widget.shadow#0101011a
window.activeBorder#1f2023
window.inactiveBorder#1f2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#606974a1	italic
constant	#d7aafd	—
constant.other	#d7aafd	—
constant.numeric, constant.charcter.escape	#fc8466	—
constant.language	#fc8466	—
constant.language.import-export-all	#fc8466	—
entity, entity.name, entity.name.function.member	#fc8466	—
entity.name.constant, variable.other.constant	#e9e8e6	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#9dd5d9	—
entity.other.attribute-name, entity.other.inherited-class	#d7aafd	italic
invalid	#fc8466	—
invalid.deprecated	#606974	—
keyword, keyword.operator	#1fa2af	—
keyword.other.important	#fc8466	—
keyword.other.unit	#fc8466	—
keyword.control.css	#1fa2af	—
meta.brace, meta.tag	#e9e8e6	—
meta.object	#d7aafd	—
meta.import	#1fa2af	—
meta.property-value	#1fa2af	—
meta.property-list	#9dd5d9	—
keyword.control.at-rule.include.scss, punctuation.definition.keyword.scs	#1fa2af	—
entity.other.attribut-name	#f4b1e1	—
support.function.misc.scss	#1fa2af	—
entity.name.function.scss	#d7aafd	italic
punctuation.definition.comment.scss	#606974	—
punctuation.definition.keyword.scss	#606974	—
entity.name.tag.reference.scss	#1fa2af	—
variable.argument.css	#f4b1e1	—
entity.name.section.markdown	#9dd5d9	—
markup.bold.markdown	#d7aafd	—
markup.italic.markdown	#1FA2AF	—
markup.inline.raw.string.markdown	#fc8466	—
punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.raw.markdown	#606974ff	—
punctuation.separator, punctuation.terminator, punctuation.access	#606974	—
punctuation.accessor	#1fa2af	—
punctuation.definition, punctuation.definition.parameters	#606974a1	—
punctuation.definition.string	#f6c177	—
punctuation.definition.group	#606974	—
punctuation.definition.tag	#606974a1	—
punctuation.section	#606974ff	—
punctuation.definition.template-expression	#606974ff	—
storage.type, storage.modifier	#1fa2af	—
string	#f6c177	—
support	#9dd5d9	—
support.constant	#f6c177	—
support.function	#1fa2af	italic
support.function.js	#fc8466	italic
support.class, support.type.object	#9dd5d9ff	—
support.class.console.js, support.class.component.js	#9dd5d9	—
variable	#f4b1e1	italic
variable.other, variable.function, variable.argument	#e9e8e6	italic
variable.other.property	#e9e8e6	italic
variable.language	#e9e8e6	italic
variable.parameter	#f4b1e1	italic
variable.parameter.url	#fc8466	italic

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