title: Material UI - transition animation between dark and light theme/palette?
body: <p>I currently have a toggle to switch between dark and light theme and it is working perfectly.</p>
  <p>I have it set up in this shape:</p>
  <pre><code>const dark = createTheme({
    palette: {
      type: &quot;dark&quot;,
      primary: {
        main: MYCOLORS.dback,
      },
    },
  });
  
  const light = createTheme({
    palette: {
      type: &quot;light&quot;,
      primary: {
        main: &quot;yellow&quot;,
      },
    },
  });
  
  function App() {
    const [darkTheme] = useAtom(darkThemeAtom); // useAtom is just a simple state lib not that relevant to this question
    const appliedTheme = createTheme(darkTheme ? dark : light);
  
    return (
      &lt;&gt;
        &lt;ThemeProvider theme={appliedTheme}&gt;
          &lt;CssBaseline /&gt;
          &lt;MyComponentA /&gt;
          &lt;MyComponentB /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>My question is, how do I apply a transition effect between the dark and light theme across all my components?</p>
  <p>If it's just css then I could simply do this: <a href="https://www.w3schools.com/css/css3_transitions.asp.." rel="nofollow noreferrer">https://www.w3schools.com/css/css3_transitions.asp..</a>.</p>
  <p>Thank you so much for your help!</p>