rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Docs: handle light/dark mode in Algolia search modal (#37738)

Browse Source 
* Docs: handle light/dark mode in Algolia search modal

* Improve scopes
This commit is contained in:
Julien Déramond 2022-12-28 01:43:42 +01:00 committed by GitHub
parent eb4819474d
commit 993ad97fdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
site/assets/scss/_search.scss
View File

@ -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);
}

2
site/assets/scss/_variables.scss
View File

@ -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);