Dark mode in default pagefind-modular-ui.css

joergklein commented 1 month ago

I would like to use pagefind in a website which I have programmed with Hugo and Bootstrap 5.3. Pagefind works perfectly in light mode, but unfortunately not in dark mode. My question is, why is there no dark mode available in pagefind-modular-ui.css?

flyfoto commented 1 month ago

This can be done by modifying the pagefind-ui.css that pagefind is generating: Identify the following section

:root{
    --pagefind-ui-scale:.8;
    --pagefind-ui-primary:#393939;
    --pagefind-ui-text:#393939;
    --pagefind-ui-background:#ffffff;
    --pagefind-ui-border:#eeeeee;
    --pagefind-ui-tag:#eeeeee;

Change it to :root{ --pagefind-ui-scale:.8; --pagefind-ui-primary:#aaa; --pagefind-ui-text:#aaa; --pagefind-ui-background: #152028; --pagefind-ui-border: #152028; --pagefind-ui-tag: #152028; or whatever colors you prefer.

joergklein commented 1 month ago

That's the idea I have. Unfortunately, it doesn't work.

/shortcodes/pagefind.html

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<style>
    @media (prefers-color-scheme: light) {
        :root {
            --pagefind-ui-scale: 0.8;
            --pagefind-ui-primary: #B31218;
            --pagefind-ui-fade: #707070;
            --pagefind-ui-text: #000000;
            --pagefind-ui-background: #ffffff;
            --pagefind-ui-border: #000000;
            --pagefind-ui-tag: #000000;
            --pagefind-ui-border-width: 2px;
            --pagefind-ui-border-radius: 4px;
            --pagefind-ui-image-border-radius: 4px;
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --pagefind-ui-primary: #ffffff;
            --pagefind-ui-text: #ffffff;
            --pagefind-ui-background: #DEE2E6;
            --pagefind-ui-border: #DEE2E6;
            --pagefind-ui-tag: #DEE2E6;
            --pagefind-ui-border-width: 2px;
            --pagefind-ui-border-radius: 4px;
            --pagefind-ui-image-border-radius: 4px;
        }
    }
</style>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

bglw commented 1 month ago

Hmm, that should work. Both the default and modular UI libraries use those custom properties for all styling.

I wonder if there's something going on with specificity here. You could try changing your overrides from :root { ... } to body { ... } and see if that makes a difference.

Alternatively, I'd check whether the prefers-color-scheme is being passed through from the OS correctly by setting some broader background color on the body. (I haven't used Bootstrap 5.3, but I don't believe it uses prefers-color-scheme as its theming flag, so that might also be the cause)

joergklein commented 1 month ago

I build in the bootstrap switch. Please take a look at https://getbootstrap.com/docs/5.3/getting-started/introduction/

<!doctype html>
 <html lang="en" data-bs-theme="auto">

bootstrap

bglw commented 1 month ago

Yeah it looks like you're probably wanting to use selectors like [data-bs-theme="dark"] rather than using media queries. I don't have a site to test it on, but I'm assuming bootstrap just styles everything based on the data-bs-theme attribute.

e.g.

[data-bs-theme="dark"] {
  --pagefind-ui-primary: #ffffff;
  --pagefind-ui-text: #ffffff;
  --pagefind-ui-background: #DEE2E6;
  --pagefind-ui-border: #DEE2E6;
  --pagefind-ui-tag: #DEE2E6;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-image-border-radius: 4px;
}

joergklein commented 1 month ago

It works fine. Thank you for the help.

CloudCannon / pagefind

Dark mode in default pagefind-modular-ui.css #614