From a436a821f270d2e6a1c76a28d08ad8f92bfaeaa3 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sun, 8 Nov 2020 09:34:33 +0200
Subject: [PATCH] theming.md: read CSS variables from the dist file

---
 scss/_root.scss                               |  1 -
 .../docs/4.5/getting-started/theming.md       | 41 +++++--------------
 2 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 8110030c640c..ad550df3b49b 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,4 +1,3 @@
-// Do not forget to update getting-started/theming.md!
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
diff --git a/site/content/docs/4.5/getting-started/theming.md b/site/content/docs/4.5/getting-started/theming.md
index 57bb0fb5fd7f..4557fca3e5ca 100644
--- a/site/content/docs/4.5/getting-started/theming.md
+++ b/site/content/docs/4.5/getting-started/theming.md
@@ -425,36 +425,17 @@ Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https:
 Here are the variables we include (note that the `:root` is required). They're located in our `_root.scss` file.
 
 ```css
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
+
+{{- if (eq (len $match) 0) -}}
+{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
+{{- end -}}
+
+{{- index $match 0 -}}
+
+{{< /root.inline >}}
 ```
 
 ### Examples