Add dark mode using CSS media query

README.md

@@ -29,11 +29,9 @@ look something like the following (for local development):
 ```
 VUE_APP_API_BASE_URI=http://localhost:8000
 VUE_APP_API_AUTHORIZATION_ENDPOINT=/user/oauth/authorize/
-VUE_APP_API_OAUTH_CLIENT_ID=[client_id]
+VUE_APP_API_ACCESS_TOKEN_ENDPOINT=/user/oauth/token/
+VUE_APP_API_OAUTH_CLIENT_ID=r8d1Zg5c9WKtOPRHTi3wtKUga6xcQyP5YlE0ITXJ
 VUE_APP_API_OAUTH_REDIRECT_URI=http://localhost:8080/auth/callback
-VUE_APP_SENTRY_DSN=https://xxx.ingest.sentry.io/xxx
-VUE_APP_SENTRY_RELEASE=
-VUE_APP_SENTRY_ENVIRONMENT=local
 ```
 
 It is also possible to define these variables in your terminal's environment directly.

src/App.vue

@@ -43,6 +43,47 @@ export default {
 <style>
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
+.border-left-white-dotted {
+  border-left: 1px white dotted !important;
+}
+
+.progress{
+    --bs-progress-bar-bg: #93003c !important;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .progress {
+    --bs-progress-bg: #797872 !important;
+  }
+
+  .card {
+    --bs-card-bg: #444444 !important;
+    --bs-card-cap-color: #ffffff !important;
+    --bs-card-color: #ffffff !important;
+  }
+
+  .bg-card {
+    background-color: #444444;
+  }
+
+  .background-image {
+    filter: blur(10px) brightness(50%) !important;
+    opacity: 1 !important;
+  }
+
+  .border-left-white-dotted {
+    border-left: 1px #444444 dotted !important;
+  }
+
+  #app {
+      color: #ffffff !important;
+  }
+}
+
+.bg-card {
+  background-color: #ffffff;
+}
 
 * {
   -ms-touch-action: manipulation;

src/components/ProductCard.vue

@@ -24,7 +24,7 @@
           €{{ product.price }} <span v-if="product.age_restricted">• 18+</span>
         </p>
       </div>
-      <div class="card-footer bg-white p-0 border-0">
+      <div class="card-footer bg-card p-0 border-0">
         <div class="row">
           <div class="d-flex align-content-stretch align-items-stretch">
             <button
@@ -53,9 +53,8 @@
             </button>
             <button
               v-on:click.stop
-              class="btn btn-success flex-grow-1 px-0 py-2 m-0 text-white"
+              class="btn btn-success flex-grow-1 px-0 py-2 m-0 text-white border-left-white-dotted"
               :class="{ disabled: paid }"
-              style="border-left: 1px white dotted"
               v-on="!paid ? { click: increment5 } : {}"
             >
               <span class="fw-bold">5</span>
@@ -144,7 +143,7 @@ button {
 
 .card-body {
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: hidden;
 }
 .disabled {
   visibility: hidden;

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import "bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
 
 createApp(App).use(router).use(store).mount("#app");
+import "bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";