Skip to content

Commit ce3fd01

Browse files
authored
docs: add dark mode support for Algolia DocSearch (#5109)
## Summary - Adds dark mode CSS variables for Algolia DocSearch modal - Uses Material Design variables for consistent theming with existing dark mode - Implements subtle shadow and background colors appropriate for dark theme - Uses consistent dark mode selector pattern matching existing codebase ## Test plan - [x] Test search modal in light mode (unchanged) - [x] Test search modal in dark mode (now properly styled) - [x] Verify colors match overall Material Design dark theme ## Before <img width="595" height="222" alt="image" src="https://github.com/user-attachments/assets/16dd3d15-53fe-43fc-9d00-80150f083145" /> <img width="1049" height="345" alt="image" src="https://github.com/user-attachments/assets/2f1a91cf-55ea-4df7-ad28-ddd9b114a48d" /> ## After <img width="584" height="228" alt="image" src="https://github.com/user-attachments/assets/2be1afe8-2ccf-47c2-a13e-9cc525debd35" /> <img width="1032" height="341" alt="image" src="https://github.com/user-attachments/assets/bcb98d6c-073e-4ed2-b1b1-7f86f03ec5a7" />
1 parent 293ff11 commit ce3fd01

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

docs/css/docsearch.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,21 @@
6767
.DocSearch-Help {
6868
font-size: 1em !important
6969
}
70+
71+
/* DARK MODE OVERRIDES */
72+
[data-md-color-scheme="slate"][data-md-color-primary="black"] {
73+
--docsearch-text-color: var(--md-default-fg-color);
74+
--docsearch-container-background: rgba(0, 0, 0, 0.6);
75+
--docsearch-modal-background: var(--md-default-bg-color);
76+
--docsearch-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
77+
--docsearch-searchbox-background: var(--md-code-bg-color);
78+
--docsearch-searchbox-focus-background: var(--md-code-bg-color);
79+
--docsearch-hit-color: var(--md-default-fg-color);
80+
--docsearch-hit-active-color: var(--md-default-bg-color);
81+
--docsearch-hit-background: transparent;
82+
--docsearch-hit-shadow: none;
83+
--docsearch-footer-background: var(--md-default-bg-color);
84+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.2);
85+
--docsearch-spacing: 12px;
86+
--docsearch-muted-color: var(--md-default-fg-color--light);
87+
}

0 commit comments

Comments
 (0)