diff --git a/scss/_grid.scss b/scss/_grid.scss
index 048f8009a3..1feeae5e17 100644
--- 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
index 87a459c0e2..9a8dc2b141 100644
--- 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
index e8e709fce1..e46ce5e051 100644
--- 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
index 6a1f9248e6..53769fd3eb 100644
--- 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
index 03338b0256..2e0deddb78 100644
--- 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,10 +12,16 @@
         @content;
       }
     }
-  } @else {
+  } @else if $root == true and $mode == light {
+    #{$root-selector},
     [data-bs-theme="#{$mode}"] {
       @content;
     }
+  } @else {
+    [data-bs-theme="#{$mode}"],
+    #{$root-selector}[data-bs-theme="#{$mode}"] {
+      @content;
+    }
   }
 }
 // scss-docs-end color-mode-mixin
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index df1b65f661..713382a5b5 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -21,11 +21,13 @@
         }
       }
       @include expect() {
-        [data-bs-theme=dark] .element {
+        [data-bs-theme=dark] .element,
+        :root[data-bs-theme=dark] .element {
           color: var(--bs-primary-text-emphasis);
           background-color: var(--bs-primary-bg-subtle);
         }
-        [data-bs-theme=dark] {
+        [data-bs-theme=dark],
+        :root[data-bs-theme=dark] {
           --custom-color: #757bd8; // Boosted mod: instead of `#3aff8`
         }
       }
diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx
index f6229f20d3..d9768cc04e 100644
--- 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
index c09bec3636..d79eef24bb 100644
--- 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
index 570a9f856a..e0c10ca85b 100644
--- 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
index 759cbc57e6..f73d6f9e02 100644
--- 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
index e0db01221f..b6ca8c196d 100644
--- 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
index 2429ee6e7a..abd2de051f 100644
--- 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