Untitled

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Theme Color</title>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="header-logo">
      LOGO
    </div>
    <div class="header-settings">
      <button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
          </button>
      <button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
          </button>
    </div>
  </div>

  <div class="nav">
    <ul class="nav-links">
      <li class="nav-links--link active">
        Home
      </li>
      <li class="nav-links--link">
        About
      </li>
      <li class="nav-links--link">
        Contact Us
      </li>
    </ul>
  </div>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
      nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
  </div>

  <div class="footer">
    <span class="footer-note">
          Lorem ipsum dolor sit amet.
        </span>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</body>
</html>