To test this,
- setup Vue prototyping tools
yarn global add @vue/cli @vue/cli-service-global, ornpm install -g @vue/cli @vue/cli-service-global - run
vue serve TestDarkMode.vue - open http://localhost:8080/
- profit???
Last active
November 9, 2019 18:29
-
-
Save netroy/b7178c72e9fa80a2ea19bea8bde2d7cf to your computer and use it in GitHub Desktop.
Easy theming with CSS vars, calc, & HSL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment