dark mode

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app">
+	<div id="app" class="dark-mode">
 		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt;">
 			<h1 style="margin-bottom:0pt;">PewPew!</h1>
 			<i style="font-size: x-small;">Bang! è un marchio registrato DVGiochi</i>
@@ -211,4 +211,10 @@ input {
   padding: 0.5rem;
   transition: border-color 0.5s ease-out;
 }
+@media (prefers-color-scheme: dark) {
+	:root, #app, input {
+    background-color: #181a1b;
+    color: rgb(174, 194, 211);
+  }
+}
 </style>

frontend/src/components/Card.vue

@@ -56,7 +56,6 @@ export default {
 		#816b45 10px
 	);
 }
-
 .card.equipment {
 	box-shadow: 
 		0 0 0 3pt #5c5e83,
@@ -100,4 +99,33 @@ export default {
 	bottom: 16pt;
 	left: 3pt;
 }
+@media (prefers-color-scheme: dark) {
+	:root, #app {
+    background-color: #181a1b;
+    color: rgb(174, 194, 211);
+  }
+	.card {
+		background-color: #181a1b;
+    color: rgb(174, 194, 211);
+		box-shadow: 
+			0 0 0 3pt #987e51,
+			0 0 0 6pt #181a1b,
+			0 0 5pt 6pt #aaa;
+	}
+	.card.back{
+		color:#181a1b;
+	}
+	.card.equipment {
+		box-shadow: 
+			0 0 0 3pt #5c5e83,
+			0 0 0 6pt #181a1b,
+			0 0 5pt 6pt #aaa;
+	}
+	.card.character {
+		box-shadow: 
+			0 0 0 3pt #7c795b,
+			0 0 0 6pt #181a1b,
+			0 0 5pt 6pt #aaa;
+	}
+}
 </style>

frontend/src/components/Deck.vue

@@ -102,4 +102,9 @@ export default {
 		0 0 0 6pt white,
 		0 0 5pt 6pt #aaa !important;
 }
+@media (prefers-color-scheme: dark) {
+	.end-turn {
+		box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt #181a1b, 0 0 5pt 6pt #aaa !important;
+	}
+}
 </style>

frontend/src/components/Lobby.vue

@@ -188,6 +188,11 @@ export default {
   animation-duration: 2s;
   animation-iteration-count: infinite;
 }
+@media (prefers-color-scheme: dark) {
+	.is_my_turn {
+		box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt #181a1b, 0 0 5pt 6pt #aaa !important;
+	}
+}
 @keyframes turn-animation {
   0% {
     transform: scale(1);