Easy theming with CSS vars, calc, & HSL

0-readme.md

To test this,

1. setup Vue prototyping tools yarn global add @vue/cli @vue/cli-service-global, or npm install -g @vue/cli @vue/cli-service-global
2. run vue serve TestDarkMode.vue
3. open http://localhost:8080/
4. profit???

TestDarkMode.vue

<template>
  <div class="root-container">
    <main class="content">
      <div class="cell" v-for="i in 100" :key="i">
        <div class="title">Title #{{i}}</div>
        <div class="description">

        </div>
      </div>
    </main>
    <header class="header">
    </header>
    <aside class="sidebar">
      <header class="info">
        <span class="logo">₿</span>
      </header>
      <ul class="folders">
        <li class="folder" v-for="i in currencies" :key="i">{{i}}</li>
      </ul>
    </aside>
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { */
  :root.light {
    --base-lit: 90%;
    --text-lit: 5%;
    --shadow-lit: 5%;
    --overlay: hsla(0, 0%, 60%, 0.3);
  }
/* } */

/* @media (prefers-color-scheme: dark) { */
  :root {
    --base-lit: 20%;
    --text-lit: 90%;
    --shadow-lit: 10%;
    --overlay: hsla(0, 0%, 2%, 0.2);
  }
/* } */

:root {
  --base-hue: 220;
  --base-sat: 25%;
  --text-sat: 10%;

  --bg-header:  hsl(var(--base-hue), var(--base-sat), 16%);
  --bg-sidebar: hsl(var(--base-hue), var(--base-sat), var(--base-lit));
  --bg-content: hsl(var(--base-hue), var(--base-sat), calc(var(--base-lit) - 5%));
  --bg-cells:   hsl(var(--base-hue), var(--base-sat), calc(var(--base-lit) + 2%));

  --border-color:  hsl(var(--base-hue),  var(--base-sat), calc(var(--base-lit) - 3%));
  --border-header: var(--border-color);
  --border-folder: var(--border-color);
  --border-cells:  var(--border-color);

  --text-satidebar: hsl(var(--base-hue),  var(--text-sat), var(--text-lit));
  --text-content:   hsl(var(--base-hue),  var(--text-sat), var(--text-lit));

  --shadow-content: hsla(var(--base-hue), var(--base-sat), var(--shadow-lit), 0.3);
  --shadow-cells:  hsla(var(--base-hue), var(--base-sat), var(--shadow-lit), 0.2);
}
</style>

<style scoped>
.root-container {
  height: 100vh;
  width: 100vw;
  font-family: 'Source Sans Pro', sans;
  font-weight: lighter;
  font-size: 16px;

  display: grid;
  grid-gap: 0px;
  grid-template-rows: 48px 1fr;
}

.root-container,
.root-container.sidebar-left {
  grid-template-columns: 260px 1fr;
  grid-template-areas: "sidebar header" "sidebar content";
}

.root-container.sidebar-right {
  grid-template-columns: 1fr 260px;
  grid-template-areas: "header sidebar" "content sidebar";
}

.sidebar {
  grid-area: sidebar;
  color: var(--text-satidebar);
  background-color: var(--bg-sidebar);
}

.sidebar .info {
  padding: 20px;
}

.sidebar .logo {
  --logo-color: hsl(30, 100%, 60%);
  display: inline-block;
  width: 48px;
  height: 48px;
  padding: 2px 0 0 2px;
  background: hsl(216, 36%, 19%);
  color: var(--logo-color);
  border: 1px solid var(--logo-color);
  border-radius: 25px;
  text-align: center;
  font-size: 36px;
  vertical-align: middle;
}

.sidebar .folders {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar .folder {
  display: block;
  margin: 0;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-folder);
  cursor: pointer;
}

.sidebar .folder:hover {
  background-color: var(--overlay);
}

.header {
  grid-area: header;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-header);
}

.content {
  grid-area: content;
  padding: 15px 10px;

  color: var(--text-content);
  background-color: var(--bg-content);
  box-shadow: inset 0px 8px 12px -8px var(--shadow-content);
}

.sidebar,
.content {
  overflow-y: scroll;
}

.content .cell {
  border-radius: 4px;
  border: 1px solid var(--border-cells);
  background-color: var(--bg-cells);
  box-shadow: 0 1px 1px var(--shadow-cells);

  padding: 15px 20px;
	display: inline-block;

  width: 320px;
  margin: 10px;
}
</style>

<script>

const root = document.querySelector(':root')
root.onclick = () => root.classList.toggle('light')

const currencies = [
  'Bitcoin', 'Litecoin', 'Dogecoin', 'Primecoin',
  'Auroracoin', 'Dash', 'Monero', 'PotCoin',
  'Stellar', 'Tether', 'Ethereum', 'Bitcoin Cash'
]

export default {
  data() {
    return { currencies }
  }
}
</script>