diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
index af198b2064d4ae..fb9ff1a2f5d49a 100644
--- a/docs/data/material/customization/css-theme-variables/configuration.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -277,6 +277,92 @@ In the example below, all the components inside the `div` will always be dark:
 
 </codeblock>
 
+## Nested and multiple theme providers
+
+A `ThemeProvider` writes the CSS theme variables to `:root`, so they apply to the whole page.
+A nested or `scoped` provider sets them on its child element instead, so they only apply there.
+
+### Nested providers
+
+When a nested `ThemeProvider`'s variables differ from the outer theme, it adds a generated class to its child.
+The class only sets the variables that differ, and it follows the outer light or dark mode:
+
+```jsx
+<ThemeProvider theme={appTheme}>
+  <Button>Uses appTheme</Button>
+  <ThemeProvider theme={promoTheme}>
+    <section>
+      <Button>Uses promoTheme</Button>
+    </section>
+  </ThemeProvider>
+</ThemeProvider>
+```
+
+```html
+<section class="mui-theme-1x2y3z">…</section>
+```
+
+```css
+:root {
+  --mui-palette-primary-main: #1976d2;
+}
+.mui-theme-1x2y3z {
+  --mui-palette-primary-main: #9c27b0;
+}
+```
+
+The provider doesn't render any element of its own, so the child has to be a single element that renders the `className` it receives.
+With several children, a Fragment, or text, the variables aren't applied and an error is logged in development: wrap the children in one element, for example a `div`.
+If the child is your own component, pass `className` on to its root element:
+
+```jsx
+function Section({ className, children }) {
+  return <section className={className}>{children}</section>;
+}
+```
+
+A nested provider whose theme has the same variables, for example one that only changes `components` defaults, accepts any children.
+
+Dialogs, menus, popovers, tooltips, and other components that render in a portal apply the class to their own root, so they use the nested theme too.
+For elements that other libraries portal, use the `useThemeScope()` hook to get the class:
+
+```jsx
+import { useThemeScope } from '@mui/material/styles';
+
+function Toast() {
+  const themeScope = useThemeScope();
+  return ReactDOM.createPortal(<div {...themeScope}>…</div>, document.body);
+}
+```
+
+### Sibling providers
+
+Two `ThemeProvider`s that aren't nested in each other both write to `:root` and overwrite each other, which logs a warning in development.
+Add the `scoped` prop to the one that should only apply to its child, like an embedded widget:
+
+```jsx
+<React.Fragment>
+  <ThemeProvider theme={appTheme}>
+    <App />
+  </ThemeProvider>
+  <ThemeProvider theme={widgetTheme} scoped>
+    <div>
+      <Widget />
+    </div>
+  </ThemeProvider>
+</React.Fragment>
+```
+
+A scoped provider sets all of its variables on its child element, and has its own light or dark mode.
+If the theme's `colorSchemeSelector` uses a data attribute, the child also needs to render the `data-*` props it receives.
+Its mode isn't stored, so it doesn't overwrite the mode of the page's provider.
+To remember it across visits, pass your own `modeStorageKey` and `colorSchemeStorageKey`.
+
+:::info
+A CSS variable that you override on `:root` doesn't reach the elements under a scoped provider that sets it, because the closest declaration wins.
+Override it on the child element instead, for example with its own class.
+:::
+
 ## Disabling CSS color scheme
 
 By default, `createTheme()` attaches a [CSS `color-scheme` property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) based on the palette mode.
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index 5e3481df0516ce..35507125f64c9e 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -125,6 +125,10 @@ You can extend the outer theme by providing a function:
 
 {{"component": "file://./demos/theme-nesting-extend/index.ts"}}
 
