PageFind

The Bothy theme supports PageFind, including light and dark modes. To use PageFind with Bothy, paste the following CSS styling after the CSS and JS loading HTML that you can find on PageFind’s docs.

<style>
/* Pagefind UI Variables */
:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font:
    system, -apple-system, "BlinkMacSystemFont", ".SFNSText-Regular", "San Francisco", "Roboto",
    "Segoe UI", "Helvetica Neue", "Lucida Grande", "Ubuntu", "arial", sans-serif;
}

/* Light theme colors for Pagefind UI */
[data-theme="light"] {
  --pagefind-ui-primary: #333333;
  --pagefind-ui-text: #333333;
  --pagefind-ui-background: #f1f1f1;
  --pagefind-ui-border: #bebebe;
  --pagefind-ui-tag: #333333;
}

/* Dark theme colors for Pagefind UI */
[data-theme="dark"] {
  --pagefind-ui-primary: #e0e0e0;
  --pagefind-ui-text: #e0e0e0;
  --pagefind-ui-background: #404040;
  --pagefind-ui-border: #bebebe;
  --pagefind-ui-tag: #e0e0e0;
}

/* Auto dark mode support for Pagefind UI */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pagefind-ui-primary: #e0e0e0;
    --pagefind-ui-text: #e0e0e0;
    --pagefind-ui-background: #404040;
    --pagefind-ui-border: #bebebe;
    --pagefind-ui-tag: #e0e0e0;
  }
}
</style>