Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Migrating to CSS theme variables

A step-by-step migration guide to start using CSS theme variables in your project.

This is a guide that shows how to migrate an existing Material UI project to CSS theme variables. This migration offers a solution to a longstanding issue in which a user who prefers dark mode will see a flash of light mode when the page first loads.

1. Add the new provider

Without a custom theme

If you aren't using ThemeProvider, then all you need to do is wrap your application with the CssVarsProvider:

<span class="token keyword">import</span> <span class="token punctuation">{</span> Experimental_CssVarsProvider <span class="token keyword">as</span> CssVarsProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CssVarsProvider</span></span><span class="token punctuation">></span></span><span class="token operator">...</span>your existing application<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CssVarsProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

You should see the generated CSS theme variables in the stylesheet. Material UI components that render inside the new provider will automatically consume the variables.

Custom theme

If you have a custom theme, you must replace createTheme() with the extendTheme() API.

This moves palette customization to within the colorSchemes node. Other properties can be copied and pasted.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import { createTheme } from '@mui/material/styles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { experimental_extendTheme as extendTheme} from '@mui/material/styles';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const lightTheme = createTheme({
</span><span class="token prefix deleted">-</span><span class="token line">  palette: {
</span><span class="token prefix deleted">-</span><span class="token line">   primary: {
</span><span class="token prefix deleted">-</span><span class="token line">     main: '#ff5252',
</span><span class="token prefix deleted">-</span><span class="token line">   },
</span><span class="token prefix deleted">-</span><span class="token line">   ...
</span><span class="token prefix deleted">-</span><span class="token line"> },
</span><span class="token prefix deleted">-</span><span class="token line"> // ...other properties, e.g. breakpoints, spacing, shape, typography, components
</span><span class="token prefix deleted">-</span><span class="token line">});
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const darkTheme = createTheme({
</span><span class="token prefix deleted">-</span><span class="token line">  palette: {
</span><span class="token prefix deleted">-</span><span class="token line">   mode: 'dark',
</span><span class="token prefix deleted">-</span><span class="token line">   primary: {
</span><span class="token prefix deleted">-</span><span class="token line">     main: '#000',
</span><span class="token prefix deleted">-</span><span class="token line">   },
</span><span class="token prefix deleted">-</span><span class="token line">   ...
</span><span class="token prefix deleted">-</span><span class="token line"> },
</span><span class="token prefix deleted">-</span><span class="token line">});
</span></span>
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const theme = extendTheme({
</span><span class="token prefix inserted">+</span><span class="token line">  colorSchemes: {
</span><span class="token prefix inserted">+</span><span class="token line">    light: {
</span><span class="token prefix inserted">+</span><span class="token line">      palette: {
</span><span class="token prefix inserted">+</span><span class="token line">        primary: {
</span><span class="token prefix inserted">+</span><span class="token line">          main: '#ff5252',
</span><span class="token prefix inserted">+</span><span class="token line">        },
</span><span class="token prefix inserted">+</span><span class="token line">        ...
</span><span class="token prefix inserted">+</span><span class="token line">      },
</span><span class="token prefix inserted">+</span><span class="token line">    },
</span><span class="token prefix inserted">+</span><span class="token line">    dark: {
</span><span class="token prefix inserted">+</span><span class="token line">      palette: {
</span><span class="token prefix inserted">+</span><span class="token line">        primary: {
</span><span class="token prefix inserted">+</span><span class="token line">          main: '#000',
</span><span class="token prefix inserted">+</span><span class="token line">        },
</span><span class="token prefix inserted">+</span><span class="token line">        ...
</span><span class="token prefix inserted">+</span><span class="token line">      },
</span><span class="token prefix inserted">+</span><span class="token line">    },
</span><span class="token prefix inserted">+</span><span class="token line">  },
</span><span class="token prefix inserted">+</span><span class="token line">  // ...other properties
</span><span class="token prefix inserted">+</span><span class="token line">});</span></span>

