<body data-theme="dark">
  <header>
    <h1>Header</h1>
  </header>
  <main>
    <h1>Main</h1>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</body>
/*global variables.*/
[data-theme="dark"] {
  --fg:         hsl(0,10%,70%);
  --border:     hsl(0,10%,10%);
  
  --bg:         hsl(0,0%,20%);
  --button-bg:  hsl(0,0%,25%);
  --input-bg:   hsl(0,0%,15%);
}

[data-theme="light"] {
  --fg:         hsl(0,0%,25%);
  --border:     hsl(0,0%,75%);
  
  --bg:         hsl(0,0%,95%);
  --button-bg:  hsl(0,0%,99%);
  --input-bg:   hsl(0,0%,90%);
}


body {
  background-color: var(--body-bg-color);
  margin: 0px;
  display:flex;
  flex-direction:column;
}


header {
  background-color: var(--bg);
  height: 60px;
      display: flex;
    align-items: center;
    justify-content: center;

}


footer {
  background-color: var(--bg);
      display: flex;
    align-items: center;
    justify-content: center;
  min-height: 20%;

}


main {
  background-color: var(--fg);
      display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.