<body data-theme = "glow">
  <h1>Themeing with custom properties</h1>
  <header>Header</header>
  <main>Main</main>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer>Footer</footer>
</body>
/*custome color pallates for your theme*/
[data-theme="default"] {
  --bg-color: #D0DCE9;
  --border-color: #FFFFFF;
  --header-bg-color: #3B71A6;
  --main-bg-color: #FFFFFF;
  --aside-1-bg-color: #82A4C6;
  --aside-2-bg-color: #0ebeff;
  --footer-bg-color: #96D5F1;
}

[data-theme="glow"] {
  --bg-color: #D9AE61;
  --border-color: #FFFFFF;
  --header-bg-color: #ED6A5A;
  --main-bg-color: #FFFFFF;
  --aside-1-bg-color: #E3C567;
  --aside-2-bg-color: #2A7771;
  --footer-bg-color: #573D1C;
}

body{
  background: var(--bg-color);
  display: flex;
  text-align: center;
  flex-flow: row wrap;
}
h1{
  color: var(--footer-bg-color);
}
body > *{
  flex: 1 100%;
  padding: 10px;
}
header{
  background: var(--header-bg-color);
}
main{
  background: var(--main-bg-color);
}
.aside-1{
  background: var(--aside-1-bg-color);
}
.aside-2{
  background: var(--aside-2-bg-color);
}
footer{
  background: var(--footer-bg-color);
}

@media all and (min-width:600px) {
  .aside {flex: 1 0 0;}
}
@media all and (min-width:800px) {
  main {flex: 3 0px;}
  .aside-1 {order: 1;}
  main {order:2;}
  .aside-2{order: 3;}
  footer {order: 4;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.