+With CSS theme variables, a nested theme whose variables differ from the outer theme sets them on its child element, so the child has to be a single element.
+This doesn't apply to a theme passed as a function, which still uses the outer theme's CSS variables.
+See [Nested and multiple theme providers](/material-ui/customization/css-theme-variables/configuration/#nested-and-multiple-theme-providers) for details.
+
 ## CSS theme variables
 
 To generate CSS variables from the theme, set `cssVariables` to `true` in the theme configuration and pass it to the `ThemeProvider`:
diff --git a/docs/data/material/migration/upgrade-to-v10/upgrade-to-v10.md b/docs/data/material/migration/upgrade-to-v10/upgrade-to-v10.md
index 16c5b27fa3c6d8..cfb56dff56db4c 100644
--- a/docs/data/material/migration/upgrade-to-v10/upgrade-to-v10.md
+++ b/docs/data/material/migration/upgrade-to-v10/upgrade-to-v10.md
@@ -1,3 +1,32 @@
 # Upgrade to v10
 
 <p class="description">This guide explains how to upgrade from Material UI v9 to v10.</p>
+
+## Breaking changes
+
+### Theme
+
+#### Nested ThemeProviders with CSS theme variables
+
+A nested `ThemeProvider` whose theme uses CSS theme variables now applies its theme.
+Previously, its variables were ignored when it had the same `cssVarPrefix` as the outer theme, so its subtree kept the outer theme's colors.
+
+When its variables differ from the outer theme, it sets them with a class on its child, so give it a single child element:
+
+```diff
+ <ThemeProvider theme={promoTheme}>
+-  <Header />
+-  <Section />
++  <div>
++    <Header />
++    <Section />
++  </div>
+ </ThemeProvider>
+```
+
+With several children, a Fragment, or a child that doesn't render its `className`, the variables aren't applied, and the first two log an error in development.
+
+Two `ThemeProvider`s that aren't nested in each other still overwrite each other's variables on `:root`, and now log a warning in development.
+Add the `scoped` prop to the one that should only apply to its child, like an embedded widget.
+
+See [Nested and multiple theme providers](/material-ui/customization/css-theme-variables/configuration/#nested-and-multiple-theme-providers) for details.
diff --git a/docs/pages/experiments/theme-provider-scoping.tsx b/docs/pages/experiments/theme-provider-scoping.tsx
new file mode 100644
index 00000000000000..49869d385f223f
--- /dev/null
+++ b/docs/pages/experiments/theme-provider-scoping.tsx
@@ -0,0 +1,695 @@
+'use client';
+// Temporary playground for https://github.com/mui/material-ui/pull/49581. Remove before merging.
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import createCache, { EmotionCache } from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import {
+  ThemeProvider as MaterialThemeProvider,
+  createTheme,
+  useColorScheme,
+  useThemeScope,
+} from '@mui/material/styles';
+import { AppLayoutHead as Head } from '@mui/internal-core-docs/AppLayout';
+
+// The CSS variables props (`scoped`, `colorSchemeNode`, …) are only typed with the CSS variables augmentation.
+const ThemeProvider = MaterialThemeProvider as React.ComponentType<any>;
+
+function createColorTheme(light: object, dark: object) {
+  return createTheme({
+    cssVariables: { colorSchemeSelector: 'class' },
+    colorSchemes: { light: { palette: light }, dark: { palette: dark } },
+  });
+}
+
+const appTheme = createColorTheme({}, {});
+const sameVarsTheme = createTheme({
+  cssVariables: { colorSchemeSelector: 'class' },
+  colorSchemes: { light: true, dark: true },
+  components: { MuiButton: { defaultProps: { disableElevation: true } } },
+});
+const promoTheme = createColorTheme(
+  { primary: { main: '#9c27b0' } },
+  { primary: { main: '#ce93d8' } },
+);
+const accentTheme = createColorTheme(
+  { primary: { main: '#9c27b0' }, secondary: { main: '#2e7d32' } },
+  { primary: { main: '#ce93d8' }, secondary: { main: '#81c784' } },
+);
+const widgetTheme = createColorTheme(
+  { primary: { main: '#e65100' } },
+  { primary: { main: '#ffb74d' } },
+);
+const widgetDataTheme = createTheme({
+  cssVariables: { colorSchemeSelector: 'data' },
+  colorSchemes: {
+    light: { palette: { primary: { main: '#e65100' } } },
+    dark: { palette: { primary: { main: '#ffb74d' } } },
+  },
+});
+const forcedDarkTheme = createTheme({
+  cssVariables: { colorSchemeSelector: 'class' },
+  palette: { mode: 'dark', primary: { main: '#f48fb1' } },
+});
+
+// ---------------------------------------------------------------------------
+// Each scenario renders in its own iframe, because root providers write to `:root`.
+
+interface FrameValue {
+  document: Document;
+  window: Window;
+}
+
+const FrameContext = React.createContext<FrameValue | null>(null);
+
+function useFrame() {
+  return React.useContext(FrameContext)!;
+}
+
+function Frame(props: { children: React.ReactNode; onReady: (frame: FrameValue) => void }) {
+  const { children, onReady } = props;
+  const ref = React.useRef<HTMLIFrameElement>(null);
+  const [frame, setFrame] = React.useState<(FrameValue & { cache: EmotionCache }) | null>(null);
+  const [height, setHeight] = React.useState(80);
+  // Emotion keys only allow lowercase letters and hyphens, so the id's other characters become letters.
+  const id = React.useId();
+  const cacheKey = `frame-${id.toLowerCase().replace(/[^a-z]/g, (char) => String.fromCharCode(97 + (char.charCodeAt(0) % 26)))}`;
+
+  React.useEffect(() => {
+    const iframe = ref.current!;
+    let observer: ResizeObserver | undefined;
+    const init = () => {
+      const doc = iframe.contentDocument!;
+      const value = {
+        document: doc,
+        window: iframe.contentWindow!,
+        cache: createCache({
+          key: cacheKey,
+          container: doc.head,
+        }),
+      };
+      // The iframe grows with its content, plus some room for menus and tooltips.
+      observer = new ResizeObserver(() => setHeight(doc.body.scrollHeight + 24));
+      observer.observe(doc.body);
+      setFrame(value);
+      onReady(value);
+    };
+    if (iframe.contentDocument?.readyState === 'complete' && iframe.contentDocument.body) {
+      init();
+    } else {
+      iframe.addEventListener('load', init);
+    }
+    return () => {
+      iframe.removeEventListener('load', init);
+      observer?.disconnect();
+    };
+  }, [onReady, cacheKey]);
+
+  return (
+    <React.Fragment>
+      <iframe
+        ref={ref}
+        title="scenario"
+        srcDoc="<!DOCTYPE html><html><head></head><body style='margin:12px;font-family:Roboto,Helvetica,Arial,sans-serif'></body></html>"
+        style={{ width: '100%', height, border: '1px solid #ccc', borderRadius: 4 }}
+      />
+      {frame &&
+        ReactDOM.createPortal(
+          <CacheProvider value={frame.cache}>
+            <FrameContext.Provider value={frame}>{children}</FrameContext.Provider>
+          </CacheProvider>,
+          frame.document.body,
+        )}
+    </React.Fragment>
+  );
+}
+
+// A root provider of the scenario: it writes to the iframe's `:root`, isolated from the docs' own provider.
+function Root(props: Record<string, any>) {
+  const { document, window } = useFrame();
+  return (
+    <ThemeProvider
+      colorSchemeNode={document.documentElement}
+      documentNode={document}
+      storageWindow={window}
+      storageManager={null}
+      disableNestedContext
+      {...props}
+    />
+  );
+}
+
+// A scoped sibling: isolated from the docs' provider too, it manages its own mode on its child.
+function ScopedRoot(props: Record<string, any>) {
+  const { document } = useFrame();
+  return <ThemeProvider documentNode={document} disableNestedContext scoped {...props} />;
+}
+
+function Swatch({ label }: { label: string }) {
+  return (
+    <Button variant="contained" size="small" sx={{ m: 0.5 }}>
+      {label}
+    </Button>
+  );
+}
+
+function ModeToggle({ label = 'mode' }: { label?: string }) {
+  const { mode, setMode } = useColorScheme();
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      sx={{ m: 0.5 }}
+      onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+    >
+      {label}: {mode ?? '…'}
+    </Button>
+  );
+}
+
+function Portals({ label }: { label: string }) {
+  const { document } = useFrame();
+  const themeScope = useThemeScope();
+  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  return (
+    <div>
+      <Button size="small" onClick={() => setDialogOpen(true)}>
+        Dialog
+      </Button>
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} container={document.body}>
+        <DialogContent data-inspect={`${label}: dialog`}>
+          <Swatch label="in dialog" />
+        </DialogContent>
+      </Dialog>
+      <Button size="small" onClick={(event) => setAnchor(event.currentTarget)}>
+        Menu
+      </Button>
+      <Menu
+        anchorEl={anchor}
+        open={!!anchor}
+        onClose={() => setAnchor(null)}
+        container={document.body}
+      >
+        <MenuItem data-inspect={`${label}: menu item`} sx={{ color: 'primary.main' }}>
+          Primary item
+        </MenuItem>
+      </Menu>
+      <Tooltip title="Tooltip" slotProps={{ popper: { container: document.body } }}>
+        <Button size="small">Tooltip</Button>
+      </Tooltip>
+      {ReactDOM.createPortal(
+        <Box
+          {...themeScope}
+          data-inspect={`${label}: createPortal + useThemeScope()`}
+          sx={{ p: 0.5 }}
+        >
+          <Swatch label={`${label} portal`} />
+        </Box>,
+        document.body,
+      )}
+    </div>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <Button variant="contained" size="small" sx={{ m: 0.5 }} onClick={() => setCount(count + 1)}>
+      clicked {count}
+    </Button>
+  );
+}
+
+function ThemeSwitcher() {
+  const [different, setDifferent] = React.useState(false);
+  return (
+    <div>
+      <Button size="small" variant="outlined" onClick={() => setDifferent(!different)}>
+        nested theme: {different ? 'promoTheme' : 'sameVarsTheme'}
+      </Button>
+      <ThemeProvider theme={different ? promoTheme : sameVarsTheme}>
+        <div data-inspect="nested child">
+          <Counter />
+        </div>
+      </ThemeProvider>
+    </div>
+  );
+}
+
+function Forwards({ className, children }: { className?: string; children: React.ReactNode }) {
+  return (
+    <section className={className} data-inspect="forwards className">
+      {children}
+    </section>
+  );
+}
+
+// It receives `className` from the provider but doesn't render it.
+function DropsClassName({ children }: { children: React.ReactNode }) {
+  return <section data-inspect="drops className">{children}</section>;
+}
+
+// ---------------------------------------------------------------------------
+// Scenarios
+
+interface Scenario {
+  title: string;
+  description: string;
+  code: string;
+  render: () => React.ReactNode;
+}
+
+const scenarios: Scenario[] = [
+  {
+    title: '1. Single root provider',
+    description: 'Baseline: variables on :root, nothing added to the children.',
+    code: `<ThemeProvider theme={appTheme}>
+  <Button />
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div data-inspect="child">
+          <Swatch label="root" />
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '2. Two root providers',
+    description:
+      'Both write to :root, and the last one wins for both. Logs a warning in development.',
+    code: `<ThemeProvider theme={appTheme}><Button /></ThemeProvider>
+<ThemeProvider theme={widgetTheme}><Button /></ThemeProvider>`,
+    render: () => (
+      <React.Fragment>
+        <Root theme={appTheme}>
+          <div data-inspect="app child">
+            <Swatch label="app" />
+          </div>
+        </Root>
+        <Root theme={widgetTheme}>
+          <div data-inspect="widget child">
+            <Swatch label="widget" />
+          </div>
+        </Root>
+      </React.Fragment>
+    ),
+  },
+  {
+    title: '3. Root + scoped siblings',
+    description:
+      'A scoped provider sets all its variables on its child, and has its own mode. With a data attribute selector, the color scheme attribute goes on the child too.',
+    code: `<ThemeProvider theme={appTheme}><App /></ThemeProvider>
+<ThemeProvider theme={widgetTheme} scoped>
+  <div><Widget /></div>
+</ThemeProvider>
+<ThemeProvider theme={widgetDataTheme} scoped defaultMode="dark">
+  <div><Widget /></div>
+</ThemeProvider>`,
+    render: () => (
+      <React.Fragment>
+        <Root theme={appTheme}>
+          <div data-inspect="app child">
+            <ModeToggle label="app mode" />
+            <Swatch label="app" />
+          </div>
+        </Root>
+        <ScopedRoot theme={widgetTheme}>
+          <div data-inspect="widget child">
+            <ModeToggle label="widget mode" />
+            <Swatch label="widget" />
+          </div>
+        </ScopedRoot>
+        <ScopedRoot theme={widgetDataTheme} defaultMode="dark">
+          <div data-inspect="data selector widget child">
+            <ModeToggle label="widget mode" />
+            <Swatch label="widget" />
+          </div>
+        </ScopedRoot>
+      </React.Fragment>
+    ),
+  },
+  {
+    title: '4. Nested, different variables',
+    description:
+      'The child gets a class that only sets the variables that differ. It follows the outer mode.',
+    code: `<ThemeProvider theme={appTheme}>
+  <Button />
+  <ThemeProvider theme={promoTheme}>
+    <div><Button /></div>
+  </ThemeProvider>
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div data-inspect="outer child">
+          <ModeToggle label="outer mode" />
+          <Swatch label="outer" />
+          <ThemeProvider theme={promoTheme}>
+            <div data-inspect="nested child">
+              <Swatch label="nested" />
+            </div>
+          </ThemeProvider>
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '5. Nested, children that are not a single element',
+    description:
+      'Several children, a Fragment, text and an array: the rule is generated, but no element gets the class, and an error is logged in development.',
+    code: `<ThemeProvider theme={promoTheme}><Button /><Button /></ThemeProvider>
+<ThemeProvider theme={promoTheme}><>…</></ThemeProvider>
+<ThemeProvider theme={promoTheme}>text</ThemeProvider>
+<ThemeProvider theme={promoTheme}>{[<Button key="a" />]}</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div>
+          <ThemeProvider theme={promoTheme}>
+            <Swatch label="several 1" />
+            <Swatch label="several 2" />
+          </ThemeProvider>
+          <ThemeProvider theme={promoTheme}>
+            <React.Fragment>
+              <Swatch label="fragment 1" />
+              <Swatch label="fragment 2" />
+            </React.Fragment>
+          </ThemeProvider>
+          <ThemeProvider theme={promoTheme}>text</ThemeProvider>
+          <ThemeProvider theme={promoTheme}>{[<Swatch key="a" label="array" />]}</ThemeProvider>
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '6. Nested, custom component child',
+    description:
+      'A component that renders the className it receives gets the theme. One that drops it silently keeps the outer theme.',
+    code: `<ThemeProvider theme={promoTheme}>
+  <Forwards><Button /></Forwards>
+</ThemeProvider>
+<ThemeProvider theme={promoTheme}>
+  <DropsClassName><Button /></DropsClassName>
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div>
+          <ThemeProvider theme={promoTheme}>
+            <Forwards>
+              <Swatch label="forwards" />
+            </Forwards>
+          </ThemeProvider>
+          <ThemeProvider theme={promoTheme}>
+            <DropsClassName>
+              <Swatch label="drops" />
+            </DropsClassName>
+          </ThemeProvider>
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '7. Directly nested providers and a function theme',
+    description:
+      'A provider whose child is another provider passes its class on: the middle theme (primary) and the inner one (secondary) both apply.',
+    code: `<ThemeProvider theme={promoTheme}>
+  <ThemeProvider theme={accentTheme}>
+    <div><Button /></div>
+  </ThemeProvider>
+</ThemeProvider>
+<ThemeProvider theme={promoTheme}>
+  <ThemeProvider theme={(outer) => ({ ...outer })}>
+    <div><Button /></div>
+  </ThemeProvider>
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div>
+          <ThemeProvider theme={promoTheme}>
+            <ThemeProvider theme={accentTheme}>
+              <div data-inspect="promo → accent child">
+                <Swatch label="direct nesting" />
+                <Button variant="contained" color="secondary" size="small" sx={{ m: 0.5 }}>
+                  secondary
+                </Button>
+              </div>
+            </ThemeProvider>
+          </ThemeProvider>
+          <ThemeProvider theme={promoTheme}>
+            <ThemeProvider theme={(outer: object) => ({ ...outer })}>
+              <div data-inspect="promo → function theme child">
+                <Swatch label="function theme" />
+              </div>
+            </ThemeProvider>
+          </ThemeProvider>
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '8. Portals',
+    description:
+      'Dialog, Menu and Tooltip apply the scope to their own root, in a nested provider and in a scoped sibling. useThemeScope() does it for other portals.',
+    code: `<ThemeProvider theme={appTheme}>
+  <ThemeProvider theme={promoTheme}>
+    <div><Dialog /><Menu /><Tooltip /><Toast /></div>
+  </ThemeProvider>
+</ThemeProvider>
+<ThemeProvider theme={widgetTheme} scoped>
+  <div><Dialog /><Menu /><Tooltip /><Toast /></div>
+</ThemeProvider>`,
+    render: () => (
+      <React.Fragment>
+        <Root theme={appTheme}>
+          <ThemeProvider theme={promoTheme}>
+            <div data-inspect="nested child">
+              <Portals label="nested" />
+            </div>
+          </ThemeProvider>
+        </Root>
+        <ScopedRoot theme={widgetTheme} defaultMode="dark">
+          <div data-inspect="scoped child">
+            <ModeToggle label="scoped mode" />
+            <Portals label="scoped" />
+          </div>
+        </ScopedRoot>
+      </React.Fragment>
+    ),
+  },
+  {
+    title: '9. Forced single-scheme nested section',
+    description: 'A nested theme with only a dark scheme stays dark whatever the outer mode is.',
+    code: `<ThemeProvider theme={appTheme}>
+  <ThemeProvider theme={forcedDarkTheme}>
+    <div><Button /></div>
+  </ThemeProvider>
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <div data-inspect="outer child">
+          <ModeToggle label="outer mode" />
+          <ThemeProvider theme={forcedDarkTheme}>
+            <Box data-inspect="forced dark child" sx={{ p: 1, bgcolor: 'background.default' }}>
+              <Swatch label="always dark" />
+            </Box>
+          </ThemeProvider>
+        </div>
+      </Root>
+    ),
+  },
+  {
+    title: '10. Nested, same variables, then different ones',
+    description:
+      'With sameVarsTheme (only component defaults change), the child is left untouched. Click the counter, then switch to promoTheme: the child gets the class and keeps its count, so nothing remounts.',
+    code: `<ThemeProvider theme={appTheme}>
+  <ThemeProvider theme={different ? promoTheme : sameVarsTheme}>
+    <div><Counter /></div>
+  </ThemeProvider>
+</ThemeProvider>`,
+    render: () => (
+      <Root theme={appTheme}>
+        <ThemeSwitcher />
+      </Root>
+    ),
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Inspector: reads what ended up in the iframe.
+
+const interestingDeclaration = /color-scheme|--mui-palette-(primary|secondary)-main:/;
+
+function describeRule(cssText: string) {
+  const [selector, body = ''] = cssText.split('{');
+  const declarations = body
+    .replace('}', '')
+    .split(';')
+    .map((declaration) => declaration.trim())
+    .filter(Boolean);
+  const shown = declarations.filter((declaration) => interestingDeclaration.test(declaration));
+  const more = declarations.length - shown.length;
+  return [
+    `${selector.trim()} {`,
+    ...shown.map((declaration) => `  ${declaration};`),
+    ...(more ? [`  + ${more} more declarations`] : []),
+    '}',
+  ].join('\n');
+}
+
+function inspect(doc: Document) {
+  const view = doc.defaultView!;
+  const values = (element: Element) => {
+    const style = view.getComputedStyle(element);
+    const read = (name: string) => style.getPropertyValue(name).trim() || '—';
+    return `primary ${read('--mui-palette-primary-main')}, secondary ${read('--mui-palette-secondary-main')}, color-scheme ${style.colorScheme}`;
+  };
+  const scope = (element: Element) => {
+    const classes = Array.from(element.classList)
+      .filter((name) => name.startsWith('mui-theme-') || name === 'light' || name === 'dark')
+      .map((name) => `.${name}`);
+    const attributes = Array.from(element.attributes)
+      .filter(({ name }) => name.startsWith('data-') && name !== 'data-inspect')
+      .map(({ name, value }) => `${name}="${value}"`);
+    return [...classes, ...attributes].join(' ') || 'no scope';
+  };
+
+  const ruleTexts = new Set<string>();
+  Array.from(doc.styleSheets).forEach((sheet) => {
+    Array.from(sheet.cssRules).forEach((rule) => {
+      if (rule.cssText.includes('mui-theme-')) {
+        ruleTexts.add(rule.cssText);
+      }
+    });
+  });
+  const applied: string[] = [];
+  let unused = 0;
+  ruleTexts.forEach((cssText) => {
+    const className = cssText.match(/mui-theme-[a-z0-9]+/)?.[0];
+    if (className && doc.querySelector(`.${className}`)) {
+      applied.push(describeRule(cssText));
+    } else {
+      unused += 1;
+    }
+  });
+
+  const elements = Array.from(doc.querySelectorAll('[data-inspect]')).map((element) => {
+    const scoped = element.closest('[class*="mui-theme-"]') ?? element;
+    return `[${element.getAttribute('data-inspect')}] ${scope(scoped)} → ${values(element)}`;
+  });
+
+  return [
+    `<html> ${scope(doc.documentElement)}`,
+    `:root → ${values(doc.documentElement)}`,
+    '',
+    ...elements,
+    '',
+    applied.length ? `Scoped rules:\n${applied.join('\n')}` : 'No scoped rules applied',
+    unused ? `\n${unused} rule(s) generated, but no element has the class` : '',
+  ].join('\n');
+}
+
+function Inspector({ frame }: { frame: FrameValue | null }) {
+  const [text, setText] = React.useState('');
+  React.useEffect(() => {
+    if (!frame) {
+      return undefined;
+    }
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => setText(inspect(frame.document)));
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(frame.document, { subtree: true, childList: true, attributes: true });
+    update();
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [frame]);
+
+  return (
+    <Box
+      component="pre"
+      sx={{
+        m: 0,
+        p: 1,
+        fontSize: 11,
+        lineHeight: 1.5,
+        bgcolor: 'grey.100',
+        color: 'grey.900',
+        borderRadius: 1,
+        overflow: 'auto',
+      }}
+    >
+      {text}
+    </Box>
+  );
+}
+
+function ScenarioCard({ scenario }: { scenario: Scenario }) {
+  const [frame, setFrame] = React.useState<FrameValue | null>(null);
+  return (
+    <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>
+      <Typography variant="h6" component="h2">
+        {scenario.title}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary' }}>
+        {scenario.description}
+      </Typography>
+      <Box sx={{ display: 'grid', gap: 1, gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' } }}>
+        <Stack spacing={1}>
+          <Box
+            component="pre"
+            sx={{
+              m: 0,
+              p: 1,
+              fontSize: 12,
+              bgcolor: 'grey.900',
+              color: 'grey.100',
+              borderRadius: 1,
+              overflow: 'auto',
+            }}
+          >
+            {scenario.code}
+          </Box>
+          <Frame onReady={setFrame}>{scenario.render()}</Frame>
+        </Stack>
+        <Inspector frame={frame} />
+      </Box>
+    </Box>
+  );
+}
+
+export default function ThemeProviderScoping() {
+  return (
+    <React.Fragment>
+      <Head title="ThemeProvider scoping playground" description="" />
+      <Box sx={{ p: { xs: 2, md: 4 }, maxWidth: 1400, mx: 'auto' }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          ThemeProvider scoping playground
+        </Typography>
+        <Typography variant="body2" sx={{ mb: 2 }}>
+          Temporary page for #49581. Each scenario renders in its own iframe. The right column shows
+          what ended up there: the scope classes and attributes, the computed primary and secondary
+          colors and color scheme, and the scoped CSS rules (palette and color scheme declarations
+          only). Open the browser console for the development warnings and errors.
+        </Typography>
+        <Stack spacing={3} sx={{ mt: 2 }}>
+          {scenarios.map((scenario) => (
+            <ScenarioCard key={scenario.title} scenario={scenario} />
+          ))}
+        </Stack>
+      </Box>
+    </React.Fragment>
+  );
+}
diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index 2abe753d453182..febed1c4ddf008 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
+import { useThemeScope } from '@mui/system/cssVars';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
 import { styled } from '../zero-styled';
@@ -147,17 +148,22 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
 
   const externalForwardedProps = { slots, slotProps };
 
+  // The modal is portaled out of a scoped ThemeProvider's element, so it applies the scope itself.
+  const { className: themeScopeClassName, ...themeScopeAttributes } = useThemeScope();
+
   const [RootSlot, rootProps] = useSlot('root', {
     ref,
     elementType: ModalRoot,
     externalForwardedProps: {
       ...externalForwardedProps,
+      ...themeScopeAttributes,
       ...other,
       component,
     },
     getSlotProps: getRootProps,
     ownerState,
     className: clsx(
+      themeScopeClassName,
       className,
       classes?.root,
       !ownerState.open && ownerState.exited && classes?.hidden,
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 5552227c2920aa..e996d68ddab99d 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -1,6 +1,8 @@
 'use client';
 import { SxProps } from '@mui/system';
 import { useRtl } from '@mui/system/RtlProvider';
+import { useThemeScope } from '@mui/system/cssVars';
+import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import PropTypes from 'prop-types';
@@ -45,6 +47,8 @@ const Popper = React.forwardRef(function Popper(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const isRtl = useRtl();
+  // The popper is portaled out of a scoped ThemeProvider's element, so it applies the scope itself.
+  const { className: themeScopeClassName, ...themeScopeAttributes } = useThemeScope();
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiPopper',
@@ -86,7 +90,9 @@ const Popper = React.forwardRef(function Popper(
       direction={isRtl ? 'rtl' : 'ltr'}
       slots={slots}
       slotProps={slotProps}
+      {...themeScopeAttributes}
       {...otherProps}
+      className={clsx(themeScopeClassName, otherProps.className) || undefined}
       ref={ref}
     />
   );
diff --git a/packages/mui-material/src/styles/ThemeProvider.tsx b/packages/mui-material/src/styles/ThemeProvider.tsx
index b3f45c0f65f267..6eea45a0a3d176 100644
--- a/packages/mui-material/src/styles/ThemeProvider.tsx
+++ b/packages/mui-material/src/styles/ThemeProvider.tsx
@@ -1,7 +1,10 @@
 'use client';
 import * as React from 'react';
 import { DefaultTheme } from '@mui/system';
-import { StorageManager } from '@mui/system/cssVars';
+import {
+  StorageManager,
+  unstable_applyScopeToChild as applyScopeToChild,
+} from '@mui/system/cssVars';
 import ThemeProviderNoVars from './ThemeProviderNoVars';
 import { CssThemeVariables } from './createThemeNoVars';
 import { CssVarsProvider } from './ThemeProviderWithVars';
@@ -32,6 +35,15 @@ type ThemeProviderCssVariablesProps = CssThemeVariables extends { enabled: true
        * @default false
        */
       forceThemeRerender?: boolean | undefined;
+      /**
+       * If `true`, the CSS theme variables are set on its child element instead of `:root`,
+       * so they don't affect the rest of the page. Use it for a provider that isn't nested in another one,
+       * like an embedded widget. Nested providers are scoped automatically when their variables differ.
+       * Either way, the provider needs a single child element that renders the `className` it receives.
+       * Its mode is only stored when `modeStorageKey` or `colorSchemeStorageKey` is set.
+       * @default false
+       */
+      scoped?: boolean | undefined;
     }
   : {};
 
@@ -103,7 +115,21 @@ export default function ThemeProvider<Theme = DefaultTheme>({
   }, [theme]);
 
   if (noVarsTheme) {
-    return <ThemeProviderNoVars theme={noVarsTheme} {...props} />;
+    // It doesn't scope its own theme, but passes on the scope that an outer provider gave it to its child.
+    // The system ThemeProvider only accepts its own props, so the forwarded ones don't reach it.
+    const { className, ...noVarsProps } = props as typeof props & {
+      className?: string | undefined;
+    };
+    Object.keys(noVarsProps).forEach((key) => {
+      if (key.startsWith('data-')) {
+        delete (noVarsProps as Record<string, unknown>)[key];
+      }
+    });
+    return (
+      <ThemeProviderNoVars theme={noVarsTheme} {...noVarsProps}>
+        {applyScopeToChild(props.children, props)}
+      </ThemeProviderNoVars>
+    );
   }
   return <CssVarsProvider theme={theme as unknown as CssVarsTheme} {...props} />;
 }
diff --git a/packages/mui-material/src/styles/ThemeProviderScoped.test.tsx b/packages/mui-material/src/styles/ThemeProviderScoped.test.tsx
new file mode 100644
index 00000000000000..5a02c8ba9b19a4
--- /dev/null
+++ b/packages/mui-material/src/styles/ThemeProviderScoped.test.tsx
@@ -0,0 +1,380 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import * as React from 'react';
+import { createRenderer, screen, isJsdom, fireEvent } from '@mui/internal-test-utils';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import Popper from '@mui/material/Popper';
+import { ThemeProvider, createTheme, useThemeScope } from '@mui/material/styles';
+
+function getVar(element: Element, name: string) {
+  return getComputedStyle(element).getPropertyValue(name).trim();
+}
+
+const blueTheme = createTheme({ cssVariables: true, palette: { primary: { main: '#0000ff' } } });
+const redTheme = createTheme({ cssVariables: true, palette: { primary: { main: '#ff0000' } } });
+
+describe('ThemeProvider with scoped CSS theme variables', () => {
+  const { render } = createRenderer();
+
+  afterEach(() => {
+    document.documentElement.classList.remove('light', 'dark');
+  });
+
+  describe('nested', () => {
+    it('adds the scope class to the child when the variables differ', () => {
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <div data-testid="outer">
+            <ThemeProvider theme={redTheme}>
+              <div data-testid="inner" className="inner" />
+            </ThemeProvider>
+          </div>
+        </ThemeProvider>,
+      );
+      const inner = screen.getByTestId('inner');
+      expect(inner.parentElement).to.equal(screen.getByTestId('outer'));
+      expect(inner.className).to.match(/^inner mui-theme-[a-z0-9]+$/);
+    });
+
+    it('keeps the state of the child when the variables start to differ', () => {
+      function Counter() {
+        const [count, setCount] = React.useState(0);
+        return (
+          <button type="button" data-testid="counter" onClick={() => setCount(count + 1)}>
+            {count}
+          </button>
+        );
+      }
+      const { setProps } = render(
+        <ThemeProvider theme={blueTheme}>
+          <ThemeProvider theme={blueTheme}>
+            <Counter />
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      fireEvent.click(screen.getByTestId('counter'));
+      setProps({
+        children: (
+          <ThemeProvider theme={redTheme}>
+            <Counter />
+          </ThemeProvider>
+        ),
+      });
+      expect(screen.getByTestId('counter').textContent).to.equal('1');
+    });
+
+    it('logs an error and applies nothing when the children are not a single element', () => {
+      expect(() =>
+        render(
+          <ThemeProvider theme={blueTheme}>
+            <ThemeProvider theme={redTheme}>
+              <div data-testid="first" />
+              <div />
+            </ThemeProvider>
+          </ThemeProvider>,
+        ),
+      ).toErrorDev("MUI: The CSS theme variables of this ThemeProvider can't be applied");
+      expect(screen.getByTestId('first').className).to.equal('');
+    });
+
+    it('does not log an error when there are no children', () => {
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <ThemeProvider theme={redTheme}>{false}</ThemeProvider>
+          <ThemeProvider theme={redTheme}>{null}</ThemeProvider>
+        </ThemeProvider>,
+      );
+    });
+
+    it.skipIf(isJsdom())('passes the scope of a provider whose child is another provider', () => {
+      const greenSecondaryTheme = createTheme({
+        cssVariables: true,
+        palette: { primary: { main: '#ff0000' }, secondary: { main: '#00ff00' } },
+      });
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <ThemeProvider theme={redTheme}>
+            <ThemeProvider theme={greenSecondaryTheme}>
+              <div data-testid="inner" />
+            </ThemeProvider>
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(getVar(screen.getByTestId('inner'), '--mui-palette-primary-main')).to.equal('#ff0000');
+      expect(getVar(screen.getByTestId('inner'), '--mui-palette-secondary-main')).to.equal(
+        '#00ff00',
+      );
+    });
+
+    it('passes the scope through a provider with a function theme', () => {
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <ThemeProvider theme={redTheme}>
+            <ThemeProvider theme={(outer: object) => ({ ...outer })}>
+              <div data-testid="inner" />
+            </ThemeProvider>
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(screen.getByTestId('inner').className).to.match(/^mui-theme-[a-z0-9]+$/);
+    });
+
+    it('passes the color scheme attribute of a scoped provider through a function theme', () => {
+      const theme = createTheme({
+        cssVariables: { colorSchemeSelector: 'data' },
+        colorSchemes: { light: true, dark: true },
+      });
+      render(
+        <ThemeProvider theme={theme} scoped defaultMode="dark">
+          <ThemeProvider theme={(outer: object) => ({ ...outer })}>
+            <div data-testid="widget" />
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(screen.getByTestId('widget')).to.have.attribute('data-dark', '');
+      expect(screen.getByTestId('widget').className).to.match(/^mui-theme-[a-z0-9]+$/);
+    });
+
+    it('logs an error when the child is a Fragment', () => {
+      expect(() =>
+        render(
+          <ThemeProvider theme={blueTheme}>
+            <ThemeProvider theme={redTheme}>
+              <React.Fragment>
+                <div />
+                <div />
+              </React.Fragment>
+            </ThemeProvider>
+          </ThemeProvider>,
+        ),
+      ).toErrorDev("MUI: The CSS theme variables of this ThemeProvider can't be applied");
+    });
+
+    it('leaves any children untouched when the theme is the same', () => {
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <div data-testid="outer">
+            <ThemeProvider theme={blueTheme}>
+              <div data-testid="inner" />
+            </ThemeProvider>
+          </div>
+        </ThemeProvider>,
+      );
+      expect(screen.getByTestId('inner').className).to.equal('');
+    });
+
+    it('leaves the child untouched when the theme only changes component defaults', () => {
+      const theme = createTheme({
+        cssVariables: true,
+        palette: { primary: { main: '#0000ff' } },
+        components: { MuiButton: { defaultProps: { disableRipple: true } } },
+      });
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <div data-testid="outer">
+            <ThemeProvider theme={theme}>
+              <div data-testid="inner" />
+            </ThemeProvider>
+          </div>
+        </ThemeProvider>,
+      );
+      expect(screen.getByTestId('inner').className).to.equal('');
+    });
+
+    it.skipIf(isJsdom())('applies the inner variables only to the children', () => {
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <Button variant="contained" data-testid="outer">
+            Outer
+          </Button>
+          <ThemeProvider theme={redTheme}>
+            <Button variant="contained" data-testid="inner">
+              Inner
+            </Button>
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(getVar(screen.getByTestId('outer'), '--mui-palette-primary-main')).to.equal('#0000ff');
+      expect(getVar(screen.getByTestId('inner'), '--mui-palette-primary-main')).to.equal('#ff0000');
+      expect(getComputedStyle(screen.getByTestId('inner')).backgroundColor).to.equal(
+        'rgb(255, 0, 0)',
+      );
+    });
+
+    it.skipIf(isJsdom())('applies the inner variables to portaled dialogs and poppers', () => {
+      function Anchored() {
+        const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+        return (
+          <React.Fragment>
+            <div ref={setAnchorEl} />
+            <Popper open={!!anchorEl} anchorEl={anchorEl} data-testid="popper">
+              popper
+            </Popper>
+          </React.Fragment>
+        );
+      }
+      render(
+        <ThemeProvider theme={blueTheme}>
+          <ThemeProvider theme={redTheme}>
+            <div>
+              <Dialog open>
+                <div data-testid="dialog-content" />
+              </Dialog>
+              <Anchored />
+            </div>
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(getVar(screen.getByTestId('dialog-content'), '--mui-palette-primary-main')).to.equal(
+        '#ff0000',
+      );
+      expect(getVar(screen.getByTestId('popper'), '--mui-palette-primary-main')).to.equal(
+        '#ff0000',
+      );
+    });
+
+    it.skipIf(isJsdom())('follows the outer color scheme', () => {
+      const outer = createTheme({
+        cssVariables: { colorSchemeSelector: 'class' },
+        colorSchemes: { light: true, dark: true },
+      });
+      const inner = createTheme({
+        cssVariables: { colorSchemeSelector: 'class' },
+        colorSchemes: {
+          light: { palette: { primary: { main: '#ff0000' } } },
+          dark: { palette: { primary: { main: '#00ff00' } } },
+        },
+      });
+      render(
+        <ThemeProvider theme={outer} defaultMode="dark" storageManager={null}>
+          <ThemeProvider theme={inner}>
+            <div data-testid="inner" />
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(document.documentElement.classList.contains('dark')).to.equal(true);
+      expect(getVar(screen.getByTestId('inner'), '--mui-palette-primary-main')).to.equal('#00ff00');
+    });
+  });
+
+  describe('scoped prop', () => {
+    it.skipIf(isJsdom())('keeps a sibling provider off :root', () => {
+      const darkTheme = createTheme({
+        cssVariables: true,
+        palette: { mode: 'dark', primary: { main: '#ff0000' } },
+      });
+      render(
+        <React.Fragment>
+          <ThemeProvider theme={blueTheme}>
+            <div data-testid="app" />
+          </ThemeProvider>
+          <ThemeProvider theme={darkTheme} scoped>
+            <div data-testid="widget" />
+          </ThemeProvider>
+        </React.Fragment>,
+      );
+      expect(getVar(document.documentElement, '--mui-palette-primary-main')).to.equal('#0000ff');
+      expect(getComputedStyle(document.documentElement).colorScheme).not.to.equal('dark');
+      expect(getVar(screen.getByTestId('app'), '--mui-palette-primary-main')).to.equal('#0000ff');
+      expect(getVar(screen.getByTestId('widget'), '--mui-palette-primary-main')).to.equal(
+        '#ff0000',
+      );
+      expect(getComputedStyle(screen.getByTestId('widget')).colorScheme).to.equal('dark');
+    });
+
+    it('only uses the storage for a scoped provider with storage keys', () => {
+      const theme = createTheme({
+        cssVariables: { colorSchemeSelector: 'class' },
+        colorSchemes: { light: true, dark: true },
+      });
+      const readKeys: string[] = [];
+      const storageWindow = {
+        localStorage: {
+          getItem: (key: string) => {
+            readKeys.push(key);
+            return null;
+          },
+          setItem: () => {},
+        },
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      } as unknown as Window;
+      render(
+        <React.Fragment>
+          <ThemeProvider theme={theme} scoped storageWindow={storageWindow}>
+            <div />
+          </ThemeProvider>
+          <ThemeProvider
+            theme={theme}
+            scoped
+            modeStorageKey="widget-mode"
+            colorSchemeStorageKey="widget-color-scheme"
+            storageWindow={storageWindow}
+          >
+            <div />
+          </ThemeProvider>
+        </React.Fragment>,
+      );
+      expect(readKeys.length).to.be.greaterThan(0);
+      expect(readKeys.every((key) => key.startsWith('widget-'))).to.equal(true);
+    });
+
+    it('adds the color scheme attribute to the child', () => {
+      const theme = createTheme({
+        cssVariables: { colorSchemeSelector: 'data' },
+        colorSchemes: { light: true, dark: true },
+      });
+      render(
+        <ThemeProvider theme={theme} scoped defaultMode="dark">
+          <div data-testid="widget" />
+        </ThemeProvider>,
+      );
+      expect(screen.getByTestId('widget')).to.have.attribute('data-dark', '');
+      expect(document.documentElement).not.to.have.attribute('data-dark');
+    });
+
+    it('warns when two providers with different themes write to :root', () => {
+      expect(() =>
+        render(
+          <React.Fragment>
+            <ThemeProvider theme={blueTheme}>
+              <div />
+            </ThemeProvider>
+            <ThemeProvider theme={redTheme}>
+              <div />
+            </ThemeProvider>
+          </React.Fragment>,
+        ),
+      ).toWarnDev('MUI: Several ThemeProviders with different themes write');
+    });
+  });
+
+  it('leaves the children of the top-level provider untouched', () => {
+    render(
+      <ThemeProvider theme={redTheme}>
+        <div data-testid="first" />
+        <div />
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('first').className).to.equal('');
+  });
+
+  it('exposes the scope class to elements that are portaled by other libraries', () => {
+    function Scope() {
+      const props = useThemeScope();
+      return <div data-testid="scope" {...props} />;
+    }
+    render(
+      <ThemeProvider theme={blueTheme}>
+        <ThemeProvider theme={redTheme}>
+          <div>
+            <Scope />
+          </div>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('scope').className).to.equal(
+      screen.getByTestId('scope').parentElement!.className,
+    );
+  });
+});
diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
index bd00b44d4c4ba7..84bac4ab98d64a 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.js
+++ b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -1010,13 +1010,15 @@ export default function createThemeWithVars(options = {}, ...args) {
     getSelector: defaultGetSelector(theme),
     enableContrastVars: nativeColor,
   };
-  const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars(theme, parserConfig);
+  const { vars, generateThemeVars, generateStyleSheets, generateCssVarsByColorScheme } =
+    prepareCssVars(theme, parserConfig);
   theme.vars = vars;
   Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
     theme[key] = value;
   });
   theme.generateThemeVars = generateThemeVars;
   theme.generateStyleSheets = generateStyleSheets;
+  theme.generateCssVarsByColorScheme = generateCssVarsByColorScheme;
   theme.generateSpacing = function generateSpacing() {
     return createSpacing(input.spacing, createUnarySpacing(this));
   };
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index d5c9d62233011d..2c2ff2eafe937b 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -127,7 +127,8 @@ export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
 export * from './ThemeProviderWithVars';
-export type { StorageManager } from '@mui/system/cssVars';
+export type { StorageManager, ThemeScopeProps } from '@mui/system/cssVars';
+export { useThemeScope } from '@mui/system/cssVars';
 
 export { default as extendTheme } from './createThemeWithVars';
 
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 883093f0e1e25b..5c6a0660e0a34f 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -44,6 +44,7 @@ export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
 export * from './ThemeProviderWithVars';
+export { useThemeScope } from '@mui/system/cssVars';
 export { default as extendTheme } from './createThemeWithVars';
 export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
diff --git a/packages/mui-system/src/cssVars/ThemeScopeContext.ts b/packages/mui-system/src/cssVars/ThemeScopeContext.ts
new file mode 100644
index 00000000000000..a40521fcf66c2d
--- /dev/null
+++ b/packages/mui-system/src/cssVars/ThemeScopeContext.ts
@@ -0,0 +1,33 @@
+'use client';
+import * as React from 'react';
+
+export interface ThemeScopeProps {
+  /**
+   * The class that sets the CSS theme variables of the closest scoped `ThemeProvider`,
+   * followed by its color scheme class when its `colorSchemeSelector` is `'class'`.
+   */
+  className?: string | undefined;
+  /**
+   * Color scheme attributes, e.g. `data-mui-color-scheme`, when the `colorSchemeSelector` uses one.
+   */
+  [attribute: `data-${string}`]: string | undefined;
+}
+
+const ThemeScopeContext = React.createContext<ThemeScopeProps | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  ThemeScopeContext.displayName = 'ThemeScopeContext';
+}
+
+const emptyProps: ThemeScopeProps = {};
+
+/**
+ * Returns the props that apply the closest scoped `ThemeProvider` to an element.
+ * Portaled elements render outside the provider's element, so they need these props
+ * to use its CSS theme variables. Returns an empty object outside scoped providers.
+ */
+export function useThemeScope(): ThemeScopeProps {
+  return React.useContext(ThemeScopeContext) ?? emptyProps;
+}
+
+export default ThemeScopeContext;
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.tsx b/packages/mui-system/src/cssVars/createCssVarsProvider.tsx
index bfad6a75368bdd..6ada32287b4718 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.tsx
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -13,6 +14,13 @@ import {
 } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme, { type Result } from './useCurrentColorScheme';
 import type { StorageManager } from './localStorageManager';
+import ThemeScopeContext from './ThemeScopeContext';
+import {
+  applyScopeToChild,
+  createScopedStyleSheets,
+  getColorSchemeProps,
+  type CssVarsByColorScheme,
+} from './scopeCssVars';
 
 export interface ColorSchemeContextValue<
   SupportedColorScheme extends string,
@@ -112,6 +120,15 @@ export interface CreateCssVarsProviderResult<
          * @default false
          */
         disableStyleSheetGeneration?: boolean | undefined;
+        /**
+         * If `true`, the CSS theme variables are set on its child element instead of `:root`,
+         * so they don't affect the rest of the page. Use it for a provider that isn't nested in another one,
+         * like an embedded widget. Nested providers are scoped automatically when their variables differ.
+         * Either way, the provider needs a single child element that renders the `className` it receives.
+         * Its mode is only stored when `modeStorageKey` or `colorSchemeStorageKey` is set.
+         * @default false
+         */
+        scoped?: boolean | undefined;
       }
     >,
   ) => React.JSX.Element;
@@ -212,10 +229,54 @@ export default function createCssVarsProvider<
   const defaultColorSchemes = {};
   const defaultComponents = {};
 
+  // The scoped stylesheets only depend on the themes, so they're created once per pair of themes
+  // instead of once per provider.
+  type ScopedStyleSheets = ReturnType<typeof createScopedStyleSheets>;
+  const scopedStyleSheetsCache: WeakMap<
+    () => CssVarsByColorScheme,
+    WeakMap<object, Map<string, ScopedStyleSheets>>
+  > = new WeakMap();
+  const noUpper = {};
+  function getScopedStyleSheets(
+    generate: () => CssVarsByColorScheme,
+    upperGenerate: (() => CssVarsByColorScheme) | undefined,
+    colorSchemeSelector: string | undefined,
+    prefix: string,
+  ) {
+    let byUpper = scopedStyleSheetsCache.get(generate);
+    if (!byUpper) {
+      byUpper = new WeakMap();
+      scopedStyleSheetsCache.set(generate, byUpper);
+    }
+    let byOptions = byUpper.get(upperGenerate ?? noUpper);
+    if (!byOptions) {
+      byOptions = new Map();
+      byUpper.set(upperGenerate ?? noUpper, byOptions);
+    }
+    const key = `${colorSchemeSelector}|${prefix}`;
+    if (!byOptions.has(key)) {
+      byOptions.set(
+        key,
+        createScopedStyleSheets({
+          css: generate(),
+          upper: upperGenerate?.(),
+          colorSchemeSelector,
+          prefix,
+        }),
+      );
+    }
+    return byOptions.get(key) as ScopedStyleSheets;
+  }
+
+  // Stylesheets of the mounted providers that write to `:root`, to warn when they overwrite each other.
+  const rootStyleSheets: Map<string, string[]> = new Map();
+  let warnedMultipleRoots = false;
+
   function CssVarsProvider(props: any) {
     const {
       children,
       theme: themeProp,
+      scoped = false,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -232,7 +293,10 @@ export default function createCssVarsProvider<
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
+    const upperScope = React.useContext(ThemeScopeContext);
     const nested = !!ctx && !disableNestedContext;
+    // A scoped provider that isn't nested manages its own color scheme on its element.
+    const isScopedRoot = !nested && scoped;
 
     const initialTheme = React.useMemo(() => {
       if (themeProp) {
@@ -280,7 +344,14 @@ export default function createCssVarsProvider<
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
-      storageManager,
+      // With the default storage keys, a scoped provider would overwrite the mode of the page's provider.
+      storageManager:
+        isScopedRoot &&
+        props.storageManager === undefined &&
+        props.modeStorageKey === undefined &&
+        props.colorSchemeStorageKey === undefined
+          ? null
+          : storageManager,
       storageWindow,
       noSsr,
     });
@@ -350,9 +421,12 @@ export default function createCssVarsProvider<
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    // A scoped root sets it on its child instead.
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
+    const ownsColorSchemeNode = !isScopedRoot || props.colorSchemeNode !== undefined;
     useEnhancedEffect(() => {
       if (
+        ownsColorSchemeNode &&
         colorScheme &&
         colorSchemeNode &&
         colorSchemeSelector &&
@@ -392,7 +466,7 @@ export default function createCssVarsProvider<
           }
         }
       }
-    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes, ownsColorSchemeNode]);
 
     // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
     // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
@@ -460,23 +534,159 @@ export default function createCssVarsProvider<
       ],
     );
 
+    const canGenerateStyleSheet =
+      !disableStyleSheetGeneration && restThemeProp.cssVariables !== false;
+    const samePrefixAsUpper = nested && (upperTheme as any)?.cssVarPrefix === cssVarPrefix;
+
+    // 6. Scope the CSS theme variables that can't go to `:root` to the provider's child.
+    const generateCssVarsByColorScheme: (() => CssVarsByColorScheme) | undefined =
+      restThemeProp.generateCssVarsByColorScheme;
+    const upperGenerateCssVarsByColorScheme: (() => CssVarsByColorScheme) | undefined =
+      samePrefixAsUpper ? (upperTheme as any).generateCssVarsByColorScheme : undefined;
+    const upperColorSchemeSelector = nested ? (upperTheme as any)?.colorSchemeSelector : undefined;
+    const scope = React.useMemo(() => {
+      if (!canGenerateStyleSheet || !generateCssVarsByColorScheme) {
+        return null;
+      }
+      if (nested) {
+        // A nested theme with another prefix doesn't clash with the outer one, so it writes to `:root`.
+        if (!upperGenerateCssVarsByColorScheme) {
+          return null;
+        }
+        // It follows the outer color scheme.
+        return getScopedStyleSheets(
+          generateCssVarsByColorScheme,
+          upperGenerateCssVarsByColorScheme,
+          upperColorSchemeSelector,
+          cssVarPrefix,
+        );
+      }
+      if (scoped) {
+        return getScopedStyleSheets(
+          generateCssVarsByColorScheme,
+          undefined,
+          colorSchemeSelector,
+          cssVarPrefix,
+        );
+      }
+      return null;
+    }, [
+      canGenerateStyleSheet,
+      generateCssVarsByColorScheme,
+      upperGenerateCssVarsByColorScheme,
+      upperColorSchemeSelector,
+      colorSchemeSelector,
+      cssVarPrefix,
+      nested,
+      scoped,
+    ]);
+
+    const scopeClassName = scope?.className;
+    const colorSchemeProps = React.useMemo(
+      () =>
+        isScopedRoot
+          ? getColorSchemeProps(colorSchemeSelector, colorScheme)
+          : ({} as Record<string, string>),
+      [isScopedRoot, colorSchemeSelector, colorScheme],
+    );
+    const { className: colorSchemeClassName, ...colorSchemeAttributes } = colorSchemeProps;
+    const scopeProps = React.useMemo(() => {
+      if (!scopeClassName) {
+        return undefined;
+      }
+      // Portaled elements aren't under the outer scopes' elements either, so they get them too.
+      return {
+        ...(nested ? upperScope : undefined),
+        ...colorSchemeProps,
+        className: clsx(nested && upperScope?.className, scopeClassName, colorSchemeClassName),
+      };
+    }, [scopeClassName, colorSchemeClassName, colorSchemeProps, nested, upperScope]);
+
     let shouldGenerateStyleSheet = true;
     if (
       disableStyleSheetGeneration ||
       restThemeProp.cssVariables === false ||
-      (nested && (upperTheme as any)?.cssVarPrefix === cssVarPrefix)
+      (nested && (upperTheme as any)?.cssVarPrefix === cssVarPrefix) ||
+      isScopedRoot
     ) {
       shouldGenerateStyleSheet = false;
     }
 
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useEffect(() => {
+        if (!shouldGenerateStyleSheet || nested || !memoTheme.generateStyleSheets) {
+          return undefined;
+        }
+        const key = cssVarPrefix ?? '';
+        const styleSheet = JSON.stringify(memoTheme.generateStyleSheets());
+        const mounted = rootStyleSheets.get(key) ?? [];
+        rootStyleSheets.set(key, [...mounted, styleSheet]);
+        if (!warnedMultipleRoots && mounted.some((other) => other !== styleSheet)) {
+          warnedMultipleRoots = true;
+          console.warn(
+            [
+              'MUI: Several ThemeProviders with different themes write their CSS theme variables to `:root`, so they overwrite each other.',
+              'Add the `scoped` prop to the ThemeProviders that should only apply to their children, like an embedded widget.',
+            ].join('\n'),
+          );
+        }
+        return () => {
+          const current = rootStyleSheets.get(key) ?? [];
+          const index = current.indexOf(styleSheet);
+          rootStyleSheets.set(
+            key,
+            current.filter((_, i) => i !== index),
+          );
+        };
+      }, [shouldGenerateStyleSheet, nested, memoTheme, cssVarPrefix]);
+    }
+
+    // The scope class goes on the single child, so the provider never renders an element of its own.
+    // When the child is itself a ThemeProvider, it receives the outer scope and passes it on to its own child.
+    const scopedChildren = applyScopeToChild(
+      children,
+      props,
+      scopeClassName
+        ? {
+            className: clsx(scopeClassName, colorSchemeClassName),
+            attributes: colorSchemeAttributes,
+          }
+        : undefined,
+    );
+
+    if (process.env.NODE_ENV !== 'production') {
+      const needsChildScope = !!(scopeClassName || props.className);
+      const hasChildren = children != null && typeof children !== 'boolean';
+      const canCloneChild = React.isValidElement(children) && children.type !== React.Fragment;
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const warnedChildren = React.useRef(false);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useEffect(() => {
+        if (needsChildScope && hasChildren && !canCloneChild && !warnedChildren.current) {
+          warnedChildren.current = true;
+          console.error(
+            [
+              "MUI: The CSS theme variables of this ThemeProvider can't be applied because its children aren't a single element.",
+              'Wrap its children in one element, for example a `div`, so it can set them on it.',
+            ].join('\n'),
+          );
+        }
+      }, [needsChildScope, hasChildren, canCloneChild]);
+    }
+
+    // The tree is the same whether the theme needs a scope or not, so switching themes keeps the children's state.
     const element = (
       <React.Fragment>
         <ThemeProvider themeId={scopedTheme ? themeId : undefined} theme={memoTheme}>
-          {children}
+          <ThemeScopeContext.Provider value={scopeProps ?? (nested ? upperScope : undefined)}>
+            {scopedChildren}
+          </ThemeScopeContext.Provider>
         </ThemeProvider>
         {shouldGenerateStyleSheet && (
           <GlobalStyles styles={memoTheme.generateStyleSheets?.() || []} />
         )}
+        {scope && <GlobalStyles styles={scope.styles} />}
       </React.Fragment>
     );
 
@@ -538,6 +748,10 @@ export default function createCssVarsProvider<
      * You should use this option in conjunction with `InitColorSchemeScript` component.
      */
     noSsr: PropTypes.bool,
+    /**
+     * If `true`, the CSS theme variables are set on its child element instead of `:root`.
+     */
+    scoped: PropTypes.bool,
     /**
      * The storage manager to be used for storing the mode and color scheme
      * @default using `window.localStorage`
diff --git a/packages/mui-system/src/cssVars/createCssVarsTheme.ts b/packages/mui-system/src/cssVars/createCssVarsTheme.ts
index 03a5c73e7630d4..85139ea7da762e 100644
--- a/packages/mui-system/src/cssVars/createCssVarsTheme.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsTheme.ts
@@ -25,6 +25,7 @@ function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, an
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
+  output.generateCssVarsByColorScheme = result.generateCssVarsByColorScheme;
   output.colorSchemeSelector = colorSchemeSelector;
   output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
   output.internal_cache = {};
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index 63df8b222a9817..de5eb7d5c8cc45 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -11,3 +11,6 @@ export type { ExtractTypographyTokens } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';
 export { createGetColorSchemeSelector } from './getColorSchemeSelector';
 export type { StorageManager } from './localStorageManager';
+export { useThemeScope } from './ThemeScopeContext';
+export type { ThemeScopeProps } from './ThemeScopeContext';
+export { applyScopeToChild as unstable_applyScopeToChild } from './scopeCssVars';
diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts
index 8f85ee99119a6c..d71f0d223971da 100644
--- a/packages/mui-system/src/cssVars/prepareCssVars.ts
+++ b/packages/mui-system/src/cssVars/prepareCssVars.ts
@@ -1,6 +1,13 @@
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
 
+// use double underscore to indicate that these are private variables
+const CONTRAST_VARS = {
+  '--__l-threshold': '0.7',
+  '--__l': 'clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)',
+  '--__a': 'clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)', // 0.87 is the default alpha value for black text.
+};
+
 export interface DefaultCssVarsTheme {
   colorSchemes?: Record<string, any> | undefined;
   defaultColorScheme?: string | undefined;
@@ -98,6 +105,32 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
     return vars;
   };
 
+  /**
+   * Returns the CSS declarations of the theme before they are assigned to selectors:
+   * the ones shared by all color schemes, and the ones of each color scheme, default first.
+   */
+  const generateCssVarsByColorScheme = () => {
+    const colorScheme = theme.defaultColorScheme || 'light';
+    const schemes: Array<[string, Record<string, string | number>]> = [];
+    const { [colorScheme]: defaultSchemeVal, ...other } = colorSchemesMap;
+    const entries = defaultSchemeVal
+      ? [[colorScheme, defaultSchemeVal] as const, ...Object.entries(other)]
+      : Object.entries(other);
+    entries.forEach(([key, { css }]) => {
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
+      schemes.push([
+        key,
+        !disableCssColorScheme && cssColorSheme
+          ? { colorScheme: cssColorSheme, ...css }
+          : { ...css },
+      ]);
+    });
+    return {
+      root: enableContrastVars ? { ...rootCss, ...CONTRAST_VARS } : { ...rootCss },
+      colorSchemes: schemes,
+    };
+  };
+
   const generateStyleSheets = () => {
     const stylesheets: Array<Record<string, any>> = [];
     const colorScheme = theme.defaultColorScheme || 'light';
@@ -134,14 +167,7 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
     });
 
     if (enableContrastVars) {
-      stylesheets.push({
-        ':root': {
-          // use double underscore to indicate that these are private variables
-          '--__l-threshold': '0.7',
-          '--__l': 'clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)',
-          '--__a': 'clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)', // 0.87 is the default alpha value for black text.
-        },
-      });
+      stylesheets.push({ ':root': { ...CONTRAST_VARS } });
     }
 
     return stylesheets;
@@ -151,6 +177,7 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
     vars: themeVars,
     generateThemeVars,
     generateStyleSheets,
+    generateCssVarsByColorScheme,
   };
 }
 
