From ee01dc23408b3e78dfcc4aed0a144c10458bdb3c Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 29 Aug 2019 15:09:24 +0300
Subject: [PATCH] theming.md: automate _root.scss. (#29326)

---
 scss/_root.scss                               |  1 -
 .../docs/4.3/getting-started/theming.md       | 32 ++++---------------
 2 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index dcad3ee013da..055ac32fb091 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.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index b999e490935b..0c8fe306ad01 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -369,31 +369,13 @@ 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.
 
 {{< highlight 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;
-  --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 -}}
+
+{{- index $match 0 -}}
+
+{{< /root.inline >}}
 {{< /highlight >}}
 
 ### Examples