diff --git a/sass/base/generic.scss b/sass/base/generic.scss
index b7ee0ccb..b2229307 100644
--- a/sass/base/generic.scss
+++ b/sass/base/generic.scss
@@ -32,7 +32,7 @@ $pre-font-size: 0.875em !default;
 $pre-padding: 1.25rem 1.5rem !default;
 $pre-code-font-size: 1em !default;
 
-:root {
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "body-background-color": #{$body-background-color},
diff --git a/sass/base/skeleton.scss b/sass/base/skeleton.scss
index 3a3dcab0..3ae23c64 100644
--- a/sass/base/skeleton.scss
+++ b/sass/base/skeleton.scss
@@ -9,7 +9,7 @@ $skeleton-block-min-height: 4.5em !default;
 $skeleton-lines-gap: 0.75em !default;
 $skeleton-line-height: 0.75em !default;
 
-:root {
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "skeleton-background": #{$skeleton-background},
diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss
index 21414fc3..d4d6e38a 100644
--- a/sass/components/navbar.scss
+++ b/sass/components/navbar.scss
@@ -101,7 +101,7 @@ $navbar-colors: dv.$colors !default;
   z-index: cv.getVar("navbar-fixed-z");
 }
 
-:root {
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "navbar-height": #{$navbar-height},
diff --git a/sass/form/tools.scss b/sass/form/tools.scss
index 56354446..1855dd34 100644
--- a/sass/form/tools.scss
+++ b/sass/form/tools.scss
@@ -15,7 +15,7 @@ $label-colors: shared.$form-colors !default;
 
 $field-block-spacing: 0.75rem !default;
 
-:root {
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "label-color": #{$label-color},
diff --git a/sass/grid/columns.scss b/sass/grid/columns.scss
index 01fcb58c..1ec72a8a 100644
--- a/sass/grid/columns.scss
+++ b/sass/grid/columns.scss
@@ -7,7 +7,7 @@
 
 $column-gap: 0.75rem !default;
 
-:root {
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "column-gap": #{$column-gap},
diff --git a/sass/themes/_index.scss b/sass/themes/_index.scss
index d4168f52..8cc8a047 100644
--- a/sass/themes/_index.scss
+++ b/sass/themes/_index.scss
@@ -7,7 +7,7 @@
 @use "dark";
 @use "setup";
 
-:root {
+#{cv.$variables-host} {
   @include light.light-theme;
   @include setup.setup-theme;
 }
diff --git a/sass/utilities/controls.scss b/sass/utilities/controls.scss
index 5ad16dd8..0f9d9153 100644
--- a/sass/utilities/controls.scss
+++ b/sass/utilities/controls.scss
@@ -16,7 +16,10 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
 
 $control-focus-shadow-l: 50% !default;
 
-:root {
+@debug cv.$variables-host;
+@debug iv.$radius;
+
+#{cv.$variables-host} {
   @include cv.register-vars(
     (
       "control-radius": #{$control-radius},
diff --git a/sass/utilities/css-variables.scss b/sass/utilities/css-variables.scss
index b51cf200..29d68747 100644
--- a/sass/utilities/css-variables.scss
+++ b/sass/utilities/css-variables.scss
@@ -6,6 +6,8 @@
 @use "initial-variables" as iv;
 @use "functions" as fn;
 
+$variables-host: iv.$variables-host;
+
 @function buildVarName($name, $prefix: "", $suffix: "") {
   @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
 }
@@ -419,7 +421,7 @@
 
 @mixin system-theme($name) {
   @media (prefers-color-scheme: #{$name}) {
-    :root {
+    #{$variables-host} {
       @content;
     }
   }
diff --git a/sass/utilities/initial-variables.scss b/sass/utilities/initial-variables.scss
index dbdab4e3..72bdaebe 100644
--- a/sass/utilities/initial-variables.scss
+++ b/sass/utilities/initial-variables.scss
@@ -153,3 +153,4 @@ $class-prefix: "" !default;
 $cssvars-prefix: "bulma-" !default;
 $helpers-prefix: "is-" !default;
 $helpers-has-prefix: "has-" !default;
+$variables-host: ":root" !default;