diff options
| author | Julien Déramond <[email protected]> | 2022-12-28 01:43:42 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-12-27 16:43:42 -0800 |
| commit | 993ad97fdc0bcbc0fb63dcafb466f81e5be004e6 (patch) | |
| tree | 9951fe42bcf245e118a21542ff711b548c158db8 /site | |
| parent | eb4819474de3d1dd3bc1a3d6df052fc9c35a9b2b (diff) | |
| download | bootstrap-993ad97fdc0bcbc0fb63dcafb466f81e5be004e6.tar.xz bootstrap-993ad97fdc0bcbc0fb63dcafb466f81e5be004e6.zip | |
Docs: handle light/dark mode in Algolia search modal (#37738)
* Docs: handle light/dark mode in Algolia search modal
* Improve scopes
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/scss/_search.scss | 31 | ||||
| -rw-r--r-- | site/assets/scss/_variables.scss | 2 |
2 files changed, 31 insertions, 2 deletions
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 01e9d036e..3046d57db 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -1,5 +1,30 @@ // stylelint-disable selector-class-pattern +:root { + --docsearch-primary-color: var(--bd-violet); + --docsearch-logo-color: var(--bd-violet); +} + +@include color-mode(dark, true) { + // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3 + // in html[data-theme="dark"] selector + // and are slightly modified for formatting purpose + --docsearch-text-color: #f5f6f7; + --docsearch-container-background: rgba(9, 10, 17, .8); + --docsearch-modal-background: #15172a; + --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; + --docsearch-searchbox-background: #090a11; + --docsearch-searchbox-focus-background: #000; + --docsearch-hit-color: #bec3c9; + --docsearch-hit-shadow: none; + --docsearch-hit-background: #090a11; + --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); + --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3); + --docsearch-footer-background: #1e2136; + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2); + --docsearch-muted-color: #7f8497; +} + .bd-search { position: relative; @@ -139,3 +164,9 @@ display: flex; align-items: center; } + +// Fix --docsearch-logo-color that doesn't do anything +.DocSearch-Logo svg .cls-1, +.DocSearch-Logo svg .cls-2 { + fill: var(--docsearch-logo-color); +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index b3730ebef..9d3f82e12 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -18,8 +18,6 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; - --docsearch-primary-color: var(--bd-violet); - --docsearch-logo-color: var(--bd-violet); --bd-violet-bg: var(--bd-violet); --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1); |