Creating Color Themes

This demos the method of creating color classes using color variables and assigning those classes to page elements.

by Stephen Herd

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Wireframe</title>
  </head>

  <body>
    <header class="accent1">
      <h1>My Header</h1>
    </header>
    <nav class="accent1">
      &nbsp;<a href="#">Home</a> | <a href="#">Products</a> | <a href="#">About Us</a>
    </nav>
    <main class="accent2">
      <section>
        <h2>A Section</h2>
        <p>A section usually contains the main content of your site. This section has a width limit.</p>
        <p>On most browsers and displays you will see that the section and aside make two uneven length columns.
          This can be difficult to control. You can however,
          hide these unequal lengths by making the background colors the same.</p>
      </section>
      <aside class="accent3">
        <h3>The Aside</h3>
        <p>This can contain any kind of content but often has ads or other navigation.</p>
      </aside>
    </main>
    <footer class="accent4">
      <h3>My Footer &copy; 2020</h3>
    </footer>
  </body>

</html>

CSS

/* Set up color variables */
:root {
  --color1: #F0F7D4;
  --color2: #B2D732;
  --color3: #66B032;
  --color4: #347B98;
  --color5: #092834;
  --light: #fff;
  --dark: #000;
}

/* color styles */
.accent1 {
  background-color: var(--color4);
  color: var(--color1);
}

.accent2 {
  background-color: var(--color1);
  color: var(--color5);
}

.accent3 {
  background-color: var(--color3);
  color: var(--color1);
}

.accent4 {
  background-color: var(--color5);
  color: var(--color1);
}

h2 {
  color: var(--color4);
}

aside > h3 {
  color: var(--color5);
}

/* layout styles */
* {
  box-sizing: border-box;
}

header {
  width: 100%;
  height: 10%;
  padding: 1em;
}

nav {
  width: 100%;
  height: 1.5em;
}

nav a {
  color: var(--color2);
}

nav a:hover {
  color: var(--color5);
}

main {
  width: 90%;
  height: 18em;
  margin-left: auto;
  margin-right: auto;
}

section {
  width: 80%;
  height: 100%;
  float: left;
  padding: .5em;
}

aside {
  width: 20%;
  height: 100%;
  float: left;
  padding: .5em;
}

footer {
  width: 100%;
  height: 4em;
  clear: both;
  text-align: center;
  padding-top: .5em;
}