title: What are themes when it comes to Material UI?
body: <p>I'm trying understand what exactly themes are and what they're trying to represent.  I've read the docs but it still doesn't make sense to me.</p>
  
  <p>For example, below is a piece of code of what I'm referring to.</p>
  
  <p>I just want to know what <code>theme</code> is supposed to represent, where it's coming from and why it's used.  </p>
  
  <pre><code>const styles = theme =&gt; ({
  root: {
      display: 'flex',
  },
  
  toolbar: {
      paddingRight: 24, // keep right padding when drawer closed
  },
  
  toolbarIcon: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      padding: '0 8px',
      ...theme.mixins.toolbar,
  },
  });
  </code></pre>