Then, replace the ThemeProvider with the CssVarsProvider:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import { ThemeProvider } from '@mui/material/styles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const theme = extendTheme(...);
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function App() {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  return &lt;ThemeProvider theme={theme}>...&lt;/ThemeProvider>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  return &lt;CssVarsProvider theme={theme}>...&lt;/CssVarsProvider>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

Save the file and start the development server. Your application should be able to run without crashing.

If you inspect the page, you will see the generated CSS variables in the stylesheet. Material UI components that render inside the new provider will automatically use the CSS theme variables.

2. Remove the toggle mode logic

You can remove your existing logic that handles the user-selected mode and replace it with the useColorScheme hook.

Before:

<span class="token comment">// This is only a minimal example to demonstrate the migration.</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>mode<span class="token punctuation">,</span> setMode<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> window <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">'light'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token string">'light'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// a new theme is created every time the mode changes</span>
  <span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">palette</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      mode<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// ...your custom theme</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> newMode <span class="token operator">=</span> mode <span class="token operator">===</span> <span class="token string">'light'</span> <span class="token operator">?</span> <span class="token string">'dark'</span> <span class="token operator">:</span> <span class="token string">'light'</span><span class="token punctuation">;</span>
          <span class="token function">setMode</span><span class="token punctuation">(</span>newMode<span class="token punctuation">)</span><span class="token punctuation">;</span>
          localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">,</span> newMode<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">></span></span>
        <span class="token punctuation">{</span>mode <span class="token operator">===</span> <span class="token string">'light'</span> <span class="token operator">?</span> <span class="token string">'Turn dark'</span> <span class="token operator">:</span> <span class="token string">'Turn light'</span><span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
      <span class="token operator">...</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

After:

<span class="token keyword">import</span> <span class="token punctuation">{</span>
  Experimental_CssVarsProvider <span class="token keyword">as</span> CssVarsProvider<span class="token punctuation">,</span>
  experimental_extendTheme <span class="token keyword">as</span> extendTheme<span class="token punctuation">,</span>
  useColorScheme<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">ModeToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> mode<span class="token punctuation">,</span> setMode <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token function">setMode</span><span class="token punctuation">(</span>mode <span class="token operator">===</span> <span class="token string">'light'</span> <span class="token operator">?</span> <span class="token string">'dark'</span> <span class="token operator">:</span> <span class="token string">'light'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">></span></span>
      <span class="token punctuation">{</span>mode <span class="token operator">===</span> <span class="token string">'light'</span> <span class="token operator">?</span> <span class="token string">'Turn dark'</span> <span class="token operator">:</span> <span class="token string">'Turn light'</span><span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// ...your custom theme</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CssVarsProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ModeToggle</span></span> <span class="token punctuation">/></span></span>
      <span class="token operator">...</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CssVarsProvider</span></span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

The useColorScheme hook provides the user-selected mode and a function setMode to update the value.

The mode is stored inside CssVarsProvider which handles local storage synchronization for you.

3. Prevent dark-mode flickering in server-side applications

The getInitColorSchemeScript() API prevents dark-mode flickering by returning a script that must be run before React.

Next.js

Place the script before <Main /> in your pages/_document.js:

<span class="token keyword">import</span> Document<span class="token punctuation">,</span> <span class="token punctuation">{</span> Html<span class="token punctuation">,</span> Head<span class="token punctuation">,</span> Main<span class="token punctuation">,</span> NextScript <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next/document'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getInitColorSchemeScript <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">MyDocument</span> <span class="token keyword">extends</span> <span class="token class-name">Document</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Html</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Head</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Head</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
          <span class="token punctuation">{</span><span class="token function">getInitColorSchemeScript</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Main</span></span> <span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NextScript</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Html</span></span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Gatsby

Place the script in your gatsby-ssr.js file:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getInitColorSchemeScript <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onRenderBody</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> setPreBodyComponents <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setPreBodyComponents</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">getInitColorSchemeScript</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

4. Refactor custom styles to use the attribute selector

Users will continue to encounter dark-mode flickering if your custom styles include conditional expressions, as shown below:

<span class="token comment">// theming example</span>
<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">MuiChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span>
            theme<span class="token punctuation">.</span>palette<span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token string">'dark'</span>
              <span class="token operator">?</span> <span class="token string">'rgba(255 255 255 / 0.2)'</span>
              <span class="token operator">:</span> <span class="token string">'rgba(0 0 0 / 0.2)'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// or a custom component example</span>
<span class="token keyword">const</span> Button <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span>
    theme<span class="token punctuation">.</span>palette<span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token string">'dark'</span> <span class="token operator">?</span> <span class="token string">'rgba(255 255 255 / 0.2)'</span> <span class="token operator">:</span> <span class="token string">'rgba(0 0 0 / 0.2)'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

This is because the theme.palette.mode is always light on the server.

To fix this problem, replace conditional expressions with the attribute selector instead:

<span class="token comment">// theming example</span>
<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">MuiChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'rgba(0 0 0 / 0.2)'</span><span class="token punctuation">,</span>
          <span class="token punctuation">[</span>theme<span class="token punctuation">.</span><span class="token function">getColorSchemeSelector</span><span class="token punctuation">(</span><span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'rgba(255 255 255 / 0.2)'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// or a custom component example</span>
<span class="token keyword">const</span> Button <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'rgba(0 0 0 / 0.2)'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>theme<span class="token punctuation">.</span><span class="token function">getColorSchemeSelector</span><span class="token punctuation">(</span><span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'rgba(255 255 255 / 0.2)'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

5. Test dark-mode flickering

  1. Toggle dark mode in your application
  2. Open DevTools and set the CPU throttling to the lowest value (don't close the DevTools).
  3. Refresh the page. You should see the all components in dark mode at first glance.