svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 06:58:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve Pagefind UI styling for light and dark mode

Browse Source 
Use high-specificity selectors outside @layer to properly override
Pagefind's :root defaults. Style input, results, marks, buttons,
tags, and clear button for both themes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-05 11:13:35 +01:00
parent 73eb019f70
commit 4e6a4747e6
1 changed files with 161 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/tailwind.css
+161 -32
View File
@@ -450,43 +450,172 @@
} }
} }
/* Pagefind UI theme overrides */ /* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
@layer components { #search .pagefind-ui {
.pagefind-ui-container { --pagefind-ui-scale: 1;
--pagefind-ui-scale: 1; --pagefind-ui-primary: #2563eb;
--pagefind-ui-primary: #2563eb; --pagefind-ui-text: #18181b;
--pagefind-ui-text: #18181b; --pagefind-ui-background: #ffffff;
--pagefind-ui-background: #ffffff; --pagefind-ui-border: #e4e4e7;
--pagefind-ui-border: #e4e4e7; --pagefind-ui-tag: #f4f4f5;
--pagefind-ui-tag: #f4f4f5; --pagefind-ui-border-width: 1px;
--pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 8px;
--pagefind-ui-border-radius: 8px; --pagefind-ui-image-border-radius: 8px;
--pagefind-ui-font: inherit; --pagefind-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
} }
.dark .pagefind-ui-container { .dark #search .pagefind-ui {
--pagefind-ui-primary: #60a5fa; --pagefind-ui-primary: #60a5fa;
--pagefind-ui-text: #f4f4f5; --pagefind-ui-text: #f4f4f5;
--pagefind-ui-background: #09090b; --pagefind-ui-background: #09090b;
--pagefind-ui-border: #3f3f46; --pagefind-ui-border: #3f3f46;
--pagefind-ui-tag: #27272a; --pagefind-ui-tag: #27272a;
} }
.pagefind-ui-container .pagefind-ui__search-input { /* Search input */
@apply bg-white dark:bg-surface-900 text-surface-900 dark:text-surface-100; #search .pagefind-ui__search-input {
} background-color: #ffffff;
color: #18181b;
border-color: #e4e4e7;
font-weight: 400;
}
.pagefind-ui-container .pagefind-ui__result-link { .dark #search .pagefind-ui__search-input {
@apply text-primary-600 dark:text-primary-400 hover:underline; background-color: #18181b;
} color: #f4f4f5;
border-color: #3f3f46;
}
.pagefind-ui-container .pagefind-ui__result-excerpt { #search .pagefind-ui__search-input:focus {
@apply text-surface-600 dark:text-surface-400; outline: 2px solid #3b82f6;
} outline-offset: 2px;
border-color: #3b82f6;
}
.pagefind-ui-container .pagefind-ui__message { .dark #search .pagefind-ui__search-input:focus {
@apply text-surface-600 dark:text-surface-400; outline-color: #60a5fa;
} border-color: #60a5fa;
}
/* Search clear button */
#search .pagefind-ui__search-clear {
color: #52525b;
background-color: #ffffff;
}
.dark #search .pagefind-ui__search-clear {
color: #a1a1aa;
background-color: #18181b;
}
#search .pagefind-ui__search-clear:hover {
color: #18181b;
}
.dark #search .pagefind-ui__search-clear:hover {
color: #f4f4f5;
}
/* Result links */
#search .pagefind-ui__result-link {
color: #2563eb;
}
#search .pagefind-ui__result-link:hover {
text-decoration: underline;
}
.dark #search .pagefind-ui__result-link {
color: #60a5fa;
}
/* Result excerpts */
#search .pagefind-ui__result-excerpt {
color: #52525b;
}
.dark #search .pagefind-ui__result-excerpt {
color: #a1a1aa;
}
/* Highlighted search terms in results */
#search .pagefind-ui__result-excerpt mark,
#search mark {
background-color: #dbeafe;
color: #1e40af;
padding: 0.1em 0.2em;
border-radius: 2px;
}
.dark #search .pagefind-ui__result-excerpt mark,
.dark #search mark {
background-color: #1e3a8a;
color: #bfdbfe;
}
/* Message (result count) */
#search .pagefind-ui__message {
color: #52525b;
}
.dark #search .pagefind-ui__message {
color: #a1a1aa;
}
/* "Load more" button */
#search .pagefind-ui__button {
color: #2563eb;
background-color: #ffffff;
border-color: #e4e4e7;
cursor: pointer;
}
#search .pagefind-ui__button:hover {
background-color: #eff6ff;
border-color: #2563eb;
}
.dark #search .pagefind-ui__button {
color: #60a5fa;
background-color: #09090b;
border-color: #3f3f46;
}
.dark #search .pagefind-ui__button:hover {
background-color: #18181b;
border-color: #60a5fa;
}
/* Filter panel labels */
#search .pagefind-ui__filter-name,
#search .pagefind-ui__filter-label {
color: #18181b;
}
.dark #search .pagefind-ui__filter-name,
.dark #search .pagefind-ui__filter-label {
color: #f4f4f5;
}
/* Result tags */
#search .pagefind-ui__result-tag {
background-color: #f4f4f5;
color: #52525b;
}
.dark #search .pagefind-ui__result-tag {
background-color: #27272a;
color: #a1a1aa;
}
/* Sub-result nested links */
#search .pagefind-ui__result-nested .pagefind-ui__result-link {
color: #2563eb;
font-weight: 400;
}
.dark #search .pagefind-ui__result-nested .pagefind-ui__result-link {
color: #60a5fa;
} }
/* Mobile-specific improvements */ /* Mobile-specific improvements */