title: How To Change CSS or Class of "body" Element in Blazor
body: <p>I'm currently making a "Change Theme" button so that I can switch the whole page between "Dark Mode" and "Light Mode". But I can't find a way to change the background colour of the whole page.</p>
  
  <p>Basically, I need to change the style of <code>&lt;body&gt;</code> (It's the only way I can come up with).
  My thought is, when you click "Change Theme" button, the <code>&lt;body&gt;</code> element will be added a class "dark-theme".
  And then I just simply define "dark-theme" in CSS like this:</p>
  
  <pre><code>body {
      background-color: #FFFFFF;
      color: #000000;
  }
  
      body.dark-theme {
          background-color: #5A5A5A;
          color: #F2F2F2;
      }
  </code></pre>
  
  <p>I think this quite makes sense but as you can see below, I cannot access <code>&lt;body&gt;</code> element so there is no way for me to add class or change CSS of it.</p>
  
  <p><strong>MainLayout.razor</strong></p>
  
  <pre><code>@inherits LayoutComponentBase
  @using System.Web;
  &lt;div class="sidebar"&gt;
      &lt;NavMenu /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;LoginDisplay /&gt;
      &lt;button id="change-theme-btn" @onclick="ThemeChanged"&gt;Change Theme&lt;/button&gt;
      @Body
  &lt;/div&gt;
  
  @code {
      bool isDark = false;
      private void ThemeChanged()
      {
          isDark = !isDark;
      }
  }
  </code></pre>
  
  <p>So how do I change class or CSS of <code>&lt;body&gt;</code> element? Or if you have any alternative solution, please tell me. Thank you!</p>