diff --git a/.changeset/twenty-cooks-visit.md b/.changeset/twenty-cooks-visit.md
new file mode 100644
index 00000000000..c8095ae0da3
--- /dev/null
+++ b/.changeset/twenty-cooks-visit.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/system": minor
+---
+
+Added `[data-css-vars-root=true]` to the CSS variables root selector. This
+allows to layer the CSS variable definitions and allow the semantic tokens to
+react to `data-theme="dark"` and `data-theme="light"`.
diff --git a/packages/system/src/providers.tsx b/packages/system/src/providers.tsx
index a54690b2796..5fe06fd9815 100644
--- a/packages/system/src/providers.tsx
+++ b/packages/system/src/providers.tsx
@@ -34,12 +34,17 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 export interface CSSVarsProps {
   /**
    * The element to attach the CSS custom properties to.
-   * @default ":host, :root"
+   * Re-hoist CSS vars by attaching `data-css-vars-root={true}` to a DOM element.
+   * @example <div data-css-vars-root={true}></div>
+   *
+   * @default ":host, :root, [data-css-vars-root=true]"
    */
   root?: string
 }
 
-export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => (
+export const CSSVars = ({
+  root = ":host, :root, [data-css-vars-root=true]",
+}: CSSVarsProps) => (
   <Global styles={(theme: any) => ({ [root]: theme.__cssVars })} />
 )