root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix CSS variables mentioned in our docs

This commit is contained in:
Julien Déramond 2022-12-28 09:57:40 +01:00 committed by Mark Otto
parent 7d9aa9d716
commit baf5d4c4c1
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/content/docs/5.3/customize/css-variables.md
View File

@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode.
```css
{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}
{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
{{- if (eq (len $match) 0) -}}
{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
@ -32,6 +32,21 @@ These CSS variables are available everywhere, regardless of color mode.
{{< /root.inline >}}
```
### Dark mode
These variables are scoped to our built-in dark mode.
```css
{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}
{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
{{- if (eq (len $match) 0) -}}
{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
{{- end -}}
{{- index $match 0 -}}
{{< /root.inline >}}
```
## Component variables
Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.