giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases 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

167
css/tailwind.css
View File

@@ -450,9 +450,8 @@
}
}
/* Pagefind UI theme overrides */
@layer components {
.pagefind-ui-container {
/* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
#search .pagefind-ui {
--pagefind-ui-scale: 1;
--pagefind-ui-primary: #2563eb;
--pagefind-ui-text: #18181b;
@@ -461,32 +460,162 @@
--pagefind-ui-tag: #f4f4f5;
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 8px;
--pagefind-ui-font: inherit;
}
--pagefind-ui-image-border-radius: 8px;
--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-text: #f4f4f5;
--pagefind-ui-background: #09090b;
--pagefind-ui-border: #3f3f46;
--pagefind-ui-tag: #27272a;
}
}
.pagefind-ui-container .pagefind-ui__search-input {
@apply bg-white dark:bg-surface-900 text-surface-900 dark:text-surface-100;
}
/* Search input */
#search .pagefind-ui__search-input {
background-color: #ffffff;
color: #18181b;
border-color: #e4e4e7;
font-weight: 400;
}
.pagefind-ui-container .pagefind-ui__result-link {
@apply text-primary-600 dark:text-primary-400 hover:underline;
}
.dark #search .pagefind-ui__search-input {
background-color: #18181b;
color: #f4f4f5;
border-color: #3f3f46;
}
.pagefind-ui-container .pagefind-ui__result-excerpt {
@apply text-surface-600 dark:text-surface-400;
}
#search .pagefind-ui__search-input:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-color: #3b82f6;
}
.pagefind-ui-container .pagefind-ui__message {
@apply text-surface-600 dark:text-surface-400;
}
.dark #search .pagefind-ui__search-input:focus {
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 */