Fix CSS variables mentioned in our docs

1 files changed, 16 insertions, 1 deletions

diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md
index 05c77df57..838a1abf7 100644
--- a/site/content/docs/5.3/customize/css-variables.md
+++ b/site/content/docs/5.3/customize/css-variables.md
@@ -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.