add themese

frontend/src/App.vue

@@ -10,6 +10,14 @@
 		<help v-if="showHelp"/>
 		<div style="position:fixed;bottom:4pt;right:4pt;display:flex;">
 			<input type="button" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
+			<select id="lang" v-model="theme">
+				<option
+					v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']"
+					:key="`theme-${i}`"
+					:value="theme.split('.')[0]">
+						{{theme.split('.')[1]}} {{theme.split('.')[2]}}
+				</option>
+			</select>
 			<select id="lang" v-model="$i18n.locale" @change="storeLangPref">
 				<option
 					v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
@@ -44,6 +52,7 @@ export default {
 		c: false,
 		showUpdateUI: false,
 		showHelp:false,
+		theme: 'light',
 	}),
 	computed: {
 	},
@@ -74,11 +83,29 @@ export default {
 		async update() {
 			this.showUpdateUI = false;
 			await this.$workbox.messageSW({ type: "SKIP_WAITING" });
+		},
+		detectColorScheme() {
+			if(localStorage.getItem("theme")){
+				this.theme = localStorage.getItem("theme")
+				console.log("Found theme preference: " + this.theme)
+			} else if(!window.matchMedia) {
+				console.log("Auto theme not supported")
+			} else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
+				console.log("Prefers dark mode")
+				this.theme = "dark";
+			}
+		}
+	},
+	watch: {
+		theme() {
+			document.documentElement.setAttribute("data-theme", this.theme);
+			localStorage.setItem('theme', this.theme)
 		}
 	},
 	mounted() {
 		if (localStorage.getItem('lang'))
 			this.$i18n.locale = localStorage.getItem('lang')
+		this.detectColorScheme()
 	},
 	created() {
 		if (this.$workbox) {
@@ -188,10 +215,25 @@ input, select {
 input:disabled {
 	opacity: 0.5;
 }
-@media (prefers-color-scheme: dark) {
+:root {
-	:root, #app, input, select {
+	--font-color: #2c3e50;
-		background-color: #181a1b;
+	--bg-color: white;
-		color: rgb(174, 194, 211);
 }
+[data-theme="dark"] {
+	--font-color: rgb(174, 194, 211);
+	--bg-color: #181a1b;
 }
+[data-theme="sepia"] {
+	--font-color: rgb(54, 43, 33);
+	--bg-color: #e7d6bb;
+}
+[data-theme="grayscale"] {
+	--font-color: rgb(66, 66, 66);
+	--bg-color: #e2e0e0;
+}
+html, #app, input, select {
+	background-color: var(--bg-color);
+	color: var(--font-color);
+}
+
 </style>

frontend/src/components/Card.vue

@@ -48,15 +48,15 @@ export default {
 	min-width:60pt;
 	height: 100pt;
 	margin: 12pt;
-	background: white;
+	background: var(--bg-color);
 	box-shadow: 
 		0 0 0 3pt #987e51,
-		0 0 0 6pt white,
+		0 0 0 6pt var(--bg-color),
 		0 0 5pt 6pt #aaa;
 	border-radius: 6pt;
 	position: relative;
 	transition: all 0.5s ease-in-out;
-	color: #333;
+	color: var(--font-color);
 	/* overflow: hidden; */
 	text-overflow: ellipsis;
 	word-wrap: normal;
@@ -75,29 +75,29 @@ export default {
 .card.equipment {
 	box-shadow: 
 		0 0 0 3pt #5c5e83,
-		0 0 0 6pt white,
+		0 0 0 6pt var(--bg-color),
 		0 0 5pt 6pt #aaa;
 }
 .card.character {
 	box-shadow: 
 		0 0 0 3pt #7c795b,
-		0 0 0 6pt white,
+		0 0 0 6pt var(--bg-color),
 		0 0 5pt 6pt #aaa;
 }
 .card.usable-next-turn {
 	box-shadow: 
-		0 0 0 3pt  #6aa16e, 0 0 0 6pt white, 0 0 5pt 6pt #aaa
+		0 0 0 3pt  #6aa16e, 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa
 }
 .card.high-noon{
-	box-shadow: 0 0 0pt 4pt white, 0 0 5pt 4pt #aaa;
+	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
 	border: 2pt dotted rgb(198 78 45);
 }
 .card.fistful-of-cards{
-	box-shadow: 0 0 0pt 4pt white, 0 0 5pt 4pt #aaa;
+	box-shadow: 0 0 0pt 4pt var(--bg-color), 0 0 5pt 4pt #aaa;
 	border: 2pt dashed rgb(50 122 172);
 }
 .card.back.fistful-of-cards{
-	color:white;
+	color:var(--bg-color);
 	background: repeating-linear-gradient(
 		45deg,
 		rgb(50 122 172),
@@ -150,50 +150,9 @@ export default {
 	position: absolute;
 	bottom: -5pt;
 	right: -5pt;
-	background: white;
+	background: var(--bg-color);
 	border-radius: 100%;
 	transform: scale(0.8);
 }
-@media (prefers-color-scheme: dark) {
+
-	.expansion {
-		background: #181a1b;
-	}
-	: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;
-	}
-	.card.usable-next-turn {
-		box-shadow: 
-			0 0 0 3pt #6aa16e, 0 0 0 6pt #181a1b, 0 0 5pt 6pt #aaa
-	}
-	.card.high-noon{
-		box-shadow: 0 0 0pt 4pt #181a1b, 0 0 5pt 4pt #aaa;
-	}
-	.card.fistful-of-cards{
-		box-shadow: 0 0 0pt 4pt #181a1b, 0 0 5pt 4pt #aaa;
-	}
-}
 </style>

frontend/src/components/Deck.vue

@@ -211,12 +211,8 @@ export default {
 .end-turn {
 	box-shadow: 
 		0 0 0 3pt  rgb(138, 12, 12),
-		0 0 0 6pt white,
+		0 0 0 6pt var(--bg-color),
 		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/Help.vue

@@ -160,7 +160,7 @@ export default {
 .end-turn {
 	box-shadow: 
 		0 0 0 3pt  rgb(138, 12, 12),
-		0 0 0 6pt white,
+		0 0 0 6pt var(--bg-color),
 		0 0 5pt 6pt #aaa !important;
 }
 </style>

frontend/src/components/Lobby.vue

@@ -336,7 +336,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style >
 .is_my_turn {
-	box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt white, 0 0 5pt 6pt #aaa !important;
+	box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt var(--bg-color), 0 0 5pt 6pt #aaa !important;
 	animation-name: turn-animation;
 	animation-duration: 2s;
 	animation-iteration-count: infinite;