text: import * as React from 'react';
  import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
  
  const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
    theme: {
      colorSchemes: {
        // test that styles order injection does not matter (dark comes before light).
        dark: {
          background: {
            default: '#000',
          },
        },
        light: {
          background: {
            default: '#e5e5e5',
          },
        },
      },
    },
    defaultColorScheme: {
      light: 'light',
      dark: 'dark',
    },
  });
  
  const DarkMode = () => {
    const { setMode } = useColorScheme();
    React.useEffect(() => {
      setMode('dark');
    }, [setMode]);
    return null;
  };
  
  export default function DarkModeSpecificity() {
    return (
      <CssVarsProvider modeStorageKey="dark-mode-specificity">
        <DarkMode />
        <div style={{ background: 'var(--background-default)', color: '#888', padding: '1rem' }}>
          Background should be #000.
        </div>
      </CssVarsProvider>
    );
  }
  