<h1>Color Theme Approaches</h1>


<h2>Components</h2>

<div class="themeContainer">
  <h3>Default Theme</h3>
  {{my-component
  }}
</div>

<div class="themeContainer">
  <h3>Primary Theme</h3>
  {{my-component
    colorTheme="primary"
  }}
</div>

<h2>Container Classes</h2>

<div class="themeContainer defaultTheme">
  <h3>Default Theme</h3>
    
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>
</div>

<div class="themeContainer primaryTheme">
  <h3>Primary Theme</h3>
  
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>
</div>

<h3>Nested containers</h3>
<div class="themeContainer defaultTheme">
  <h3>Default Theme</h3>
    
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>

  <div class="themeContainer primaryTheme">
    <h3>Primary Theme</h3>
  
    <div class="bg-color">
      <p class="text-color">Text color</p>
    </div>
    
    <div class="themeContainer defaultTheme">
      <h3>Default Theme</h3>
    
      <div class="bg-color">
        <p class="text-color">Text color</p>
      </div>
    </div>
  </div>
</div>