feat(lib): Add a customizable root for Boosted

louismaximepiton · louismaximepiton · commit 702c7c69b927 · 2025-11-04T18:07:21.000+01:00
diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -2,7 +2,7 @@
 //
 // Rows contain your columns.
 
-:root {
+#{$root-selector} { // Boosted mod: instead of `:root`
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -25,7 +25,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+#{$root-selector} { // Boosted mod: instead of `:root`
   // Boosted mod: Improve focus visibility when fixed/sticky header is used
   // See https://caniuse.com/?search=scroll-padding
   // scss-docs-start scroll-offset
@@ -61,7 +61,7 @@
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
-body {
+#{$root-selector} > * { // Boosted mod: instead of `body`
   position: relative; // Boosted mod: required for back-to-top component
   margin: 0; // 1
   font-family: var(--#{$prefix}body-font-family);
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -1,5 +1,5 @@
 // Boosted mod
-:root,
+#{$root-selector},
 [data-bs-theme] {
   color: var(--#{$prefix}body-color);
   background-color: var(--#{$prefix}body-bg);
@@ -8,8 +8,7 @@
 // Note that some of the following variables in `:root, [data-bs-theme="light"]` could be extracted into `:root` only selector since they are not modified by other color modes!
 // End mod
 
-:root,
-[data-bs-theme="light"] {
+@include color-mode(light, true) {
   color-scheme: light; // Boosted mod
 
   // Note: Custom variable values only support SassScript inside `#{}`.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -450,6 +450,7 @@ $color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 
+$root-selector:               ":root" !default; // Boosted mod
 $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
 $prefix:                      $variable-prefix !default;
 // fusv-disable
diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
@@ -3,7 +3,7 @@
   @if $color-mode-type == "media-query" {
     @if $root == true {
       @media (prefers-color-scheme: $mode) {
-        :root {
+        #{$root-selector} {
           @content;
         }
       }
@@ -12,6 +12,11 @@
         @content;
       }
     }
+  } @else if $root == true and $mode == light {
+    #{$root-selector},
+    [data-bs-theme="#{$mode}"] {
+      @content;
+    }
   } @else {
     [data-bs-theme="#{$mode}"] {
       @content;
diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx
@@ -213,6 +213,31 @@ For example, you can create a “blue theme” with the selector `data-bs-theme=
 </div>
 ```
 
+### Change the root selector
+
+You can also change the root selector from where the theme variables are set. By default, it's set to `:root`, but you can change it to any other selector. This is useful if you want to apply the theme to another element, for instance in Angular where you can't access easily the `<html>` element.
+
+```scss
+$root-selector: "#app";
+
+@include "boosted";
+```
+
+Outputs to:
+
+```css
+#app,
+[data-bs-theme="light"] {
+  /* Your light mode variables definition */
+}
+
+[data-bs-theme="dark"] {
+  /* Your dark mode variables definition */
+}
+
+/* Further Boosted CSS */
+```
+
 ## JavaScript
 
 To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We’ve built a toggler in our documentation that initially defers to a user’s current system color mode, but provides an option to override that and pick a specific color mode.
diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx
@@ -7,6 +7,12 @@ aliases:
 toc: true
 ---
 
+## v5.3.8
+
+### Core
+
+- <span class="badge text-bg-warning">Warning</span> The root selector have been tweaked for more flexibility on JS frameworks. You can change it by defining `$root-selector`, before the Boosted custom call in Scss. More information in our [color modes documentation]([[docsref:/customize/color-modes#change-the-root-selector]]). Please don’t hesitate to contact us if you find any issue with it. Nonetheless, note that it shouldn’t change anything for a normal usage of Boosted.
+
 ## v5.3.7
 
 ## v5.3.6
diff --git a/site/src/scss/_boosted.scss b/site/src/scss/_boosted.scss
@@ -1,5 +1,5 @@
 // stylelint-disable selector-max-id
-:root {
+#{$root-selector} { // Boosted mod: instead of `:root`
   scroll-padding-top: $offset-top * .5;
 
   @include media-breakpoint-up(lg) {
diff --git a/site/src/scss/_search.scss b/site/src/scss/_search.scss
@@ -2,7 +2,7 @@
 
 // Boosted mod: the entire file is modified and is specific to Boosted
 
-:root {
+#{$root-selector} { // Boosted mod: instead of `:root`
   // All available CSS vars and specific modifications for Boosted
   --docsearch-primary-color: var(--bs-primary);
   --docsearch-text-color: var(--bs-body-color);
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
@@ -1,6 +1,6 @@
 // Note: Bootstrap stops at --base0F
 
-:root,
+#{$root-selector}, // Boosted mod: instead of `:root`
 [data-bs-theme="light"] {
   --base00: #{$white};
   --base01: #{$gray-700};
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
@@ -11,7 +11,7 @@ $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-
 $bd-gutter-x: .625rem; // Boosted mod
 $bd-callout-variants: info, warning, danger !default;
 
-:root,
+#{$root-selector}, // Boosted mod: instead of `:root`
 [data-bs-theme="light"] {
   --bd-primary-light: #{$bd-primary-light}; // Boosted mod
   // Boosted mod: no --bd-purple

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`//`
`3`	`3`	`// Rows contain your columns.`
`4`	`4`
`5`		`-:root {`
	`5`	+#{$root-selector} { // Boosted mod: instead of `:root`
`6`	`6`	`@each $name, $value in $grid-breakpoints {`
`7`	`7`	`--#{$prefix}breakpoint-#{$name}: #{$value};`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`@if $color-mode-type == "media-query" {`
`4`	`4`	`@if $root == true {`
`5`	`5`	`@media (prefers-color-scheme: $mode) {`
`6`		`- :root {`
	`6`	`+ #{$root-selector} {`
`7`	`7`	`@content;`
`8`	`8`	`}`
`9`	`9`	`}`
`@@ -12,6 +12,11 @@`
`12`	`12`	`@content;`
`13`	`13`	`}`
`14`	`14`	`}`
	`15`	`+ } @else if $root == true and $mode == light {`
	`16`	`+ #{$root-selector},`
	`17`	`+ [data-bs-theme="#{$mode}"] {`
	`18`	`+ @content;`
	`19`	`+ }`
`15`	`20`	`} @else {`
`16`	`21`	`[data-bs-theme="#{$mode}"] {`
`17`	`22`	`@content;`