✨ dark mode

src/front-end/app.vue

@@ -1,13 +1,15 @@
 <script lang="ts">
 import { Component } from 'vue';
 import Actions from './components/actions.vue';
+import DarkMode from './components/darkmode.vue';
 import Estimate from './components/estimate.vue';
 import Header from './components/header.vue';
 import Participants from './components/participants.vue';
 
 const App: Component = {
  components: {
  Actions,
+ DarkMode,
  Estimate,
  Header,
  Participants,
@@ -18,6 +20,7 @@ export default App;
 </script>
 
 <template>
+ <DarkMode></DarkMode>
  <Header></Header>
  <Actions class="actions"></Actions>
  <div class="grid">

src/front-end/components/darkmode.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { Component } from 'vue';
+
+const DarkMode: Component = {
+ methods: {
+ toggle() { document.body.classList.toggle('dark-mode'); },
+ },
+ mounted() {
+ if (matchMedia('prefers-color-scheme: dark').matches)
+ this.toggle();
+ },
+};
+
+export default DarkMode;
+</script>
+
+<template>
+ <ul class="unstyled">
+ <li>
+ <button @click="toggle()">Dark mode</button>
+ </li>
+ </ul>
+</template>
+
+<style scoped>
+</style>

src/front-end/styles.css

@@ -1,10 +1,20 @@
 :root {
  --bg-color: #ccc;
  --color: #000;
+ --global-bg-color: #fff;
+ --grid-gap: .5rem;
+ --outline-color: #000;
  --secondary-bg-color: #000;
  --secondary-color: #fff;
+}
 
- --grid-gap: .5rem;
+body.dark-mode {
+ --bg-color: #555;
+ --color: #ccc;
+ --global-bg-color: #222;
+ --outline-color: #fff;
+ --secondary-bg-color: #ccc;
+ --secondary-color: #000;
 }
 
 * {
@@ -22,6 +32,7 @@ html, body {
 
 body {
  align-content: center;
+ background-color: var(--global-bg-color);
  color: var(--color);
  display: flex;
  flex-grow: 1;