diff --git a/packages/mui-system/src/cssVars/scopeCssVars.test.ts b/packages/mui-system/src/cssVars/scopeCssVars.test.ts
new file mode 100644
index 00000000000000..c898802716863b
--- /dev/null
+++ b/packages/mui-system/src/cssVars/scopeCssVars.test.ts
@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest';
+import { createScopedStyleSheets, getColorSchemeProps } from './scopeCssVars';
+
+const upper = {
+  root: { '--mui-spacing': '8px' },
+  colorSchemes: [
+    ['light', { colorScheme: 'light', '--mui-primary': 'blue', '--mui-text': 'black' }],
+    ['dark', { colorScheme: 'dark', '--mui-primary': 'lightblue', '--mui-text': 'white' }],
+  ] as Array<[string, Record<string, string>]>,
+};
+
+describe('createScopedStyleSheets', () => {
+  it('returns null when a nested theme has the same declarations', () => {
+    expect(
+      createScopedStyleSheets({ css: upper, upper, colorSchemeSelector: 'class', prefix: 'mui' }),
+    ).to.equal(null);
+  });
+
+  it('writes only the declarations that differ from the outer theme', () => {
+    const result = createScopedStyleSheets({
+      css: {
+        root: { '--mui-spacing': '8px' },
+        colorSchemes: [
+          ['light', { colorScheme: 'light', '--mui-primary': 'red', '--mui-text': 'black' }],
+          ['dark', { colorScheme: 'dark', '--mui-primary': 'pink', '--mui-text': 'white' }],
+        ],
+      },
+      upper,
+      colorSchemeSelector: 'class',
+      prefix: 'mui',
+    })!;
+    const scope = `.${result.className}`;
+    expect(result.className).to.match(/^mui-theme-[a-z0-9]+$/);
+    expect(result.styles).to.deep.equal([
+      { [scope]: { '--mui-primary': 'red' } },
+      { [`.dark ${scope}, ${scope}.dark`]: { '--mui-primary': 'pink' } },
+    ]);
+  });
+
+  it('writes the default color scheme declarations again for the other color schemes', () => {
+    // Only the light primary changes, but `.scope` applies in dark mode too.
+    const result = createScopedStyleSheets({
+      css: {
+        root: upper.root,
+        colorSchemes: [
+          ['light', { ...upper.colorSchemes[0][1], '--mui-primary': 'red' }],
+          upper.colorSchemes[1],
+        ],
+      },
+      upper,
+      colorSchemeSelector: 'class',
+      prefix: 'mui',
+    })!;
+    const scope = `.${result.className}`;
+    expect(result.styles).to.deep.equal([
+      { [scope]: { '--mui-primary': 'red' } },
+      { [`.dark ${scope}, ${scope}.dark`]: { '--mui-primary': 'lightblue' } },
+    ]);
+  });
+
+  it('writes a single color scheme in full, whatever the outer color scheme is', () => {
+    const result = createScopedStyleSheets({
+      css: { root: upper.root, colorSchemes: [upper.colorSchemes[1]] },
+      upper,
+      colorSchemeSelector: 'class',
+      prefix: 'mui',
+    })!;
+    expect(result.styles).to.deep.equal([{ [`.${result.className}`]: upper.colorSchemes[1][1] }]);
+  });
+
+  it('uses media queries with the media selector', () => {
+    const result = createScopedStyleSheets({
+      css: upper,
+      colorSchemeSelector: 'media',
+      prefix: 'mui',
+    })!;
+    const scope = `.${result.className}`;
+    expect(result.styles).to.deep.equal([
+      { [scope]: upper.root },
+      { [scope]: upper.colorSchemes[0][1] },
+      { '@media (prefers-color-scheme: dark)': { [scope]: upper.colorSchemes[1][1] } },
+    ]);
+  });
+
+  it('puts the color scheme rule on the scoped element when it is not nested', () => {
+    const result = createScopedStyleSheets({
+      css: upper,
+      colorSchemeSelector: 'data-mui-color-scheme',
+      prefix: 'mui',
+    })!;
+    const scope = `.${result.className}`;
+    expect(result.styles[2]).to.deep.equal({
+      [`${scope}[data-mui-color-scheme="dark"]`]: upper.colorSchemes[1][1],
+    });
+  });
+
+  it('gives the same class name to the same declarations', () => {
+    const options = { css: upper, colorSchemeSelector: 'class', prefix: 'mui' };
+    expect(createScopedStyleSheets(options)!.className).to.equal(
+      createScopedStyleSheets({ ...options, css: structuredClone(upper) })!.className,
+    );
+  });
+});
+
+describe('getColorSchemeProps', () => {
+  it('returns the class or attribute of a color scheme', () => {
+    expect(getColorSchemeProps('class', 'dark')).to.deep.equal({ className: 'dark' });
+    expect(getColorSchemeProps('data', 'dark')).to.deep.equal({ 'data-dark': '' });
+    expect(getColorSchemeProps('data-mui-color-scheme', 'dark')).to.deep.equal({
+      'data-mui-color-scheme': 'dark',
+    });
+    expect(getColorSchemeProps('media', 'dark')).to.deep.equal({});
+    expect(getColorSchemeProps('class', undefined)).to.deep.equal({});
+  });
+});
diff --git a/packages/mui-system/src/cssVars/scopeCssVars.ts b/packages/mui-system/src/cssVars/scopeCssVars.ts
new file mode 100644
index 00000000000000..c00479829df56a
--- /dev/null
+++ b/packages/mui-system/src/cssVars/scopeCssVars.ts
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+type CssDeclarations = Record<string, string | number>;
+
+export interface CssVarsByColorScheme {
+  root: CssDeclarations;
+  colorSchemes: Array<[string, CssDeclarations]>;
+}
+
+/**
+ * Turns `theme.colorSchemeSelector` into a rule with a `%s` placeholder for the color scheme,
+ * or `'media'`. Returns `undefined` when there's no selector.
+ */
+function getColorSchemeRule(selector: string | undefined) {
+  if (selector === 'class') {
+    return '.%s';
+  }
+  if (selector === 'data') {
+    return '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    return `[${selector}="%s"]`;
+  }
+  return selector;
+}
+
+/**
+ * Returns the props that make an element match the color scheme rule,
+ * e.g. `{ className: 'dark' }` for `.%s` or `{ 'data-mui-color-scheme': 'dark' }`.
+ */
+export function getColorSchemeProps(
+  selector: string | undefined,
+  colorScheme: string | undefined,
+): Record<string, string> {
+  const rule = getColorSchemeRule(selector);
+  if (!rule || rule === 'media' || !colorScheme) {
+    return {};
+  }
+  if (rule.startsWith('.')) {
+    return { className: rule.substring(1).replace('%s', colorScheme) };
+  }
+  const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
+  if (!matches) {
+    return {};
+  }
+  const [attr, value] = matches[1].split('=');
+  return { [attr]: value ? value.replace(/"|'/g, '') : '' };
+}
+
+// FNV-1a, enough to give each set of declarations a short and stable class name.
+/* eslint-disable no-bitwise */
+function hash(value: string) {
+  let result = 0x811c9dc5;
+  for (let i = 0; i < value.length; i += 1) {
+    result ^= value.charCodeAt(i);
+    result = Math.imul(result, 0x01000193);
+  }
+  return (result >>> 0).toString(36);
+}
+/* eslint-enable no-bitwise */
+
+function pickChanged(css: CssDeclarations, upperCss: CssDeclarations | undefined) {
+  if (!upperCss) {
+    return { ...css };
+  }
+  const result: CssDeclarations = {};
+  Object.keys(css).forEach((key) => {
+    if (css[key] !== upperCss[key]) {
+      result[key] = css[key];
+    }
+  });
+  return result;
+}
+
+/**
+ * Builds the stylesheets that set the CSS theme variables of a theme on a class instead of `:root`,
+ * so that only the elements under that class use them.
+ *
+ * - With `upper`, the theme is nested: only the declarations that differ from `upper` are written,
+ *   and the color scheme follows the outer provider, whose rule is on an ancestor (`.dark .scope`)
+ *   or, for portaled elements, on the same element (`.scope.dark`).
+ * - Without `upper`, all declarations are written, and the color scheme rule is on the scoped element
+ *   itself (`.scope.dark`), since the provider manages its own color scheme.
+ *
+ * Returns `null` when there's nothing to write.
+ */
+export function createScopedStyleSheets(options: {
+  css: CssVarsByColorScheme;
+  upper?: CssVarsByColorScheme | undefined;
+  colorSchemeSelector: string | undefined;
+  prefix: string;
+}) {
+  const { css, upper, colorSchemeSelector, prefix } = options;
+  const rule = getColorSchemeRule(colorSchemeSelector);
+  const [defaultScheme, ...otherSchemes] = css.colorSchemes;
+  const upperSchemes = upper ? Object.fromEntries(upper.colorSchemes) : {};
+  // A theme with a single color scheme uses it whatever the outer color scheme is,
+  // so unless the outer theme has a single color scheme too, it's written in full.
+  const isForcedScheme = css.colorSchemes.length === 1 && (upper?.colorSchemes.length ?? 0) > 1;
+
+  const root = pickChanged(css.root, upper?.root);
+  const schemes: Array<[string, CssDeclarations]> = [];
+  if (defaultScheme) {
+    const [key, declarations] = defaultScheme;
+    const changed = pickChanged(declarations, isForcedScheme ? undefined : upperSchemes[key]);
+    schemes.push([key, changed]);
+    otherSchemes.forEach(([otherKey, otherDeclarations]) => {
+      const otherChanged = pickChanged(otherDeclarations, upperSchemes[otherKey]);
+      // The default color scheme's rule applies in every color scheme, so each declaration
+      // it writes has to be written again for the other color schemes.
+      Object.keys(changed).forEach((declaration) => {
+        if (declaration in otherDeclarations) {
+          otherChanged[declaration] = otherDeclarations[declaration];
+        }
+      });
+      schemes.push([otherKey, otherChanged]);
+    });
+  }
+
+  const isEmpty =
+    Object.keys(root).length === 0 &&
+    schemes.every(([, declarations]) => Object.keys(declarations).length === 0);
+  if (isEmpty) {
+    return null;
+  }
+
+  const className = `${prefix ? `${prefix}-` : ''}theme-${hash(
+    JSON.stringify([root, schemes, rule, !!upper]),
+  )}`;
+  const scope = `.${className}`;
+
+  function getSelector(colorScheme: string) {
+    if (!rule) {
+      return scope;
+    }
+    const colorSchemeRule = rule.replace('%s', colorScheme);
+    // A portaled element gets the outer scopes' classes too, so the color scheme rule
+    // can also be on the scoped element itself.
+    return upper
+      ? `${colorSchemeRule} ${scope}, ${scope}${colorSchemeRule}`
+      : `${scope}${colorSchemeRule}`;
+  }
+
+  const styles: Array<Record<string, any>> = [];
+  if (Object.keys(root).length) {
+    styles.push({ [scope]: root });
+  }
+  schemes.forEach(([key, declarations], index) => {
+    if (!Object.keys(declarations).length) {
+      return;
+    }
+    if (index === 0) {
+      styles.push({ [scope]: declarations });
+    } else if (rule === 'media') {
+      const mode = Object.fromEntries(css.colorSchemes)[key].colorScheme || key;
+      styles.push({ [`@media (prefers-color-scheme: ${mode})`]: { [scope]: declarations } });
+    } else {
+      styles.push({ [getSelector(key)]: declarations });
+    }
+  });
+
+  return { className, styles };
+}
+
+/**
+ * Adds the scope that an outer ThemeProvider passed in `props` (`className` and `data-*`),
+ * and the provider's own scope, to its single child element.
+ * Returns the children unchanged when there's nothing to add or they aren't a single element.
+ */
+export function applyScopeToChild(
+  children: React.ReactNode,
+  props: Record<string, any>,
+  own?: { className?: string | undefined; attributes?: Record<string, string> | undefined },
+): React.ReactNode {
+  const forwardedClassName: string | undefined = props.className;
+  if (!forwardedClassName && !own?.className) {
+    return children;
+  }
+  if (!React.isValidElement(children) || children.type === React.Fragment) {
+    return children;
+  }
+  const child = children as React.ReactElement<{ className?: string | undefined }>;
+  const forwardedAttributes: Record<string, string> = {};
+  if (forwardedClassName) {
+    Object.keys(props).forEach((key) => {
+      if (key.startsWith('data-')) {
+        forwardedAttributes[key] = props[key];
+      }
+    });
+  }
+  return React.cloneElement(child, {
+    ...forwardedAttributes,
+    ...own?.attributes,
+    className: clsx(child.props.className, forwardedClassName, own?.className),
+  });
+}