Support for dark and light mode?

[tohn]

Love this search so far, really easy to integrate! <3

But I didn't find anything for the support of more than one color mode?
Right now it works well for light mode, but the text color is barely readable in dark mode.

So it would be awesome to have support for dark and light mode :)

[bglw]

Hi!

There isn't a specific option for light/dark mode, but the UI styles are connected to CSS variables, so if you added the following CSS in your styles after pagefind-ui.css:

:root {
  --pagefind-ui-primary: #ffffff;
  --pagefind-ui-text: #ffffff;
  --pagefind-ui-background: #393939;
  --pagefind-ui-border: #393939;
  --pagefind-ui-tag: #393939;
}

Then you would get a dark mode that you could configure. I'll look at shipping something like a pagefind-ui.dark.css file that picks some default dark values.

[tohn]

With this code I can only style one mode, but if you use a Hugo theme with two modes (for example https://github.com/lxndrblz/anatole), then this is not enough ;)

So maybe an ability to set both modes would be best. Maybe this could be implemented? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Thanks a lot anyway :)

[bglw]

I see — the challenge is that implementing prefers-color-scheme would make the Pagefind UI react to your system's light/dark mode rather than the site it is within. Looking at Anatole, the light/dark mode is implemented with a class toggle on the body, which isn't something standard that Pagefind could detect.

A solution specific for Anatole: if you add the following CSS:

.body.theme--dark {
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #152028;
  --pagefind-ui-tag: #152028;
}

Then your Pagefind UI variables will only be set within Anatole's dark mode class, which would provide the light/dark switching for Pagefind 🙂

[tohn]

Oh, thank you so much, that's way easier than I thought 🙈 Maybe this could be also mentioned on the website?

But since my problem is solved, this issue can be closed, thank you again!

[bglw]

Glad to hear — I've added some guidance to the docs on styling here: https://unreleased.pagefind.app/docs/ui/#customising-the-styles which will go out alongside the next release. Let me know if that seems clear enough 🙂

Cheers!

[tohn]

Let me know if that seems clear enough 🙂

Perfect, thank you! 🎉